2. Trigger Payment
In this section we look into using the checkout_payload
we obtained in the previous section to trigger the payment collection process using the hosted checkout script. This section involves coding only on the frontend.
2.1 Hosted Checkout
To use the hosted cehckout, we will first need to load the script into the document. After the load completes, we can configure the Checkout function by using the data we received from the create-session api.
The process is shown by the code below:
const checkout = ({reference_number, checkout_payload}) => {
//Checkout Script
const SCRIPT = process.env.REACT_APP_CHECKOUT_SCRIPT_URL;
//URL on your website that will be handling the failure/cancel events, it can the same page as the one handling your success event
const ERROR_URL = `${window.location.origin}/callback/failure?reference=${reference_number}`;
window.error_url = ERROR_URL;
const script = document.createElement("script");
script.src = SCRIPT;
script.setAttribute("data-error", "error_url");
script.setAttribute("data-cancel", "error_url");
script.onload = () => {
window.Checkout.configure(checkout_payload);
window.Checkout.showPaymentPage(); // This triggers the payment collection
};
document.body.appendChild(script);
};
In the next page we will look into handling the response events