bank3d-payment-angular
v0.0.1
Published
<p align="center"> <img title="Bank3D" height="200" src="https://www.bank3d.ng/asset/img/bank3D.png" width="50%"/> </p>
Downloads
3
Readme
Bank3dPaymentAngular
Table of Contents
About
Bank3D Angular library makes it possible to receive money from customers through the following routes.
Card Transfer Bank Account USSD
Getting Started
This page will help you get started with Bank3D. This comprehensive guides and documentation help you start working with Bank3D Angular library as quickly as possible, as well as support if you get stuck.
Prerequisites
Node version >= 6.9.x and npm >= 3.x.x
Angular version >= 4
Bank3D Merchant keys
Installing
Install the SDK
$ npm install Bank3d-Payment-Angular
# or
$ yarn add Bank3d-Payment-Angular
Usage
Import Bank3dPaymentAngularModule to the app root module
import { Bank3dPaymentAngularModule } from 'Bank3d-Payment-Angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Bank3dPaymentAngularModule
],
providers: [],
bootstrap: [AppComponent]
})Use as Modal Component, Method 1 : Pass in payment parameters individually as component attributes
import {Component, OnInit} from '@angular/core';
import { Bank3dPaymentService } from 'Bank3d-Payment-Angular';
@Component({
selector: 'app-root',
template: ` <bank3d-payment-angular
[reference]= "reference"
[merchantKey]="merchantKey"
currencyCode="NGN"
[amount]="amount"
email="[email protected]"
phone="0801234567889"
mode="test"
text="Make Payments"
color="#2F4CB0"
className="card highlight-card card-small"
(callback)="paymentCallback($event)"
(onClose)="closedPaymentModal()" >
</bank3d-payment-angular>`
})
export class AppComponent{
//use your PUBLIC_KEY here
merchantKey = "your-merchant-key";
reference = "REF-" + Math.random().toString(16).slice(2)
amount = "5000"
constructor(private bank3d: Bank3dPaymentService) {}
makePaymentCallback(response ): void {
console.log("Pay", response);
}
closedPaymentModal(): void {
console.log('payment is closed');
}
}
Use as Embeded Component, Method 1 : Pass in payment parameters individually as component attributes, the main difference between the inline and embeded is the container parameter passed as prop to the component
import {Component, OnInit} from '@angular/core';
import { Bank3dPaymentService } from 'Bank3d-Payment-Angular';
@Component({
selector: 'app-root',
template: ` <bank3d-payment-angular
[reference]= "reference"
[merchantKey]="merchantKey"
currencyCode="NGN"
[amount]="amount"
email="[email protected]"
phone="0801234567889"
mode="test"
container="bank3DEmbeddedContainer"
text="Make Payments"
color="#2F4CB0"
className="card highlight-card card-small"
(callback)="paymentCallback($event)"
(onClose)="closedPaymentModal()" >
</bank3d-payment-angular>
<div id="bank3DEmbeddedContainer"> </div>
`
})
export class AppComponent{
//use your PUBLIC_KEY here
merchantKey = "your-merchant-key";
reference = "REF-" + Math.random().toString(16).slice(2)
amount = "5000"
constructor(private bank3d: Bank3dPaymentService) {}
makePaymentCallback(response ): void {
console.log("Pay", response);
}
closedPaymentModal(): void {
console.log('payment is closed');
}
}
Payment option parameters and descriptions:
| Parameter | Always Required ? | Description |
| ------------- | ------------- | ------------- |
| marchantKey | True | Your merchant key from Bank3D. Use test key for test mode and live key for live mode. |
| reference | True | Your unique transaction reference. |
| amount | True | Amount to charge the customer. |
| currencyCode | False | currency to charge in. Defaults to NGN|
| email | False |Customer email address. |
| phone | False | Phone number of customer. |
| colour | False | You get to choose a theme color for the payment modal that reflects your brand.|
| callback (function) | False | This is the function that runs after payment is completed |
| close (function) | False | This is the function that runs after payment modal is closed |