secure-pay-sdk

v1.0.3

Published

a month ago

Payment gateway checkout SDK — overlay & popup, UPI, easy integration.

secure-pay-sdk

Razorpay-style overlay checkout SDK — payment same screen par overlay mein open hota hai, new tab nahi. Secure, lightweight, aur easy integration.

Features

✅ Overlay checkout — Same screen par, new tab nahi
✅ Lightweight — ~5KB minified
✅ No dependencies — Pure JavaScript
✅ Easy integration — 2 lines of code
✅ Secure — postMessage communication
✅ Mobile responsive — Works on all devices

Installation

npm install secure-pay-sdk

Quick Setup

Step 1: Install Package

npm install secure-pay-sdk

Step 2: Include SDK

Option A: Script Tag (Simple HTML)

<!-- From node_modules -->
<!-- Or from CDN (after publish) -->
<script src="https://unpkg.com/secure-pay-sdk@1/dist/payment-gateway.js"></script>

Option B: ES Module (React/Next.js - Recommended)

// In your component
import securePay from 'secure-pay-sdk';

// Or named import
import { securePay } from 'secure-pay-sdk';

Step 3: Use in Your Code

<button onclick="openPayment()">Pay ₹500</button>

<script>
  function openPayment() {
    // Get payment URL from your backend
    var paymentUrl = 'https://payment.inr.brtmultisoftware.com/pay/pay_xxx_secret_xxx';
    
    // For script tag: window.PaymentGateway.open(...)
    window.PaymentGateway.open({
      paymentUrl: paymentUrl,
      onSuccess: function(data) {
        console.log('Payment successful!', data);
        // data: { orderId, amount, currency, verifiedAt, returnUrl }
        // Handle success - redirect, show message, etc.
      },
      onFailure: function(data) {
        console.log('Payment failed/closed', data);
        // data: { orderId, message } or { reason: 'expired' }
        // Handle failure
      },
      onClose: function() {
        console.log('User closed overlay');
        // Handle close
      }
    });
  }
</script>

Complete Example

HTML + JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Payment Demo</title>
</head>
<body>
  <h1>My Store</h1>
  <button id="payBtn">Pay ₹500</button>
  
  <!-- Include SDK -->
  <script src="/node_modules/secure-pay-sdk/dist/payment-gateway.js"></script>
  
  <script>
    document.getElementById('payBtn').onclick = function() {
      // Step 1: Get payment URL from your backend API
      fetch('/api/create-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amount: 500 })
      })
      .then(res => res.json())
      .then(data => {
        // Step 2: Open payment overlay
        PaymentGateway.open({
          paymentUrl: data.paymentUrl, // e.g. https://gateway.com/pay/pay_xxx_secret_xxx
          onSuccess: function(result) {
            alert('Payment successful! Order: ' + result.orderId);
            // Redirect or update UI
            window.location.href = '/success';
          },
          onFailure: function(error) {
            alert('Payment failed: ' + (error.message || error.reason));
          },
          onClose: function() {
            console.log('User closed payment');
          }
        });
      })
      .catch(err => {
        console.error('Error:', err);
      });
    };
  </script>
</body>
</html>

React Example

import securePay from 'secure-pay-sdk';

function PaymentButton() {
  const handlePayment = async () => {
    // Get payment URL from backend
    const response = await fetch('/api/create-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: 500 })
    });
    const data = await response.json();
    
    // Direct use - no window needed!
    securePay.open({
      paymentUrl: data.paymentUrl,
      onSuccess: (result) => {
        console.log('Success:', result);
        // result: { orderId, amount, currency, verifiedAt, returnUrl }
        window.location.href = '/payment-success';
      },
      onFailure: (error) => {
        console.log('Failed:', error);
        // error: { orderId, message } or { reason: 'expired' }
        alert(`Payment failed: ${error.message || error.reason}`);
      }
    });
  };
  
  return <button onClick={handlePayment}>Pay ₹500</button>;
}

Next.js Example (App Router)

// app/components/PaymentButton.tsx
'use client';

import securePay from 'secure-pay-sdk';

export default function PaymentButton() {
  const handlePayment = async () => {
    const response = await fetch('/api/create-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: 500 })
    });
    const data = await response.json();

    // Direct use - clean and simple!
    securePay.open({
      paymentUrl: data.paymentUrl,
      onSuccess: (result) => {
        window.location.href = `/success?orderId=${result.orderId}`;
      }
    });
  };

  return <button onClick={handlePayment}>Pay ₹500</button>;
}

📚 Detailed React/Next.js Guide: See REACT_NEXTJS_GUIDE.md for:

