Skip to content

Checkout

Glomo Checkout offers a prebuilt payment form that enables businesses to securely accept payments online. With its built-in features, you can minimize development time and streamline the payment process. Embed Checkout directly into your website, or direct customers to a Glomo-hosted payment page to start accepting payments.

Checkout requires minimal coding because of its prebuilt functionalities and customization options. You can integrate Checkout by creating a Checkout Session and collecting the customer’s payment details.


Checkout Interface


End-to-End Flow in Accepting Payments

Below are the steps that are to accept payments :-

1

Once the customer initiates payment on the merchant’s website - Create an order by making server to server call

→
2

Use order ID to involve the checkout form

→
3

User selects a payment option on checkout and enters relevant information - Collect Payment details

→
4

Glomo authenticates the payment information

→
5

Verify Payment status returned and redirect the user to the payment confirmation page


Visual Representation of Payment Flow

A visual representation for the sequence of steps is given below :-

Payment Flow Diagram

Test card details

Card NumberGatewayOTPPayment ResultExpiry MonthExpiry YearCVV
3466 2411 1111 1111American ExpressNoSuccessanyanyany
3469 1222 2222 2222American ExpressYesSuccessanyanyany
3490 8811 1111 1112American ExpressNoFailureanyanyany
3790 8022 2222 2223American ExpressYesFailureanyanyany
4916 5311 1111 1111MastercardNoSuccessanyanyany
4376 7022 2222 2222MastercardYesSuccessanyanyany
4532 2711 1111 1112MastercardNoFailureanyanyany
4556 8222 2222 2223MastercardYesFailureanyanyany
4532 4911 1111 1111VisaNoSuccessanyanyany
4532 4422 2222 2222VisaYesSuccessanyanyany
4556 8911 1111 1112VisaNoFailureanyanyany
4597 2622 2222 2223VisaYesFailureanyanyany

Steps to integrate Checkout

1. Create an Order in Server
  • You will have to create an order from your server using the secret keys.
  • You can get the secret key on your glomopay dashboard.
  • You can create order by integrating our Order APIs.It should be a server side api call. Refer Authentication for details around how to authenticate Order's API.
  • The order_id received in the response should be passed to the checkout. This ties the order with the payment and secures the request from being tampered.
2. Add payment button on client
  • Add a buy button on your website.
  • You can integrate the checkout by adding the below code snippet to your website.
  • The code snippet will create a checkout instance and open the checkout form when the user clicks on the buy button.
  • The orderId of the order created via your server in step 1 should be passed to the checkout instance.
  • The publicKey refers to the public key of your glomo account present on your dashboard.
  • Handle the payment success and failure events, in the handlers function you will get payment object or error object based on the payment status. Collect these and send them to your server and retry accordingly in case payment failed.
  • Additionally, you can also provide a callbackUrl to redirect the user after payment completion. If you provide a callbackUrl, the user will be redirected to that URL after payment completion with the payment status and other details in the query parameters.
  • If callbackUrl is provided,failure and success events will not be triggered in the checkout instance.
  <button id="buy-button" class="buy-button">Buy Now</button>
  <script type="module">
    import { GlomoCheckoutApi } from 'https://glomopay-checkout-sdk.web.app/index.js';

    const checkout = new GlomoCheckoutApi({
      orderId: 'order_679a16457aP6K', // Pass the order_id received from the server in step 1
      publicKey: 'live_687b0151Bid24PAI', // Pass the public key received from the dashboard
      callbackUrl: 'https://yourwebsite.com/payment-result', // Optional: URL to redirect after payment completion
    });

    document.getElementById('buy-button').addEventListener('click', () => {
      checkout.open();
    });

    checkout.on('payment.success', function (response) {
      // Handle payment success
    });

  checkout.on('payment.failure', function (response) {
      // Handle payment failure
    });
  </script>

About the Callback URL

When you provide a callbackUrl, the user will be automatically redirected to that URL after payment completion with the following parameters:

For successful payments:

https://yourwebsite.com/payment-result?status=success&orderId=123456&signature=abc123def456

For failed payments:

