This is a custom Paypal button component for front-end integration. It provides customizations, styles and improved readability for a better user experience. This component is built with Next.JS and Typescript.
- Clone the repository
- Run npm/yarn install to install the dependencies
- Set the following environment variables in the .env file:
# Sandbox
SANDBOX_PAYPAL_CLIENT_ID=your_sandbox_client_id_here
# Production
PRODUCTION_PAYPAL_CLIENT_ID=your_production_client_id_here
This is an example of how to use the PaypalButton component:
import * as S from './styles'
import PaypalButton from '~/components/atoms/paypal-button'
import Loader from '~/components/atoms/loader'
export default function Checkout() {
return (
<S.Checkout>
<PaypalButton
// if you leave the text prop blank, it will use the default style of the Paypal Button
style={{
text: 'Purchase',
loadingComponent: <Loader />,
}}
createOrder={(data, actions) => {
// here can be a fetch to an api to create the order, get info and stuff like this...
return Promise.resolve({
currency: 'BRL',
product: {
description: 'This is a test product.',
price: '18.00',
},
})
// you can cancel it throwing an error
// return Promise.reject(new Error('it was not possible to create the order.'))
}}
onCancel={(data, actions) => {
console.log('onCancel', data, actions)
}}
onError={(err) => {
console.log('onError', err)
}}
/>
</S.Checkout>
)
}
Name | Type | Description |
---|---|---|
disabled |
boolean | undefined |
Whether the button should be disabled. |
onApprove |
((data: OnApproveData, actions: OnApproveActions) => Promise<void>) | undefined |
A function that is called when the buyer approves the transaction. |
onError |
((err: Record<string, unknown>) => void) | undefined |
A function that is called when there is an error. |
onCancel |
((data: Record<string, unknown>, actions: OnCancelledActions) => void) | undefined |
A function that is called when the buyer cancels the transaction. |
createOrder |
((data: CreateOrderData, actions: CreateOrderActions) => Promise<IPaypalButtonOrderInfo> | undefined) |
A function that is called to create the order. |
style |
IPaypalButtonStyle |
The style properties for the Paypal button. |
IPaypalButtonStyle.width |
string |
The width of the button. |
IPaypalButtonStyle.height |
string |
The height of the button. |
IPaypalButtonStyle.text |
string |
The text to display on the button. |
IPaypalButtonStyle.loadingComponent |
React.ReactNode |
The component to display when the button is in the loading state. |
Name | Type | Description |
---|---|---|
IPaypalButtonOrderInfo.currency |
string |
The currency of the order. |
IPaypalButtonOrderInfo.custom_id |
string |
A custom identifier for the order. |
IPaypalButtonOrderInfo.reference_id |
string |
A reference identifier for the order. |
IPaypalButtonOrderInfo.invoice_id |
string |
An invoice identifier for the order. |
IPaypalButtonOrderInfo.soft_descriptor |
string |
A short description of the transaction. |
IPaypalButtonOrderInfo.product |
IProduct |
The product information for the order. |
IProduct.description |
string |
The description of the product. |
IProduct.price |
string |
The price of the product. |