Skip to content
This repository has been archived by the owner. It is now read-only.

andrewangelle/react-paypal-button

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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