React Native SDK

The @flowalp/pay-react-native package is FlowAlp's official React Native SDK. It opens the hosted FlowAlp Pay checkout in a WebView, handles deep-link redirects back into your app, and keeps the Merchant API secret on your backend — the same secure pattern described in mobile app integration.

Architecture#

1. Your backend creates a Gateway with POST /Gateway/ and returns the link URL.
2. Your React Native app opens that URL with FlowAlpPayCheckout or FlowAlpPayModal.
3. Deep links (myapp://payment/success?referenceId=…) return the customer to your app.
4. Your backend confirms payment via webhooks or transaction retrieve — never rely on the redirect alone.

Get the SDK#

The SDK source is public on FlowAlp Git:

git clone https://repo.flowalp.com/flowalpsdk/flowalppayreactnative.git
cd flowalppayreactnative
npm install

Install in your React Native app (requires React Native ≥ 0.72 and react-native-webview ≥ 13):

npm install @flowalp/pay-react-native react-native-webview
cd ios && pod install

While developing against a local clone, use a file: dependency in package.json: { "@flowalp/pay-react-native": "file:../flowalppayreactnative" }.

Quick start#

Wrap your app with FlowAlpPayProvider and pass your instance name plus deep link scheme:

import { FlowAlpPayProvider } from '@flowalp/pay-react-native';

export default function App() {
  return (
    <FlowAlpPayProvider
      config={{
        instance: 'demo-shop',
        deepLinkScheme: 'myapp',
      }}
    >
      <CheckoutScreen />
    </FlowAlpPayProvider>
  );
}

Start checkout via your backend with useFlowAlpPayCheckout. Amounts use minor units (CHF 25.00 → 2500) — use the toMinorUnits helper from the SDK:

import { useState } from 'react';
import {
  FlowAlpPayModal,
  useFlowAlpPayCheckout,
  toMinorUnits,
} from '@flowalp/pay-react-native';

function CheckoutScreen() {
  const [visible, setVisible] = useState(false);
  const { checkoutUrl, gateway, isLoading, startCheckout, reset } =
    useFlowAlpPayCheckout({
      createGatewayEndpoint: 'https://api.yourshop.com/payments/gateway',
      headers: { Authorization: 'Bearer <app-user-token>' },
    });

  const handlePay = async () => {
    await startCheckout({
      amount: toMinorUnits(25.0),
      currency: 'CHF',
      purpose: 'Order ORDER-2026-001',
      referenceId: 'ORDER-2026-001',
    });
    setVisible(true);
  };

  return (
    <>
      <Button title="Pay" onPress={handlePay} disabled={isLoading} />
      {checkoutUrl && gateway ? (
        <FlowAlpPayModal
          visible={visible}
          checkoutUrl={checkoutUrl}
          referenceId={gateway.referenceId}
          onRequestClose={() => { setVisible(false); reset(); }}
          onComplete={(result) => {
            setVisible(false);
            reset();
            // Confirm with your backend before fulfilling
          }}
        />
      ) : null}
    </>
  );
}

Backend endpoint#

Your backend must proxy Gateway creation. The mobile app POSTs order details; your server adds the API secret and calls FlowAlp Pay. Return { checkoutUrl, gatewayId, referenceId, amount, currency, status }. Example Express code ships in the repository under server-examples/node-express.js. Set skipResultPage: true on the Gateway so the hosted page redirects immediately to your deep link.

Deep linking#

Register your URL scheme on iOS (Info.plist → CFBundleURLSchemes) and Android (intent-filter with your scheme). Default redirect paths built by the SDK:

• Success: myapp://payment/success?referenceId=ORDER-123
• Failed: myapp://payment/failed?referenceId=ORDER-123
• Cancel: myapp://payment/cancel?referenceId=ORDER-123

Use usePaymentDeepLink to handle redirects when the app returns from the background. Full platform setup is documented in the repository README.

SDK exports#

Testing and go-live#

• Use test credentials from the dashboard and follow testing for developers.
• Authenticate your backend Gateway endpoint — do not leave it open to anonymous callers.
• Fulfill orders only on webhook confirmed or verified API status.
• Review the go-live checklist.