React-paypal-checkout-button NPM

React-Paypal-Checkout-Button

A very simple, easy to use React button component for implementing paypal checkout, now enhanced with the power of Custom Hooks 🔥 🔥

Install

npm install --save react-paypal-checkout-button

yarn add react-paypal-checkout-button

Usage

Hooks

import React, { useRef } from 'react'
import { usePayPalCheckout } from 'react-paypal-checkout-button'


const App = () => {


const {
  isLoadingButton,
  errorMessage,
  buttonLoaded,
  onRetry,
  paypalRef
} = usePayPalCheckout({
  clientId: 'a*****************************',
  paypalRef,
  amount: 100,
  currency: 'USD',
  onSuccess: (data, order) => {
    console.log(data, order)
  },
  onError: (error) => {
    console.log(error)
  }


  return (
    {isLoadingButton && <h3>loading..</h3>}

    <div ref={paypalRef} />
  )
})

export default App

Components

import React from 'react'

import PayPalCheckout from 'react-paypal-checkout-button'
import 'react-paypal-checkout-button/dist/index.css'

const App = () => {
  return (
    <PayPalCheckout
      clientId='a*****************************'
      amount={100}
      currency='USD'
      onSuccess={(data, order) => {
        console.log(data, order)
      }}
      onError={(error) => {
        console.log(error)
      }}
    />
  )
}

export default App

Types

All relevant types are bundled and exported with the npm package

/********PayPalCheckout Types**********/
type type PayPalCheckoutProps = {
  intent?: IntentOptions // 'CAPTURE' | 'AUTHORIZE'
  clientId?: string
  amount: number
  currency?: string
  description?: string
  buttonStyles?: StylesOptions
  onSuccess?: (data: OnApproveDataTypes, order: OrderObjectTypes) => void
  onError?: (error: any) => void
}


/********usePayPalCheckout Types**********/
type UsePayPalCheckoutOptions = PayPalCheckoutProps

export type ButtonState = {
  isLoadingButton: boolean
  buttonLoaded: boolean
  errorMessage: string
}

export type UsePayPalCheckoutValues = ButtonState & {
  onRetry: () => void,
  paypalRef: (node: ReactElement | HTMLElement | null | undefined) => void
}

Contributing

we hope to make this package the first option whenever it comes to implemeting paypal checkout, so you are always welcome to contribute to this project.

Fork it!
Create your feature branch: git checkout -b feature-name
commit your changes: git commit -am 'Some commit message
Push to the branch: git push origin feature-name
Submit a pull request :muscle:
Add your username to the contributors' list 😄 🥰