foree-checkout v1.0.2

Installation

Use npm package manager to install foree-checkout

 	npm i foree-checkout

Usage

Import the installed npm package (i.e. foree-checkout) into your project (angular, react or any other supported JavaScript framework)

 	import {initiateCheckout,getForeeCheckoutURL} from ‘foree-checkout’;

In case of angular, include in ngModule

Add EventListner or HostListener in you app.js or where you call initiateCheckout() function

For Angular

@HostListener('window:message', ['$event'])
	onMessage(e) {
		let URL=getForeeCheckoutURL();
		if(e.origin !== URL) return ;
		console.log(e)
	}

For React

eventListner = (e) => {
    let URL = getForeeCheckoutURL();
    window.onmessage = (e) => {
      if (e.origin !== URL) return;
      console.log(e.data);
    };
  }

Call this eventListner() function in onSubmit() method.

onSubmit={((event) => {this.eventListner(event)})}

Call initiateCheckout() function and sends two arguments data, a dictionary that contains the payload, and test_mode a boolean where true means Test environment or false means Live environment.

    var data = {
        'key': '<API_KEY>',
        'amount': '<AMOUNT>',
        'create_bill': '<true/false>',
        'reference_number': '<ORDER_ID>',
        'callback': myCallbackFunc,
        'callback_url': '<URL TO REDIRECT>', 
        'customer_email_address': '<EMAIL_ADDRESS>',
        'customer_phone_number': '<PHONE_NUMBER>',
        'consumer_name': '<CONSUMER_NAME>',
        'payment_method': '<payment_method>',
        'bill_details_id': '<UUID>',
	}
	
 	initiateCheckout(data, false);

In case of payment success or failure, response is received in onMessage event in EventListner or HostListener with the data in the following format

Success data
{
    bill_status: "paid"
    initiator: "Foree Bill"
    instrument_institution: "ABC Bank"
    instrument_number: "01201234111222"
    instrument_type: "bank_account"
    message: "Your payment has been processed successfully"
    paid_amount: 125.00
    payment_channel: "Internet Banking"
    reference_number: "50"
    status: 1
    transaction_date_time: "2021-01-20 18:32:52"
    transaction_ref_id: "1611149880942"
}

Failure data
{
    message: "Your payment could not be processed",
    reference_number: "50",
    status: "2"
}