qrio-payments

Embeddable payments checkout component for Qrio with multi-gateway support (Razorpay, PayU). Built with React + Tailwind (shadcn-style). Ships as a library and includes a small CRA demo app.

Quick Start (demo app)

1. Install deps

cd qrio-payments
npm install

2. Start API locally (see API section) then run demo:

npm start

Library build

npm run build:lib

Outputs to dist/ with ESM, CJS, and types.

Usage in qrio-ui

1. Add the payments package to the Next.js app (monorepo import or local path).
2. Ensure Tailwind includes payment component files in content paths:

// qrio-ui/tailwind.config.ts
content: [
	'./app/**/*.{ts,tsx}',
	'./components/**/*.{ts,tsx}',
	'../qrio-payments/src/**/*.{ts,tsx}',
]

3. Use the component:

import { PaymentCheckout, type PaymentsConfig } from 'qrio-payments'

const config: PaymentsConfig = {
	backend: { baseUrl: process.env.NEXT_PUBLIC_API_URL! },
	gateways: {
		razorpay: { id: 'razorpay', displayName: 'Razorpay', enabled: true },
		payu: { id: 'payu', displayName: 'PayU', enabled: false },
	},
}

<PaymentCheckout
	config={config}
	params={{ amount: 10000, currency: 'INR', description: 'Order #123' }}
	onResult={(r) => console.log(r)}
/>

API Requirements (qrio-api)

Environment variables:

• RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET
• PAYU_KEY, PAYU_SALT, PAYU_ENV (test|prod)

Routes exposed:

• POST /payments/razorpay/order → { orderId, amount, currency, keyId }
• POST /payments/payu/initiate → { action, fields }

Notes

• Razorpay: opens inline modal; verification should be performed server-side via webhook or signature verify endpoint.
• PayU: redirects via auto-submitted form; result handled at surl/furl endpoints + server verification.

Deploying the package (free)

For free/private distribution without JFrog:

• GitHub Packages (free for public) or GitHub registry with scoped package
• Private Git submodule or monorepo workspace import
• Verdaccio (self-hosted npm registry) on a small VM

We can finalize the preferred option after testing integration in qrio-ui.