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