A very simple, easy to use React button component for implementing paypal checkout
npm install 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 🔥 🔥
 
```
npm install --save react-paypal-checkout-button
or
``
yarn add react-paypal-checkout-button
#### Hooks
`tsx
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 &&
export default App
`
#### Components
`tsx
import React from 'react'
import PayPalCheckout from 'react-paypal-checkout-button'
import 'react-paypal-checkout-button/dist/index.css'
const App = () => {
return (
amount={100}
currency='USD'
onSuccess={(data, order) => {
console.log(data, order)
}}
onError={(error) => {
console.log(error)
}}
/>
)
}
export default App
`
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
}
`
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-namegit commit -am 'Some commit message
- commit your changes: git push origin feature-name`
- Push to the branch:
- Submit a pull request :muscle:
- Add your username to the contributors' list 😄 🥰
MIT © UcheSylvester