baseupi-react

The official React SDK for BaseUPI. Implement a beautiful, drop-in UPI checkout modal directly on your own website without ever redirecting your users.

Installation

npm install baseupi-react
# or
yarn add baseupi-react
# or
pnpm add baseupi-react

Setup & Styles

You must import the CSS file so the modal is styled correctly:

// In your App.tsx, _app.tsx, or index.ts
import 'baseupi-react/styles.css';

Usage

Simply wrap any button or element with the <BaseUPICheckout> component. When the user clicks the element, the secure UPI QR code modal will appear instantly over your website.

import { BaseUPICheckout } from 'baseupi-react';
import 'baseupi-react/styles.css';

export default function PricingPage() {
  
  const handleSuccess = () => {
    alert("Payment successful! Unlocking pro features...");
    // The modal closes automatically before this fires.
  };

  const handleError = (err) => {
    console.error("Payment failed", err);
  };

  return (
    <div>
      <h1>Pro Plan - ₹999</h1>
      
      {/* 
        Pass the BaseUPI order_id you generated from your backend 
        using the `baseupi` Node.js SDK `orders.create()` method.
      */}
      <BaseUPICheckout 
        orderId="ord_your_generated_id_here"
        onSuccess={handleSuccess}
        onError={handleError}
        onClose={() => console.log('User closed the modal without paying')}
      >
        <button className="pay-btn">Pay with UPI</button>
      </BaseUPICheckout>

    </div>
  );
}

How It Works (Secure Iframe Strategy)

1. You create an order securely on your backend using the Node SDK and send the orderId to your frontend.
2. The React SDK mounts a highly-optimized, stripped-down BaseUPI checkout iframe inside a beautiful standard popup modal.
3. This prevents any CSS style bleed, completely bypasses CORS errors, and means you don't have to handle complex WebSockets or polling on your frontend to detect when the payment succeeds.
4. When the user scans and pays, BaseUPI securely emits a cross-origin postMessage confirming success. The standard modal closes and calls your onSuccess function.

License

MIT