{"_id":"@codearcade/expo-razorpay","_rev":"2-d4eb03a8a22966e6cda4d72ed7505124","name":"@codearcade/expo-razorpay","dist-tags":{"latest":"1.5.0"},"versions":{"1.4.0":{"name":"@codearcade/expo-razorpay","version":"1.4.0","keywords":["razorpay","react-native","expo","payment","checkout","expo-razorpay","react-native-razorpay","@codearcade/expo-razorpay"],"author":{"url":"https://github.com/codearcade-io","name":"Code Arcade","email":"support@codearcade.io"},"license":"MIT","_id":"@codearcade/expo-razorpay@1.4.0","maintainers":[{"name":"meabhisingh","email":"meabhisingh25@gmail.com"}],"homepage":"https://github.com/codearcade-io/expo-razorpay#readme","bugs":{"url":"https://github.com/codearcade-io/expo-razorpay/issues"},"npm":{"access":"public"},"dist":{"shasum":"8ac6188f6f7d30ce0546611d5cde36cceba8a1ee","tarball":"https://registry.npmjs.org/@codearcade/expo-razorpay/-/expo-razorpay-1.4.0.tgz","fileCount":31,"integrity":"sha512-mALvNEKS3W4akx0imzOI9d35J17/dFLCWcH92YyollPI0T1sqrIwZfwQjsX0F5viXz2g9at7rm6z+kcjx2aNWA==","signatures":[{"sig":"MEUCID6njHR56Zrojzm6wl4DPgTRbfQse/KwXPZz+YRbOfbrAiEA9spAGaGKuYo77yMwvZJf8uHUBBpOsf6qitOkMzFyY64=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3984238},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"types":"./lib/typescript/src/index.d.ts","source":"./src/index.tsx","default":"./lib/module/index.js"},"./package.json":"./package.json"},"gitHead":"b0cb79d01542fcd863c22d6cef1ab1a2d8d1fd38","scripts":{"lint":"eslint \"**/*.{js,ts,tsx}\"","test":"jest","clean":"del-cli lib","example":"yarn workspace @codearcade/expo-razorpay-example","prepare":"bob build","release":"release-it --only-version","typecheck":"tsc"},"_npmUser":{"name":"meabhisingh","email":"meabhisingh25@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release ${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"repository":{"url":"git+https://github.com/codearcade-io/expo-razorpay.git","type":"git"},"workspaces":[".","example"],"_npmVersion":"10.9.2","description":"A modern Razorpay SDK for Expo & React Native. WebView-based, production-ready, and actively maintained — built as a community replacement for the outdated official SDK.","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"packageManager":"yarn@4.11.0","devDependencies":{"jest":"^29.7.0","react":"19.1.0","eslint":"^9.35.0","del-cli":"^6.0.0","lefthook":"^2.0.3","prettier":"^2.8.8","@eslint/js":"^9.35.0","commitlint":"^19.8.1","release-it":"^19.0.4","typescript":"^5.9.2","@types/jest":"^29.5.14","@types/react":"^19.1.12","react-native":"0.81.5","@eslint/compat":"^1.3.2","@eslint/eslintrc":"^3.3.1","react-native-webview":"^13.16.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","react-native-builder-bob":"^0.40.13","@react-native/babel-preset":"0.83.0","@react-native/eslint-config":"0.83.0","@commitlint/config-conventional":"^19.8.1","@release-it/conventional-changelog":"^10.0.1"},"peerDependencies":{"react":"*","react-native":"*","react-native-webview":"*"},"_npmOperationalInternal":{"tmp":"tmp/expo-razorpay_1.4.0_1770669617997_0.5695391973933435","host":"s3://npm-registry-packages-npm-production"},"react-native-builder-bob":{"output":"lib","source":"src","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"create-react-native-library":{"type":"library","tools":["jest","release-it","lefthook","eslint"],"version":"0.57.0","languages":"js"}},"1.5.0":{"name":"@codearcade/expo-razorpay","version":"1.5.0","description":"A modern Razorpay SDK for Expo & React Native. WebView-based, production-ready, and actively maintained — built as a community replacement for the outdated official SDK.","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"source":"./src/index.tsx","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"scripts":{"example":"yarn workspace @codearcade/expo-razorpay-example","clean":"del-cli lib","prepare":"bob build","typecheck":"tsc","test":"jest","release":"release-it --only-version","lint":"eslint \"**/*.{js,ts,tsx}\""},"keywords":["razorpay","react-native","expo","payment","checkout","expo-razorpay","react-native-razorpay","@codearcade/expo-razorpay"],"repository":{"type":"git","url":"git+https://github.com/codearcade-io/expo-razorpay.git"},"author":{"name":"Code Arcade","email":"support@codearcade.io","url":"https://github.com/codearcade-io"},"license":"MIT","bugs":{"url":"https://github.com/codearcade-io/expo-razorpay/issues"},"homepage":"https://github.com/codearcade-io/expo-razorpay#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"npm":{"access":"public"},"devDependencies":{"@commitlint/config-conventional":"^19.8.1","@eslint/compat":"^1.3.2","@eslint/eslintrc":"^3.3.1","@eslint/js":"^9.35.0","@react-native/babel-preset":"0.83.0","@react-native/eslint-config":"0.83.0","@release-it/conventional-changelog":"^10.0.1","@types/jest":"^29.5.14","@types/react":"^19.1.12","commitlint":"^19.8.1","del-cli":"^6.0.0","eslint":"^9.35.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","jest":"^29.7.0","lefthook":"^2.0.3","prettier":"^2.8.8","react":"19.1.0","react-native":"0.81.5","react-native-builder-bob":"^0.40.13","react-native-safe-area-context":"^5.6.2","react-native-webview":"^13.16.0","release-it":"^19.0.4","typescript":"^5.9.2"},"peerDependencies":{"react":"*","react-native":"*","react-native-safe-area-context":"*","react-native-webview":"*"},"workspaces":[".","example"],"packageManager":"yarn@4.11.0","react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"commitlint":{"extends":["@commitlint/config-conventional"]},"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"create-react-native-library":{"type":"library","languages":"js","tools":["jest","release-it","lefthook","eslint"],"version":"0.57.0"},"_id":"@codearcade/expo-razorpay@1.5.0","gitHead":"86d0f5406414a17965e63d388d604783eb8f9c7d","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-2XMMTCFaDLrCTfWQQ/pUuIEa6qmxXm1WVPOx+UCrQIttjjIqNlKUWB1rgByRqcd5ic99KUVBe9T7dgwY7KHGtQ==","shasum":"f907bcfd5d9d0d987cadd6bc675aadf961f65eb7","tarball":"https://registry.npmjs.org/@codearcade/expo-razorpay/-/expo-razorpay-1.5.0.tgz","fileCount":31,"unpackedSize":3985137,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIETMxil/kGMAHHo2XUdAFO0B6f+qwuEZbRaPgLQjqMlUAiEAglR8JqMSPAFEZ3AeftCYxwVt+mRMTZ3O1bG1AL95xPU="}]},"_npmUser":{"name":"meabhisingh","email":"meabhisingh25@gmail.com"},"directories":{},"maintainers":[{"name":"meabhisingh","email":"meabhisingh25@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/expo-razorpay_1.5.0_1770672938980_0.1431243221783749"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-09T20:40:17.937Z","modified":"2026-02-09T21:35:39.454Z","1.4.0":"2026-02-09T20:40:18.255Z","1.5.0":"2026-02-09T21:35:39.295Z"},"bugs":{"url":"https://github.com/codearcade-io/expo-razorpay/issues"},"author":{"name":"Code Arcade","email":"support@codearcade.io","url":"https://github.com/codearcade-io"},"license":"MIT","homepage":"https://github.com/codearcade-io/expo-razorpay#readme","keywords":["razorpay","react-native","expo","payment","checkout","expo-razorpay","react-native-razorpay","@codearcade/expo-razorpay"],"repository":{"type":"git","url":"git+https://github.com/codearcade-io/expo-razorpay.git"},"description":"A modern Razorpay SDK for Expo & React Native. WebView-based, production-ready, and actively maintained — built as a community replacement for the outdated official SDK.","maintainers":[{"name":"meabhisingh","email":"meabhisingh25@gmail.com"}],"readme":"# @codearcade/expo-razorpay\n\nA modern, maintained Razorpay SDK for **Expo** and **React Native**.\n\nBuilt as a community replacement for the outdated official Razorpay React Native SDK.\n\n<p align=\"center\">\n  <img src=\"docs/demo.gif\" alt=\"Razorpay Expo Demo\" width=\"360\" />\n</p>\n\n<p align=\"center\">\n  <em>Quick demo of the Razorpay Expo SDK in action</em>\n</p>\n\n---\n\n## ✨ Features\n\n- 🎯 **Hook-based API** - Use `useRazorpay()` directly in any component\n- 🌐 Works with Expo (WebView-based)\n- 📦 No outdated native dependencies\n- ⚡ Lightweight and fast\n- 🎨 Simple to integrate - returns JSX that you render\n- 🔄 Designed for real production usage\n\n---\n\n## Installation\n\n```bash\nnpm install @codearcade/expo-razorpay\n```\n\n## Quick Start\n\nThe `useRazorpay` hook returns a JSX component (`RazorpayUI`) that you must render in your component. This gives you complete control over when and where the checkout appears.\n\n### Basic Example\n\n```tsx\nimport React from 'react';\nimport { View, Button } from 'react-native';\nimport { useRazorpay } from '@codearcade/expo-razorpay';\n\nexport default function PaymentScreen() {\n  const { openCheckout, RazorpayUI } = useRazorpay();\n\n  const handleBuy = () => {\n    openCheckout(\n      {\n        key: 'YOUR_RAZORPAY_KEY',\n        amount: 100, // Amount in paise (100 paise = 1 INR)\n        currency: 'INR',\n        order_id: 'order_RPNBJhnTs2Lq0B',\n        name: 'Test Company',\n        description: 'Test Transaction',\n        prefill: {\n          name: 'John Doe',\n          email: 'test@example.com',\n          contact: '1234567890',\n        },\n        theme: {\n          color: '#ffd35c',\n        },\n      },\n      {\n        onSuccess: (data) => {\n          console.log('Payment Success:', data);\n          // Handle successful payment\n        },\n        onFailure: (error) => {\n          console.log('Payment Failed:', error);\n          // Handle payment failure\n        },\n        onClose: () => {\n          console.log('Checkout closed');\n        },\n      }\n    );\n  };\n\n  return (\n    <View>\n      <Button title=\"Buy Now\" onPress={handleBuy} />\n\n      {/* Render the checkout UI */}\n      {RazorpayUI}\n    </View>\n  );\n}\n```\n\n### Advanced Example with Navigation\n\n```tsx\nimport React from 'react';\nimport { View, Button } from 'react-native';\nimport { useRazorpay } from '@codearcade/expo-razorpay';\nimport { useRouter } from 'expo-router';\n\nexport default function PaymentScreen() {\n  const { openCheckout, closeCheckout, RazorpayUI } = useRazorpay();\n  const router = useRouter();\n\n  const handleBuy = async () => {\n    // 1. Create order on your backend\n    // const orderResponse = await fetch(\"/api/create-order\", { method: \"POST\" });\n    // const { orderId, amount } = await orderResponse.json();\n\n    // For demo:\n    const orderId = 'order_RPNBJhnTs2Lq0B';\n    const amount = 100;\n\n    openCheckout(\n      {\n        key: 'YOUR_RAZORPAY_KEY',\n        amount: amount,\n        currency: 'INR',\n        order_id: orderId,\n        name: 'Your Store',\n        description: 'Purchase Description',\n        image: 'https://your-logo-url.com/logo.png',\n        prefill: {\n          name: 'John Doe',\n          email: 'john@example.com',\n          contact: '9876543210',\n        },\n        notes: {\n          order_id: orderId,\n        },\n        theme: {\n          color: '#3399cc',\n        },\n      },\n      {\n        onSuccess: (data) => {\n          console.log('Payment Success:', data);\n          closeCheckout();\n\n          // Navigate to success screen\n          router.replace({\n            pathname: '/success',\n            params: {\n              paymentId: data.razorpay_payment_id,\n              amount: amount.toString(),\n              date: new Date().toISOString(),\n            },\n          });\n        },\n        onFailure: (error) => {\n          console.log('Payment Failed:', error);\n          // Optionally close and navigate to failure screen\n        },\n        onClose: () => {\n          console.log('Customer closed the checkout');\n        },\n      }\n    );\n  };\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Button title=\"Proceed to Checkout\" onPress={handleBuy} />\n\n      {/* The checkout UI is rendered here when active */}\n      {RazorpayUI}\n    </View>\n  );\n}\n```\n\n## API Reference\n\n### `useRazorpay()` Hook\n\nThe main hook to manage Razorpay checkout. Returns an object with the following properties:\n\n#### Returns\n\n```typescript\n{\n  openCheckout: (options: RazorpayOptions, callbacks: RazorpayCallbacks) => void;\n  closeCheckout: () => void;\n  RazorpayUI: JSX.Element | null;\n  isVisible: boolean;\n}\n```\n\n#### Properties\n\n| Property        | Type                                                               | Description                                                                                        |\n| --------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |\n| `openCheckout`  | `(options: RazorpayOptions, callbacks: RazorpayCallbacks) => void` | Opens the checkout modal with the given options and callbacks                                      |\n| `closeCheckout` | `() => void`                                                       | Closes the checkout modal programmatically                                                         |\n| `RazorpayUI`    | `JSX.Element \\| null`                                              | **Required**: The JSX component that renders the checkout. Must be rendered in your component tree |\n| `isVisible`     | `boolean`                                                          | Whether the checkout is currently visible                                                          |\n\n### `RazorpayOptions` Object\n\nConfiguration object passed to `openCheckout()`.\n\n| Field             | Type     | Required  | Description                                                                                     |\n| ----------------- | -------- | --------- | ----------------------------------------------------------------------------------------------- |\n| `key`             | `string` | **Yes**   | Your Razorpay Key ID (from dashboard settings)                                                  |\n| `amount`          | `number` | **Yes**   | Amount in lowest currency unit (paise for INR, e.g., 100 = 1 INR)                               |\n| `currency`        | `string` | **Yes**   | Currency code (e.g., \"INR\")                                                                     |\n| `order_id`        | `string` | **Yes\\*** | Order ID from your backend. (\\*Either `order_id` or `subscription_id` is mandatory)             |\n| `subscription_id` | `string` | **Yes\\*** | Subscription ID for recurring payments. (\\*Either `order_id` or `subscription_id` is mandatory) |\n| `name`            | `string` | No        | Your company/app name, displayed in checkout                                                    |\n| `description`     | `string` | No        | Transaction description                                                                         |\n| `image`           | `string` | No        | Your logo URL (recommended: 120x120px)                                                          |\n| `prefill`         | `object` | No        | Pre-fill customer details: `{ name, email, contact }`                                           |\n| `notes`           | `object` | No        | Custom notes object (key-value pairs)                                                           |\n| `theme`           | `object` | No        | Theme customization: `{ color: \"#hexcolor\" }`                                                   |\n\n### `RazorpayCallbacks` Object\n\nCallbacks passed as the second argument to `openCheckout()`.\n\n```typescript\ninterface RazorpayCallbacks {\n  onSuccess: (data: RazorpaySuccessResponse) => void;\n  onFailure: (error: RazorpayErrorResponse['error']) => void;\n  onClose?: () => void;\n}\n```\n\n#### Callback Fields\n\n| Field       | Type                                      | Description                                 |\n| ----------- | ----------------------------------------- | ------------------------------------------- |\n| `onSuccess` | `(data: RazorpaySuccessResponse) => void` | Called when payment succeeds                |\n| `onFailure` | `(error: RazorpayError) => void`          | Called when payment fails                   |\n| `onClose`   | `() => void`                              | Called when user closes checkout (optional) |\n\n#### Success Response Data\n\n```typescript\n{\n  razorpay_payment_id: string;\n  razorpay_order_id: string;\n  razorpay_signature: string;\n  // Additional payment details...\n}\n```\n\n---\n\n## Best Practices\n\n1. **Always Render RazorpayUI**: Make sure to include `{RazorpayUI}` in your component's JSX. Without this, the checkout modal won't appear.\n\n   ```tsx\n   return (\n     <View>\n       <Button title=\"Pay Now\" onPress={handleBuy} />\n       {RazorpayUI} {/* ✅ Required */}\n     </View>\n   );\n   ```\n\n2. **Create Orders on Backend**: Always generate `order_id` on your backend for security.\n\n   ```tsx\n   const createOrder = async () => {\n     const response = await fetch('https://your-api.com/orders', {\n       method: 'POST',\n       headers: { 'Content-Type': 'application/json' },\n       body: JSON.stringify({ amount: 100, currency: 'INR' }),\n     });\n     return await response.json();\n   };\n   ```\n\n3. **Handle Errors Gracefully**: Always implement `onFailure` for user feedback.\n\n   ```tsx\n   onFailure: (error) => {\n     Alert.alert('Payment Failed', error.description);\n   };\n   ```\n\n4. **Verify Payments**: Always verify the signature on your backend:\n\n   ```tsx\n   onSuccess: async (data) => {\n     const verified = await fetch('https://your-api.com/verify-payment', {\n       method: 'POST',\n       body: JSON.stringify(data),\n     });\n   };\n   ```\n\n---\n\n## Troubleshooting\n\n### Checkout Not Appearing\n\n- ✅ Make sure you're rendering `RazorpayUI` in your JSX\n- ✅ Verify that `openCheckout()` is being called with valid options\n- ✅ Check browser console for errors\n\n### Payment Not Going Through\n\n- ✅ Ensure `key`, `amount`, and `order_id` are correctly set\n- ✅ Verify order was created on your backend\n- ✅ Check Razorpay dashboard for API key validity\n\n---\n\n⚠️ **Disclaimer**  \nThis is an independent, community-maintained project and is not affiliated with or endorsed by Razorpay or Expo.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}