Checkout

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude

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 :-

Visual Representation of Payment Flow

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

Steps to integrate Checkout

Note: We recommend using ES module imports for the Glomo Checkout SDK. While UMD format is still supported for legacy compatibility, it is not actively maintained. For optimal performance and future support, please use ES modules. If you absolutely require UMD format, please contact our support team for assistance.

  <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
    });

    // Bank transfer only: emitted when the user submits their payment details.
    // Does NOT mean the payment is successful — await a webhook for confirmation.
    checkout.on('payment.bank_transfer_submitted', function (response) {
      // response.orderId - the order ID
      // response.senderAccountNumber - account number provided by the user
      // response.transactionReference - reference number provided by the user
    });
  </script>

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

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

<?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);
?>

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)

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))
}

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));

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))

Troubleshooting Common Issues

Checkout Popup Blocked in Production Environment

Symptom: The checkout works perfectly in your local development environment, but when deployed to UAT or production, the payment page fails to open in a new tab/popup after clicking the "Pay Now" button.

Cause: This issue is typically caused by the Cross-Origin-Opener-Policy (COOP) security header on your website. If your website sends Cross-Origin-Opener-Policy: same-origin, it will block popups to external domains, including the Glomo payment gateway.

How to Detect This Issue

1. Open your browser's Developer Tools (F12 or Right-click → Inspect)
2. Go to the Network tab
3. Reload your page and click on the main document (usually the first entry)
4. Look at the Response Headers section
5. Check if you see: Cross-Origin-Opener-Policy: same-origin

If you see this header with the same-origin value, this is what's blocking the checkout popup.

Solution

Update your server's COOP header configuration from:

Cross-Origin-Opener-Policy: same-origin

to:

Cross-Origin-Opener-Policy: same-origin-allow-popups

How to implement this depends on your setup:

Header set Cross-Origin-Opener-Policy "same-origin-allow-popups"

add_header Cross-Origin-Opener-Policy "same-origin-allow-popups";

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin-allow-popups');
  next();
});

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin-allow-popups',
          },
        ],
      },
    ];
  },
};

Verifying the Fix

After deploying the header change:

1. Clear your browser cache (or use incognito/private mode)
2. Reload your website
3. Open Developer Tools → Network tab
4. Verify the header now shows: Cross-Origin-Opener-Policy: same-origin-allow-popups
5. Test the checkout flow again

Note: The same-origin-allow-popups value maintains security for your website while allowing the checkout to open properly in a new window.

CORS Error on Checkout Load (Preferences API Failure)

Symptom: After successfully opening the checkout, you see a CORS (Cross-Origin Resource Sharing) error in the browser console when the checkout tries to load. The error typically mentions the preferences API call failing with a message like:

Access to fetch at 'https://...' from origin '...' has been blocked by CORS policy

Cause: This issue is often caused by browser extensions that intercept or modify network requests. Common culprits include ad blockers, privacy extensions, VPN extensions, and other security-focused browser add-ons.

How to Detect This Issue

1. Open your browser's Developer Tools (F12)
2. Go to the Console tab
3. Load the checkout and look for CORS-related errors
4. The error will typically mention "blocked by CORS policy" or "No 'Access-Control-Allow-Origin' header"

Solution

Step 1: Test in Incognito/Private Mode

The quickest way to verify if a browser extension is causing the issue:

1. Open an incognito/private browsing window (most extensions are disabled by default)
2. Test the checkout integration again
3. If the checkout works in incognito mode, a browser extension is the culprit

Step 2: Identify and Disable Interfering Extensions

If the checkout works in incognito mode:

1. Go to your browser's extensions page:
   • Chrome/Edge: chrome://extensions or edge://extensions
   • Firefox: about:addons
   • Safari: Preferences → Extensions
2. Disable extensions one by one, especially:
   • Ad blockers (AdBlock, uBlock Origin, etc.)
   • Privacy extensions (Privacy Badger, Ghostery, etc.)
   • VPN or proxy extensions
   • Security extensions
   • Request interceptors or modifiers
3. Test the checkout after disabling each extension
4. Once you identify the problematic extension, keep it disabled for your domain or whitelist your website

For Developers: Communicating with Users

