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:

Your app shows the Glider's PayTo button.
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/paytobutton/latest/lib.js"> </script>
  
<!-- PRODUCTION -->
<script src="https://sdk.gliderpay.com/paytobutton/latest/lib.js"> </script>

Note:
If you want a versioned library, you can replace the latest on the url with a proper version.
Current stable versions:

v1.2.0

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 initialisation 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 Callbacks

GliderPayTo provides lifecycle callbacks that allow your application to respond to key events during the payment journey.

These callbacks help you track agreement status, manage UI state, and react to user actions such as processing, cancellation, or successful completion of a PayTo agreement or PayID transaction.

Step 6.1 onCancel Callback

This callback is triggered when a PayTo agreement is cancelled, declined, or when a PayID request is cancelled by the user.

<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
    },
    onCancel: function(data){
      // Transaction canceled
    }
  })
</script>

{
    "requestId": 225227
}

Step 6.2 onSuccess Callback

This callback is triggered when a PayTo agreement has been accepted or when a transaction has been successfully created using the requested PayID.

<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
    },
    onCancel: function(data){
      // Transaction canceled
    },
    onSuccess: function(data){
      // Successful transaction -> Show confimation or thank you message
    }
  })
</script>

{
    "requestId": 225227,
    "status": "succeed",
    "updated": "2026-02-18 07:17:10",
    "transactionDetails": {
        "amount": 199.90,
        "updated": "2026-02-18 07:15:31",
        "receiptNo": "XKAyeGgApn"
    }
}

Step 6.3 onProcess Callback

This callback is triggered when a PayTo agreement has been successfully created or when a PayID request has been initiated.

<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
    },
    onCancel: function(data){
      // Transaction canceled
    },
    onSuccess: function(data){
      // Successful transaction -> Show confimation or thank you message
    },
    onProcess: function(data){
      // Transaction Started
    }
  })
</script>

{
    "requestId": 225227,
    "merchant": "OurPower",
    "status": "created",
    "requestToken": "eyJyZXF1ZXN0SWQiOjIyNTI..NAZ21haWwuY29tIn19"
}

The onProcess callback payload includes a requestToken. This value may be stored on the frontend and supplied to the init object when available, allowing the PayTo button to resume and continue tracking an existing transaction. This ensures that if the page is refreshed, the payment flow can persist and remain linked to the transaction that was previously created.

<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
    },
    onCancel: function(data){
      // Transaction canceled
    },
    onSuccess: function(data){
      // Successful transaction -> Show confimation or thank you message
    },
    onProcess: function(data){
      // Transaction Started
    }
  })
</script>

{
    "requestId": 225227,
    "merchant": "OurPower",
    "status": "created",
    "requestToken": "eyJyZXF1ZXN0SWQiOjIyNTI..NAZ21haWwuY29tIn19"
}

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:

Your app creates a PayTo agreement by calling Glider's API.
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);
    }
})