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

Updated: Sep 14, 2020



Follow Along #1

Example Pages

https://www.totallycodable.com/example-of-donation-form

https://codequeen.wixsite.com/donation-funding


 

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

  • 1 button elementBackend JSW file

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

  • 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