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

220 views2 comments

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.

  • Code Queen Facebook Group Icon
  • Facebook Logo
  • Twitter Logo
  • YouTube logo
  • Instagram Logo
  • Linkedin Logo

© 2021.  All Rights Reserved by Code Queen, LLC.