react-alfa-payment

A Bank Alfalah Limited payment gateway component for React Apps for easy integration written in Typescript

• This library currently supports Debit/Credit Card payments only
• Other methods are planned to be supported in the upcoming releases

Installation

Install react-alfa-payment using npm

npm install --save react-alfa-payment

Or using yarn

yarn add react-alfa-payment

Demo

Click here to test

Usage/Examples

import ReactAlfaPayment from 'react-alfa-payment'

function App() {
  return (
      <ReactAlfaPayment 
        alfaConfig={{
            merchantId: '',
            storeId: '',
            channelId: '',
            merchantHash: '',
            merchantUsername: '',
            merchantPassword: '',
            redirectUrl: '',
            secretKey1: '',
            secretKey2: '',
            transactionReferenceNumber: '',
            transactionAmount: 100,
        }} 
        message="Proceed to Pay"
        className="btn-primary"
        isSandbox
    />
  )
}

Component Props

| Parameter | Type | Required | Description | | :-------- | :------- | :------- |:------------------------- | | alfaConfig | object | true | Scroll down to see the required properties | | isSandbox | boolean | false | To determine whether the current environment is a sandbox or not | | message | string | false | Text to appear on submit button | | className | string | false | CSS className | | ref | ref | false | Submit button ref to trigger actions i.e click |

Prop: alfaConfig

object containing all of the following (required) properties

  {
    merchantId: '',
    storeId: '',
    channelId: '',
    merchantHash: '',
    merchantUsername: '',
    merchantPassword: '',
    redirectUrl: '',
    secretKey1: '',
    secretKey2: '',
    transactionReferenceNumber: '',
    transactionAmount: 100,
  }

Acknowledgements

This project is generated from react-typescript-library template

License

MIT © Shahzaib

Links