react-paystack Documentation

To initialize a payment, you must provide a configuration object. The amount field must be in the country's lowest currency unit (e.g., Kobo for NGN).

const config = {
    reference: (new Date()).getTime().toString(),
    email: "user@example.com",
    amount: 20000, // Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
    publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};

The example project is bootstrapped with Create React App and uses yarn for script execution. You can use the following commands to manage the development lifecycle:

• Development: Run yarn start to launch the app in development mode at http://localhost:3000. The page reloads automatically on edits.
• Testing: Run yarn test to launch the interactive test runner in watch mode.
• Production Build: Run yarn build to create an optimized, minified production build in the build folder.
• Ejecting: Run yarn eject to remove the single build dependency and copy all configuration files (webpack, Babel, etc.) directly into your project for full control. Warning: This is a one-way operation.

Install the react-paystack library using npm or yarn to add Paystack payment gateway support to your React application.

npm install react-paystack --save

or with yarn

yarn add react-paystack

The PaystackButton component is a pre-built button that handles the payment lifecycle. It accepts the configuration object plus text, onSuccess, and onClose props.

import { PaystackButton } from 'react-paystack';

const config = {
  reference: (new Date()).getTime().toString(),
  email: "user@example.com",
  amount: 20000,
  publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};

function App() {
  const handlePaystackSuccessAction = (reference) => {
    console.log(reference);
  };

  const handlePaystackCloseAction = () => {
    console.log('closed');
  };

  const componentProps = {
    ...config,
    text: 'Paystack Button Implementation',
    onSuccess: (reference) => handlePaystackSuccessAction(reference),
    onClose: handlePaystackCloseAction,
  };

  return <PaystackButton {...componentProps} />;
}

To include extra information like transaction descriptions or user details in the Paystack transaction, add a metadata object to your configuration. The metadata object should contain a custom_fields array of objects, each with display_name, variable_name, and value.

const config = {
  // Your required fields
  metadata: {
    custom_fields: [
      {
        display_name: 'description',
        variable_name: 'description',
        value: 'Funding Wallet'
      }
      // To pass extra metadata, add an object with the same fields as above
    ]
  }
};

The usePaystackPayment hook provides an initializePayment function. You call this function with two arguments: an onSuccess callback (which receives the transaction reference) and an onClose callback.

import { usePaystackPayment } from 'react-paystack';

const config = {
    reference: (new Date()).getTime().toString(),
    email: "user@example.com",
    amount: 20000,
    publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};

const onSuccess = (reference) => {
  console.log(reference);
};

const onClose = () => {
  console.log('closed');
};

const PaystackHookExample = () => {
    const initializePayment = usePaystackPayment(config);
    return (
      <button onClick={() => initializePayment(onSuccess, onClose)}>
        Paystack Hooks Implementation
      </button>
    );
};