Mobile SDK (React Native)

npx expo prebuild

Your backend  →  POST /v1/mobile/session (secret key)  →  { session_id, client_secret, methods }
Mobile app    →  PaymentSheet (publishable key)         →  server-confirmed result

curl -X POST https://api.paybridgenp.com/v1/mobile/session \
  -H "Authorization: Bearer sk_live_..." \
  -H "Idempotency-Key: order_123_mobile" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 245000,
    "currency": "NPR",
    "customer": {
      "name": "Ram Bahadur",
      "email": "ram@example.com",
      "phone": "98XXXXXXXX"
    }
  }'

{
  "session_id": "cs_...",
  "client_secret": "mcs_...",
  "amount": 245000,
  "expires_at": "2026-08-16T12:15:00Z",
  "methods": [
    { "id": "fonepay_qr", "provider": "fonepay", "label": "Fonepay QR" },
    { "id": "bank_intent", "provider": "fonepay", "label": "Bank App", "banks": [ ... ] },
    { "id": "esewa", "provider": "esewa", "label": "eSewa", "esewa_intent_eligible": true },
    { "id": "khalti", "provider": "khalti", "label": "Khalti" }
  ]
}

import { usePaymentSheet, PaymentSheet } from "@paybridge-np/mobile-sdk";

export default function CheckoutScreen() {
  const { present, paymentSheetProps } = usePaymentSheet({
    publishableKey: "pk_live_...",
    // Required for eSewa Intent. Configure the same scheme in app.json.
    returnUrl: "myapp://paybridge/return",
    // Use config: { baseUrl: "https://staging-api.example.com" } outside production.
    fetchSession: () =>
      fetch("https://your-backend.com/api/mobile-session", { method: "POST" })
        .then((r) => r.json()),
    onComplete: ({ status, sessionId, paymentPending }) => {
      if (status === "success") console.log("server reports paid", sessionId);
      // Expired with paymentPending: the bank may still approve it. Keep the order open.
    },
    onCancel: (info) => {
      // info.paymentPending: a payment for this session may still complete.
      // Do not create a new order or session for it; wait for your webhook.
    },
    onError: (err) => console.error(err),
  });

  return (
    <>
      <Button title="Pay" onPress={present} />
      <PaymentSheet {...paymentSheetProps} />
    </>
  );
}

type PaymentSheetResult = {
  status: "success" | "failed" | "expired" | "cancelled";
  sessionId: string;
  provider: "fonepay" | "esewa" | "khalti" | null;
  paymentPending?: boolean; // the bank may still approve it: keep the order open
  paymentId?: string;       // pay_..., on success when the server reported it
};

type PaymentSheetDismissInfo = {
  sessionId: string;
  paymentPending: boolean;  // do not start a new payment for this order
  provider: "fonepay" | "esewa" | "khalti" | null;
};

import { usePayBridgeNP, ProviderSheet } from "@paybridge-np/mobile-sdk";

export default function CheckoutScreen() {
  const { present, sheetProps } = usePayBridgeNP({
    createSession: async (provider) => {
      const res = await fetch("https://your-backend.com/api/mobile-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ provider, amount: 5000 }),
      });
      return res.json();
    },
    amount: 5000, // paisa - shown in sheet before session is created
    onSuccess: (result) => console.log("paid", result.payment_id),
    onFailure: (result) => console.log("failed", result.error),
    onCancel: () => console.log("cancelled"),
  });

  return (
    <>
      <Button title="Pay NPR 50" onPress={present} />
      <ProviderSheet {...sheetProps} />
    </>
  );
}

import { useState, useEffect } from "react";
import { usePayBridgeNP, ProviderSheet } from "@paybridge-np/mobile-sdk";
import type { MobileSession } from "@paybridge-np/mobile-sdk";

export default function CheckoutScreen() {
  const [session, setSession] = useState<MobileSession | null>(null);

  useEffect(() => {
    fetch("https://your-backend.com/api/mobile-session", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ provider: "khalti", amount: 5000 }),
    })
      .then((r) => r.json())
      .then(setSession);
  }, []);

  const { present, sheetProps } = usePayBridgeNP({
    session,
    onSuccess: (result) => console.log("paid", result.payment_id),
    onFailure: (result) => console.log("failed", result.error),
    onCancel: () => console.log("cancelled"),
  });

  return (
    <>
      <Button title="Pay" onPress={present} disabled={!session} />
      <ProviderSheet {...sheetProps} />
    </>
  );
}

import { ProviderSheet } from "@paybridge-np/mobile-sdk";

<ProviderSheet
  visible={sheetVisible}
  createSession={handleCreateSession}
  amount={5000}
  onSuccess={handleSuccess}
  onFailure={handleFailure}
  onCancel={handleCancel}
/>

type CheckoutResult = {
  status: "success" | "failed" | "cancelled";
  payment_id?: string;
  amount?: number;        // paisa
  provider?: "esewa" | "khalti";
  provider_ref?: string;
  error?: string;
};

type MobileSession = {
  session_id: string;
  expires_at: string;    // ISO timestamp - expires in 15 minutes
  provider: "esewa" | "khalti";
  amount: number;        // paisa
  native_params: Record<string, string | number>;
};