JavaScript / TypeScript · Works with any modern JS framework
Overview
sabpaisa-js is the official browser SDK for SabPaisa Payment Gateway. The same API works in every modern JavaScript framework — switch frameworks below to see the boilerplate for each, but the SabPaisa code stays the same.
One Install
Single npm package for every framework
Framework-Agnostic
Same createPayment API across all frameworks
Promise-Based
Async/await for every call
Auto Redirect
Response includes a ready-to-use checkoutUrl
TypeScript Ready
Type definitions ship with the package
Production Hardened
HMAC checksum + clientSecret on every session
Installation
Install the official npm package in your project. Works the same way for every framework.
1npm install sabpaisa-jsAdd Merchant Credentials
You will receive these credentials from SabPaisa after merchant onboarding. Initialize the SDK once and reuse it.
1const sabpaisa = new SabPaisa({
2 merchantId: 'YOUR_MERCHANT_ID',
3 apiKey: 'YOUR_API_KEY',
4 secretKey: 'YOUR_SECRET_KEY',
5 env: 'stage' // or 'production'
6});checkoutUrl + clientSecret to the browser.Create a Payment
Pick your framework. The SabPaisa code is identical — only the surrounding component boilerplate and dev-server port change.
1import SabPaisa from 'sabpaisa-js';
2
3const handlePayment = async () => {
4 const sabpaisa = new SabPaisa({
5 merchantId: 'YOUR_MERCHANT_ID',
6 apiKey: 'YOUR_API_KEY',
7 secretKey: 'YOUR_SECRET_KEY',
8 env: 'stage'
9 });
10
11 const response = await sabpaisa.createPayment({
12 amount: 10000,
13 customerName: 'Vivek Kumar',
14 customerEmail: '[email protected]',
15 customerPhone: '9999999999',
16 returnUrl: 'http://localhost:80/payment-response',
17 description: 'VanillaJS Payment Test'
18 });
19
20 console.log(response);
21 window.location.href = response.checkoutUrl;
22};
23
24document.getElementById('payBtn').addEventListener('click', handlePayment);1import React from 'react';
2import SabPaisa from 'sabpaisa-js';
3
4function App() {
5 const handlePayment = async () => {
6 try {
7 const sabpaisa = new SabPaisa({
8 merchantId: 'YOUR_MERCHANT_ID',
9 apiKey: 'YOUR_API_KEY',
10 secretKey: 'YOUR_SECRET_KEY',
11 env: 'stage'
12 });
13
14 const response = await sabpaisa.createPayment({
15 amount: 10000,
16 customerName: 'Vivek Kumar',
17 customerEmail: '[email protected]',
18 customerPhone: '9999999999',
19 returnUrl: 'http://localhost:3000/payment-response',
20 description: 'React Payment Test'
21 });
22
23 window.location.href = response.checkoutUrl;
24 } catch (error) {
25 console.log(error);
26 }
27 };
28
29 return (
30 <div>
31 <h1>SabPaisa React Integration</h1>
32 <button onClick={handlePayment}>Pay Now</button>
33 </div>
34 );
35}
36
37export default App;1<template>
2 <div>
3 <h1>SabPaisa Vue Integration</h1>
4 <button @click="handlePayment">Pay Now</button>
5 </div>
6</template>
7
8<script>
9import SabPaisa from 'sabpaisa-js';
10
11export default {
12 methods: {
13 async handlePayment() {
14 const sabpaisa = new SabPaisa({
15 merchantId: 'YOUR_MERCHANT_ID',
16 apiKey: 'YOUR_API_KEY',
17 secretKey: 'YOUR_SECRET_KEY',
18 env: 'stage'
19 });
20
21 const response = await sabpaisa.createPayment({
22 amount: 10000,
23 customerName: 'Vivek Kumar',
24 customerEmail: '[email protected]',
25 customerPhone: '9999999999',
26 returnUrl: 'http://localhost:8080/payment-response',
27 description: 'VueJS Payment Test'
28 });
29
30 window.location.href = response.checkoutUrl;
31 }
32 }
33};
34</script>1import { Component } from '@angular/core';
2import SabPaisa from 'sabpaisa-js';
3
4@Component({
5 selector: 'app-pay',
6 template: `
7 <h1>SabPaisa Angular Integration</h1>
8 <button (click)="handlePayment()">Pay Now</button>
9 `
10})
11export class PayComponent {
12 async handlePayment() {
13 const sabpaisa = new SabPaisa({
14 merchantId: 'YOUR_MERCHANT_ID',
15 apiKey: 'YOUR_API_KEY',
16 secretKey: 'YOUR_SECRET_KEY',
17 env: 'stage'
18 });
19
20 const response = await sabpaisa.createPayment({
21 amount: 10000,
22 customerName: 'Vivek Kumar',
23 customerEmail: '[email protected]',
24 customerPhone: '9999999999',
25 returnUrl: 'http://localhost:4200/payment-response',
26 description: 'Angular Payment Test'
27 });
28
29 window.location.href = response.checkoutUrl;
30 }
31}1'use client';
2
3import SabPaisa from 'sabpaisa-js';
4
5export default function PayButton() {
6 const handlePayment = async () => {
7 const sabpaisa = new SabPaisa({
8 merchantId: 'YOUR_MERCHANT_ID',
9 apiKey: 'YOUR_API_KEY',
10 secretKey: 'YOUR_SECRET_KEY',
11 env: 'stage'
12 });
13
14 const response = await sabpaisa.createPayment({
15 amount: 10000,
16 customerName: 'Vivek Kumar',
17 customerEmail: '[email protected]',
18 customerPhone: '9999999999',
19 returnUrl: 'http://localhost:3000/payment-response',
20 description: 'NextJS Payment Test'
21 });
22
23 window.location.href = response.checkoutUrl;
24 };
25
26 return <button onClick={handlePayment}>Pay Now</button>;
27}returnUrl in each example points to the framework's default dev port. Change it to wherever your app actually runs in production.Run Your Project
| Framework | Command | Default URL |
|---|---|---|
| VanillaJS | Open index.html in browser | file:// |
| React (CRA) | npm start | http://localhost:3000 |
| Vue | npm run serve | http://localhost:8080 |
| Angular | ng serve | http://localhost:4200 |
| Next.js | npm run dev | http://localhost:3000 |
Amount Reference
50000 to charge ₹500.| You want to charge | Pass as amount |
|---|---|
| ₹100 | 10000 |
| ₹500 | 50000 |
| ₹1,000 | 100000 |
Request Payload
The following payload is sent to the SabPaisa Payment API when you call createPayment().
1{
2 "merchantId": "YOUR_MERCHANT_ID",
3 "merchantTxnId": "TXN_12345",
4 "amount": 10000,
5 "currency": "INR",
6 "customerName": "Vivek Kumar",
7 "customerEmail": "[email protected]",
8 "customerPhone": "9999999999",
9 "returnUrl": "https://yourwebsite.com/payment-response"
10}API Response
Successful initialization returns the following object.
1{
2 "success": true,
3 "paymentId": "sppay_xxxxx",
4 "checkoutUrl": "https://staging-sb-checkout.sabpaisa.in/checkout/xxxxx",
5 "status": "PENDING",
6 "amount": 10000,
7 "currency": "INR",
8 "merchantTxnId": "TXN_12345",
9 "clientSecret": "xxxxx",
10 "message": "Payment created successfully"
11}| Field | Description |
|---|---|
| success | true if the session was created |
| paymentId | SabPaisa internal payment ID |
| checkoutUrl | The URL to redirect the customer to |
| status | Initial status — usually PENDING |
| amount | Echoed back in paise |
| merchantTxnId | Your transaction ID |
| clientSecret | Append to checkoutUrl as query param |
Checkout Redirection
After receiving the response, redirect the customer to response.checkoutUrl.
1window.location.href = response.checkoutUrl;Callback Handling
After payment completion, SabPaisa redirects the customer to the returnUrl you provided, with the payment status as a query parameter.
1http://yourdomain.com/payment-response?status=SUCCESSPayment Flow
- 1Customer clicks Pay button in your app
- 2Your app calls sabpaisa.createPayment(...)
- 3SabPaisa Payment API returns a checkoutUrl
- 4Browser is redirected to the SabPaisa checkout page
- 5Customer completes payment (UPI / Card / Net Banking / Wallet)
- 6SabPaisa redirects to your returnUrl with ?status=…
- 7Your app verifies status server-side (enquiry / webhook)
Production Best Practices
Never expose Secret Key in the browser
Move createPayment to your backend in production and pass only the checkoutUrl to the frontend.
Generate the checksum on the server
Client-side HMAC means anyone can read your secret. Server-only signing keeps it safe.
Verify status via webhook or enquiry
Don't trust ?status=SUCCESS in the return URL — confirm it server-side before fulfilling the order.
Use HTTPS in production
All checkoutUrl + returnUrl must be HTTPS for live transactions.
Use staging credentials for testing
Stage and production credentials are not interchangeable — keep them in separate environment variables.
Need a different language?
Check out the SDK chooser — official libraries for Flutter, Java, Android, and PHP, plus a drop-in WooCommerce plugin.
Was this page helpful?