If your customers report this issue, provide them with these troubleshooting steps:

1. Try testing in incognito/private browsing mode
2. If it works there, ask them to temporarily disable browser extensions
3. Common extensions that cause issues: ad blockers, VPN extensions, privacy tools

Note: This is not an issue with Glomo's checkout or your integration - it's a side effect of browser extensions modifying network behavior. The checkout will work correctly once interfering extensions are identified and configured properly.

Content Blocked by Content Security Policy (CSP)

Symptom: When attempting to load the Glomo Checkout, you see a message stating "This content is blocked. Contact the site owner to fix the issue." The checkout iframe or SDK scripts fail to load.

Cause: Your website has Content Security Policy (CSP) headers configured that are blocking the Glomo Checkout SDK from loading its scripts, iframe, and making API calls. CSP is a security feature that restricts which external resources can be loaded on your page.

How to Detect This Issue

1. Open your browser's Developer Tools (F12 or Right-click → Inspect)
2. Go to the Console tab
3. Look for errors mentioning "Content Security Policy" or "CSP", such as:
   Refused to load the script 'https://glomopay-checkout-sdk.web.app/...' because it violates the following Content Security Policy directive...

   Refused to frame 'https://glomopay-checkout-sdk.web.app/' because it violates the following Content Security Policy directive...

4. You can also check the Network tab → click on your page's main document → Response Headers → look for Content-Security-Policy header

Solution

Update your CSP configuration to allow the Glomo Checkout SDK domains. You need to add the following domains to your CSP directives:

Add these domains to the following CSP directives:

• script-src: Allows loading the SDK JavaScript
• frame-src: Allows embedding the checkout iframe
• connect-src: Allows API calls to Glomo services

How to implement this depends on your setup:

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; style-src 'self' 'unsafe-inline';"

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; style-src 'self' 'unsafe-inline';";

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; " +
    "frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; " +
    "connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; " +
    "style-src 'self' 'unsafe-inline';"
  );
  next();
});

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; style-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },
};

app.Use(async (context, next) =>
{
    context.Response.Headers.Append("Content-Security-Policy",
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; " +
        "frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; " +
        "connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; " +
        "style-src 'self' 'unsafe-inline';");
    await next();
});

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; style-src 'self' 'unsafe-inline';" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

# settings.py
CSP_DEFAULT_SRC = ("'self'",)
CSP_SCRIPT_SRC = ("'self'", "'unsafe-inline'", "https://glomopay-checkout-sdk.web.app")
CSP_FRAME_SRC = ("'self'", "https://glomopay-checkout-sdk.web.app", "https://*.glomopay.com")
CSP_CONNECT_SRC = ("'self'", "https://glomopay-checkout-sdk.web.app", "https://*.glomopay.com")
CSP_STYLE_SRC = ("'self'", "'unsafe-inline'")

class CSPMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        response['Content-Security-Policy'] = (
            "default-src 'self'; "
            "script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; "
            "frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; "
            "connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; "
            "style-src 'self' 'unsafe-inline';"
        )
        return response

# config/initializers/secure_headers.rb
SecureHeaders::Configuration.default do |config|
  config.csp = {
    default_src: %w('self'),
    script_src: %w('self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app),
    frame_src: %w('self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com),
    connect_src: %w('self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com),
    style_src: %w('self' 'unsafe-inline')
  }
end

# config/application.rb
config.middleware.insert_before 0, Rack::Headers do |headers|
  headers['Content-Security-Policy'] = "default-src 'self'; script-src 'self' 'unsafe-inline' https://glomopay-checkout-sdk.web.app; frame-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; connect-src 'self' https://glomopay-checkout-sdk.web.app https://*.glomopay.com; style-src 'self' 'unsafe-inline';"
end

Verifying the Fix

After deploying the CSP changes:

1. Clear your browser cache (or use incognito/private mode)
2. Reload your website
3. Open Developer Tools → Console tab
4. Verify there are no CSP-related errors
5. Check Network tab → Response Headers to confirm your CSP now includes the Glomo domains
6. Test the checkout flow again

Note: If you have an existing CSP policy, you only need to add the Glomo domains to your existing directives rather than replacing your entire policy. Make sure to merge these domains with your current configuration.