react-paystack-checkout

React hooks and components for Paystack inline checkout, with built-in transaction charge calculation (so the customer, not the merchant, can absorb Paystack's fee).

Browser-only: @paystack/inline-js requires a DOM (window), so this package only works client-side (not during SSR module evaluation).

Install

npm install react-paystack-checkout

Usage

import {usePaystackPayment} from 'react-paystack-checkout';

const config = {
  reference: new Date().getTime().toString(),
  email: '[email protected]',
  amount: 10000, // in kobo
  publicKey: 'pk_test_xxxx',
  bearTransactionCharge: true, // customer pays the Paystack fee on top
};

function PayButton() {
  const initializePayment = usePaystackPayment(config);
  return (
    <button
      onClick={() =>
        initializePayment({
          onSuccess: () => console.log('paid'),
          onClose: () => console.log('closed'),
        })
      }
    >
      Pay
    </button>
  );
}

PaystackButton and PaystackConsumer components are also exported for the same use cases as the original react-paystack.

Transaction charge

import {applyTransactionCharge} from 'react-paystack-checkout';

applyTransactionCharge(10000); // => amount to charge the customer so you still net 10000

Set bearTransactionCharge: true in the payment config to have usePaystackPayment/PaystackButton/PaystackConsumer apply this automatically, or call applyTransactionCharge yourself for full control.

Fee model matches Paystack Nigeria's default: 1.5% + NGN100 (waived under NGN2500), capped at NGN2000.