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