ZevPay Checkout for React Native

Accept payments in your React Native app using a WebView-based checkout modal.

Installation

npm install @zevpay/react-native react-native-webview

For iOS:

cd ios && pod install

Usage

Component

import { useState } from 'react';
import { ZevPayCheckout } from '@zevpay/react-native';

function CheckoutScreen() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button title="Pay ₦5,000" onPress={() => setVisible(true)} />

      <ZevPayCheckout
        visible={visible}
        publicKey="pk_test_your_public_key"
        email="[email protected]"
        amount={500000}
        onSuccess={(data) => {
          setVisible(false);
          console.log('Paid! Reference:', data.reference);
          // Verify on your server
        }}
        onCancel={() => setVisible(false)}
      />
    </>
  );
}

Hook

import { ZevPayCheckout, useZevPayCheckout } from '@zevpay/react-native';

function CheckoutScreen() {
  const checkout = useZevPayCheckout();

  const handlePay = async () => {
    const result = await checkout.open({
      publicKey: 'pk_test_your_public_key',
      email: '[email protected]',
      amount: 500000,
    });

    if (result.success) {
      console.log('Paid! Reference:', result.reference);
    } else if (result.cancelled) {
      console.log('User cancelled');
    }
  };

  return (
    <>
      <Button title="Pay ₦5,000" onPress={handlePay} />

      {checkout.options && (
        <ZevPayCheckout
          visible={checkout.visible}
          onSuccess={checkout.onSuccess}
          onCancel={checkout.onCancel}
          onError={checkout.onError}
          {...checkout.options}
        />
      )}
    </>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | visible | boolean | Yes | Show/hide the modal | | publicKey | string | Yes | Your public key (pk_live_* or pk_test_*) | | email | string | Yes | Customer email | | amount | number | Yes | Amount in kobo (₦1 = 100 kobo) | | currency | string | No | Currency code (default: NGN) | | reference | string | No | Your unique transaction reference | | firstName | string | No | Customer first name | | lastName | string | No | Customer last name | | metadata | object | No | Additional metadata | | paymentMethods | string[] | No | Payment methods (bank_transfer, payid, card) | | onSuccess | function | Yes | Called with { reference, params } | | onCancel | function | Yes | Called when user closes the modal | | onError | function | No | Called on WebView errors |

Requirements

• React Native 0.72+
• react-native-webview 13+

License

MIT