Receive payments on a React App

This article guides us through the process of initializing Asyncpay checkout and receiving payments on a React Application.

Introduction

In this guide, we'll walk through using the Asyncpay SDK to receive payments online on a React application. We'll be using Next.js for this article.

Before you begin

In order to follow along with this guide, there are a few prerequisites you'll need to have in place:

1. Create a free Asyncpay account which would allow you have the public key required to follow along this guide.

2. Create the payment channels that Asyncpay can route your checkouts through. You can learn more about payment channels and how to create them here.

Set up the Next Project

The first thing we'll do is to setup an empty Next Project by running the command below in the terminal.

npx create-next-app@latest

You can clone the Github repo to get the final working code being described in this guide.

Create a form to collect payments

We'll then write some React code to create a form that will collect the details we'll use to simulate a payment. We'll store this content in the page.js file.

"use client";
import { useState } from "react";

export default function Home() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [amount, setAmount] = useState("");

  const handleCheckout = (e) => {
    e.preventDefault()
  };
  return (
    <section>
      <h1>A Simple Asyncpay Checkout</h1>
      <hr />
      <form onSubmit={handleCheckout}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            name="firstName"
            type="text"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <input
            name="lastName"
            type="text"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor={"amount"}>Amount</label>
          <input
            type="number"
            name={"amount"}
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
          />
        </div>
        <div>
          <button>Pay NGN {amount}</button>
        </div>
      </form>
    </section>
  );
}

What the code above does is create a simple form with the minimal data needed to create a checkout on Asyncpay. We keep track of all the information in the React state and create a function to allow us initiate a checkout with Asyncpay.

Install Asyncpay CheckoutJS

Asyncpay provides a JS SDK that can be used to initiate checkout for Asyncpay. It exports a function that provides Asyncpay's pop-up checkout experience.

npm install @asyncpay/checkout

Once the package has been installed, you can import the checkout function in your project like so:

import {AsyncpayCheckout} from "@asyncpay/checkout"

The AsyncpayCheckout function allows you to initiate Asyncpay's checkout pop-up experience. We can then import this function to our code and initiate the checkout. Our final code on page.js would look like this:

"use client";
import { useState } from "react";
import { AsyncpayCheckout } from "@asyncpay/checkout";

export default function Home() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [amount, setAmount] = useState("");

  const handleCheckout = (e) => {
    e.preventDefault()
    AsyncpayCheckout({
      publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY,
      customer: {
        firstName,
        lastName,
        email,
      },
      amount,
      onSuccess: () => {
        // Run a function to process the payment
        alert("Payment successful");
      },
      onClose: () => {
        // Run a function whenever the user closes the popup regardless of the payment status
      },
    });
  };
  return (
    <section>
      <h1>A Simple Asyncpay Checkout</h1>
      <hr />
      <form onSubmit={handleCheckout}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input
            name="firstName"
            type="text"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <input
            name="lastName"
            type="text"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <input
            name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor={"amount"}>Amount</label>
          <input
            type="number"
            name={"amount"}
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
          />
        </div>
        <div>
          <button>Pay NGN {amount}</button>
        </div>
      </form>
    </section>
  );
}

You can read more about the AsyncpayCheckout function here

In the code above we call the AsyncpayCheckout function when the form is submitted and this fires the Asyncpay checkout pop-up.

Conclusion