React Native SDK

The React Native SDK integrates Payment Platform checkout into a React Native app via a WebView component. It supports the Checkout protocol only and provides typed models for building payment requests against your own backend.

The SDK is maintained at openpaymentplatform-net/react_native_openpaymentplatform.

Installation

Install the SDK and its peer dependency:

npm install github:openpaymentplatform-net/react_native_openpaymentplatform
npm install react-native-webview

For Expo projects, use:

expo install react-native-webview

Initialize the SDK

Call initialize once at app startup before making any payment requests:

import { OpenPaymentPlatform } from '@openpaymentplatform/react-native-openpaymentplatform';

OpenPaymentPlatform.instance.initialize({
  backendUrl: 'https://your-checkout-url.example.com',
  merchantKey: 'YOUR_MERCHANT_KEY',
  password: 'YOUR_PASSWORD',
});

Parameter	Description
backendUrl	Your CHECKOUT_URL provided by your account manager
merchantKey	Admin panel → Merchants → your merchant → Test key
password	Admin panel → Merchants → your merchant → Password. Used for hash computation only — never sent in requests.

Create a payment request

import {
  OpenPaymentPlatformRequest,
  OpenPaymentPlatformOperation,
  OpenPaymentPlatformOrder,
} from '@openpaymentplatform/react-native-openpaymentplatform';

const request = new OpenPaymentPlatformRequest({
  operation: OpenPaymentPlatformOperation.purchase,
  successUrl: 'https://your-app.example/payment/success',
  cancelUrl: 'https://your-app.example/payment/cancel',
  errorUrl: 'https://your-app.example/payment/error',
  order: new OpenPaymentPlatformOrder({
    number: 'ORDER-123',
    amount: '10.00',
    currency: 'USD',
  }),
});

Render the checkout

Pass the request to the OpenPaymentPlatformCheckout component:

<OpenPaymentPlatformCheckout controller={controller} />

Available operations

Method	Description
fetchPaymentUrl(request)	Creates a session and returns the checkout URL
checkStatus({ paymentId | orderId })	Retrieves the current payment status
refundPayment({ paymentId, amount })	Issues a full or partial refund
voidPayment({ paymentId })	Voids an authorized payment before capture

Backend requirements

The SDK communicates with Payment Platform through your own backend. Your backend must expose these endpoints:

Endpoint	Purpose
POST /api/v1/session	Creates a payment session. Returns { redirect_url: "..." }
POST /api/v1/payment/status	Returns the current payment status
POST /api/v1/payment/refund	Processes a refund
POST /api/v1/payment/void	Voids a transaction

See Resources and configuration for the full session creation parameter reference.

Related

• Resources and configuration — full parameter reference for the session creation request
• Callbacks — server-to-server payment result notifications
• Redirects and returns — how success_url and cancel_url work