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.
End-to-End Flow in Accepting Payments
Below are the steps that are to accept payments :-
Once the customer initiates payment on the merchant’s website - Create an order by making server to server call
Use order ID to involve the checkout form
User selects a payment option on checkout and enters relevant information - Collect Payment details
Glomo authenticates the payment information
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 :-
Test card details
Card Number | Gateway | OTP | Payment Result | Expiry Month | Expiry Year | CVV |
---|---|---|---|---|---|---|
3466 2411 1111 1111 | American Express | No | Success | any | any | any |
3469 1222 2222 2222 | American Express | Yes | Success | any | any | any |
3490 8811 1111 1112 | American Express | No | Failure | any | any | any |
3790 8022 2222 2223 | American Express | Yes | Failure | any | any | any |
4916 5311 1111 1111 | Mastercard | No | Success | any | any | any |
4376 7022 2222 2222 | Mastercard | Yes | Success | any | any | any |
4532 2711 1111 1112 | Mastercard | No | Failure | any | any | any |
4556 8222 2222 2223 | Mastercard | Yes | Failure | any | any | any |
4532 4911 1111 1111 | Visa | No | Success | any | any | any |
4532 4422 2222 2222 | Visa | Yes | Success | any | any | any |
4556 8911 1111 1112 | Visa | No | Failure | any | any | any |
4597 2622 2222 2223 | Visa | Yes | Failure | any | any | any |
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 acallbackUrl
, 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.