@thepayulink/checkout-react-native 1.0.0

package/README.md

@@ -0,0 +1,96 @@
+# @thepayulink/checkout-react-native
+
+Elite Yatra / PayuLink UPI checkout for **React Native**. Opens the same secure hosted checkout used on the web inside a native full-screen modal (WebView), and bridges the payment result back to your app.
+
+> Why a WebView? UPI collection, the QR, PayuLink signing and webhook verification all live on the Elite Yatra server. The app never touches secrets — it just shows the checkout and receives the confirmed result.
+
+## Install
+
+```bash
+npm install @thepayulink/checkout-react-native react-native-webview
+cd ios && pod install   # iOS only
+```
+
+## Secure usage (recommended)
+
+Create the order on **your backend** with the secret key, then pass the `orderId` to the app. The amount is fixed on the server and cannot be tampered with.
+
+```jsx
+import React, { useState } from 'react';
+import { Button } from 'react-native';
+import PayulinkCheckout from '@thepayulink/checkout-react-native';
+
+export default function PayScreen() {
+  const [order, setOrder] = useState(null);
+
+  async function startPayment() {
+    // Call YOUR backend, which calls POST /api/orders with the secret key.
+    const { orderId } = await fetch('https://your-backend/create-order', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ packageId: 'kailash-heli', travellers: 2 }),
+    }).then((r) => r.json());
+    setOrder(orderId);
+  }
+
+  return (
+    <>
+      <Button title="Book ₹19,900" onPress={startPayment} />
+      {order && (
+        <PayulinkCheckout
+          visible
+          apiBase="https://eliteyatra.vip"
+          orderId={order}
+          publishableKey="pl_pk_live_xxxxx"
+          prefill={{ name: 'Asha', phone: '9876543210', email: 'asha@example.com' }}
+          onSuccess={(r) => { setOrder(null); console.log('Paid!', r.order_id, r.utr); }}
+          onDismiss={() => setOrder(null)}
+          onError={(e) => { setOrder(null); console.warn(e.message); }}
+        />
+      )}
+    </>
+  );
+}
+```
+
+## Convenience usage (amount from the app)
+
+Only if `PAYULINK_ALLOW_CLIENT_AMOUNT=1` on the server. Less secure — the amount is client-controlled.
+
+```jsx
+<PayulinkCheckout
+  visible={show}
+  apiBase="https://eliteyatra.vip"
+  amount={19900}
+  item="Kailash Mansarovar Yatra"
+  onSuccess={(r) => setShow(false)}
+  onDismiss={() => setShow(false)}
+/>
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `visible` | boolean | Show/hide the checkout modal. |
+| `apiBase` | string | Pay server URL. Default `https://eliteyatra.vip`. |
+| `orderId` | string | Secure: backend-created order id. |
+| `amount` | number | Convenience: rupees (ignored if `orderId` set). |
+| `item` | string | Description (convenience flow). |
+| `publishableKey` | string | `pl_pk_…`, safe to embed. |
+| `prefill` | object | `{ name, phone, email }`. |
+| `onSuccess` | function | `({ order_id, utr, amount })`. Fired once, server-confirmed. |
+| `onDismiss` | function | User closed / hardware back. |
+| `onError` | function | Load or order error. |
+
+## Important: confirm server-side
+
+`onSuccess` is triggered by the webhook-verified status streamed from the server — reliable for UX. For anything money-critical (unlocking a booking, sending tickets), still verify on **your backend** by reading the order status or handling the PayuLink webhook. Never trust the client alone.
+
+## Expo
+
+Works with Expo (Dev Client / prebuild) since it needs `react-native-webview`. It does **not** work in Expo Go if your Expo SDK's Go build excludes the WebView native module — use a development build.
+
+## License
+
+UNLICENSED — internal to Elite Yatra.

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@thepayulink/checkout-react-native",
+  "version": "1.0.0",
+  "description": "Elite Yatra / PayuLink UPI checkout for React Native — opens the secure hosted checkout in a native modal.",
+  "main": "src/index.js",
+  "types": "src/index.d.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "eliteyatra",
+    "payulink",
+    "react-native",
+    "payment",
+    "upi",
+    "checkout"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.64.0",
+    "react-native-webview": ">=11.0.0"
+  },
+  "author": "Elite Yatra",
+  "license": "MIT"
+}

