bank3d-payment-angular v0.0.1

Bank3dPaymentAngular

Table of Contents

• About
• Getting Started
• Usage
• Running tests
• Deployment
• Built Using
• References

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="test@gmail.com"
                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="test@gmail.com"
                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  |

Bank3D Docs

• Bank3D Inline Doc
• Bank3D Embedded Doc