Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erksch/react-smart-payment-buttons
React integration for PayPal Smart Payment Buttons
https://github.com/erksch/react-smart-payment-buttons
payments paypal react smart-payment-buttons
Last synced: 8 days ago
JSON representation
React integration for PayPal Smart Payment Buttons
- Host: GitHub
- URL: https://github.com/erksch/react-smart-payment-buttons
- Owner: erksch
- Created: 2019-03-26T21:52:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:36:03.000Z (almost 2 years ago)
- Last Synced: 2024-03-24T14:01:22.543Z (8 months ago)
- Topics: payments, paypal, react, smart-payment-buttons
- Language: JavaScript
- Size: 1.22 MB
- Stars: 19
- Watchers: 0
- Forks: 7
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-smart-payment-buttons
[](https://circleci.com/gh/erksch/react-smart-payment-buttons)
[](https://coveralls.io/github/erksch/react-smart-payment-buttons)
[](https://www.npmjs.com/package/react-smart-payment-buttons)
[](https://www.npmjs.com/package/react-smart-payment-buttons)
A react integration for PayPal's Smart Payment Buttons.
## Installation
Install with npm
```
npm install --save react-smart-payment-buttons
```
Install with yarn
```
yarn add react-smart-payment-buttons
```
## Usage
For the buttons to load, the PayPal JavaScript SDK needs to be globally available.
You can achieve this in two ways:
### Load the PayPal SDK with a script tag
```html
```
Then you are able to use the `SmartPaymentButtons` component where ever you want:
```javascript
import SmartPaymentButtons from 'react-smart-payment-buttons';
function MyCheckout() {
return (
Checkout
);
}
```
Alternatively, you can also load the script **asynchronously**:
```html
```
Now you can tell `SmartPaymentButtons` to wait until the SDK is loaded by providing the `sdkScriptId` you chose earlier:
```javascript
} // optional
createOrder={...}
onApprove={...}
/>
```
You can add an optional `loading` prop to display something until the buttons are displayed.
Making the `` asynchronous is a highly recommend because it reduces the load time of your application.
### Alternative: Use the built in PayPalSDKWrapper component
```javascript
import SmartPaymentButtons, { PayPalSDKWrapper } from 'react-smart-payment-buttons';
function MyCheckout() {
return (
<div>
<h1>Checkout</h1>
<PayPalSDKWrapper clientId="CLIENT_ID">
<SmartPaymentButtons
createOrder={...}
onApprove={...}
/>
</PayPalSDKWrapper>
</div>
);
}
```
As you can see, with this option you don't need to the import the script.
This option also reduces the load time of your application like the async script. A second benefit is that the PayPal SDK is only loaded when it's needed: Users who are entering your website may not want to immediatly download a PayPal SDK. By using the wrapper you are able to defer loading the SDK for example to when the users enters the checkout page.
Instead of using the `clientId` prop you can also create an environment variable `REACT_APP_PAYPAL_CLIENT_ID` (for create-react-app usage) that contains the id. The `PayPalSDKWrapper` will pick it up automatically.
### Display a loading indicator
It can take a second to load the script with the `PayPalSDKWrapper`. But you can attach some custom loading that you wan't to display while waiting for the script to load by using the `loading` property of the `PayPalSDKWrapper` component.
```javascript
return (
<PayPalSDKWrapper
clientId="CLIENT_ID"
loading={<Spinner />}
>
<SmartPaymentButtons
createOrder={...}
onApprove={...}
/>
</PayPalSDKWrapper>
);
```
## Props
### SmartPaymentButtons component
| Name | Type | Description (PayPal Docs Link) |
|-------------|-------------------------|----------------------------------|
|createOrder | (data, actions) => any | See [createOrder](https://developer.paypal.com/docs/checkout/integrate/#4-set-up-the-transaction) |
|onApprove | (data, actions) => any | See [onApprove](https://developer.paypal.com/docs/checkout/integrate/#5-capture-the-transaction) |
|onCancel | (data) => any | See [onCancel](https://developer.paypal.com/docs/checkout/integration-features/cancellation-page/) |
|onError | (error) => any | See [onError](https://developer.paypal.com/docs/checkout/integration-features/handle-errors/) |
|style | Object | See [customization](https://developer.paypal.com/docs/checkout/integration-features/customize-button) |
|containerStyle| React StyleSheet Object | Style applied to the button's container |
|containerClassName| string | CSS class applied to the button's container |
|refresh | mixed | If this value changes the buttons are rerendered |
|sdkScriptId | string | ID of the script tag loading the PayPal SDK asynchronously |
|loading | React Node | Only works with sdkScriptId. Is displayed until the SDK is loaded. |
### PayPalSDKWrapper component
The component accepts all parameters the SDK accepts. See the [official Customize SDK documentation](https://developer.paypal.com/docs/checkout/reference/customize-sdk/) for reference.
**Attention**
- The `PayPalSDKWrapper` expects the props to be in `camelCase` instead of `kebab-case` like the SDK parameters.
- The SDK parameters that take a comma separated list like `disable-funding=card,sepa` have to be assigned with an array in the props like `disableFunding={['card', 'sepa']}`.