top of page

Create a donation Form with Fixed or Custom Amount using Wix Pay API

Updated: Oct 23, 2023



Follow Along #1

Example Pages


 

Good to Know #1

Required for this method


  • At least 1 text input element set to Number

  • Or at least 1 dropdown element with numerical values ( such as 1.00, 20.00, etc)

  • 1 Backend JSW file called pay.jsw

  • A premium Wix site (aka upgraded to accept payment online)

  • An active payment provider configured 'Accept Payments' on Wix Dashboard


 

Good to Know #2

Elements Used in this Tutorial



 

Good to Know #3

Code for Page



import { makeDonation } from 'backend/pay';
import { makeCustomDonation } from 'backend/pay';
import wixPay from 'wix-pay';

$w.onReady(function () {

 $w("#selectAmount").onChange((event) => {
  $w("#enterAmount").value = null;
  $w("#enterAmount").placeholder = "0.00";
 });

 $w("#enterAmount").onKeyPress((event) => {
  $w("#selectAmount").selectedIndex = null;
 });

 $w('#donateButton').onClick(async () => {

 let checkSelect = Number($w("#selectAmount").value);
 let checkEnter = Number($w("#enterAmount").value);

 if (checkEnter) {
   console.log("Amound being paid is " + checkEnter);
 let item = {
 'price': Number(checkEnter)
   }
 let payment = await makeCustomDonation(checkEnter)
 let wixPayRes = await wixPay.startPayment(payment.id)
  } else if (checkSelect) {
   console.log("Amound being paid is " + checkSelect);
 let item = {
 'price': Number(checkSelect)
   }
 let payment = await makeDonation(checkSelect)
 let wixPayRes = await wixPay.startPayment(payment.id)
  }

 });

});


 

Good to Know #4

Code for the Backend



//In the backend, add a new web module called pay.jsw

import wixPay from 'wix-pay-backend';

export function makeCustomDonation(checkEnter) {
 return wixPay.createPayment( {
    items: [ {
      name:`Donation for ${checkEnter}`,
      price: Number(checkEnter)
    } ],
    amount: Number(checkEnter),
   currency: "USD" //make sure to change the currency symbol if needed
  } );
}

export function makeDonation(checkSelected) {
 return wixPay.createPayment( {
    items: [ {
      name:`Donation for ${checkSelected}`,
      price: Number(checkSelected)
    } ],
    amount: Number(checkSelected),
   currency: "USD" //make sure to change the currency symbol if needed
  } );
}


 

Author

by Code Queen


Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.


Online Booking: Discovery Session

Contact Form: Send project details

318 views2 comments

2 Comments


Code Queen
Code Queen
Jan 11, 2021

Hello Praveen,


I am not sure I quite understand your question. I think you are trying to create a form with options that auto calculates a price? Then have the person click a button to pay that price?


If yes, you need to combine 2 tutorials. The first tutorial is how to code math calculations: https://support.totallycodable.com/en/article/create-simple-math-calculations-or-instant-online-quote-using-wix-code


And the other is this tutorial: how to create a custom payment.

Like

Hai Code Queen I want some information about the payment gateway..

I had a custom form in my site and it is providing a service and for that form we want a payment gateway to make payment for that service..And that payment amount want to reflect from that form and that is dynamically created by the service options selected by the customer..And is their any possibility to overcome this issue..

Like

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.

bottom of page