PayPal Integration With React

In my experience, I have seen some of the undergraduate students facing issues with integrating PayPal to their online payment system in the final year project. For you guys, Let me show you how you can easily integrate PayPal with your react project in just five minutes.

To use PayPal for online payment, you must have a PayPal Business account setup and verified but for the testing, you can use the PayPal sandbox. Once you have your account set up, you will see two different sets of credentials for sandbox and production mode. You will also be able to create sandbox business and customer accounts to test on.

Let’s get started by creating a PayPal account.

Go to the My Apps & Credential and create App. Then you will get client id for your sandbox.

Now that it set up you are good to go. Lets integrate PayPal sandbox with our react project.

Let’s add an easy and simple to use React button component to implement PayPal’s Checkout with Smart Payment Buttons V2 (Version 2).

prahveen@geeklab$ yarn add react-paypal-button-v2

Now create a custom component PayPalBtn and use react-paypal-button-v2 component in it’s render method. We can directly use the react-paypal-button-v2 component in our main container. I recommend to create subcomponent to wrap react-paypal-button-v2 component, as this will be easy for maintenance.

import React from 'react';
import { PayPalButton } from "react-paypal-button-v2";
class PayPalBtn extends React.Component {
    render() {
      const { amount, onSuccess, currency } = this.props;
        return (
            <PayPalButton
              amount={amount}
              currency={currency}
              onSuccess={(details, data) => onSuccess(details, data)}
              options={{
                clientId: "your client id here"
              }}
          />
        );
    }
}
export default PayPaylBtn;

Now use PayPalBtn in our main container PaymentExample. We can pass amount, currency type and onSuccess handler function to our subcomponent. Once payment is a success it will call the paymentHandler function. Here we can send an API call and update our online payment related tables in the backend.

import React, { Component } from 'react';
import PayPalBtn from '../../components/PayPalBtn/PayPalBtn'
export default class PaymentExample extends Component {
    paymentHandler = (details, data) => {
      /** Here you can call your backend API
        endpoint and update the database */
      console.log(details, data);
    }
    render() {
        return ( 
            <div>
                <div>Online Payment Demo</div>
                <PayPalBtn
                    amount = {200}
                    currency = {'USD'}
                    onSuccess={this.paymentHandler}/>
            </div>
        )
    }
}

Boom !! Payment is ready (not fully, just basics 😁)

Here are the results of the success response after a successful payment.

{
  "create_time": "2020-02-08T17:13:01Z",
  "update_time": "2020-02-08T17:14:19Z",
  "id": "50H23140RN256782N",
  "intent": "CAPTURE",
  "status": "COMPLETED",
  "payer": {
    "email_address": "sb-yrq1d1020269@personal.example.com",
    "payer_id": "ABJRKDWZ53HLU",
    "address": {
      "country_code": "US"
    },
    "name": {
      "given_name": "John",
      "surname": "Doe"
    }
  },
  "purchase_units": [
    {
      "reference_id": "default",
      "amount": {
        "value": "200.00",
        "currency_code": "USD"
      },
      "payee": {
        "email_address": "sb-lqdql1022000@business.example.com",
        "merchant_id": "HRSE8UV6MA5MY"
      },
      "shipping": {
        "name": {
          "full_name": "John Doe"
        },
        "address": {
          "address_line_1": "1 Main St",
          "admin_area_2": "San Jose",
          "admin_area_1": "CA",
          "postal_code": "95131",
          "country_code": "US"
        }
      },
      "payments": {
        "captures": [
          {
            "status": "COMPLETED",
            "id": "0RW30702A39392818",
            "final_capture": true,
            "create_time": "2020-02-08T17:14:19Z",
            "update_time": "2020-02-08T17:14:19Z",
            "amount": {
              "value": "200.00",
              "currency_code": "USD"
            },
            "seller_protection": {
              "status": "ELIGIBLE",
              "dispute_categories": [
                "ITEM_NOT_RECEIVED",
                "UNAUTHORIZED_TRANSACTION"
              ]
            },
            "links": [
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/0RW30702A39392818",
                "rel": "self",
                "method": "GET",
                "title": "GET"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/0RW30702A39392818/refund",
                "rel": "refund",
                "method": "POST",
                "title": "POST"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/checkout/orders/50H23140RN256782N",
                "rel": "up",
                "method": "GET",
                "title": "GET"
              }
            ]
          }
        ]
      }
    }
  ],
  "links": [
    {
      "href": "https://api.sandbox.paypal.com/v2/checkout/orders/50H23140RN256782N",
      "rel": "self",
      "method": "GET",
      "title": "GET"
    }
  ]
}
{
  "orderID": "50H23140RN256782N",
  "payerID": "ABJRKDWZ53HLU",
  "paymentID": null,
  "billingToken": null,
  "facilitatorAccessToken": "A21AAErPR7Mq7XqgaAtZNnQRtq6oVB4DDytCoL4PvHaip3C0X5T0Da0GqDNZnZCx7hdl3_R8baBlFW1Y-3Rx-eTEu6lseT6Pg"
}

Finally, my advice do not waste your time and money hiring freelancers for this integration. I encourage you to do this on your own.

If you are still looking for a freelance developer, you can ping me on LinkedIn and I will be happy to help.