react-paypal-checkout-button
v2.0.3
Published
A very simple, easy to use React button component for implementing paypal checkout
Downloads
70
Maintainers
Readme
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
or
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 😄 🥰
License
MIT © UcheSylvester