Code Queen

Jul 26, 20202 min

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

Updated: Oct 23, 2023

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

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

    3182
    9