React Native SDK

@elebne/pay-react-native is the client SDK for Elebne Pay on React Native — the RN counterpart of @elebne/pay-react. Same behaviour, same backend contract: it renders the hosted /embed surface in a react-native-webview WebView instead of an iframe, re-verifies the result server-side, and shows a native success screen.

Install

npm install @elebne/pay-react-native react-native-webview

react, react-native, and react-native-webview (>= 13) are peer dependencies.

The three flows

The API mirrors the React SDK exactly — see that page for the props tables. The three flows are identical.

import { ElebneCheckoutProvider, EmbedCheckout } from '@elebne/pay-react-native';

<ElebneCheckoutProvider
  config={{ env: 'production' }}
  options={{ fetchClientSecret: async () => (await createIntentOnMyServer()).clientSecret }}
>
  <EmbedCheckout
    presentation="modal"
    onPaid={(s) => console.log('paid', s.referenceNumber)}
    onCancelled={() => {}}
    onError={(e) => console.error(e.code)}
  />
</ElebneCheckoutProvider>

<ElebneCheckoutProvider
  config={{ env: 'production' }}
  options={{ publishableKey: 'pk_live_…', priceId: 'abc123', quantity: 2 }}
>
  <EmbedCheckout presentation="inline" onPaid={handlePaid} />
</ElebneCheckoutProvider>

<ElebneCheckoutProvider
  config={{ env: 'production' }}
  options={{ publishableKey: 'pk_live_…', merchantOrderId: 'ORDER-1', flow: 'verify' }}
>
  <EmbedCheckout onPaid={handlePaid} />
</ElebneCheckoutProvider>

Presentation

• presentation="modal" opens a full-screen RN <Modal> with a header and close control. cancelOnClose also cancels the intent when the modal is dismissed.
• presentation="inline" mounts the WebView in the view tree, with a height driven by the embed's resize events (default 480).

Guarantees

• Server re-verification — the WebView postMessage (delivered via window.ReactNativeWebView.postMessage) is only a hint; the SDK calls GET /checkout/session and fires onPaid only when the server confirms a terminal PAID.
• No secret leakage — the clientSecret travels only in the WebView URL fragment (#cs=), never a query string; no sk_ key ever touches the SDK.
• Fallback poll — if the bridge message never arrives, a 3 s poll of GET /checkout/session still settles the checkout (disable with poll={false}).

Success screen & imperative control

A native <SuccessScreen> renders on a confirmed terminal status. Override it with renderSuccess={(session) => <MyView/>}, or disable it with showSuccess={false} and handle onPaid yourself. useElebneCheckout() (inside the Provider) returns { status, session, error, cancel }.

Environments & sandbox

config={{ env: 'production' }}   // https://api.elebne.ai/api/v1 + https://elebne.ai/embed
config={{ env: 'staging' }}      // https://api.staging.elebne.ai/api/v1 + https://pay.staging.elebne.ai/embed

// Local dev only — override both endpoints
config={{ baseUrl: 'http://localhost:3000/api/v1', embedUrl: 'http://localhost:3100/embed' }}

Sandbox vs live is decided by the key: a pk_test_ / sk_test_ key yields a sandbox intent, surfaced as session.sandbox (a badge on the success screen). There is no separate sandbox hostname.

Next steps

• React SDK — the full props reference (same API)
• Flutter SDK — the same checkout for Flutter
• PHP SDK / Java SDK — mint the clientSecret for Flow A
• Webhooks — confirm payments server-side