{"_id":"@aperturetech/react-sdk","_rev":"5-3b0d2bb294194d98f1f4859c103f45c4","name":"@aperturetech/react-sdk","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@aperturetech/react-sdk","version":"1.0.0","keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"license":"MIT","_id":"@aperturetech/react-sdk@1.0.0","maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"dist":{"shasum":"d2c7cb9f6b9a5a70f8801420e1cdb5bf82553378","tarball":"https://registry.npmjs.org/@aperturetech/react-sdk/-/react-sdk-1.0.0.tgz","fileCount":6,"integrity":"sha512-58cNds0IkOL0yR20AtsEpdf+0uwVp8a743AjzSbRsRbpkOLpIQSo9F3bUwpOCa7C4M+8MuAxPB9YFbHCVZpWYw==","signatures":[{"sig":"MEUCIF8l76KJK9buFAkdCThOJwixe0ntS8BF9s1fXOgMCgNyAiEA9sUEHlv8VoBas5pkaqoy91RWsKB9Q6fxN5tDlHsnB1M=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56784},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"736594f91aff01c0fe6fe2dead558026cc300e2e","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"eslint src/","build":"tsup src/index.ts --format cjs,esm --dts --clean","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aperturetech","email":"rohitdhola111@gmail.com"},"_npmVersion":"11.2.0","description":"Aperture Payment React SDK - Unified payment integration for React apps","directories":{},"_nodeVersion":"22.14.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.8.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-sdk_1.0.0_1775907532998_0.742561674520728","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aperturetech/react-sdk","version":"1.0.1","keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"license":"MIT","_id":"@aperturetech/react-sdk@1.0.1","maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"homepage":"https://github.com/CodelamdaTechnologies/aperture-react-sdk#readme","bugs":{"url":"https://github.com/CodelamdaTechnologies/aperture-react-sdk/issues"},"dist":{"shasum":"27b5ed5a60d467dea82642414e5d0420290e6396","tarball":"https://registry.npmjs.org/@aperturetech/react-sdk/-/react-sdk-1.0.1.tgz","fileCount":6,"integrity":"sha512-kzSXN2G9CusNNTwANEINZNNVHuVHgvdkarZSnDIBU9mAwgRacBmea0k+ZNMASDnpV3vm+PHUwieqzTfQufA8Bg==","signatures":[{"sig":"MEUCIQDH/oHycmDmQoHyAf0/hGeYLVS/jC2ro9aVylz2bQBwLAIgBYUL3HTT50FKHwMfzLL/1ql9wSN8p1xz7Zer0prymd8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aperturetech%2freact-sdk@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":57339},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"f69edabe0d4966121a85a463ae2f0225b4a301e0","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"eslint src/","build":"tsup src/index.ts --format cjs,esm --dts --clean","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aperturetech","email":"rohitdhola111@gmail.com"},"repository":{"url":"git+https://github.com/CodelamdaTechnologies/aperture-react-sdk.git","type":"git"},"_npmVersion":"10.8.2","description":"Aperture Payment React SDK - Unified payment integration for React apps","directories":{},"_nodeVersion":"20.20.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.8.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-sdk_1.0.1_1776348151695_0.678831634566248","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aperturetech/react-sdk","version":"1.0.2","keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"license":"MIT","_id":"@aperturetech/react-sdk@1.0.2","maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"homepage":"https://github.com/CodelamdaTechnologies/aperture-react-sdk#readme","bugs":{"url":"https://github.com/CodelamdaTechnologies/aperture-react-sdk/issues"},"dist":{"shasum":"4e8b91376745d373b6b33ce12f7edeceabdc88d3","tarball":"https://registry.npmjs.org/@aperturetech/react-sdk/-/react-sdk-1.0.2.tgz","fileCount":6,"integrity":"sha512-UQ2cYFODv/FEHL/UJiuCCSbjXjgnxMEDrsbse3UqRMf0IgVBM2xgP6/dyX2MTcsy9XHsYyWKYf0OPXpvIswj6A==","signatures":[{"sig":"MEYCIQD0/OtpSG6bDtP1+bZnaopO7Qmttc5R0Vp4JGIdMDPWKgIhAKrm0/L6GemqYFCaTM2HCnXyoCTIhTLJlIPVCCC0w1TF","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aperturetech%2freact-sdk@1.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":57265},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"cb3809673aaac881454f5cb24817f63e3ebfe1b6","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"eslint src/","build":"tsup src/index.ts --format cjs,esm --dts --clean","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aperturetech","email":"rohitdhola111@gmail.com"},"repository":{"url":"git+https://github.com/CodelamdaTechnologies/aperture-react-sdk.git","type":"git"},"_npmVersion":"10.8.2","description":"Aperture Payment React SDK - Unified payment integration for React apps","directories":{},"_nodeVersion":"20.20.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.8.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-sdk_1.0.2_1776455190437_0.016189432680879134","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aperturetech/react-sdk","version":"1.0.3","keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"license":"MIT","_id":"@aperturetech/react-sdk@1.0.3","maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"homepage":"https://github.com/CodelamdaTechnologies/aperture-react-sdk#readme","bugs":{"url":"https://github.com/CodelamdaTechnologies/aperture-react-sdk/issues"},"dist":{"shasum":"13b7b9a984b9ce6cdda9a930981039a09aff342f","tarball":"https://registry.npmjs.org/@aperturetech/react-sdk/-/react-sdk-1.0.3.tgz","fileCount":6,"integrity":"sha512-+71KaBDdU7WwmjWoEm4bOplz9cGgs7pP3tGS5GjrTkI6WP/UqZ2pHQEbz0+yQJ84++gw+VIa49UP61MEBgYY+g==","signatures":[{"sig":"MEUCIAc64+w8PMXdghGrySMHw8K4b3LH4Jqg48KoVpvcgs94AiEAtjJoXOUwaCirqEA9LO7a/zuiWc8OsMmUS/m0gf2O7Dk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aperturetech%2freact-sdk@1.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":58203},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"b1f16ddde476f0879e1ce93b4d5dc704a3a1cb1f","scripts":{"dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"eslint src/","build":"tsup src/index.ts --format cjs,esm --dts --clean","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aperturetech","email":"rohitdhola111@gmail.com"},"repository":{"url":"git+https://github.com/CodelamdaTechnologies/aperture-react-sdk.git","type":"git"},"_npmVersion":"10.8.2","description":"Aperture Payment React SDK - Unified payment integration for React apps","directories":{},"_nodeVersion":"20.20.2","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.8.3","@types/react":"^18.3.23","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-sdk_1.0.3_1776801801052_0.13146964192618804","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@aperturetech/react-sdk","version":"1.0.4","description":"Aperture Payment React SDK - Unified payment integration for React apps","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/CodelamdaTechnologies/aperture-react-sdk.git"},"homepage":"https://github.com/CodelamdaTechnologies/aperture-react-sdk#readme","bugs":{"url":"https://github.com/CodelamdaTechnologies/aperture-react-sdk/issues"},"publishConfig":{"access":"public"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts --clean","dev":"tsup src/index.ts --format cjs,esm --dts --watch","lint":"eslint src/","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"dependencies":{},"devDependencies":{"@types/react":"^18.3.23","@types/react-dom":"^18.3.7","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.5.0","typescript":"^5.8.3"},"keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"license":"MIT","_id":"@aperturetech/react-sdk@1.0.4","gitHead":"aa89c463a4fca2b8145d22b241b23d69e898fcb4","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-R2hYajRNXZ0Dkm+fMRvH4T263j44yyoybGafRgJOs4w4FihpztcVZkATE/QWVP77HxSL0wTqKH8lo5UQBoIALg==","shasum":"b4ba2c37106d3531fd08af13b74d1061651f8dce","tarball":"https://registry.npmjs.org/@aperturetech/react-sdk/-/react-sdk-1.0.4.tgz","fileCount":6,"unpackedSize":71321,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aperturetech%2freact-sdk@1.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCLB/LHM6Bdu5J1IV+D3EIyFMv42FebTo3lCI8cGKg88AIgNJCsXrXjxQyqBV5KAcie1TlvvGWfyKhyio5IJvCsq1E="}]},"_npmUser":{"name":"aperturetech","email":"rohitdhola111@gmail.com"},"directories":{},"maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-sdk_1.0.4_1777108688886_0.6268504433461679"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-11T11:38:52.897Z","modified":"2026-04-25T09:18:09.266Z","1.0.0":"2026-04-11T11:38:53.146Z","1.0.1":"2026-04-16T14:02:31.848Z","1.0.2":"2026-04-17T19:46:30.573Z","1.0.3":"2026-04-21T20:03:21.200Z","1.0.4":"2026-04-25T09:18:09.014Z"},"bugs":{"url":"https://github.com/CodelamdaTechnologies/aperture-react-sdk/issues"},"license":"MIT","homepage":"https://github.com/CodelamdaTechnologies/aperture-react-sdk#readme","keywords":["payment","react","stripe","razorpay","ccavenue","sdk","aperture"],"repository":{"type":"git","url":"git+https://github.com/CodelamdaTechnologies/aperture-react-sdk.git"},"description":"Aperture Payment React SDK - Unified payment integration for React apps","maintainers":[{"name":"aperturetech","email":"rohitdhola111@gmail.com"}],"readme":"# @aperturetech/react-sdk\n\nReact SDK for Aperture Payment — unified payment integration. One SDK, all providers (Stripe, Razorpay, CCAvenue).\n\n## Install\n\n```bash\nnpm install @aperturetech/react-sdk\n```\n\n## Quick Start\n\n### 1. Wrap your app with `<ApertureProvider>`\n\n```tsx\nimport { ApertureProvider } from '@aperturetech/react-sdk';\n\nfunction App() {\n  return (\n    <ApertureProvider config={{\n      merchantId: 'YOUR_MERCHANT_MID',\n      apiBase: 'https://api.yoursite.com/api/v1/payment',\n    }}>\n      <CheckoutPage />\n    </ApertureProvider>\n  );\n}\n```\n\n### 2. Use `usePayment` hook in your checkout\n\n```tsx\nimport { usePayment, CardElement } from '@aperturetech/react-sdk';\n\nfunction CheckoutPage() {\n  const { status, error, result, createPayment, confirmPayment } = usePayment('#aperture-card-element');\n\n  const handlePay = async () => {\n    await createPayment({\n      orderId: 'ORD-' + Date.now(),\n      amount: 500,\n      currency: 'INR',\n      provider: 'STRIPE', // or 'RAZORPAY', or omit for auto\n      customer: { name: 'John', email: 'john@test.com' },\n    });\n    // For Stripe: status becomes 'AWAITING_INPUT', card form is mounted\n    // For Razorpay: popup opens automatically, resolves when done\n  };\n\n  const handleConfirm = async () => {\n    // Call this after user fills the Stripe card form\n    const result = await confirmPayment();\n    if (result.status === 'SUCCEEDED') {\n      alert('Payment successful!');\n    }\n  };\n\n  return (\n    <div>\n      <h2>Checkout</h2>\n      <button onClick={handlePay} disabled={status !== 'IDLE'}>\n        Pay ₹500\n      </button>\n\n      {/* Stripe card input mounts here */}\n      {status === 'AWAITING_INPUT' && (\n        <>\n          <CardElement />\n          <button onClick={handleConfirm}>Confirm Payment</button>\n        </>\n      )}\n\n      {status === 'PROCESSING' && <p>Processing...</p>}\n      {status === 'SUCCEEDED' && <p>Payment successful! Ref: {result?.providerReferenceId}</p>}\n      {error && <p style={{ color: 'red' }}>{error}</p>}\n    </div>\n  );\n}\n```\n\n## Provider Flows\n\n### Stripe (Inline Card Form)\n\n```tsx\nfunction StripeCheckout() {\n  const { status, error, createPayment, confirmPayment } = usePayment('#aperture-card-element');\n\n  return (\n    <div>\n      <button onClick={() => createPayment({\n        orderId: 'ORD-' + Date.now(),\n        amount: 10,\n        currency: 'USD',\n        provider: 'STRIPE',\n      })}>\n        Pay $10\n      </button>\n\n      {status === 'AWAITING_INPUT' && (\n        <>\n          <CardElement id=\"aperture-card-element\" />\n          <button onClick={confirmPayment}>Confirm</button>\n        </>\n      )}\n\n      {status === 'SUCCEEDED' && <p>Paid!</p>}\n      {error && <p>{error}</p>}\n    </div>\n  );\n}\n```\n\n### Razorpay (Popup)\n\n```tsx\nfunction RazorpayCheckout() {\n  const { status, error, result, createPayment } = usePayment();\n\n  const handlePay = async () => {\n    // SDK opens Razorpay popup automatically\n    const result = await createPayment({\n      orderId: 'ORD-' + Date.now(),\n      amount: 500,\n      currency: 'INR',\n      provider: 'RAZORPAY',\n      customer: { name: 'Rohit', email: 'rohit@test.com', contact: '9876543210' },\n    });\n    // result.status: 'SUCCEEDED' | 'FAILED' | 'CANCELLED'\n  };\n\n  return (\n    <div>\n      <button onClick={handlePay} disabled={status === 'PROCESSING'}>Pay ₹500</button>\n      {status === 'SUCCEEDED' && <p>Paid! Ref: {result?.providerReferenceId}</p>}\n      {error && <p>{error}</p>}\n    </div>\n  );\n}\n```\n\n### Auto Provider Selection\n\n```tsx\n// Don't specify provider — backend picks the best one\nawait createPayment({\n  orderId: 'ORD-' + Date.now(),\n  amount: 500,\n  currency: 'INR',\n  // no provider specified — backend auto-selects\n});\n```\n\n## API Reference\n\n### `<ApertureProvider config={...}>`\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `config.merchantId` | `string` | Yes | Your merchant MID |\n| `config.apiBase` | `string` | Yes | Payment API URL (e.g., `https://api.com/api/v1/payment`) |\n| `config.theme.primaryColor` | `string` | No | Brand color for Razorpay popup |\n| `config.theme.businessName` | `string` | No | Business name shown in checkout |\n| `config.onEvent` | `(event) => void` | No | Event callback for tracking |\n\n### `usePayment(stripeContainer?)`\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `stripeContainer` | `string \\| HTMLElement` | CSS selector or element for Stripe card input |\n\n**Returns:**\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `status` | `PaymentStatus` | Current state: `IDLE`, `CREATING`, `AWAITING_INPUT`, `PROCESSING`, `SUCCEEDED`, `FAILED`, `CANCELLED` |\n| `error` | `string \\| null` | Error message if failed |\n| `result` | `PaymentResult \\| null` | Payment result with provider reference |\n| `createPayment(request)` | `function` | Start payment flow |\n| `confirmPayment()` | `function` | Confirm Stripe card payment |\n| `checkStatus(orderId)` | `function` | Poll payment status |\n| `reset()` | `function` | Reset to idle state |\n\n### `<CardElement />`\n\nRenders a styled container for the Stripe card input.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `id` | `string` | `aperture-card-element` | Element ID (match with usePayment selector) |\n| `className` | `string` | - | Additional CSS classes |\n| `style` | `CSSProperties` | - | Inline styles |\n\n## Events\n\n```tsx\n<ApertureProvider config={{\n  ...config,\n  onEvent: (event) => {\n    console.log(event.type, event.data);\n    // event.type: 'payment.initiated' | 'payment.created' | 'stripe.mounted'\n    //           | 'payment.submitting' | 'payment.succeeded' | 'payment.failed'\n    //           | 'payment.cancelled' | 'payment.error'\n  }\n}}>\n```\n\n## Architecture\n\n```\nYour React App\n    │\n    └── <ApertureProvider config={...}>\n            │\n            └── usePayment('#card-element')\n                    │\n                    ├── createPayment({...})\n                    │       │\n                    │       ├── POST /api/v1/payment/create  (your backend)\n                    │       │       └── Returns { provider, clientPayload }\n                    │       │\n                    │       ├── provider === 'STRIPE'\n                    │       │       └── Loads Stripe.js → mounts CardElement\n                    │       │           └── status = 'AWAITING_INPUT'\n                    │       │\n                    │       ├── provider === 'RAZORPAY'\n                    │       │       └── Loads Razorpay.js → opens popup\n                    │       │           └── status = 'SUCCEEDED' | 'FAILED' | 'CANCELLED'\n                    │       │\n                    │       └── provider === 'CCAVENUE'\n                    │               └── Creates form → auto-redirects\n                    │                   └── status = 'REDIRECTING'\n                    │\n                    └── confirmPayment()  (Stripe only)\n                            │\n                            ├── stripe.confirmCardPayment()\n                            └── POST /api/v1/payment/confirm  (your backend)\n```\n","readmeFilename":"README.md"}