razorpay-expo 1.0.0

package/README.md

@@ -0,0 +1,222 @@
+# razorpay-expo
+
+A modern, maintained Razorpay SDK for **Expo** and **React Native**.
+
+Built as a community replacement for the outdated official Razorpay
+React Native SDK.
+
+<p align="center">
+  <img src="docs/demo.gif" alt="Razorpay Expo Demo" width="360" />
+</p>
+
+<p align="center">
+  <em>Quick demo of the Razorpay Expo SDK in action</em>
+</p>
+
+---
+
+## ✨ Features
+
+- Works with Expo (WebView-based)
+- Modern API with hooks & provider
+- No outdated native dependencies
+- Designed for real production usage
+
+---
+
+## Installation
+
+First, install the package and its peer dependencies:
+
+```bash
+npm install razorpay-expo
+```
+
+## Usage
+
+There are two ways to use this library:
+
+1.  **Provider & Hook Usage** (`<RazorpayProvider>` & `useRazorpay`) - **Preferred**.
+2.  **Direct Component Usage** (`<RazorpayCheckout />`) - Manual state management.
+
+### Method 1: Provider & Hook (Recommended)
+
+This approach lets you trigger checkout from anywhere in your app.
+
+**1️⃣ Wrap your app with `RazorpayProvider`**
+
+```tsx
+// _layout.tsx or App.tsx
+import { RazorpayProvider } from "razorpay-expo";
+
+export default function RootLayout() {
+  return (
+    <RazorpayProvider>
+      <Slot />
+    </RazorpayProvider>
+  );
+}
+```
+
+**2️⃣ Use `useRazorpay` in your components**
+
+```tsx
+import React from "react";
+import { Button } from "react-native";
+import { useRazorpay } from "razorpay-expo";
+import { useRouter } from "expo-router";
+
+export default function PaymentScreen() {
+  const { openCheckout, closeCheckout } = useRazorpay();
+  const router = useRouter();
+
+  const handleBuy = async () => {
+    // 1. Create order on your backend
+    // const { orderId, currency, amount } = await createOrderOnBackend();
+
+    // For demo purposes:
+    const currency = "INR";
+    const amount = 100;
+    const orderId = "order_RPNBJhnTs2Lq0B"; // Replace with actual order_id from backend
+
+    openCheckout(
+      {
+        key: "YOUR_RAZORPAY_KEY",
+        currency: currency,
+        amount: amount,
+        order_id: orderId, // Mandatory: either order_id or subscription_id
+        name: "Test Company",
+        image: "https://codearcade.io/logos/logo.png",
+        description: "Test Transaction",
+        prefill: {
+          name: "John Doe",
+          email: "test@example.com",
+          contact: "1234567890",
+        },
+        theme: {
+          color: "#ffd35c",
+        },
+      },
+      {
+        onSuccess: (data) => {
+          console.log("Payment Success:", data);
+          closeCheckout();
+
+          // Navigate to success screen
+          router.replace({
+            pathname: "/success",
+            params: {
+              paymentId: data.razorpay_payment_id,
+              amount: amount.toString(),
+              date: new Date().toISOString(),
+            },
+          });
+        },
+        onFailure: (error) => {
+          console.log("Payment Failed:", error);
+        },
+        onClose: () => {
+          console.log("Widget closed");
+        },
+      },
+    );
+  };
+
+  return <Button title="Buy Now" onPress={handleBuy} />;
+}
+```
+
+### Method 2: Direct Component Usage
+
+Use RazorpayCheckout directly and control visibility yourself.
+
+```tsx
+import React, { useState } from "react";
+import { View, Text, Button, SafeAreaView } from "react-native";
+import { RazorpayCheckout } from "razorpay-expo";
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View>
+        <Text>Home</Text>
+        <Button title="Buy Now" onPress={() => setOpen(true)} />
+
+        {open && (
+          <RazorpayCheckout
+            options={{
+              key: "YOUR_RAZORPAY_KEY", // e.g., rzp_test_...
+              currency: "INR",
+              amount: 100, // Amount in lowest denomination (e.g. 100 paise = 1 INR)
+              order_id: "order_RPNBJhnTs2Lq0B", // OR subscription_id
+              name: "Test Company",
+              image: "https://codearcade.io/logos/logo.png",
+              description: "Test Transaction",
+              prefill: {
+                name: "John Doe",
+                email: "test@example.com",
+                contact: "1234567890",
+              },
+              notes: {
+                order_id: "1",
+                payment_id: "1",
+              },
+              theme: {
+                color: "#ffd35c",
+              },
+            }}
+            onSuccess={(data) => console.log("Success:", data)}
+            onFailure={(error) => console.log("Failure:", error)}
+            onClose={() => setOpen(false)}
+          />
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}
+```
+
+## API Reference
+
+### `RazorpayCheckout` Props
+
+| Prop        | Type                   | Description                                                            |
+| ----------- | ---------------------- | ---------------------------------------------------------------------- |
+| `options`   | `RazorpayOptions`      | Configuration object for Razorpay checkout.                            |
+| `onSuccess` | `(data: any) => void`  | Callback function triggered on successful payment.                     |
+| `onFailure` | `(error: any) => void` | Callback function triggered on payment failure.                        |
+| `onClose`   | `() => void`           | Callback function triggered when the checkout close button is pressed. |
+
+### `useRazorpay` Hook
+
+Returns:
+
+- `openCheckout(options: RazorpayOptions, callbacks: RazorpayCallbacks)`: Function to open the checkout.
+- `closeCheckout()`: Function to manually close the checkout (useful in `onSuccess`).
+
+### `RazorpayOptions`
+
+| Field             | Type     | Required  | Description                                                                               |
+| ----------------- | -------- | --------- | ----------------------------------------------------------------------------------------- |
+| `key`             | `string` | **Yes**   | Your Razorpay Key ID.                                                                     |
+| `amount`          | `number` | **Yes**   | Amount in lowest currency unit (e.g., paise).                                             |
+| `currency`        | `string` | **Yes**   | Currency code (e.g., "INR").                                                              |
+| `order_id`        | `string` | **Yes\*** | Order ID generated from backend. (\*Either `order_id` or `subscription_id` is mandatory). |
+| `subscription_id` | `string` | **Yes\*** | Subscription ID for recurring payments.                                                   |
+| `name`            | `string` | No        | Name of your company/app.                                                                 |
+| `description`     | `string` | No        | Description of the transaction.                                                           |
+| `image`           | `string` | No        | URL to your logo.                                                                         |
+| `prefill`         | `object` | No        | Object containing `name`, `email`, `contact`.                                             |
+| `theme`           | `object` | No        | Object containing `color` (hex code).                                                     |
+
+- Either order_id or subscription_id is required.
+
+⚠️ Disclaimer  
+This is an independent, community-maintained project and is not affiliated
+with or endorsed by Razorpay or Expo.
+
+## License
+
+MIT

