angular-interswitch v0.0.0

NG INTERSWITCH

Interswitch's official angular package to easily integrate to Quickteller Business to recieve payments.

INSTALLATION

Firstly, you need to create a Quickteller Business account.
npm and angular2+ are required

To install the latest version of ng-interswitch, simply run the command:

npm install --save @interswitchapi/ng-interswitch

USAGE

1. Import the module

Import the module in your app.module.ts or any module in which the component is needed like so:

...
import { NgInterswitchModule } from 'ng-interswitch';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgInterswitchModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Implement in your project

The ng-interswitch component is used. There are two ways to configure the component.

1 . You can use the component properties directly like so:

<ng-interswitch
  [merchantCode]="'XXXXXXX'"
  [payItemID]="'XXXXXXXXXXXXXXXXXXXXX'"
  [amount]="'10000'"
  [transactionReference]= "jdfsd988s89"
  [customerEmail]="'johndoe@gmail.com'"
  [customerName]="'John Doe'"
  (paymentCallback)="paymentCallback($event)"
  [class]="'btn btn-danger'"
>Make Payment</ng-interswitch>

2. You can also use the paymentOptions property like so:

<ng-interswitch
  [paymentOptions]="paymentOptions"
  (paymentCallback)="paymentCallback($event)"
  [class]="'btn btn-danger'"
>Make Payment</ng-interswitch>

You can hence define paymentOptions in your ts file like so:

  paymentOptions = {
    merchantCode: 'XXXXXXXXX',
    payItemID: 'XXXXXXXXXXXXXXXXXXXXX',
    amount: '10000',
    transactionReference: Date.now().toString(),
    customerEmail: 'johndoe@gmail.com',
    customerName: 'John Doe'
  }

Note:

• merchantCode and payItemID can be gotten on your Quickteller Business dashboard
• amount must be in kobo

The event paymentCallback is raised after a transaction is completed. You can get the result of a transaction from the event handler assigned to it. A sample event handler will be like so:

  paymentCallback(data){
    console.log('data: ', data);
  }

Parameters

Below is a list of all the supported parameters.

After a transaction, a sample response from the callback function will be like so:

{
    amount: 10000,
    apprAmt: 10000,
    cardNum: "",
    desc: "Approved by Financial Institution",
    mac: "",
    payRef: "FBN|WEB|MX26070|13-04-2021|3512130|866194",
    resp: "00",
    retRef: "000106923853",
    txnref: "1618305656700",
    url: "http://localhost:3000",
}

NOTE: The key 'resp' gives the final status of the transaction.
There are quite a number of response codes that can be returned, the full list can be viewed here

- Handling the Response

For integrity purpose, you are advised to make a server side request to get the final status of a transaction before giving value. To do this, make a post request to the endpoint below:

Test mode:

https://qa.interswitchng.com/collections/api/v1/gettransaction.json?merchantcode={MERCHANT_CODE}&transactionreference={TRANSACTION_REFERENCE}&amount={AMOUNT_IN_KOBO}

Live mode:

https://webpay.interswitchng.com/collections/api/v1/gettransaction.json?merchantcode={MERCHANT_CODE}&transactionreference={TRANSACTION_REFERENCE}&amount={AMOUNT_IN_KOBO}

TEST CARDS

License

The MIT License (MIT). Please see License File for more information.