Multiple integration methods
Custom hooks
TypeScript support
Complete examples
Troubleshooting

API Reference

`securePay.open(options)` or `securePay.open(paymentUrl)`

Opens payment overlay.

Parameters:

| Parameter | Type | Required | Description | |-----------|------|----------|-------------| | paymentUrl | string | Yes | Full payment link from your gateway | | onSuccess | function | No | Called when payment succeeds | | onFailure | function | No | Called when payment fails/expires | | onClose | function | No | Called when user closes overlay |

Short form:

import securePay from 'secure-pay-sdk';
securePay.open('https://payment.inr.brtmultisoftware.com/pay/pay_xxx_secret_xxx');

Full form:

import securePay from 'secure-pay-sdk';
securePay.open({
  paymentUrl: 'https://payment.inr.brtmultisoftware.com/pay/pay_xxx_secret_xxx',
  onSuccess: function(data) {
    // data: { orderId, amount, currency, verifiedAt, returnUrl }
  },
  onFailure: function(data) {
    // data: { orderId, message } or { reason: 'expired' }
  },
  onClose: function() {
    // User closed overlay
  }
});

`securePay.close()`

Manually close the overlay.

import securePay from 'secure-pay-sdk';
securePay.close();

Backend Integration

Your backend needs to create payment orders and return payment URLs:

// Example: Express.js backend
app.post('/api/create-payment', async (req, res) => {
  const { amount } = req.body;
  
  // Call payment gateway API
  const response = await fetch('https://payment.inr.brtmultisoftware.com/api/v1/payment-orders/create', {
    method: 'POST',
    headers: {
      'X-Client-Secret': 'your-client-secret',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      amount: amount,
      payerName: 'Customer Name',
      payerEmail: '[email protected]',
      description: 'Order #123'
    })
  });
  
  const data = await response.json();
  
  // Response me paymentUrl already aata hai - directly forward karo
  res.json({
    paymentUrl: data.data.paymentUrl // Already includes full URL!
  });
  
  // Ya manually build karo:
  // paymentUrl: `https://payment.inr.brtmultisoftware.com/pay/${data.data.clientSecret}`
});

How It Works

User clicks "Pay" → Your frontend calls backend API
Backend creates payment order → Returns payment URL
Frontend calls securePay.open() → Overlay opens with iframe
User completes payment → UPI/UTR submit karta hai
Payment verified → Payment page sends postMessage to parent
SDK receives message → Calls onSuccess callback
Overlay closes → User stays on same page

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Base URL & API Endpoints

Production Gateway: https://payment.inr.brtmultisoftware.com/

Create Payment: POST https://payment.inr.brtmultisoftware.com/api/v1/payment-orders/create
Payment Page: https://payment.inr.brtmultisoftware.com/pay/{clientSecret}
Check Status: GET https://payment.inr.brtmultisoftware.com/api/v1/payment-orders/status/{orderId}

📚 Complete API docs: See API_ENDPOINTS.md

Environment Variables

# .env.local (Next.js) or .env
PAYMENT_GATEWAY_URL=https://payment.inr.brtmultisoftware.com
PAYMENT_GATEWAY_CLIENT_SECRET=your-client-secret

CDN Links (After Publish)

Unpkg:

<script src="https://unpkg.com/secure-pay-sdk@1/dist/payment-gateway.js"></script>

JsDelivr:

<script src="https://cdn.jsdelivr.net/npm/secure-pay-sdk@1/dist/payment-gateway.js"></script>

Troubleshooting

SDK not loading?

Check script path is correct
Check browser console for errors
Verify file exists in node_modules/secure-pay-sdk/dist/

Overlay not opening?

Check paymentUrl is valid and accessible
Verify CORS is enabled on gateway
Check browser console for errors

Callbacks not firing?

Verify payment page is sending postMessage
Check paymentUrl origin matches gateway domain
Open browser DevTools → Network tab to see iframe requests

License

MIT

Support

For issues/questions, check the main repository or contact support.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

secure-pay-sdk

Features

Installation

Quick Setup

Step 1: Install Package

Step 2: Include SDK

Step 3: Use in Your Code

Complete Example

HTML + JavaScript

React Example

Next.js Example (App Router)

API Reference

securePay.open(options) or securePay.open(paymentUrl)

securePay.close()

Backend Integration

How It Works

Browser Support

Base URL & API Endpoints

Environment Variables

CDN Links (After Publish)

Troubleshooting

SDK not loading?

Overlay not opening?

Callbacks not firing?

License

Support

`securePay.open(options)` or `securePay.open(paymentUrl)`

`securePay.close()`