package/src/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface PayulinkPrefill {
+  name?: string;
+  phone?: string;
+  contact?: string;
+  mobile?: string;
+  email?: string;
+}
+
+export interface PayulinkSuccess {
+  order_id: string;
+  utr: string | null;
+  amount?: number;
+}
+
+export interface PayulinkCheckoutProps {
+  visible?: boolean;
+  /** Elite Yatra pay server base URL. Default: https://eliteyatra.vip */
+  apiBase?: string;
+  /** SECURE flow: order id created by your backend via POST /api/orders. */
+  orderId?: string;
+  /** Convenience flow: amount in rupees (ignored when orderId is set). */
+  amount?: number;
+  item?: string;
+  /** Publishable key (pl_pk_…). Safe to embed. */
+  publishableKey?: string;
+  prefill?: PayulinkPrefill;
+  onSuccess?: (result: PayulinkSuccess) => void;
+  onDismiss?: () => void;
+  onError?: (error: Error) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export default function PayulinkCheckout(props: PayulinkCheckoutProps): React.JSX.Element;
+
+export function createCheckout(options: Omit<PayulinkCheckoutProps, 'visible'>): {
+  Component: (extra?: Partial<PayulinkCheckoutProps>) => React.JSX.Element;
+  promise: Promise<PayulinkSuccess>;
+};

package/src/index.js

@@ -0,0 +1,146 @@
+// @thepayulink/checkout-react-native
+// Renders the Elite Yatra hosted checkout inside a native full-screen Modal +
+// WebView, and bridges success/dismiss events back to JS via postMessage.
+import React from 'react';
+import { Modal, View, ActivityIndicator, StyleSheet, BackHandler, Platform } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+const DEFAULT_API_BASE = 'https://eliteyatra.vip';
+
+function buildUrl(apiBase, params) {
+  const base = String(apiBase || DEFAULT_API_BASE).replace(/\/$/, '');
+  const q = Object.entries(params)
+    .filter(([, v]) => v != null && v !== '')
+    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+    .join('&');
+  return `${base}/pay${q ? `?${q}` : ''}`;
+}
+
+/**
+ * <PayulinkCheckout /> — controlled component.
+ *
+ * <PayulinkCheckout
+ *   visible={show}
+ *   apiBase="https://eliteyatra.vip"
+ *   orderId={orderId}                 // SECURE: created by your backend (recommended)
+ *   // or: amount={19900} item="Tour"  // convenience flow
+ *   publishableKey="pl_pk_live_…"
+ *   prefill={{ name, phone, email }}
+ *   onSuccess={(r) => {}}             // { order_id, utr, amount }
+ *   onDismiss={() => setShow(false)}
+ *   onError={(e) => {}}
+ * />
+ */
+export default function PayulinkCheckout(props) {
+  const {
+    visible = true,
+    apiBase = DEFAULT_API_BASE,
+    orderId,
+    amount,
+    item,
+    publishableKey,
+    prefill = {},
+    onSuccess,
+    onDismiss,
+    onError,
+    style,
+  } = props;
+
+  const uri = React.useMemo(
+    () => buildUrl(apiBase, {
+      order_id: orderId,
+      key: publishableKey,
+      amount: orderId ? undefined : amount,
+      item: orderId ? undefined : item,
+      name: prefill.name,
+      phone: prefill.phone || prefill.contact || prefill.mobile,
+      email: prefill.email,
+      back: '', // no in-page navigation; the app owns closing
+    }),
+    [apiBase, orderId, amount, item, publishableKey, prefill.name, prefill.phone, prefill.contact, prefill.mobile, prefill.email]
+  );
+
+  const settled = React.useRef(false);
+  React.useEffect(() => { if (visible) settled.current = false; }, [visible]);
+
+  // Android hardware back closes the sheet.
+  React.useEffect(() => {
+    if (!visible || Platform.OS !== 'android') return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      onDismiss && onDismiss();
+      return true;
+    });
+    return () => sub.remove();
+  }, [visible, onDismiss]);
+
+  const handleMessage = (event) => {
+    let msg;
+    try { msg = JSON.parse(event.nativeEvent.data); } catch { return; }
+    switch (msg && msg.type) {
+      case 'checkout.success':
+        if (settled.current) return;
+        settled.current = true;
+        onSuccess && onSuccess({ order_id: msg.order_id, utr: msg.utr || null, amount: msg.amount });
+        break;
+      case 'checkout.dismiss':
+        onDismiss && onDismiss();
+        break;
+      case 'checkout.error':
+        onError && onError(new Error(msg.error || 'Checkout error'));
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent={false} onRequestClose={() => onDismiss && onDismiss()}>
+      <View style={[styles.fill, style]}>
+        <WebView
+          source={{ uri }}
+          onMessage={handleMessage}
+          startInLoadingState
+          renderLoading={() => (
+            <View style={styles.loading}><ActivityIndicator size="large" /></View>
+          )}
+          onError={(e) => onError && onError(new Error(e.nativeEvent.description || 'WebView error'))}
+          originWhitelist={['*']}
+          javaScriptEnabled
+          domStorageEnabled
+          // Let UPI apps open from upi:// intent links.
+          onShouldStartLoadWithRequest={(r) => {
+            if (/^(upi|tez|phonepe|paytmmp|gpay|intent):/i.test(r.url)) return true;
+            return true;
+          }}
+        />
+      </View>
+    </Modal>
+  );
+}
+
+/**
+ * Imperative helper for apps that prefer a promise over a component.
+ * Returns { Component, promise }. Render <Component/> once; the promise
+ * resolves on success and rejects on dismiss/error.
+ *
+ * Most apps should just use the <PayulinkCheckout/> component above.
+ */
+export function createCheckout(options) {
+  let resolve, reject;
+  const promise = new Promise((res, rej) => { resolve = res; reject = rej; });
+  const Component = (extra) => (
+    <PayulinkCheckout
+      {...options}
+      {...extra}
+      onSuccess={(r) => resolve(r)}
+      onDismiss={() => reject(new Error('dismissed'))}
+      onError={(e) => reject(e)}
+    />
+  );
+  return { Component, promise };
+}
+
+const styles = StyleSheet.create({
+  fill: { flex: 1, backgroundColor: '#0d1117' },
+  loading: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
+});