React SDK

Pre-built React components for integrating Reevit payments with beautiful, customizable checkout UI.

Installation

npm install @reevit/react

Quick Start

The recommended production flow creates a checkout session on your backend and passes its short-lived session_secret to ReevitCheckout.

const session = await reevit.checkoutSessions.create(
  {
    amount: 10000,
    currency: 'GHS',
    country: 'GH',
    customer_id: 'customer@example.com',
  },
  { idempotencyKey: `order_${order.id}` }
);

import { ReevitCheckout } from '@reevit/react';
import '@reevit/react/styles.css';

function App({ sessionSecret }: { sessionSecret: string }) {
  return (
    <ReevitCheckout
      sessionSecret={sessionSecret}
      paymentMethods={['card', 'mobile_money']}
      email="customer@example.com"
      phone="0241234567"
      onSuccess={(result) => {
        console.log('Payment success!', result);
        alert(`Payment of ${result.currency} ${result.amount/100} successful!`);
      }}
      onError={(error) => {
        console.error('Payment failed:', error.message);
      }}
    >
      <button className="my-pay-button">Pay GHS 100.00</button>
    </ReevitCheckout>
  );
}

When the shopper continues, the component finalizes the session with the last selected method and provider before opening the PSP. Repeated submissions of the same selection reuse the same intent and access code.

Note: Always import the styles CSS file to get the built-in checkout modal styling.

Props Reference

Prop	Type	Required	Description
`sessionSecret`	`string`	Recommended	Server-created checkout session secret
`publicKey`	`string`	Without `sessionSecret`	Your project’s public key (`pfk_test_...secret` or `pfk_live_...secret`)
`amount`	`number`	Without `sessionSecret`	Amount in smallest unit (e.g., 500 for 5.00)
`currency`	`string`	Without `sessionSecret`	3-letter ISO currency code (GHS, NGN, USD, etc.)
`email`	`string`		Customer’s email address
`phone`	`string`		Customer’s phone (recommended for Mobile Money)
`reference`	`string`		Your own unique transaction reference
`metadata`	`object`		Optional key-value pairs for your own tracking
`paymentMethods`	`string[]`		Enabled methods: `['card', 'mobile_money', 'bank_transfer']`
`theme`	`ReevitTheme`		Customization options
`apiBaseUrl`	`string`		Custom API URL (for self-hosted or testing)
`initialPaymentIntent`	`PaymentIntent`		Pre-created intent for controlled mode
`onSuccess`	`function`		Called when payment is successful
`onError`	`function`		Called when an error occurs
`onClose`	`function`		Called when user dismisses the widget

Theming

Customize the checkout widget to match your brand:

<ReevitCheckout
  publicKey="pfk_test_xxx.secret"
  amount={5000}
  currency="GHS"
  theme={{
    primaryColor: '#6200EE',
    backgroundColor: '#F5F5F5',
    textColor: '#000000',
    borderRadius: '12px',
    fontFamily: "'Segoe UI', Roboto, sans-serif",
    darkMode: true,
  }}
  onSuccess={handleSuccess}
>
  <button>Secure Checkout</button>
</ReevitCheckout>

Theme Options

Property	Type	Description
`primaryColor`	`string`	Primary button and accent color
`backgroundColor`	`string`	Modal background color
`textColor`	`string`	Text color
`borderRadius`	`string`	Border radius for buttons and inputs
`fontFamily`	`string`	Custom font family
`darkMode`	`boolean`	Enable dark mode styling

Controlled Mode

If you prefer to create the payment intent on your backend before opening the checkout, you can use Controlled Mode.

<ReevitCheckout
  publicKey="pfk_test_xxx.secret"
  initialPaymentIntent={myPreCreatedIntent}
  onSuccess={handleSuccess}
>
  <button>Open Pre-paid Checkout</button>
</ReevitCheckout>

In this mode, the SDK skips the initial intent creation step and proceeds directly to payment method selection or provider confirmation.

For full control over the payment flow, use the useReevit hook to build your own custom UI.

import { useReevit } from '@reevit/react';

function CustomCheckout() {
  const {
    status,        // 'idle' | 'loading' | 'ready' | 'method_selected' | 'processing' | 'success' | 'failed'
    paymentIntent, // Created payment intent details
    error,         // Error object if failed
    initialize,    // Start the checkout process
    selectMethod,  // Pick 'card' or 'mobile_money'
    processPayment,// Confirm payment with PSP data
    reset,         // Reset to initial state
    isLoading,     // Loading state boolean
  } = useReevit({
    config: {
      publicKey: 'pfk_test_xxx.secret',
      amount: 5000,
      currency: 'GHS',
      email: 'customer@example.com',
    },
    apiBaseUrl: 'http://localhost:8080', // Optional: for local development
    onSuccess: (result) => console.log('Payment complete!', result),
    onError: (error) => console.error('Payment failed:', error),
  });

  if (status === 'loading') return <div>Loading...</div>;
  if (status === 'success') return <div>Payment successful! ✅</div>;

  return (
    <div>
      {status === 'idle' && (
        <button onClick={() => initialize()}>Start Checkout</button>
      )}
      
      {status === 'ready' && (
        <>
          <h3>Select Payment Method</h3>
          <button onClick={() => selectMethod('card')}>💳 Card</button>
          <button onClick={() => selectMethod('mobile_money')}>📱 Mobile Money</button>
        </>
      )}
      
      {error && (
        <div className="error">
          {error.message}
          <button onClick={reset}>Try Again</button>
        </div>
      )}
    </div>
  );
}

