Guides
API reference

Integrate

Suggest Edits

Before beginning your integration, you need to generate your API Key.
You can refer to this document to find a step by step guide. #

Start your integration by grabbing the sample code from Glider's Github repo or follow the below documentation for starting from scratch.

Integrate Front-end

Set up your front end to integrate Glider's payTo button

Front-end process:

  1. Your app shows the Glider's PayTo button.
  2. Your app call server endpoints to generate, process and view the PayTo agreement

This example demonstrates how to configure a checkout.html file to integrate the standard Glider PayTo button.

The page manages client-side logic and defines how Glider's front-end components interact with the backend. Use this guide to set up the Glider PayTo button using the Glider SDK and handle payer interactions.

Step 1. Add the script tag

Include the <script> tag in any page displaying the Glider PayTo button. This script will load all the necessary JavaScript to access the button via the window object.

<!-- SANDBOX -->
<script src="https://sdk-uat.gliderpay.com/payto/v1/lib.js"> </script>
  
<!-- PRODUCTION -->
<script src="https://sdk.gliderpay.com/payto/v1/lib.js"> </script>

Step 2. Add the script tag

Add the <payto-button></payto-button> tag anywhere you want to PayTo button to be rendered.

<payto-button></payto-button>

Step 3. Initialise the button

Initialise the button to control your server endpoints, order details and button styles.
Add the following script at the footer of your page

<script>
  GliderPayTo.init({
     endpoint: "/my-server/agreement"
     ...
  })
</script>

The endpoint attribute specifies the path to your backend script, which will receive POST requests from your checkout.html page.

Step 4. Configure your order

Include your order details in the agreement object within the initialization script. These details will be used to generate the PayTo agreement and will be forwarded to the payee's bank via NPP.

<script>
  GliderPayTo.init({
     endpoint: "/my-server/agreement",
     agreement: {
     		amount: 199.90,
        description: "ourpower elec bill (account no: 927262)",
        reference: "927262",
        ...
     },
    ...
  })
</script>

The mandatory attributes for your order are:

  • amount Total amount of your order
  • description Short description for your order (max 144 chars)
  • reference Reference number / account number / order identifier used to reconciliate with your back-end business logic

Step 5. Configure your style

Glider SDK allows you to customise the PayTo button and form experience to better suit your brand guidelines.
All the possible details and combination are specified here

In this tutorial, we will demonstrate the standard configuration: a dark button that extends into the PayTo form. Update your init function to customize your style.

<script>
  GliderPayTo.init({
     endpoint: "/my-server/agreement",
     agreement: {
     		amount: 199.90,
        description: "ourpower elec bill (account no: 927262)",
        reference: "927262"
     },
    style: {
    	option: "extend",
      button: true
    },
    ...
  })
</script>

Step 6. Set your Success page

Completing the payment launches a onSuccess callback.
Use the onSuccess response to update your business logic, show a celebration page or handle error responses.

<script>
  GliderPayTo.init({
     endpoint: "/my-server/agreement",
     agreement: {
     		amount: 199.90,
        description: "Air Jordan 1 Mid",
        reference: "aj888302"
     },
    style: {
    	option: "extend",
      button: true
    },
    onSuccess: function(data){
      // Successful transaction -> Show confimation or thank you message
  })
</script>

Step 7. Render the button

Add the render function (example below) and test your page.

<!DOCTYPE html>
<html>
  <head>
  	<script src="https://sdk.gliderpay.com/payto/v1/lib.js"> </script>
		...
  </head>
  <body>
    ...
    <payto-button></payto-button>
    ...
  </body>
  <script>
    GliderPayTo.init(...)
    GliderPayTo.render()
  </script>
</html>

Integrate back-end

This section explains how to set up your backend to integrate Glider's PayTo Button.

Back-end process:

  1. Your app creates a PayTo agreement by calling Glider's API.
  2. Your app retrieves status information about the newly created agreement by calling Glider's API.

To simplify the integration, all the logic (different endpoints, body attributes, authentication, headers, etc.) is handled by Glider's frontend SDK.

All you need to do is set up a single endpoint to proxy the request directly to Glider's API.

Back-end code

This sample integration uses a server.js file on a Node application that uses Express as framework.

Step 1. Define your credentials (and environment)

const GLIDER_ENDPOINT = “https://api.gliderpay.com/v2/payTo/”
// sandbox: GLIDER_ENDPOINT = “https://api-uat.gliderpay.com/v2/payTo/”
const GLIDER_SECRET_KEY = “12345xxxx”;
…

Set up your API endpoint (sandbox or live) and your API key.
In this example, they are defined at the top of the file, but it is recommended to define them in a proper .env file or similar configuration.

Step 2. Forward the request to Glider's API

const GLIDER_ENDPOINT = “https://api.gliderpay.com/v2/payTo/”
// sandbox: GLIDER_ENDPOINT = “https://api-uat.gliderpay.com/v2/payTo/”
const GLIDER_API_KEY = “12345xxxx”;
…
app.post( “/my-server/agreement”, async(req, res) => {
    try{
        const { data } = req.body;
        const response = await fetch (GLIDER_ENDPOINT, {
            method: “POST”,
            headers: {
                'Content-Type': 'text/plain',
                Authorization: `Bearer ${GLIDER_API_KEY}`
            },
            body: data
        });
        ...
    } catch (error) {
        console.log(error.message);
    }
})

Handle one single POST request to the GLIDER_ENDPOINT with the following headers:

  • Content-type: text/plain
  • Authorization: Bearer ${GLIDER_API_KEY}

Step3. Catch the response and return it to Glider SDK

Glider returns a base64 encoded response in a plain text format. Simply catch it and return it alongside with the HTTP API response.

const GLIDER_ENDPOINT = “https://api.gliderpay.com/v2/payTo/”
// sandbox: GLIDER_ENDPOINT = “https://api-uat.gliderpay.com/v2/payTo/”
const GLIDER_API_KEY = “12345xxxx”;
…
app.post( “/my-server/agreement”, async(req, res) => {
    try{
        const { data } = req.body;
        const response = await fetch (GLIDER_ENDPOINT, {
            method: “POST”,
            headers: {
                'Content-Type': 'text/plain',
                Authorization: `Bearer ${GLIDER_API_KEY}`
            },
            body: data
        });
        const responseBody = await response.text();
        res.set('Content-Type', 'text/plain');
        res.type('html');
        res.statusCode = response.status;
        res.send(responseBody);
    } catch (error) {
        console.log(error.message);
    }
})

Updated 5 months ago