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

Follow Along #1

Example Pages

https://velo.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
  } );
}

---

Author

by Code Queen

Services world wide

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