react-smart-payment-buttons

A react integration for PayPal's Smart Payment Buttons.

Installation

Install with npm

npm install --save react-smart-payment-buttons

Install with yarn

yarn add react-smart-payment-buttons

Usage

For the buttons to load, the PayPal JavaScript SDK needs to be globally available.

You can achieve this in two ways:

Load the PayPal SDK with a script tag

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"></script>

Then you are able to use the SmartPaymentButtons component where ever you want:

import SmartPaymentButtons from 'react-smart-payment-buttons';

function MyCheckout() {
  return (
    <div>
      <h1>Checkout</h1>
      <SmartPaymentButtons
        createOrder={...}
        onApprove={...}
      />
    </div>
  );
}

Alternatively, you can also load the script asynchronously:

<script id="paypal-sdk" src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID" async></script>

Now you can tell SmartPaymentButtons to wait until the SDK is loaded by providing the sdkScriptId you chose earlier:

<SmartPaymentButtons
  sdkScriptId="paypal-sdk"
  loading={<Spinner />} // optional
  createOrder={...}
  onApprove={...}
/>

You can add an optional loading prop to display something until the buttons are displayed.

Making the <script> asynchronous is a highly recommend because it reduces the load time of your application.

Alternative: Use the built in PayPalSDKWrapper component

import SmartPaymentButtons, { PayPalSDKWrapper } from 'react-smart-payment-buttons';

function MyCheckout() {
  return (
    <div>
      <h1>Checkout</h1>
      <PayPalSDKWrapper clientId="CLIENT_ID">
        <SmartPaymentButtons
          createOrder={...}
          onApprove={...}
        />
      </PayPalSDKWrapper>
    </div>
  );
}

As you can see, with this option you don't need to the import the script.

This option also reduces the load time of your application like the async script. A second benefit is that the PayPal SDK is only loaded when it's needed: Users who are entering your website may not want to immediatly download a PayPal SDK. By using the wrapper you are able to defer loading the SDK for example to when the users enters the checkout page.

Instead of using the clientId prop you can also create an environment variable REACT_APP_PAYPAL_CLIENT_ID (for create-react-app usage) that contains the id. The PayPalSDKWrapper will pick it up automatically.

Display a loading indicator

It can take a second to load the script with the PayPalSDKWrapper. But you can attach some custom loading that you wan't to display while waiting for the script to load by using the loading property of the PayPalSDKWrapper component.

return (
  <PayPalSDKWrapper
    clientId="CLIENT_ID"
    loading={<Spinner />}
  >
    <SmartPaymentButtons
      createOrder={...}
      onApprove={...}
    />
  </PayPalSDKWrapper>
);

Props

SmartPaymentButtons component

Name	Type	Description (PayPal Docs Link)
createOrder	(data, actions) => any	See createOrder
onApprove	(data, actions) => any	See onApprove
onCancel	(data) => any	See onCancel
onError	(error) => any	See onError
style	Object	See customization
containerStyle	React StyleSheet Object	Style applied to the button's container
containerClassName	string	CSS class applied to the button's container
refresh	mixed	If this value changes the buttons are rerendered
sdkScriptId	string	ID of the script tag loading the PayPal SDK asynchronously
loading	React Node	Only works with sdkScriptId. Is displayed until the SDK is loaded.

PayPalSDKWrapper component

The component accepts all parameters the SDK accepts. See the official Customize SDK documentation for reference.

Attention

• The PayPalSDKWrapper expects the props to be in camelCase instead of kebab-case like the SDK parameters.

• The SDK parameters that take a comma separated list like disable-funding=card,sepa have to be assigned with an array in the props like disableFunding={['card', 'sepa']}.