NG INTERSWITCH

This is an angular library that makes interswitch payments integration very easy.

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 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]="'1000'"
  [customerEmail]="'toyosioyelayo@gmail.com'"
  [customerName]="'Toyosi Oyelayo'"
  (paymentCallback)="paymentCallback($event)"
  [class]="'btn btn-danger'"
>Make Payment</ng-interswitch>

2. If you are like me and you prefer to have the template as clean as possible, you can 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: '1000',
    customerEmail: 'toyosioyelayo@gmail.com',
    customerName: 'Toyosi Oyelayo'
  }

merchantCode and payItemID can be found on your dashboard.

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);
  }

AVAILABLE OPTIONS

Field Name	Data Type	Required	Default Value	Description
merchantCode	string	true	undefined	This can be found on your dashboard
payItemID	string	true	undefined	This can be found on your dashboard.
payItemName	string	false	undefined	This is the name of the item the customer is paying for
amount	number	true	undefined	This is the total amount being paid (in kobo). Don't forget to add the transaction charges as appropriate
customerEmail	string	true	undefined	The email of the customer
customerName	string	false	''	The name of the customer
customerID	string	false	''	ID of the customer
style	object	false	{}	CSS stylings, eg {color: '#000000'}
class	string	false	undefined	Add class(s) to the component
currency	number	false	566	ISO 4217 code of the currency being used
siteRedirectURL	string	false	current URL	The redirect URL after a transaction is completed
paymentMode	string	false	"TEST"	The payment mode. This can be 'LIVE' or 'TEST'
paymentOptions	object	false	{}	This is an object that can take all other payment options
transactionReference	string	false	randomly generated string	This is a unique identifier for a transaction. It is handled by the package, but you can decide to create yours

TEST CARDS

Type	Card Number	Expiry Date	Pin	CVV	OTP
Verve	5060990580000217499	03/50	1111	111	123456
Visa	4000000000000002	03/50	1234	111

CONTRIBUTING

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

Star

I'd love you star this repo. Also follow me on twitter

License

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