Collect Payment on Booking with the Wix Pay API

The Wix Pay API page explains everything you need to know to use the API. The most relevant tutorial for the simulation of the RV Rental website being presented here is Collect Payments for Products in a Database Collection. The reason the actual RV Rental website wasn't used was because the Wix Pay API requires a Premium plan to function and the RV Rental website is on a Free plan.

To use the Wix Pay API we need some frontend code on the page where the Booking Calendar appears, and also some backend code to access the Pay API and the CMS. Here is the frontend page code you can use:

import wixPayFrontend from 'wix-pay-frontend';
import { createPaymentForRental } from 'backend/payUtils.jsw';

$w.onReady(function () {

    $w('#calendar1').onDatesReserved(async ({ data: dates }) => {
        let payment = await createPaymentForRental(dates);
        await wixPayFrontend.startPayment((payment.id),
            { "termsAndConditionsLink": "https://www.wix.com/" });
    });

});

The onDatesReserved API is also used for email notifications, so if you want to include both, I would recommend doing the payment first, then sending the email.

For the backend code, I created a file named payUtils.jsw (see import statement in the frontend code above) with the following content:

import wixPay from 'wix-pay-backend';
import wixData from 'wix-data';

const DAY_MS = 24 * 60 * 60 * 1000;

class Rental {
    constructor(name, rate) {
        this.name = name;
        this.rate = rate;
    }
}

export async function createPaymentForRental(dates) {
    let rv = await rental(dates);
    let total = rv.rate * duration(dates);
	return wixPay.createPayment({
		items: [{ name: rv.name, price: total }],
      	userInfo: { firstName: dates.first, lastName: dates.last,
                    phone: dates.phone, email: dates.email, countryCode: '' },
		amount: total
	});
}

export async function rental(dates) {
    let rental = await wixData.query('Rentals').eq('itemId', dates.itemId).find();
    let rateStr = rental.items[0].rate.split(' ');
    let rate = rateStr[0].match(/(\d+)/);
    return new Rental(rental.items[0].title, Number(rate[0]));
}

export function duration(dates) {
    if (dates.start.year === dates.end.year && dates.start.month === dates.end.month) {
        return dates.end.date - dates.start.date + 1;
    } else {
        let start = new Date(dates.start.year, dates.start.month, dates.start.date);
        let end = new Date(dates.end.year, dates.end.month, dates.end.date);
        let duration = end.getTime() - start.getTime();
        return duration / DAY_MS + 1;
    }
}

The createPaymentForRental function is called from the frontend, which then calls the rental function to get the RV name and rate from the CMS. The rate per day is then multiplied by the number of days to provide the total amount that needs to be paid. All of this is then passed to the Wix Pay createPayment API to create the payment. The code then returns back to the frontend where the Wix Pay startPayment API is called to start processing the payment from the user.

To try out the Booking Calendar with the Wix Pay API, you can visit the Test website.