react-pass-checkout-button-v1
Version:
### NPM Installation
53 lines (40 loc) • 1.72 kB
Markdown
# Pass Inline Checkout for React
### NPM Installation
Run the command below in your Terminal to Install the component
`` npm i react-pass-checkout-button-v1``
### Importing the vue-pass-checkout-button-v1
Go to your component and import the Component and add it in your component as suggested below
``import { Button } from "react-pass-checkout-button-v1"``
### Feeding the component with the write data
You are to feed the component with the checkout data using the data prop, and the function you want to run when the checkout is canceled on **onClose** and the function to run when the checkout is completed on **onSuccess**
```
<Button data={clientInfo} />
```
In **clientInfo** here you have various variables that is needed to complete checkout
- Src:This is the Image of the product you want to buy
- Amount: Product Amount
- Url: this is the Website Url
- Name: Name of product
- Email: email of buyer
- Qty: Quantity of products sold
- Description: Description of product
- Key: Api Key automatically generated for you as a Pass Merchant
```
const clientInfo = {
src: `https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png`,
amount: `10`,
url: `jumia.com.ng`,
name: `Cap`,
email: `bayoopesanya@gmail.com`,
qty: `1`,
description: `Great Pass Cap`,
key: `pass_sec_test_ewxaVQBbr5JTt6P2tpIUUAZGdpqzRckV`,
onClose: function () {
alert(`It Closed oo`)
},
onSuccess: function () {
alert(`It Succeeded oo`)
}
}
```
You can add the method for closed checkout on ``onClose()`` and for completed checkout ``onSuccess()``