🔐 sabpaisa-pg-sdk

A typescript component to securely integrate SabPaisa payment gateway into your web application.

📦 Installation

npm install sabpaisa-pg-sdk

🚀 Usage

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from '../../../environments/environment';

import { submitPaymentForm } from '../../../lib/PaymentForm';

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-payment-gateway-form',
  templateUrl: './payment-gateway-form.component.html',
  imports: [CommonModule, FormsModule]
})
export class PaymentFormComponent {
  
  formState: Record<string, any> = {
    clientCode: environment?.clientCode || "DJ020",
    transUserName: environment?.transUserName || "DJL754@sp",
    transUserPassword: environment?.transUserPassword || "4q3qhgmJNM4m",
    authKey: environment?.authKey || "ISTrmmDC2bTvkxzlDRrVguVwetGS8xC/UFPsp6w+Itg=",
    authIV: environment?.authIV || "M+aUFgRMPq7ci+Cmoytp3KJ2GPBOwO72Z2Cjbr55zY7++pT9mLES2M5cIblnBtaX",
    payerName: "Anand Kumar Shaw",
    payerEmail: "[email protected]",
    payerMobile: "6291312929",  
    amount: 8625,
    amountType: "INR",
    channelId: "npm",
    udf1: null, udf2: null, udf3: null, udf4: null, udf5: null,
    udf6: null, udf7: null, udf8: null, udf9: null, udf10: null,
    udf11: null, udf12: null, udf13: null, udf14: null, udf15: null,
    udf16: null, udf17: null, udf18: null, udf19: null, udf20: null,
    payerVpa: "", modeTransfer: "", byPassFlag: "",
    cardHolderName: "", pan: "", cardExpMonth: "", cardExpYear: "", cardType: "", cvv: "",
    browserDetails: "", bankId: "", env: "STAG", callbackUrl: environment?.callbackUrl,
    clientTxnId: "",
  };

  constructor(private router: Router) {}

  handleSubmit() {
    submitPaymentForm(this.formState as any)
  }
}

<form (ngSubmit)="handleSubmit()" style="padding:20px; max-width:600px;">
  <div *ngFor="let key of (formState | keyvalue)" style="margin-bottom:10px;">
    <label style="display:block; font-weight:bold;">{{ key.key }}</label>
    <input type="text" [(ngModel)]="formState[key.key]" name="{{ key.key }}" style="width:100%; padding:8px;">
  </div>
  <button type="submit" style="padding:10px 20px;">Proceed to Pay</button>
</form>

✅ Example Callback Response

{
  payerName: "Name of the person who made the payment",
  amount: "Payment amount",
  paymentMode: "Payment method used (CARD, UPI, NETBANKING, etc.)",
  status: "Payment status (SUCCESS, FAILED, etc.)"
}