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