Implementing Paystack in a React Project: A Simple Guide

This was my first try at integrating Paystack into a web application, and I’m excited to share the process with you!

Obtaining PayStack API Keys

To get started, you'll need API keys from Paystack. Follow these steps:

1. Log in or sign up for a PayStack account.

2. If you don't have a business set up, create a new one and configure it for test mode.

3. Access the business settings and obtain the test API key provided by PayStack in the API-keys & webhooks section.

   Installing React-Paystack

   Next, install the react-paystack package using either npm or yarn:

using npm - npm install react-paystack --save
using yarn- yarn add react-paystack

Implementing Paystack in React

The react-paystack library provides three ways to integrate Paystack into a React application:
Using hooks provided by the library

Using a button provided by the library

Using a context consumer provided by the library

For this guide, I’ll focus on using the Paystack button, but you can check the official documentation for the other methods.

Step 1: Import the Paystack Library

After installation, import the Paystack button into your component:

import { PaystackButton } from 'react-paystack';

Step 2: Integrate Paystack API into Your Website

I’m keeping this implementation as simple as possible, but remember to tailor it to your specific project needs.

Define Paystack Configuration

const publicKey = 'pk_test_0768856f9f0dc26115478a71009998b9b266e038'

 const onSuccess = (reference) => {
       setProcessing(false);
    setMsg(`Payment successful! Reference: ${reference.reference}`);
  };

  const onClose = () => {
     setProcessing(false);
    setMsg("Payment popup was closed. Please try again.");
  };
    const componentProps = {
      reference: (new Date()).getTime().toString(),
      email,
      amount: amount * 100,
      metadata: {
      fullName,
      phoneNumber,
      },
      publicKey,
      text: 'Check out Now',
      onSuccess,
      onClose,
  };

const handleProcessing = () => {
  setProcessing(true);
};

Step 3: Add the Paystack Button

Finally, add the PaystackButton component to your checkout page:

<PaystackButton type='submit' {...componentProps} />

That’s it🎉

And just like that—your Paystack integration is live! ✨😁

If you're interested in how I tailored this for my web app, I'll include screenshots of the cart tab and payment integration in this article. However, you can check out the code [here]