Skip to content
This repository has been archived by the owner on Feb 13, 2022. It is now read-only.

A button component to implement PayPal's Express Checkout in React

Notifications You must be signed in to change notification settings

andrewangelle/react-paypal-button

Repository files navigation

React-Paypal-Button

This repository is DEPRECATED. Please see PayPal's supported solution

npm version CircleCI

A button component to implement PayPal's Express Checkout in React

Prerequisites

  • To use PayPal's Express Checkout you must have a PayPal Business account set up and verified. After this is done, you'll have access to your API credentials to use with this button. Once you have your account set up you will have 2 different sets of credentials for sandbox mode and prouduction mode. Both will have a clientID, this is what you will use to pass to paypalOptions.

  • Because the internals of this library use hooks, npm version 4.x.x and above requires a peer dependency of react-v16.8.x react-dom-v16.8.x.

Installation

$ npm install react-paypal-button --save

Usage

import { PayPalButton } from 'react-paypal-button'

export default function App() {
  const paypalOptions = {
    clientId: '12345',
    intent: 'capture'
  }

  const buttonStyles = {
    layout: 'vertical',
    shape: 'rect',
  }
  return (
    <PayPalButton
      paypalOptions={paypalOptions}
      buttonStyles={buttonStyles}
      amount={1.00}
    />
  )
}

Types

  • All relevant types are bundled and exported with the npm package
type PayPalButtonProps = {
  paypalOptions: PaypalOptions;
  buttonStyles: ButtonStylingOptions;
  amount: number;
  subscriptionPlanId?: string;
  onApprove?: (data, authId) => void;
  onPaymentStart?: () => void;
  onPaymentSuccess?: (response: OnCaptureData) => void;
  onPaymentError?: (msg: string) => void;
  onPaymentCancel?: (data: OnCancelData) => void;
  onShippingChange?: (data: OnShippingChangeData) =>
    Promise<void | string | number> |
    string |
    number |
    void;
}

Development

Install dependencies:

$ npm install

Run the example app at http://localhost:8008:

$ npm start

Generate UMD output in the bin folder:

$ npm run build

Run tests in watch mode:

$ npm test

Perform a single run of tests:

$ npm run test:once

License

MIT