package/dist/components/provider.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import { RazorpayOptions, RazorpaySuccessResponse, RazorpayErrorResponse } from "../types";
+interface CheckoutCallbacks {
+    onSuccess: (data: RazorpaySuccessResponse) => void;
+    onFailure: (error: RazorpayErrorResponse["error"]) => void;
+    onClose?: () => void;
+}
+interface RazorpayContextType {
+    openCheckout: (options: RazorpayOptions, callbacks: CheckoutCallbacks) => void;
+    closeCheckout: () => void;
+}
+export declare const RazorpayProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const useRazorpay: () => RazorpayContextType;
+export {};

package/dist/components/razorpayCheckout.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { RazorpayErrorResponse, RazorpayOptions, RazorpaySuccessResponse } from "../types";
+interface RazorpayCheckoutProps {
+    options: RazorpayOptions;
+    onSuccess: (data: RazorpaySuccessResponse) => void;
+    onFailure: (error: RazorpayErrorResponse) => void;
+    onClose: () => void;
+}
+declare const RazorpayCheckout: ({ options, onSuccess, onFailure, onClose, }: RazorpayCheckoutProps) => React.JSX.Element;
+export { RazorpayCheckout };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components/provider";
+export * from "./components/razorpayCheckout";
+export type * from "./types";

package/dist/index.js

