paypal-spb

React component that renders the latest version of PayPal's Smart Payment Button!

See https://developer.paypal.com/docs/checkout/ for more details

Prerequisites

-PayPal REST App credentials - See https://developer.paypal.com/docs/api/overview/#get-credentials

Install

npm i paypal-spb

Usage

1. Copy and paste the sample object below into your project. This will be used to initialize the PayPal SDK, configure the button, pass payment details, etc. This object will be passed into your component as props.

let paypalConfigData = {
  client_id: "YOUR PAYPAL CLIENT_ID",
  div: "EMPTY DIV TO DISPLAY BUTTON",
  errorDiv: "EMPTY DIV TO DISPLAY ERROR",
  redirect_urls: {
    shipping: "URL FOR SHIPPING/BILLING PAGE (payment not complete)",
    confirm: "URL FOR PAYMENT CONFIRMATION PAGE (payment is complete)"
  },
  sdkCustomize: {
    commit: false,
    disable_funding: "card,bancontact", // card, credit, bancontact
    locale: "en_US"
  },
  style: {
    layout: "vertical", // vertical || horizontal
    color: "gold", // gold || blue || silver || white || black
    shape: "rect", // rect || pill
    label: "checkout", // paypal || checkout || buynow || pay || installment (only in MX or BR)
    tagline: false // must be false for vertical layout
  },
  paymentData: {
    purchase_units: [
      {
        amount: {
          value: "0.01"
        }
      }
    ]
  }
};

You will also need to create two empty divs; One is used to display the PayPal button, the other is used to display any error messages (outputted as a JSON string)

There are two scenarios in which this button can be used:

Scenario 1. From the product details page or cart page

When paypalConfigData.sdkCustomize.commit: false

If this button is placed on the product details or cart page, the payment will not be immediately completed. The user will log into PayPal and select their funding source. NO PAYMENT IS COMPLETED AT THIS TIME. An order id will be generated during this process and after the user leaves the PayPal flow, the orderId will be added to the URL as a query parameter. You can then call the Show order details api to prepopulate the shipping/billing page with the buyers name, email address and shipping/billing address.

https://developer.paypal.com/docs/api/orders/v2/#orders_get

You will then need to capture the payment on this page using the Capture payment for order api.

https://developer.paypal.com/docs/api/orders/v2/#orders_capture

To invoke this flow, set:

paypalConfigData.sdkCustomize.commit: false

The buyer will be redirected to the url set in paypalConfigData.redirectUrls.shipping

Scenario 2. From the shipping/billing page

When paypalConfigData.sdkCustomize.commit: true

If the button is placed on the shipping/billing page, the payment will be completed and you will be redirected to your confirmation page, with the orderId added to the URL as a query parameter.

To invoke this flow, set:

paypalConfigData.sdkCustomize.commit: true

The buyer will be redirected to the url set in paypalConfigData.redirectUrls.confirm

You can then call the Show order details api to retrieve information about the payment.

Sample

I recommend using React.lazy() when adding the component - https://reactjs.org/docs/code-splitting.html#reactlazy

//import PayPalButton from "paypal-spb";
const PayPalButton = React.lazy(() => import("paypal-spb"));

let paypalConfigData = {
    client_id:
      "your_client_id", //obtained at https://developer.paypal.com
    div: "paypal-button-container", // empty div for PayPal button
    errorDiv: "paypal-error-container", // empty div for PayPal error message
    redirect_urls: {
      confirm: "http://localhost:3000/confirmation", // for sdkCustomize.commit = false
      thankyou: "http://localhost:3000/thankyou" // for sdkCustomize.commit = true
    },
    sdkCustomize: {
      commit: false, //if true, payment is completed.
      // display pay now button withinin the PayPal experience
      // and redirect to thank you page.
      //if false, payment is not completed.
      // display a continue button within the PayPal experience
      // and redirect to confirmation page. payment will need to be completed on this page.
      disable_funding: "card,bancontact", // card, credit, bancontact
      locale: "en_US"
    },
    style: {
      layout: "vertical", // vertical || horizontal
      color: "black", // gold || blue || silver || white || black
      shape: "rect", // rect || pill
      label: "checkout", // paypal || checkout || buynow || pay || installment (only in MX or BR)
      tagline: false // must be false for vertical layout
    },
    paymentData: {
      // see link to documentation below for available parameters
      // https://developer.paypal.com/docs/api/orders/v2/#definition-purchase_unit_request
      purchase_units: [
        {
          amount: {
            value: "699.00",
            currency_code: "USD",
            breakdown: {
              item_total: {
                currency_code: "USD",
                value: "699.00"
              }
            }
          },
          description: "Phone",
          items: [
            {
              name: "Phone",
              unit_amount: {
                currency_code: "USD",
                value: "699.00"
              },
              quantity: "1"
            }
          ]
        }
      ]
    }
  };

...

<div id="paypal-button-container">
    <Suspense fallback={<p>Pay with PayPal...</p>}>
        <PayPalButton data={paypalConfigData} />
    </Suspense>
</div>
<div id="paypal-error-container"></div>

Built With

This package was built using React Hooks!

License

This project is licensed under the MIT License - see the LICENSE.md file for details