SourceSage Pay

SourceSage Pay

  • Docs
  • Help
  • Register

›Integration Guide

Getting Started

  • Overview
  • Get an API Key
  • Project Configuration

APIs

  • Overview
  • SourceSage Pay Session
  • SourceSage Pay Transactions

Integration Guide

  • Overview
  • 1. Initialize Session
  • 2. Trigger Payment
  • 3. Handle Response

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

← 1. Initialize Session3. Handle Response →
  • 2.1 Hosted Checkout
SourceSage Pay
Docs
Getting StartedGuidesAPI Reference
Community
User Showcase
More
GitHub
Copyright © 2020 Sourcesage