itexpay-react
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

ItexPay React Library

NPM version Build npm-typescript License

This SDK helps you accept payments seamlessly using ItexPay Inline Checkout.

Demo

Itex Inline Checkout Screenshot

Installation:

yarn add itexpay-react

or

npm install --save itexpay-react

Usage :

There is currently only one way to use this library in your React project and that is using the useItexPay hook. This returns an object with two attributes: handlePayment (the function passed to the button on click) and loaded (which shows whether or not the script has been loaded completely).

Import useItexPay to your component:

import * as React from 'react';
import { useItexPay, ItexPayProps } from 'itexpay-react'

const options: ItexPayProps = {
    api_key: '<your_api_key>',
    first_name: 'John',
    last_name: 'Doe',
    phone_number: '07011122233',
    email: 'johndoe@gmail.com',
    amount: 100,
    reference: '<your_transaction_reference>,
    currency: 'NGN'
}

const PaymentScreen = () => {

    const { handlePay, loaded } = useItexPay(options, {
        onCompleted: () => console.log('payment completed'), 
        onClose: () => console.log('onClose'), 
        onError: () => {}
    })

    if (!loaded) {
        return <p>Initializing payment...</p>
    }

    return (
        <button onClick = {handlePay}>Make payment</button>
    )
    
};

export default PaymentScreen

Parameters

Read more about our parameters and how they can be used here.

Parameter Required? Description
api_key True Your public API key
reference True Your transaction reference. This MUST be unique for every transaction
amount True The transaction amount (this is that amount the customer is going to be charged).
currency True currency to charge in. Defaults to NGN
redirecturl False URL to redirect the customer to upon completion of a transaction
first_name True Customer's first name
last_name True Customer's last name
email True Customer's email address
phone_number True Customer's phone number
onComplete (function) True This is the function that runs after payment is completed

Support

If you need further support while using this library, don't hesitate to reach out to us. You can either create an issue on our Github repository or get in touch with our team through email at developers@iisysgroup.com. We are here to help!

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Readme

Keywords

none

Package Sidebar

Install

npm i itexpay-react

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

282 kB

Total Files

43

Last publish

Collaborators

  • jeremiahjacinth13