Paystack Payment Integration in React

This article attempts to share insight on how to integrate a Paystack Payment Gateway into a React Application. This article assumes the reader already has a Paystack (business) account and has access to the Secret and Public Keys.

For more information on how to set up a Paystack account check out this Youtube link here.

I will focus on integrating a Paystack Payment gateway into a React Application using your public key with the help of the “react-paystack” library.

The code for this article is hosted on GitHub here.

I will divide the process into three main steps.

STEP 1 – Install the Library

We need to install the “react-paystack” library in the React application in order to make use of it.

Run npm install react-paystack on the terminal to install this.

Why use a Library? Libraries generally help to make work faster and allow easy implementation of features.

After successful installation of our Library we proceed to import the library into the component where we would make use of it import { usePaystackPayment } from "react-paystack";

STEP 2 - Configuration

In this next step, we will configure the library. First, we create a config object. The config contains some values needed for our Paystack Integration, like the email, amount to bill, public key attached to your account.

• reference: It is not required. Paystack auto-generates this if not specified. Reference is a unique id for the transaction that is about to be made.

• email: It is required, so you should specify the email of the person making the Payment so that Paystack can send a transaction receipt upon successful/failed payments.

• amount: It is required, this specifies the amount to charge the payee, [note: Paystack reads the amount in Kobo(lowest currency value), so if you want to bill 1000 Naira, the amount will have to 100000 Kobo]

• publicKey: It is required, this help to connect to your specific paystack account, each business account has its unique keys, [note: Paystack generates two public keys with prefixes pk-test- the other with pk-live-, as the prefixes denote when deploying into production only make use of the pk-live-]

Other values that can go into the config object more on this can be found here.

We have an option with this Library to create two callbacks functions, one that runs if the payment was successful and the other runs if the payment gateway was closed without successful payment.

STEP 3 - Trigger Payment Gateway

After doing the above we can then initialize/trigger the Paystack Payment Gateway using the following code snippets:

• Initialized first const initializePayment = usePaystackPayment(config);

• Triggers the pop up initializePayment(onSuccess, onClose);

In the example code, I initialized this on form submit. The email and amount specified are then updated in our config object.

If we cancel/close the payment gateway, the “onClose” callback function created in step 2 is triggered. If payment was successful, the “onSuccess” callback function runs.

In conclusion, I hope this article can help you with integrating Paystack into a React Application. Below are more detailed resources you can check out for more information. The code for this article is hosted on GitHub here.

Reference/ Additional Resources:

• https://www.npmjs.com/package/react-paystack

• https://paystack.com/docs/payments/accept-payments

• https://paystack.com/docs/libraries-and-plugins/libraries/