Accept Payments with Paystack in React Native

npm install react-native-paystack-webview react-native-webview
# or
yarn add react-native-paystack-webview react-native-webview

# iOS
cd ios && pod install

For Expo managed workflow, use Expo WebBrowser instead:

npx expo install expo-web-browser

// Node.js backend
app.post('/api/pay/initialize', async (req, res) => {
  var { email, amount } = req.body;
  var reference = 'rn_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6);

  var response = await fetch('https://api.paystack.co/transaction/initialize', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer ' + process.env.PAYSTACK_SECRET_KEY,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      amount: Math.round(amount * 100), // kobo
      reference,
      callback_url: 'https://yourapp.com/payment/callback',
    }),
  });

  var data = await response.json();
  if (!data.status) return res.status(400).json({ error: data.message });

  res.json({
    authorization_url: data.data.authorization_url,
    access_code: data.data.access_code,
    reference: data.data.reference,
  });
});

// PaymentScreen.tsx
import React, { useState } from 'react';
import { View, ActivityIndicator, Alert } from 'react-native';
import PaystackWebView from 'react-native-paystack-webview';

interface PaymentScreenProps {
  route: {
    params: {
      email: string;
      amount: number; // in display units (e.g. NGN 5000)
    };
  };
  navigation: any;
}

export function PaymentScreen({ route, navigation }: PaymentScreenProps) {
  var { email, amount } = route.params;
  var [loading, setLoading] = useState(true);

  return (
    <View style={{ flex: 1 }}>
      <PaystackWebView
        paystackKey="pk_test_xxxxxxxxxxxx"  // Your PUBLIC key
        amount={amount}
        billingEmail={email}
        activityIndicatorColor="green"
        onCancel={() => {
          navigation.goBack();
        }}
        onSuccess={async (response) => {
          // response contains transactionRef
          var reference = response.transactionRef?.reference || response.transactionRef;

          // Verify on your backend
          try {
            var verifyRes = await fetch(
              'https://your-backend.com/api/pay/verify?reference=' + reference
            );
            var result = await verifyRes.json();

            if (result.verified) {
              navigation.navigate('PaymentSuccess', { reference });
            } else {
              Alert.alert('Payment issue', 'Please contact support');
              navigation.goBack();
            }
          } catch (e) {
            Alert.alert('Error', 'Could not verify payment');
            navigation.goBack();
          }
        }}
        autoStart={true}
      />
    </View>
  );
}

Note: paystackKey takes your public key, not the secret key. react-native-paystack-webview loads Paystack's hosted checkout and handles the WebView internally.

For Expo managed workflow, use expo-web-browser to open the authorization URL:

import * as WebBrowser from 'expo-web-browser';

async function startPayment(email: string, amount: number) {
  // Get authorization URL from your backend
  var response = await fetch('https://your-backend.com/api/pay/initialize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, amount }),
  });
  var data = await response.json();

  if (!data.authorization_url) {
    Alert.alert('Error', 'Could not initialize payment');
    return;
  }

  // Open in WebBrowser
  var result = await WebBrowser.openAuthSessionAsync(
    data.authorization_url,
    'yourapp://payment/callback'  // Deep link callback
  );

  if (result.type === 'success') {
    var url = new URL(result.url);
    var reference = url.searchParams.get('reference') || url.searchParams.get('trxref');
    if (reference) {
      await verifyPayment(reference);
    }
  }
}

Deep link handling requires configuring the scheme in your app.json and setting up deep link routing.

This guide is part of the Paystack integration guides by language and framework series.

Next: Verify Paystack Payments in React Native

Sign up for the McTaba newsletter