@@ -0,0 +1,49 @@
+var j=Object.create;var{getPrototypeOf:y,defineProperty:x,getOwnPropertyNames:D}=Object;var p=Object.prototype.hasOwnProperty;var h=(f,d,g)=>{g=f!=null?j(y(f)):{};let _=d||!f||!f.__esModule?x(g,"default",{value:f,enumerable:!0}):g;for(let T of D(f))if(!p.call(_,T))x(_,T,{get:()=>f[T],enumerable:!0});return _};var Z=(f,d)=>()=>(d||f((d={exports:{}}).exports,d),d.exports);var F=((f)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(f,{get:(d,g)=>(typeof require<"u"?require:d)[g]}):f)(function(f){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+f+'" is not supported')});var H=Z((s,J)=>{function C(f){return f&&f.__esModule?f:{default:f}}J.exports=C,J.exports.__esModule=!0,J.exports.default=J.exports});var m=Z((N)=>{Object.defineProperty(N,"__esModule",{value:!0});N.default=void 0;var k=F("react-native"),u=k.StyleSheet.create({container:{flex:1,overflow:"hidden"},loadingOrErrorView:{position:"absolute",flex:1,justifyContent:"center",alignItems:"center",height:"100%",width:"100%",backgroundColor:"white"},loadingProgressBar:{height:20},errorText:{fontSize:14,textAlign:"center",marginBottom:2},errorTextTitle:{fontSize:15,fontWeight:"500",marginBottom:10},webView:{backgroundColor:"#ffffff"},flexStart:{alignSelf:"flex-start"},colorRed:{color:"red"}}),e=N.default=u});import*as l from"react";import*as $ from"react/jsx-runtime";var w=Z((U)=>{var A=H();Object.defineProperty(U,"__esModule",{value:!0});U.default=U.WebView=void 0;var df=A(l),q=F("react-native"),z=A(m()),V=U.WebView=function(){return $.jsx(q.View,{style:z.default.flexStart,children:$.jsx(q.Text,{style:z.default.colorRed,children:"React Native WebView does not support this platform."})})},gf=U.default=V});import{createContext as t,useContext as c,useState as L}from"react";import{StyleSheet as I,View as S,ActivityIndicator as n,Linking as o,Modal as i}from"react-native";var G=h(w(),1);import{jsxDEV as K}from"react/jsx-dev-runtime";var R=({options:f,onSuccess:d,onFailure:g,onClose:_})=>{let{handler:T,...M}=f,Y=`
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+          body { display: flex; justify-content: center; align-items: center; background-color: transparent; }
+        </style>
+      </head>
+      <body>
+        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
+        <script>
+          // 1. Parse the options passed from React Native
+          var options = ${JSON.stringify(M)};
+
+          // 2. Attach the Success Handler
+          options.handler = function (response){
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'PAYMENT_SUCCESS',
+              data: response
+            }));
+          };
+
+          // 3. Attach Modal Dismiss (User closed the popup)
+          options.modal = {
+            ondismiss: function(){
+              window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'PAYMENT_CLOSED'
+              }));
+            }
+          };
+
+          var rzp1 = new Razorpay(options);
+
+          // 4. Attach Failure Handler (as per your documentation)
+          rzp1.on('payment.failed', function (response){
+             window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'PAYMENT_FAILED',
+                error: response.error
+             }));
+          });
+
+          // 5. Open Widget
+          rzp1.open();
+        </script> 
+      </body>
+    </html>
+  `,Q=(r)=>{let B=JSON.parse(r.nativeEvent.data);if(B.type==="PAYMENT_SUCCESS")d(B.data);else if(B.type==="PAYMENT_FAILED")g(B.error);else if(B.type==="PAYMENT_CLOSED")_()},P=(r)=>{let{url:B}=r;if(!B.startsWith("http")&&!B.startsWith("https")&&!B.startsWith("about:blank"))return o.openURL(B).catch((E)=>{console.error("Couldn't open UPI app",E)}),!1;return!0};return K(i,{visible:!0,transparent:!0,animationType:"slide",onRequestClose:_,children:K(S,{style:{...I.absoluteFillObject,zIndex:1000,backgroundColor:"rgba(0,0,0,0.5)"},children:K(G.default,{originWhitelist:["*","http://*","https://*","upi://*","tez://*","phonepe://*"],source:{html:Y},onMessage:Q,onShouldStartLoadWithRequest:P,javaScriptEnabled:!0,style:{flex:1,backgroundColor:"transparent"},startInLoadingState:!0,renderLoading:()=>K(S,{style:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"transparent",zIndex:1001,...I.absoluteFillObject},children:K(n,{size:"large",color:f.theme?.color||"#3399cc"},void 0,!1,void 0,this)},void 0,!1,void 0,this)},void 0,!1,void 0,this)},void 0,!1,void 0,this)},void 0,!1,void 0,this)};import{jsxDEV as W}from"react/jsx-dev-runtime";var v=t(void 0),Yf=({children:f})=>{let[d,g]=L(!1),[_,T]=L(null),[M,X]=L(null),Y=(P,r)=>{T(P),X(r),g(!0)},Q=()=>{if(g(!1),M?.onClose)M.onClose();X(null)};return W(v.Provider,{value:{openCheckout:Y,closeCheckout:Q},children:[f,d&&_&&M&&W(R,{options:_,onSuccess:(P)=>{M.onSuccess(P),g(!1)},onFailure:(P)=>{M.onFailure(P.error),g(!1)},onClose:()=>{Q()}},void 0,!1,void 0,this)]},void 0,!0,void 0,this)},Zf=()=>{let f=c(v);if(!f)throw Error("useRazorpay must be used within a RazorpayProvider");return f};export{Zf as useRazorpay,Yf as RazorpayProvider,R as RazorpayCheckout};
+
+//# debugId=74A338E7CE466FDB64756E2164756E21

