React Native SDK

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

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;

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>
  );
}