PayPal Checkout Integration with React

In this article, we will learn how to integrate PayPal Checkout with React Hooks. However, if you prefer Stripe, here’s Stripe integration with Reactarticle we wrote.

You may also be interested in: “Unimedia’s latest project, Zellar, goes live!”

What is PayPal Checkout?

PayPal checkout seamlessly integrates PayPal’s popular online payments system into your Web App, leveraging the PayPal JavaScript SDK.

Goal

Our goal today is to learn the following tasks:

1. Integrate PayPal Javascript SDK using the PayPay React components wrapper.

2. How to create a sample product.

3. Successfully integrate that product in our React.js App.

3. Successfully redirect to the PayPal Checkout page and record responses.

Prerequisites

• Knowledge of React js and React Hooks.
• React 16.8 or later

Install PayPal CheckOut React Components Package

Using the direct PayPal SDK with our react app can be tasking which is why PayPal createdthe react package. So let’s get started by creatingour react app and installing the package too.

npx create-react-app react-paypal
npm install @paypal/react-paypal-js
cd react-paypal
npm start

Next, we will be getting essential credentials from the PayPal Developer Page. After signing up, you will be able to create an app.

Click the ‘create app’ button and fill in the necessary details. PayPal will provide you with your clientID.

Next, we will be following the documentation of the package to call a sample checkout button.

import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
 
export default function App() {
   return (
       <PayPalScriptProvider options={{ "client-id": "test" }}>
           <PayPalButtons style={{ layout: "horizontal" }} />
       </PayPalScriptProvider>
   );
}

Fill in your client-id to get the sample checkout button shown below. Remember that you should create a .env file for your app credentials if it is a production app.

if it is a production app.

Create A Product Card

Next, we will be creating a product card inspired by our Stripe examples.

   <div className="wrapper">
         <div className="product-img">
           <img
             src="https://cdn.pixabay.com/photo/2021/08/15/06/54/sunflower-6546993_1280.jpg"
             alt="SunFlower"
             height="420"
             width="327"
           />
         </div>
         <div className="product-info">
           <div className="product-text">
             <h1>Sunflower</h1>
             <h2>POPULAR HOUSE PLANT</h2>
             <p>
               Sunflowers are usually tall annual or perennial plants.
               <br />
               Each "flower" is actually a
               <br />
               disc made up of tiny flowers,
               <br />
               to better attract pollinators.{" "}
             </p>
           </div>
 
           <div className="product-price-btn">
             <p>
               <span>$20</span>
             </p>
             <button type="submit">
               Buy now
             </button>
           </div>
     </div>
</div>

Integrate PayPal CheckOut into React App

To integrate PayPal checkout into our app, we need to tweak the API provided by PayPal for creating an order, checking approval, and errors.

Before doing that, let’s call a couple of hooks to handle our expected state.

 const [show, setShow] = useState(false);
 const [success, setSuccess] = useState(false);
 const [ErrorMessage, setErrorMessage] = useState(");
 const [orderID, setOrderID] = useState(false);

We will be calling the show useState Hook when our user is ready to buy the product.

Create An Order

// creates a paypal order
 const createOrder = (data, actions) => {
   return actions.order
     .create({
       purchase_units: [
         {
           description: "Sunflower",
           amount: {
             currency_code: "USD",
             value: 20,
           },
         },
       ],
       // not needed if a shipping address is actually needed
       application_context: {
         shipping_preference: "NO_SHIPPING",
       },
     })
     .then((orderID) => {
       setOrderID(orderID);
       return orderID;
     });
 };

Check Approval

// check Approval
 const onApprove = (data, actions) => {
   return actions.order.capture().then(function (details) {
     const { payer } = details;
     setSuccess(true);
   });
 };

Check Errors

//capture likely error
 const onError = (data, actions) => {
   setPaypalErrorMessage("An Error occured with your payment ");
 };

Here’s our App.jsfile in its entirety.

import React, { useState } from "react";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
import "./App.css";
 
export default function App() {
 const [show, setShow] = useState(false);
 const [success, setSuccess] = useState(false);
 const [ErrorMessage, setErrorMessage] = useState(");
 const [orderID, setOrderID] = useState(false);
 
 // creates a paypal order
 const createOrder = (data, actions) => {
   return actions.order
     .create({
       purchase_units: [
         {
           description: "Sunflower",
           amount: {
             currency_code: "USD",
             value: 20,
           },
         },
       ],
       // not needed if a shipping address is actually needed
       application_context: {
         shipping_preference: "NO_SHIPPING",
       },
     })
     .then((orderID) => {
       setOrderID(orderID);
       return orderID;
     });
 };
 
 // check Approval
 const onApprove = (data, actions) => {
   return actions.order.capture().then(function (details) {
     const { payer } = details;
     setSuccess(true);
   });
 };
 //capture likely error
 const onError = (data, actions) => {
   setErrorMessage("An Error occured with your payment ");
 };
 return (
   <PayPalScriptProvider
     options={{
       "client-id":",
     }}
   >
     <div>
       <div className="wrapper">
         <div className="product-img">
           <img
             src="https://cdn.pixabay.com/photo/2021/08/15/06/54/sunflower-6546993_1280.jpg"
             alt="SunFlower"
             height="420"
             width="327"
           />
         </div>
         <div className="product-info">
           <div className="product-text">
             <h1>Sunflower</h1>
             <h2>POPULAR HOUSE PLANT</h2>
             <p>
               Sunflowers are usually tall annual or perennial plants.
               <br />
               Each "flower" is actually a
               <br />
               disc made up of tiny flowers,
               <br />
               to better attract pollinators.{" "}
             </p>
           </div>
 
           <div className="product-price-btn">
             <p>
               <span>$20</span>
             </p>
             <button type="submit" onClick={() => setShow(true)}>
               Buy now
             </button>
           </div>
         </div>
       </div>
 
       {show ? (
         <PayPalButtons
           style={{ layout: "vertical" }}
           createOrder={createOrder}
           onApprove={onApprove}
         />
       ) : null}
     </div>
   </PayPalScriptProvider>
 );
}

Testing Our PayPal CheckOut React App

Testing our app requires you to create a sandbox account

However, if you find it difficult to create one, you can try our useEffect + console.logmethod, which we will use to check our orderID and if our success state changed successfully.

  useEffect(() => {
      if (success) {
        alert("Payment successful!!");
      }
    },
    [success]
  );
 
 console.log(1, orderID);
 console.log(2, success);
 console.log(3, ErrorMessage);

You can find test card numbers provided by Stripe here, which you can use to test the checkout page.

Summary

That’s all for now. We hope you had fun going through the tutorial. With PayPal Checkout, creating a smooth payment process for your React app is a seamless experience.

You can get the complete code here for reference.

Unimedia Technology

Here at Unimedia Technology we have a team of Cloud Native Developers that can help you develop your most complex AWS and Azure Applications.