Payracle React Native SDK

The official React Native SDK for integrating with the Payracle Payment Gateway.

Installation

npm install payracle-react-native react-native-webview

Note: If you are using React Native CLI, make sure to run pod install in your ios/ directory to link the WebView.

Usage

1. Payracle Client

You can use the PayracleClient to interact directly with the Payracle REST API (for example, generating a virtual account or initiating a checkout).

import { PayracleClient } from 'payracle-react-native';

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

// Create a static virtual account
const response = await payracle.initializeCheckout({
  amount: 5000,
  email: '[email protected]'
});

const checkoutUrl = response.data.checkout_url;

2. The PayracleCheckout Component

To securely process dynamic checkouts inside your app, use the <PayracleCheckout /> component. It renders a full-screen modal overlaying your app, safely loading the secure checkout flow.

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 = () => {
    // 1. In a real app, you would fetch this URL from your backend or using PayracleClient
    setCheckoutUrl('https://checkout.payracle.com/c/...');
    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>
  );
}