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: `[email protected]`,
        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()