package/dist/index.js.map

@@ -0,0 +1,15 @@
+{
+  "version": 3,
+  "sources": ["..\\node_modules\\@babel\\runtime\\helpers\\interopRequireDefault.js", "..\\node_modules\\react-native-webview\\lib\\WebView.styles.js", "..\\node_modules\\react-native-webview\\lib\\WebView.js", "..\\src\\components\\provider.tsx", "..\\src\\components\\razorpayCheckout.tsx", "..\\node_modules\\react-native-webview\\index.js"],
+  "sourcesContent": [
+    "function _interopRequireDefault(e) {\n  return e && e.__esModule ? e : {\n    \"default\": e\n  };\n}\nmodule.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;",
+    "Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=void 0;var _reactNative=require(\"react-native\");var styles=_reactNative.StyleSheet.create({container:{flex:1,overflow:'hidden'},loadingOrErrorView:{position:'absolute',flex:1,justifyContent:'center',alignItems:'center',height:'100%',width:'100%',backgroundColor:'white'},loadingProgressBar:{height:20},errorText:{fontSize:14,textAlign:'center',marginBottom:2},errorTextTitle:{fontSize:15,fontWeight:'500',marginBottom:10},webView:{backgroundColor:'#ffffff'},flexStart:{alignSelf:'flex-start'},colorRed:{color:'red'}});var _default=exports.default=styles;",
+    "var _interopRequireDefault=require(\"@babel/runtime/helpers/interopRequireDefault\");Object.defineProperty(exports,\"__esModule\",{value:true});exports.default=exports.WebView=void 0;var _react=_interopRequireDefault(require(\"react\"));var _reactNative=require(\"react-native\");var _WebView=_interopRequireDefault(require(\"./WebView.styles\"));var _jsxRuntime=require(\"react/jsx-runtime\");var _this=this,_jsxFileName=\"/home/circleci/code/src/WebView.tsx\";var WebView=exports.WebView=function WebView(){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WebView.default.flexStart,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WebView.default.colorRed,children:\"React Native WebView does not support this platform.\"})});};var _default=exports.default=WebView;",
+    "import React, { createContext, useContext, useState, ReactNode } from \"react\";\r\nimport { RazorpayCheckout } from \"./razorpayCheckout\"; // The component we made earlier\r\nimport {\r\n  RazorpayOptions,\r\n  RazorpaySuccessResponse,\r\n  RazorpayErrorResponse,\r\n} from \"../types\";\r\n\r\n// Define the shape of our callbacks\r\ninterface CheckoutCallbacks {\r\n  onSuccess: (data: RazorpaySuccessResponse) => void;\r\n  onFailure: (error: RazorpayErrorResponse[\"error\"]) => void;\r\n  onClose?: () => void;\r\n}\r\n\r\ninterface RazorpayContextType {\r\n  openCheckout: (\r\n    options: RazorpayOptions,\r\n    callbacks: CheckoutCallbacks,\r\n  ) => void;\r\n  closeCheckout: () => void;\r\n}\r\n\r\nconst RazorpayContext = createContext<RazorpayContextType | undefined>(\r\n  undefined,\r\n);\r\n\r\nexport const RazorpayProvider = ({ children }: { children: ReactNode }) => {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [checkoutOptions, setCheckoutOptions] =\r\n    useState<RazorpayOptions | null>(null);\r\n  const [callbacks, setCallbacks] = useState<CheckoutCallbacks | null>(null);\r\n\r\n  const openCheckout = (options: RazorpayOptions, cbs: CheckoutCallbacks) => {\r\n    setCheckoutOptions(options);\r\n    setCallbacks(cbs);\r\n    setIsVisible(true);\r\n  };\r\n\r\n  const closeCheckout = () => {\r\n    setIsVisible(false);\r\n    // Optional: Clear options after a delay if needed\r\n    if (callbacks?.onClose) {\r\n      callbacks.onClose();\r\n    }\r\n    setCallbacks(null);\r\n  };\r\n\r\n  return (\r\n    <RazorpayContext.Provider value={{ openCheckout, closeCheckout }}>\r\n      {children}\r\n\r\n      {/* The Global Payment Overlay */}\r\n      {isVisible && checkoutOptions && callbacks && (\r\n        <RazorpayCheckout\r\n          options={checkoutOptions}\r\n          onSuccess={(data) => {\r\n            callbacks.onSuccess(data);\r\n            setIsVisible(false); // Auto close on success\r\n          }}\r\n          onFailure={(error) => {\r\n            callbacks.onFailure(error.error);\r\n            setIsVisible(false); // Auto close on failure\r\n          }}\r\n          onClose={() => {\r\n            closeCheckout();\r\n          }}\r\n        />\r\n      )}\r\n    </RazorpayContext.Provider>\r\n  );\r\n};\r\n\r\n// The Hook\r\nexport const useRazorpay = () => {\r\n  const context = useContext(RazorpayContext);\r\n  if (!context) {\r\n    throw new Error(\"useRazorpay must be used within a RazorpayProvider\");\r\n  }\r\n  return context;\r\n};\r\n",
+    "import React from \"react\";\r\nimport {\r\n  StyleSheet,\r\n  View,\r\n  ActivityIndicator,\r\n  Linking,\r\n  Modal,\r\n} from \"react-native\";\r\nimport { WebView } from \"react-native-webview\";\r\nimport {\r\n  RazorpayErrorResponse,\r\n  RazorpayOptions,\r\n  RazorpaySuccessResponse,\r\n} from \"../types\";\r\n\r\ninterface RazorpayCheckoutProps {\r\n  options: RazorpayOptions; // The exact options object you listed in your prompt\r\n  onSuccess: (data: RazorpaySuccessResponse) => void;\r\n  onFailure: (error: RazorpayErrorResponse) => void;\r\n  onClose: () => void;\r\n}\r\n\r\nconst RazorpayCheckout = ({\r\n  options,\r\n  onSuccess,\r\n  onFailure,\r\n  onClose,\r\n}: RazorpayCheckoutProps) => {\r\n  // We inject your specific options into the HTML\r\n  // We remove 'handler' from your options because functions can't be passed to WebView\r\n  // We will re-attach our own handler inside the HTML\r\n  const { handler, ...optionsWithoutHandler } = options;\r\n  const optionsString = JSON.stringify(optionsWithoutHandler);\r\n\r\n  const htmlContent = `\r\n    <html>\r\n      <head>\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n        <style>\r\n          body { display: flex; justify-content: center; align-items: center; background-color: transparent; }\r\n        </style>\r\n      </head>\r\n      <body>\r\n        <script src=\"https://checkout.razorpay.com/v1/checkout.js\"></script>\r\n        <script>\r\n          // 1. Parse the options passed from React Native\r\n          var options = ${optionsString};\r\n\r\n          // 2. Attach the Success Handler\r\n          options.handler = function (response){\r\n            window.ReactNativeWebView.postMessage(JSON.stringify({\r\n              type: 'PAYMENT_SUCCESS',\r\n              data: response\r\n            }));\r\n          };\r\n\r\n          // 3. Attach Modal Dismiss (User closed the popup)\r\n          options.modal = {\r\n            ondismiss: function(){\r\n              window.ReactNativeWebView.postMessage(JSON.stringify({\r\n                type: 'PAYMENT_CLOSED'\r\n              }));\r\n            }\r\n          };\r\n\r\n          var rzp1 = new Razorpay(options);\r\n\r\n          // 4. Attach Failure Handler (as per your documentation)\r\n          rzp1.on('payment.failed', function (response){\r\n             window.ReactNativeWebView.postMessage(JSON.stringify({\r\n                type: 'PAYMENT_FAILED',\r\n                error: response.error\r\n             }));\r\n          });\r\n\r\n          // 5. Open Widget\r\n          rzp1.open();\r\n        </script> \r\n      </body>\r\n    </html>\r\n  `;\r\n\r\n  const handleMessage = (event: any) => {\r\n    const message = JSON.parse(event.nativeEvent.data);\r\n\r\n    if (message.type === \"PAYMENT_SUCCESS\") {\r\n      onSuccess(message.data);\r\n    } else if (message.type === \"PAYMENT_FAILED\") {\r\n      onFailure(message.error);\r\n    } else if (message.type === \"PAYMENT_CLOSED\") {\r\n      onClose();\r\n    }\r\n  };\r\n\r\n  const handleNavigation = (request: any) => {\r\n    const { url } = request;\r\n\r\n    // Handle UPI Deep Linking (GPay, PhonePe, Paytm, etc.)\r\n    // If the URL is not http/https, it's likely a scheme for another app\r\n    if (\r\n      !url.startsWith(\"http\") &&\r\n      !url.startsWith(\"https\") &&\r\n      !url.startsWith(\"about:blank\")\r\n    ) {\r\n      Linking.openURL(url).catch((err) => {\r\n        console.error(\"Couldn't open UPI app\", err);\r\n      });\r\n      return false; // Stop WebView from trying to load it\r\n    }\r\n    return true; // Allow normal loading\r\n  };\r\n\r\n  return (\r\n    <Modal\r\n      visible={true}\r\n      transparent={true}\r\n      animationType=\"slide\" // Slide up effect like a native sheet\r\n      onRequestClose={onClose}\r\n    >\r\n      <View\r\n        style={{\r\n          ...StyleSheet.absoluteFillObject,\r\n          zIndex: 1000,\r\n          backgroundColor: \"rgba(0,0,0,0.5)\",\r\n        }}\r\n      >\r\n        <WebView\r\n          originWhitelist={[\r\n            \"*\",\r\n            \"http://*\",\r\n            \"https://*\",\r\n            \"upi://*\",\r\n            \"tez://*\",\r\n            \"phonepe://*\",\r\n          ]}\r\n          source={{ html: htmlContent }}\r\n          onMessage={handleMessage}\r\n          onShouldStartLoadWithRequest={handleNavigation}\r\n          javaScriptEnabled={true}\r\n          style={{ flex: 1, backgroundColor: \"transparent\" }}\r\n          startInLoadingState={true}\r\n          renderLoading={() => (\r\n            <View\r\n              style={{\r\n                flex: 1,\r\n                justifyContent: \"center\",\r\n                alignItems: \"center\",\r\n                backgroundColor: \"transparent\",\r\n                zIndex: 1001,\r\n                ...StyleSheet.absoluteFillObject,\r\n              }}\r\n            >\r\n              <ActivityIndicator\r\n                size=\"large\"\r\n                color={options.theme?.color || \"#3399cc\"}\r\n              />\r\n            </View>\r\n          )}\r\n        />\r\n      </View>\r\n    </Modal>\r\n  );\r\n};\r\n\r\nexport { RazorpayCheckout };\r\n",
+    "import WebView from './lib/WebView';\n\nexport { WebView };\nexport default WebView;\n"
+  ],
+  "mappings": "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",
+  "debugId": "74A338E7CE466FDB64756E2164756E21",
+  "names": []
+}

