PayUMoneyKit

Fast, secure, fully customizable React + TypeScript SDK for PayU and PayUMoney checkout.

PayUMoneyKit gives you a clean frontend SDK, a backend-safe payment handoff, normalized JSON responses, and practical examples for real projects. The SDK source is custom code by Pradeep Kumar Sheoran (Developer), BSG Technologies. It is unofficial and is not affiliated with, endorsed by, or maintained by PayU or PayUMoney.

Official website: https://bsgtechnologies.com
Visit here to meet, learn, contribute, and discuss new topics with us.

Developer: Pradeep Kumar Sheoran (Developer)
Company: BSG Technologies
Contact / WhatsApp: +91-8595147850

Why PayUMoneyKit

• React provider, button component, and usePayUStart hook.
• Framework-independent core client for custom UI flows.
• Redirect, form submit, popup, and iframe checkout modes.
• Normalized success, failed, cancelled, pending, and error responses.
• Backend create-order, verify, and status API helpers.
• Payment status polling with timeout and cancellation support.
• Event emitter for payment lifecycle tracking.
• Custom headers, metadata, UDF fields, and custom button rendering.
• TypeScript declarations, ESM build, and CJS build.
• Zero shipped runtime dependency other than React as a peer for React components.
• Compatible with React 18 and React 19.

Install

npm install payumoneykit

pnpm add payumoneykit

yarn add payumoneykit

Quickstart

import { PayUPayButton, PayUStartProvider } from "payumoneykit";

export default function CheckoutPage() {
  return (
    <PayUStartProvider
      config={{
        environment: "sandbox",
        createOrderUrl: "/api/payments/payu/create-order",
        verifyPaymentUrl: "/api/payments/payu/verify",
        statusUrl: "/api/payments/payu/status",
        mode: "redirect",
        timeout: 30000,
        polling: {
          enabled: true,
          interval: 3000,
          maxAttempts: 10,
        },
      }}
    >
      <PayUPayButton
        payment={{
          txnId: `TXN_${Date.now()}`,
          orderId: `ORDER_${Date.now()}`,
          amount: 1500,
          currency: "INR",
          productInfo: "Booking Payment",
          customer: {
            firstName: "Pradeep",
            name: "Pradeep Kumar",
            email: "[email protected]",
            phone: "9999999999",
          },
          udf: {
            udf1: "booking",
            udf2: "web",
          },
          metadata: {
            company: "BSG Technologies",
          },
        }}
        onSuccess={(response) => console.log("Payment success", response)}
        onFailure={(response) => console.log("Payment failed", response)}
        onPending={(response) => console.log("Payment pending", response)}
        onCancel={(response) => console.log("Payment cancelled", response)}
        onError={(response) => console.log("Payment error", response)}
      >
        Pay with PayUMoneyKit
      </PayUPayButton>
    </PayUStartProvider>
  );
}

How It Connects

Frontend only starts checkout. Secret work must stay on your backend.

1. React calls your createOrderUrl.
2. Backend validates order ownership, amount, and txnId.
3. Backend generates the PayU SHA-512 hash using merchant key and salt.
4. Backend returns { action, method, fields } to PayUMoneyKit.
5. PayUMoneyKit opens PayU checkout using your selected mode.
6. PayU redirects or posts callback data to your backend.
7. Backend verifies reverse hash, amount, txnId, and final order status.
8. React reads normalized JSON through verify/status endpoints.

Backend examples:

• Node backend example
• NestJS backend example
• Full React connection example
• React 19 custom checkout example
• Live demo guide

Custom Button

Use render props when you want complete UI control.

<PayUPayButton payment={paymentInput}>
  {({ loading, start, error }) => (
    <button className="my-pay-button" disabled={loading} onClick={() => void start()}>
      {loading ? "Processing..." : error ? "Try Again" : "Pay Securely"}
    </button>
  )}
</PayUPayButton>

Hook Usage

import { usePayUStart } from "payumoneykit";

function PayNow() {
  const { startPayment, loading } = usePayUStart();

  async function handlePay() {
    const response = await startPayment({
      txnId: "TXN_1001",
      orderId: "ORDER_1001",
      amount: 1500,
      currency: "INR",
      productInfo: "Visa Booking Payment",
      customer: {
        name: "Pradeep Kumar",
        email: "[email protected]",
        phone: "9999999999",
      },
    });

    console.log(response);
  }

  return <button disabled={loading} onClick={handlePay}>Pay Now</button>;
}

Core Client

import { createPayUStartClient } from "payumoneykit";

const client = createPayUStartClient({
  environment: "sandbox",
  createOrderUrl: "/api/payments/payu/create-order",
  verifyPaymentUrl: "/api/payments/payu/verify",
  statusUrl: "/api/payments/payu/status",
  mode: "redirect",
});

client.on("payment:success", (response) => {
  console.log("Verified success", response);
});

Customization Options

| Area | Options | | --- | --- | | Checkout mode | redirect, form, popup, iframe | | UI | Default button, custom children, render prop button | | Network | Custom endpoint URLs, headers, timeout, abort signal | | Verification | Manual verify, auto verify-ready endpoints, status polling | | Data | UDF1-UDF10, metadata, orderId, txnId, customer, address | | Events | payment:start, session:created, payment:success, payment:failed, payment:pending, payment:cancelled, payment:error | | Environment | sandbox, production |

More details: CUSTOMIZATION.md

Normalized Response

Every result is normalized into one consistent shape.

{
  status: "success",
  success: true,
  gateway: "payu",
  txnId: "TXN_1001",
  orderId: "ORDER_1001",
  amount: 1500,
  currency: "INR",
  productInfo: "Booking Payment",
  message: "Payment completed successfully",
  verified: true,
  timestamp: "2026-07-01T13:30:00.000Z",
  rawResponse: {}
}

Full examples: RESPONSES.md

Security Rules

• Never put PayU Salt in React.
• Never generate the final PayU hash in the browser.
• Always verify reverse hash on the backend.
• Always verify amount, txnId, order ownership, and duplicate callbacks.
• Use HTTPS in production.
• Store raw gateway responses for audit and reconciliation.

Security guide: SECURITY.md

Keywords

payu, payumoney, payment-gateway, react, react-18, react-19, typescript, sdk, checkout, upi, india-payments, payment-verification, payment-status, normalized-response, custom-checkout, payumoneykit, bsg-technologies

Hashtags

#PayUMoneyKit #PayU #PayUMoney #React #React19 #TypeScript #PaymentGateway #UPI #IndiaPayments #BSGTechnologies #PradeepKumarSheoran

Support And Donation

If PayUMoneyKit helps your project, you can support independent development.

UPI donation mobile number: +91-8595147850
UPI deep link: upi://pay?pa=8595147850@upi&pn=Pradeep%20Kumar%20Sheoran&cu=INR

Support page: SUPPORT.md

Publish

npm run typecheck
npm run build
npm run pack:dry
npm publish

Publishing guide: PUBLISHING.md

License

MIT. Copyright (c) 2026 Pradeep Kumar Sheoran, BSG Technologies.