> ## Documentation Index
> Fetch the complete documentation index at: https://docs.payracle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK

> Official React Native SDK for Payracle

The official React Native SDK for integrating with the Payracle payment gateway.

## Installation

```bash theme={null}
npm install payracle-react-native react-native-webview
```

<Note>
  If you're using the React Native CLI (not Expo), run `pod install` in your `ios/` directory afterwards to link the WebView.
</Note>

## Usage

### 1. `PayracleClient`

Use `PayracleClient` to call the Payracle REST API directly — generating a virtual account or initiating a checkout.

```typescript theme={null}
import { PayracleClient } from 'payracle-react-native';

const payracle = new PayracleClient({
  secretKey: 'sk_test_12345',
});

const response = await payracle.initializeCheckout({
  amount: 5000,
  email: 'customer@example.com',
});

const checkoutUrl = response.data.checkout_url;
```

<Warning>
  Your secret key must never ship inside a mobile app bundle — anyone can extract it from the compiled binary. Call `PayracleClient` with a secret key only from your own backend, and have your app fetch the resulting `checkout_url` from your server. For calling checkout initialization directly from the app, use a public key (`pk_live_...`) with an `X-Business-ID` header instead — see [Authentication](/authentication).
</Warning>

### 2. `<PayracleCheckout />` component

To securely process a checkout inside your app, render `<PayracleCheckout />`. It opens a full-screen modal that loads the secure Payracle checkout flow in a WebView.

```tsx theme={null}
import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import { PayracleCheckout } from 'payracle-react-native';

export default function App() {
  const [showCheckout, setShowCheckout] = useState(false);
  const [checkoutUrl, setCheckoutUrl] = useState('');

  const startPayment = () => {
    // Fetch this URL from your own backend, which called
    // PayracleClient.initializeCheckout() with your secret key.
    setCheckoutUrl('https://payracle.com/pay/PAY-XXXXXXXXXX');
    setShowCheckout(true);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Pay 5,000 NGN" onPress={startPayment} />

      {showCheckout && (
        <PayracleCheckout
          visible={showCheckout}
          checkoutUrl={checkoutUrl}
          onSuccess={(reference) => {
            setShowCheckout(false);
            Alert.alert('Payment Successful!', `Ref: ${reference}`);
          }}
          onCancel={() => {
            setShowCheckout(false);
            Alert.alert('Payment Cancelled');
          }}
        />
      )}
    </View>
  );
}
```