Integrating Paystack Payment Gateway into a React App

Paystack is a popular payment gateway that allows businesses to accept payments online in Nigeria, Ghana and several other African countries. Integrating Paystack into a React app can seem daunting at first, but it's actually quite straightforward. In this article, we'll walk you through the steps involved in integrating Paystack into your React app.

Step 1: Create a Paystack account

Before you can integrate Paystack into your React app, you need to create a Paystack account. To create an account, go to https://dashboard.paystack.com/#/signup and follow the instructions to sign up. Once you've signed up, you'll be given an API key that you'll use to integrate Paystack into your app. Make sure to set up the 2FA to secure your account.

Step 2: Install the Paystack SDK

The next step is to install the Paystack SDK in your React app. To do this, you can use npm or yarn. Open your terminal and run the following command:

yarn add react-paystack

npm install react-paystack

Step 3: Configure the Paystack SDK

After installing the Paystack SDK, you must configure it with your Public API keys. Under API Keys & Webhooks in your Paystack settings, you will find Public and Secret keys for Test and Live environments. When accepting payment on the client side of our application, we ONLY use the Public keys. Secret keys are to be used ONLY on the server side.

To configure the SDK, create a new file in your React app eg. PayButton.js

In this file, import the react-paystack library and configure it with your public API key stored in .env

import React from 'react';
import { PaystackButton } from 'react-paystack'

const PayButton = ({ amount, email }) => {
  const publicKey = process.env.REACT_APP_PS_PUBLIC_TEST_KEY;
  const [reference, setReference] = React.useState('');

  const handlePaystackSuccessAction = (reference) => {
    // handle payment success
  }

  const componentProps = {
    email,
    amount,
    publicKey,
    text: 'Pay Now',
    onSuccess: (reference) => handlePaystackSuccessAction(reference),
    onClose: () => alert('Payment canceled by user.'),
  };

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

export default PayButton;

.env file should look like this

REACT_APP_PS_PUBLIC_TEST_KEY=pk_test_xxxxxxxxxxxxxxxxxxxx
REACT_APP_PS_PUBLIC_LIVE_KEY=pk_live_xxxxxxxxxxxxxxxxxxxx

The react-paystack package offers 3 different ways to accept payments from the client application. We will use the PaystackButton implementation in this article.

The 3 implementation options:

1. By using hooks provided by the library - usePaystackPayment

2. By using a button provided by the library - PaystackButton

3. By using a context consumer provided by the library - PaystackConsumer

As you can see from our componentProps in the PayButton.js, there are some required parameters to configure our PaystackButton

1. email - Customer's email address

2. amount - The amount we're charging the customer, Amount is in the country's lowest currency. e.g. kobo or pesewas. amount * 100

3. publicKey - Remember, public keys for client-side code always

4. text - The text you want to be displayed on your button

5. onSuccess - A function that will run after a successful transaction is completed

6. onClose - A function that will run when the customer closes the Paystack Checkout

If the currency for the transaction is not already set on your Paystack dashboard, you will be required to pass that parameter as well.

Step 4: Add PayButton to your React app

Now that the PaystackButton is configured, you can use the PayButton component to accept payment. To do this, import the PayButton component from PayButton.js and use it in your app, like this:

import React from 'react';
import PayButton from './paystackConfig';

const App = () => {
  const amount = 30000;
  const email = 'hackman@jonhdoe.com';

  return (
    <div>
      <h1>Simple Pay Page</h1>
      <PayButton amount={amount} email={email} />
    </div>
  );
};

export default App;

Step 5: Test the payment process

We are all set and ready to accept payment from our customers. Click on the PayButton and select the payment channel from the payment modal. The payment option available to customers is set in your Paystack dashboard under preferences.

Conclusion

So, if you're a developer looking to accept payments online in your React app, give Paystack a try. Let's help local businesses accept payment online.

You can read more on the Paystack Docs here