https://yourwebsite.com/payment-result?status=failed&orderId=123456&signature=abc123def456

This allows server-side handling of payment results in addition to the client-side event handlers.

3. Verify checkout response and signature in server
  • In the payment success handler, you will receive the payment object which will have the payment status along with payment_id and order_id.

  • Along with payment_id, order_id and status, we also return a signature. This signature is used to verify the authenticity of the payment object.

  • You can verify the signature by using the secret key provided by Glomo.

    Success Response

    {
        "payment_id": "payment_679a16457aP6K",
        "order_id": "order_679a16457aP6K",
        "status": "success",
        "signature": "701eab675aca32c14cd1e5e041842d11ee9d04e91a3aaa73c629664a336b2952"
    }
  • You have to verify the signature by using the secret key provided by Glomo. Send the above response to your server, where you can verify the signature using the secret key provided by Glomo.

  • For verification, use the payment_id and status from success response and the order_id which was generated in step 1 instead of the one returned from checkout.

  • Generate signature using secret key and verify the generated signature with the signature received in the response.

  • In case of error response is an error object

    Error Response

    {
        "payment_id": "payment_679a16457aP6K",
        "order_id": "order_679a16457aP6K",
        "status": "failed",
        "error": {
            "code" : "INVALID_CARD",
            "message" : "Card not eligible for international payments"
        }
    }

Sample Code to verify signature

PHP
<?php
function generate_signature($order_id, $payment_id, $status, $secret) {
    $data = $order_id . "|" . $payment_id . "|" . $status;
    return hash_hmac('sha256', $data, $secret);
}

// Example Usage
$order_id = "order_679a16457aP6K";
$payment_id = "payment_679a16457aP6K";
$status = "success";
$secret = "your_secret_key";

echo generate_signature($order_id, $payment_id, $status, $secret);
?>
Ruby
require 'openssl'

def generate_signature(order_id, payment_id, status, secret)
  data = "#{order_id}|#{payment_id}|#{status}"
  OpenSSL::HMAC.hexdigest("SHA256", secret, data)
end

# Example Usage
order_id = "order_679a16457aP6K"
payment_id = "payment_679a16457aP6K"
status = "success"
secret = "your_secret_key"

puts generate_signature(order_id, payment_id, status, secret)
Go
package main

import (
    "crypto/hmac"
    "crypto/sha256"
    "encoding/hex"
    "fmt"
)

func generateSignature(orderID, paymentID, status, secret string) string {
    data := orderID + "|" + paymentID + "|" + status
    h := hmac.New(sha256.New, []byte(secret))
    h.Write([]byte(data))
    return hex.EncodeToString(h.Sum(nil))
}

func main() {
    orderID := "order_679a16457aP6K"
    paymentID := "payment_679a16457aP6K"
    status := "success"
    secret := "your_secret_key"

    fmt.Println(generateSignature(orderID, paymentID, status, secret))
}
Javascript(Node.js)
const crypto = require('crypto');

function generateSignature(orderId, paymentId, status, secret) {
    const data = `${orderId}|${paymentId}|${status}`;
    return crypto.createHmac('sha256', secret).update(data).digest('hex');
}

// Example Usage
const orderId = "order_679a16457aP6K";
const paymentId = "payment_679a16457aP6K";
const status = "success";
const secret = "your_secret_key";

console.log(generateSignature(orderId, paymentId, status, secret));
Python
import hmac
import hashlib

def generate_signature(order_id, payment_id, status, secret):
    data = f"{order_id}|{payment_id}|{status}".encode()
    return hmac.new(secret.encode(), data, hashlib.sha256).hexdigest()

# Example Usage
order_id = "order_679a16457aP6K"
payment_id = "payment_679a16457aP6K"
status = "success"
secret = "your_secret_key"

print(generate_signature(order_id, payment_id, status, secret))
4. Verify Payment status

Payment's status can be tracked via following ways

  • You can track the payments linked to your order_id via dashboard
  • You can also track the payment status via polling Payment APIs
  • You can also track the payment status via Webhooks which will notify you about the payment status.