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

Updated: Jun 1

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 ( 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

1 dropdown element / #selectAmount
1 text input element / #enterAmount
1 button element / #donateButton

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
  } );
}