React Native SDK

The official Plexy client-side SDK for React Native. One JavaScript API for both iOS and Android, built on top of the native iOS and Android SDKs.

Requirements

React Native 0.71+
iOS 15.0+ / Android 7.0 (API 24)+

Installation

npm install @plexy/react-native
# or
yarn add @plexy/react-native

iOS setup

cd ios && pod install

Android setup

No additional configuration is required. The Plexy SDK is autolinked.

Quick Start

import { PlexyProvider, useCheckout } from '@plexy/react-native';

export default function App() {
  return (
    <PlexyProvider
      clientKey={process.env.EXPO_PUBLIC_PLEXY_CLIENT_KEY!}
      environment="test"
    >
      <CheckoutScreen />
    </PlexyProvider>
  );
}

function CheckoutScreen() {
  const { startCheckout } = useCheckout();

  const handlePay = async () => {
    const session = await fetchSessionFromBackend();

    const result = await startCheckout({
      sessionId: session.id,
      sessionData: session.sessionData,
    });

    if (result.status === 'completed') {
      // Payment successful
    }
  };

  return <Button title="Pay 100 KZT" onPress={handlePay} />;
}

Creating a Session

Sessions are created from your backend by calling the Plexy REST API directly:

const session = await plexy.checkout.sessions.create({
  amount: { value: 10000, currency: 'KZT' },
  reference: 'ORDER-12345',
  returnUrl: 'yourapp://checkout/result',
});

Pass session.id and session.sessionData to your mobile app.

Drop-in

Drop-in is presented as a native modal:

const result = await startCheckout({
  sessionId,
  sessionData,
  configuration: {
    locale: 'en-KZ',
    showRemovePaymentMethodButton: true,
    card: {
      holderNameRequired: true,
      showStorePaymentField: true,
    },
  },
});

Components

Use individual Components for a custom checkout layout:

import { CardComponent } from '@plexy/react-native';

<CardComponent
  paymentMethod={cardPaymentMethod}
  onSubmit={(state) => {
    // Send state.data to your backend
  }}
  onError={(error) => {
    console.error(error);
  }}
/>

Apple Pay

Configure your merchant identifier in app.json (Expo) or Info.plist:

<key>com.apple.developer.in-app-payments</key>
<array>
  <string>merchant.money.plexy.example</string>
</array>

Enable Apple Pay in your checkout configuration:

configuration: {
  applePay: {
    merchantIdentifier: 'merchant.money.plexy.example',
    merchantName: 'Your Store',
    summaryItems: [{ label: 'Order', amount: '100.00' }],
  },
}

Google Pay

configuration: {
  googlePay: {
    merchantAccount: 'YOUR_MERCHANT_ACCOUNT',
    countryCode: 'KZ',
    amount: { value: 10000, currency: 'KZT' },
  },
}

Deep Links

Handle redirect-based payment methods (e.g., 3D Secure) by registering a URL scheme:

import { Linking } from 'react-native';
import { handleRedirect } from '@plexy/react-native';

Linking.addEventListener('url', ({ url }) => {
  handleRedirect(url);
});

Error Handling

try {
  const result = await startCheckout({ sessionId, sessionData });
} catch (error) {
  if (error.code === 'cancelled') {
    // User cancelled
  } else if (error.code === 'network_error') {
    // Show retry
  }
}

Expo

The SDK works with Expo's prebuild workflow. After installing the package, run:

npx expo prebuild --clean

The SDK is not compatible with Expo Go because it includes native modules.

React Native SDK

On this page