package/dist/types/index.d.ts

@@ -0,0 +1,133 @@
+export interface RazorpaySuccessResponse {
+    razorpay_payment_id: string;
+    razorpay_order_id: string;
+    razorpay_signature: string;
+}
+export interface RazorpayErrorResponse {
+    error: {
+        code: string;
+        description: string;
+        source: string;
+        step: string;
+        reason: string;
+        metadata: {
+            order_id: string;
+            payment_id: string;
+        };
+    };
+}
+export interface RazorpayTheme {
+    /** Thematic color to modify the appearance of Checkout (e.g., "#3399cc") */
+    color?: string;
+    /** Link to a backdrop image */
+    backdrop_color?: string;
+    /** Hides the top bar */
+    hide_topbar?: boolean;
+}
+export interface RazorpayPrefill {
+    /** Cardholder or user name */
+    name?: string;
+    /** User email */
+    email?: string;
+    /** User phone number in format +(country code)(phone number) */
+    contact?: string;
+    /** Auto-select method (e.g., "card", "netbanking", "wallet", "emi", "upi") */
+    method?: string;
+}
+export interface RazorpayModal {
+    /** Function called when the user closes the checkout modal */
+    ondismiss?: () => void;
+    /** Keep the modal open after payment failure */
+    confirm_close?: boolean;
+    /** Custom animation for modal */
+    animation?: boolean;
+}
+export interface RazorpayRetry {
+    /** Enable or disable retries */
+    enabled: boolean;
+    /** Maximum number of retries allowed */
+    max_count?: number;
+}
+export interface RazorpayReadOnly {
+    email?: boolean;
+    contact?: boolean;
+    name?: boolean;
+}
+export interface RazorpayHidden {
+    email?: boolean;
+    contact?: boolean;
+    name?: boolean;
+}
+export interface RazorpayConfig {
+    display?: {
+        blocks?: any;
+        sequence?: string[];
+        preferences?: any;
+        language?: "en" | "hi" | "gu" | "mr" | "bn" | "ta" | "te";
+    };
+}
+export interface RazorpayOptions {
+    /** API Key ID generated from the Dashboard */
+    key: string;
+    /** Payment amount in the smallest currency subunit (e.g., 50000 for ₹500.00) */
+    amount: number | string;
+    /** The currency code (e.g., "INR") */
+    currency: string;
+    /** Your Business/Enterprise name shown on the Checkout form */
+    name: string;
+    /** Description of the purchase item shown on the Checkout form */
+    description?: string;
+    /** Link to an image (usually your business logo) or base64 string */
+    image?: string;
+    /** Order ID generated via Orders API (Required for standard payments) */
+    order_id?: string;
+    /** Subscription ID (Required for recurring payments) */
+    subscription_id?: string;
+    /** Handler function for successful payment */
+    handler?: (response: RazorpaySuccessResponse) => void;
+    /** Object to prefill customer contact information */
+    prefill?: RazorpayPrefill;
+    /** Set of key-value pairs (max 15) for additional info */
+    notes?: Record<string, string>;
+    /** Thematic options to modify the appearance */
+    theme?: RazorpayTheme;
+    /** Modal options */
+    modal?: RazorpayModal;
+    /** URL to redirect customers to on successful payment */
+    callback_url?: string;
+    /** Whether to redirect to callback_url (true) or use handler (false) */
+    redirect?: boolean;
+    /** Unique identifier of customer (for saved cards) */
+    customer_id?: string;
+    /** Whether to allow saving cards (default: false) */
+    remember_customer?: boolean;
+    /** Timeout in seconds */
+    timeout?: number;
+    /** Marks specific fields as read-only */
+    readonly?: RazorpayReadOnly;
+    /** Hides specific contact details */
+    hidden?: RazorpayHidden;
+    /** Auto-read OTP for cards/netbanking (Android only) */
+    send_sms_hash?: boolean;
+    /** Allow rotation of payment page (Android only) */
+    allow_rotation?: boolean;
+    /** Retry configuration */
+    retry?: RazorpayRetry;
+    /** Advanced configuration options */
+    config?: RazorpayConfig;
+    /** Permit customer from changing linked card in subscription */
+    subscription_card_change?: boolean;
+    /** Accepting recurring payments via emandate/NACH */
+    recurring?: boolean;
+}
+export type RazorpayMessage = {
+    type: "READY";
+} | {
+    type: "SUCCESS";
+    payload: RazorpaySuccessResponse;
+} | {
+    type: "FAILED";
+    payload: RazorpayErrorResponse;
+} | {
+    type: "DISMISSED";
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "razorpay-expo",
+  "type": "module",
+  "version": "1.0.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "bun ./builder.ts && bun run generate-types",
+    "prepublishOnly": "bun run build",
+    "generate-types": "bunx tsc --emitDeclarationOnly --declaration --outDir dist",
+    "clear": "rm -rf dist"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/meabhisingh/razorpay-expo.git#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meabhisingh/razorpay-expo.git"
+  },
+  "bugs": "https://github.com/meabhisingh/razorpay-expo/issues",
+  "author": "Abhishek Singh <official.6packprogrammer@gmail.com>",
+  "devDependencies": {
+    "@types/bun": "^1.2.20",
+    "tslib": "^2.8.1",
+    "typedoc": "^0.28.10"
+  },
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-native": "^0.83.1",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "react-native-webview": "^13.16.0"
+  }
+}