PSP Bridges

For advanced use cases, use individual PSP bridges directly.

Paystack Bridge

The default bridge for card and mobile money payments in Ghana/Nigeria:

import { PaystackBridge } from '@reevit/react';

<PaystackBridge
  publicKey="pfk_test_xxx.secret"
  email="customer@example.com"
  amount={5000}
  currency="GHS"
  reference="TXN_12345"
  channels={['card', 'mobile_money']}
  onSuccess={(result) => console.log('Paid:', result)}
  onError={(err) => console.error(err.message)}
  onClose={() => console.log('Closed')}
/>

Stripe Bridge

For card payments including Apple Pay and Google Pay:

import { StripeBridge } from '@reevit/react';

<StripeBridge
  publishableKey="pfk_test_xxx.secret"
  clientSecret="pi_xxx_secret_xxx" // From your backend
  amount={5000}
  currency="USD"
  reference="your_unique_reference"
  onSuccess={(result) => console.log('Paid:', result.paymentIntentId)}
  onError={(err) => console.error(err.message)}
/>

Monnify Bridge (Nigeria)

For bank transfers and cards in Nigeria:

import { MonnifyBridge } from '@reevit/react';

<MonnifyBridge
  apiKey="MK_TEST_xxx"
  contractCode="1234567890"
  amount={5000}
  currency="NGN"
  reference="TXN_12345"
  customerName="John Doe"
  customerEmail="john@example.com"
  isTestMode={true}
  onSuccess={(result) => console.log('Paid:', result.transactionReference)}
  onError={(err) => console.error(err.message)}
/>

M-Pesa Bridge (Kenya/Tanzania)

M-Pesa uses STK Push - the customer receives a prompt on their phone:

import { MPesaBridge, useMPesaStatusPolling } from '@reevit/react';

function MpesaPayment() {
  const [checkoutId, setCheckoutId] = useState(null);
  
  const { startPolling } = useMPesaStatusPolling(
    '/api/mpesa/status',
    checkoutId,
    {
      onSuccess: (result) => console.log('Paid:', result.transactionId),
      onFailed: (err) => console.error(err.message),
      onTimeout: () => console.log('Timed out'),
    }
  );

  return (
    <MPesaBridge
      apiEndpoint="/api/mpesa/stk-push"
      phoneNumber="254712345678"
      amount={500}
      currency="KES"
      reference="TXN_12345"
      onInitiated={(id) => {
        setCheckoutId(id);
        startPolling();
      }}
      onSuccess={(result) => console.log('Paid!')}
      onError={(err) => console.error(err.message)}
    />
  );
}

Supported Providers

Provider	Countries	Payment Methods
Paystack	NG, GH, ZA, KE	Card, Mobile Money, Bank
Flutterwave	NG, GH, KE, ZA+	Card, Mobile Money, Bank
Hubtel	GH	Mobile Money
Stripe	Global (50+)	Card, Apple Pay, Google Pay
Monnify	NG	Card, Bank Transfer, USSD
M-Pesa	KE, TZ	Mobile Money (STK Push)

Troubleshooting

CORS Errors

If you see CORS errors when connecting to your local backend:

Ensure your backend includes your frontend origin in FRONTEND_ALLOWED_ORIGINS
Check that the apiBaseUrl prop points to the correct backend URL
Verify your API key is valid and registered in the database

Styles Not Loading

Make sure you import the styles:

import '@reevit/react/styles.css';

Payment Failed: Network Error

This usually means the SDK cannot reach the backend:

Check your apiBaseUrl is correct
Ensure the backend is running
For test keys (pfk_test_*), the SDK defaults to sandbox API unless apiBaseUrl is set

Browser Support

Chrome, Firefox, Safari, Edge (latest 2 versions)
Mobile Safari and Chrome on Android/iOS

Overview

Frontend SDKs

Backend SDKs

React SDK

React SDK

Installation

Quick Start

Props Reference

Theming

Theme Options

Controlled Mode

PSP Bridges

Paystack Bridge

Stripe Bridge

Monnify Bridge (Nigeria)

M-Pesa Bridge (Kenya/Tanzania)

Supported Providers

Troubleshooting

CORS Errors

Styles Not Loading

Payment Failed: Network Error

Browser Support

​React SDK

​Installation

​Quick Start

​Props Reference

​Theming

​Theme Options

​Controlled Mode

​PSP Bridges

​Paystack Bridge

​Stripe Bridge

​Monnify Bridge (Nigeria)

​M-Pesa Bridge (Kenya/Tanzania)

​Supported Providers

​Troubleshooting

​CORS Errors

​Styles Not Loading

​Payment Failed: Network Error

​Browser Support

React SDK

Installation

Quick Start

Props Reference

Theming

Theme Options

Controlled Mode

PSP Bridges

Paystack Bridge

Stripe Bridge

Monnify Bridge (Nigeria)

M-Pesa Bridge (Kenya/Tanzania)

Supported Providers

Troubleshooting

CORS Errors

Styles Not Loading

Payment Failed: Network Error

Browser Support