Skip to content
Payin
/
/
Integration guide

Steps to integrate the Subscription on checkout

1

Create a Subscription in the Server

→
2

Add a Subscribe Button on checkout

→
3

Verify checkout response and signature on the server

→
4

Verify payment status

Step 1 : Create a Subscription in the Server

Use your server and Glomopay secret keys to create a subscription via the Create Subscription API.

API Endpoint

POST https://api.glomopay.com/api/v1/subscriptions

Request

curl -i -X POST \
  https://api.glomopay.com/api/v1/subscriptions \
  -H 'Authorization: Bearer <YOUR_JWT_HERE>' \
  -H 'Content-Type: application/json' \
  -d '{
    "customer_id": "cust_5JU9yv0lGSUP",
    "product_name": "ShieldGuard Insurance",
    "product_description": "Flexible, monthly insurance for belongings, travel, and digital assets; easy to manage",
    "plan_name": "ShieldGuard Lite",
    "plan_description": "Simple, monthly insurance plan that covers your basic belongings and key digital assets",
    "amount": 1000,
    "currency": "USD",
    "interval_type": "month",
    "interval_count": 1,
    "billing_cycles": 12,
    "start_date": "2025-01-01",
    "expires_at": "2025-01-07",
    "notify_customer": true,
    "notes": {
      "key1": "value1",
      "key2": "value2"
    },
    "reference_number": "R0001",
    "starts_with_first_payment": true
  }'

Response

{
  "id": "sub_5JU9yv0lGSUP",
  "customer_id": "cust_5JU9yv0lGSUP",
  "product_name": "ShieldGuard Insurance",
  "product_description": "Flexible, monthly insurance for belongings, travel, and digital assets, easy to manage",
  "plan_name": "ShieldGuard Lite",
  "plan_description": "Simple, monthly insurance plan that covers your basic belongings and key digital assets",
  "reference_number": "R0001",
  "status": "active",
  "amount": 1000,
  "currency": "USD",
  "interval_type": "month",
  "interval_count": 1,
  "billing_cycles": 12,
  "start_date": "2025-01-01",
  "end_date": "2025-12-01",
  "expires_at": "2025-01-07",
  "next_payment_date": "2025-02-01",
  "subscription_link_url": "https://checkout.glomopay.com/subscription/sub_5JU9yv0lGSUP",
  "cancelled_at": "2025-01-15",
  "notes": {
    "key1": "value1",
    "key2": "value2"
  }
}

You will receive an “id” in the response. This id should be passed to the Checkout SDK.

Step 2 : Add a Subscribe Button on checkout

Add a "Subscribe" button to your website and integrate the Glomo Checkout SDK as shown below:

<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({
      SubscriptionId: 'sub_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>

Notes:

  • The code snippet will create a checkout instance and open the checkout form when the user clicks on the subscribe button.
  • The subscription created via your server in Step 1 should be passed to the checkout instance.
  • 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 fails.
  • If a callbackUrl is provided, users will be redirected to that URL after payment completion. In this case, the success and failure event handlers will not be triggered.

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.

Step 3: Verify checkout response and signature on the server

In the payment response, you will receive a payment_id, subscription_id, status, and a signature. You must validate the signature using your Glomo secret key to confirm payment authenticity.

Sample code to verify the signature

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

// Example Usage
$subscription_id = "sub_679a16457aP6K";
$payment_id = "payment_679a16457an6K";
$status = "success";
$secret = "your_secret_key";

echo generate_signature($order_id, $payment_id, $status, $secret);
?>

Step 4: Verify payment status

Payment's status can be tracked in the following ways

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