@codearcade/expo-markdown 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/markdown.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface Props {
+    content: string;
+    theme?: "light" | "dark";
+    defaultDarkTheme?: {
+        backgroundColor: string;
+        textColor: string;
+        codeBackgroundColor: string;
+        primaryColor: string;
+        secondaryColor: string;
+    };
+    defaultLightTheme?: {
+        backgroundColor: string;
+        textColor: string;
+        codeBackgroundColor: string;
+        primaryColor: string;
+        secondaryColor: string;
+    };
+}
+export declare const Markdown: React.FC<Props>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/markdown";