Integrating Thepeer’s Checkout In React Applications

Thepeer provides technological infrastructure via SDKs and libraries for businesses to easily integrate and support fast, direct, and efficient transactions.

At the moment, you can integrate Thepeer to handle checkout for your business, directly charge from your user’s wallets on other businesses, as well as send funds across wallets.

In this article, you will learn how to integrate Thepeer’s Checkout on React using its React library.

Prerequisites

The following are required to follow this article:

• A valid Thepeer account.
• Basic understanding of Typescript and React.

Don’t fret! We’re only going to use a bit of Typescript so it’s fine if you’re not familiar with it.

In this article, we’ll be making use of the open-source shopping cart application by Jefferson Ribeiro.

Setting up

We’ll start by cloning the application from GitHub:

$ git clone https://github.com/jeffersonRibeiro/react-shopping-cart.git

Navigate into the application’s directory:

$ cd react-shopping-cart

Install the application’s dependencies:

$ npm install

Run the application to preview it on http://localhost:3000:

$ npm run start

Integrating Thepeer

The first step is to retrieve the public key from the API Keys & Webhooks tab on your settings page.

Create an environment file, .env, and add the public key:

REACT_APP_THEPEER_PUBLIC_KEY='[your-public-key]'

Next, install Thepeer’s React library:

$ npm install thepeer-react

In src/components/Cart/Cart.tsx, import the useCheckout hook from thepeer-react:

import { useState } from "react";
import { useCheckout } from "thepeer-react";

The useCheckout hook provides customers with a smart checkout process. Next, let’s create state values for the user’s name and email:

const [email, setEmail] = useState<string>("")
const [name, setName] = useState<string>("")

After completing that, we’ll create a configuration object for the library’s useCheckout hook:

const config = {
    publicKey: process.env.REACT_APP_THEPEER_PUBLIC_KEY,
    amount: total.totalPrice * 100,
    email: email,
    currency: 'USD',
  }

In the code block above, we have set the currency to USD, which can be set to NGN as well. The amount is usually the smallest unit of the currency. For example, if the currency is set to USD, the amount should be in cents and if it’s NGN, Kobo.

With the config object in place, let’s create an event response type for the payment hook callback methods:

type EventResponse = {
    type: string
    data: undefined | Object
  }

Next, we configure the payment hooks:

const handleCheckoutPayment = useCheckout({
    ...config,
    onSuccess: (response: EventResponse) => {
      console.log("🚀 onSuccess", response);
    },
    onError: (response: EventResponse) => {
      console.log("🚀 onError", response);
    },
    onClose: (response: EventResponse) => {
      console.log("🚀 onClose", response);
    },
  });

In the code block above, the useCheckout hook is configured with the config values we defined earlier. The hook has three callback functions:

• onSuccess: The response returned when a transaction is successful is defined here.
• onError: The response returned when there’s an error performing a transaction is defined here.
• onClose: The response returned when the Thepeer modal is closed is defined here.

Now let’s replace the handleCheckout() function to proceed to a smart checkout if the cart isn’t empty:

const handleCheckout = async () => {
    if (total.productQuantity) {
      handleCheckoutPayment();
    } else {
      alert('Add some product in the cart!');
    }
  };

The current checkout form does not contain the fields needed to index a user:

Hence, we update the CartFooter style and add a CartInput style in src/components/Cart/style.ts:

export const CartFooter = styled.div`
  box-sizing: border-box;
  padding: 5%;
  position: relative;
  bottom: 0;
  width: 100%;
  height: 200px;
  z-index: 2;
  background-color: ${({ theme }) => theme.colors.primary};

  &::before {
    content: '';
    width: 100%;
    height: 20px;
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
  }
`;

export const CartInput = styled.input`
  font-size: 18px;
  padding: 10px;
  margin: 10px;
  background: #4d4f85;
  border: none;
  border-radius: 3px;

  ::placeholder {
    color: #eae9d7;
  }
`;

Then we update this checkout bar:

<S.CheckoutButton onClick={handleCheckout} autoFocus>
	Checkout
</S.CheckoutButton>

Update the snippet above with the snippet below:

<S.CartInput type="name" placeholder="Abdulazeez Abdulazeez" value={name} onChange={(e) => setName(e.target.value)}/>
<S.CartInput type="email" placeholder="abdulazeez@shop.com" value={email} onChange={(e) => setEmail(e.target.value)}/>
<S.CheckoutButton onClick={handleCheckout} autoFocus>
	Checkout
</S.CheckoutButton>

In the snippet above, we’ve added input fields for name and email. We also added checkout buttons to enable smart checkout with Thepeer.

Let’s restart the application:

$ npm run start

The checkout page now has a new look:

Test payments

Now that we have successfully integrated Thepeer into our shopping cart, let’s attempt to pay for a few goods by taking the following steps:

1. Select items
2. Fill in your name and email
3. Proceed to checkout

After clicking on CHECKOUT, the payment modal is displayed:

Let’s go with Venmo. Providing the necessary details, which can be found on Thepeer’s SDK page, brings up the payment confirmation:

Conclusion

Thepeer’s libraries provide the flexibility to extend payment infrastructure to businesses. In this article, we learnt how to integrate the React library into a shopping cart application.

You can play with the application on CodeSandbox.