flutterwave-angular-v3

Flutterwave v3 Angular Library

Table of Contents

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

About

Flutterwave official Angular library to accept payment via card , USSD, QrCode, Mobile Money etc.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. See references for links to dashboard and API documentation.

Prerequisites

Node version >= 6.9.x and npm >= 3.x.x
Angular version  >= 4
Flutterwave version 3 API keys

Installing

Install the SDK

$ npm install flutterwave-angular-v3
# or 
$ yarn  add  flutterwave-angular-v3
 

Usage

Import FlutterwaveModule to the app root module

import { FlutterwaveModule } from "flutterwave-angular-v3"
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FlutterwaveModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Use as component, Method 1 : Pass in payment parameters individually as component attributes

import {Component, OnInit} from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
@Component({
  selector: 'app-root',
  template: ` <flutterwave-make-payment
                [public_key]="publicKey"
                amount='10'
                currency='NGN'
                payment_options="card"
                redirect_url=""
                text="Pay Now"
                [customer]="customerDetails"
                [customizations]="customizations"
                [meta]="meta"
                [tx_ref]="generateReference()"
                (callback)="makePaymentCallback($event)"
                (close)="closedPaymentModal()" >
            </flutterwave-make-payment>`
})
export class AppComponent{
  //use your PUBLIC_KEY here
  publicKey = "FLWPUBK_TEST-XXXXX-X";
 
  customerDetails = { name: 'Demo Customer  Name', email: '[e-mail]', phone_number: '08100000000'}
 
  customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
 
  meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
 
 constructor( private flutterwave: Flutterwave) {}
 
  makePaymentCallback(response: PaymentSuccessResponse): void {
    console.log("Pay", response);
    this.flutterwave.closePaymentModal(5)
  }
  closedPaymentModal(): void {
    console.log('payment is closed');
  }
  generateReference(): string {
    let date = new Date();
    return date.getTime().toString();
  }
}
 

Use as component, Method 2: Pass in the payment parameters as an object to the component 'data' attribute

import {Component, OnInit} from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
 
@Component({
  selector: 'app-root',
  template: ` <flutterwave-make-payment  [data]="paymentData" ></flutterwave-make-payment>`
})
export class AppComponent{
  publicKey = "FLWPUBK_TEST-0b0-XXXXXXXXXXX";
 
 
 customerDetails = { name: 'Demo Customer  Name', email: '[e-mail]', phone_number: '08100000000'}
 
  customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
 
  meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
 
 
  paymentData: InlinePaymentOptions = {
    public_key: this.publicKey,
    tx_ref: this.generateReference(),
    amount: 10,
    currency: 'NGN',
    payment_options: 'card,ussd',
    redirect_url: '',
    meta: this.meta,
    customer: this.customerDetails,
    customizations: this.customizations,
    callback: this.makePaymentCallback,
    onclose: this.closedPaymentModal,
    callbackContext: this
  }
  
  constructor( private flutterwave: Flutterwave) {}
 makePaymentCallback(response: PaymentSuccessResponse): void {
    console.log("Pay", response);
    this.flutterwave.closePaymentModal(5)
  }
  closedPaymentModal(): void {
    console.log('payment is closed');
  }
  generateReference(): string {
    let date = new Date();
    return date.getTime().toString();
  }
  
}

Use in Code, Method 1 : Using the Flutterwave service.

import { Component } from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3";
 
@Component({
  selector: 'app-root',
  template: `<button (click)="makePayment()">Pay</button>`,
})
export class AppComponent {
 
 publicKey = "FLWPUBK_TEST-XXXXXXXXX";
 
  customerDetails = { name: 'Demo Customer  Name', email: '[e-mail]', phone_number: '08100000000'}
 
  customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
 
  meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
 
 paymentData: InlinePaymentOptions = {
    public_key: this.publicKey,
    tx_ref: this.generateReference(),
    amount: 10,
    currency: 'NGN',
    payment_options: 'card,ussd',
    redirect_url: '',
    meta: this.meta,
    customer: this.customerDetails,
    customizations: this.customizations,
    callback: this.makePaymentCallback,
    onclose: this.closedPaymentModal,
    callbackContext: this
  }
  //Inject the flutterwave service 
  constructor(private flutterwave: Flutterwave ) {
  }
  makePayment(){
    this.flutterwave.inlinePay(this.paymentData)
  }
  makePaymentCallback(response: PaymentSuccessResponse): void {
    console.log("Payment callback", response);
  }
  closedPaymentModal(): void {
    console.log('payment is closed');
  }
}
 

Use in Code, Method 2 (Promise): Async Payment Response.

import {Component} from '@angular/core';
import {Flutterwave, AsyncPaymentOptions} from "flutterwave-angular-v3"
 
@Component({
  selector: 'app-root',
  template: ` <button (click)="payViaPromise()" >Pay via Promise </button>`
})
export class AppComponent{
 
  publicKey = "FLWPUBK_TEST-XXXXXXXXX";
 
  customerDetails = { name: 'Demo Customer  Name', email: '[e-mail]', phone_number: '08100000000'}
 
  customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
 
  meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
 
  paymentData : AsyncPaymentOptions = {
         public_key: this.publicKey,
         tx_ref: this.generateReference(),
         amount: 10,
         currency: 'NGN',
         payment_options: 'card,ussd',
         meta: this.meta,
         customer: this.customerDetails,
         customizations: this.customizations,
        }
 
  constructor( private flutterwave: Flutterwave) {}
 
  payViaPromise() {
    this.flutterwave.asyncInlinePay(this.paymentData).then(
      (response) =>{
        console.log("Promise Res" , response)
        this.flutterwave.closePaymentModal(5)
      }
    )
  }
  generateReference(): string {
    let date = new Date();
    return date.getTime().toString();
  }
 
}
 

Recurring payment (Payment Plans) Example: See here for how to create and fetch payment plans.

import {Component, OnInit} from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
@Component({
  selector: 'app-root',
  template: ` <flutterwave-make-payment
                [public_key]="publicKey"
                amount='10'
                currency='NGN'
                payment_options="card"
                payment_plan="6341"
                redirect_url=""
                text="Pay for Payment Plan"
                [customer]="customerDetails"
                [customizations]="customizations"
                [meta]="meta"
                [tx_ref]="generateReference()"
                (callback)="makePaymentCallback($event)"
                (close)="closedPaymentModal()" >
            </flutterwave-make-payment>`
})
export class AppComponent{
  //use your PUBLIC_KEY here
  publicKey = "FLWPUBK_TEST-XXXXX-X";
 
  customerDetails = { name: 'Demo Customer  Name', email: '[e-mail]', phone_number: '08100000000'}
 
  customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
 
  meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
 
 constructor( private flutterwave: Flutterwave) {}
 
  makePaymentCallback(response: PaymentSuccessResponse): void {
    console.log("Pay", response);
    this.flutterwave.closePaymentModal(5)
  }
  closedPaymentModal(): void {
    console.log('payment is closed');
  }
  generateReference(): string {
    let date = new Date();
    return date.getTime().toString();
  }
}
 

Payment option parameters and descriptions:

Parameter	Always Required ?	Description
public_key	True	Your API public key
tx_ref	True	Your transaction reference. This MUST be unique for every transaction
amount	True	Amount to charge the customer.
currency	False	currency to charge in. Defaults to NGN
integrity_hash	False	This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway.
payment_options	True	This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on.
payment_plan	False	This is the payment plan ID used for Recurring billing
redirect_url	False	URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them.
customer	True	This is an object that can contains your customer details: e.g - 'customer': {'email': '[e-mail]','phonenumber': '08012345678','name': 'Takeshi Kovacs' }
subaccounts	False	This is an array of objects containing the subaccount IDs to split the payment into. Check our Split Payment page for more info
meta	False	This is an object that helps you include additional payment information to your request e.g {'consumer_id': 23,'consumer_mac': '92a3-912ba-1192a' }
customizations	True	This is an object that contains title, logo, and description you want to display on the modal e.g{'title': 'Pied Piper Payments','description': 'Middleout isn't free. Pay the price','logo': 'https://assets.piedpiper.com/logo.png' }
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

Methods provided by Flutterwave service and descriptions:

Method Name	Parameters	Returns	Description
inlinePay	InlinePaymentOptions : Object	Null	This methods allows you to setup and open the payment modal via code
asyncInlinePay	AsyncPaymentOptions : Object	Promise	This methods allows you to setup and open the payment modal via code and returns a promise containing the payment response
closePaymentModal	waitDuration : number (Optional, default = 0)	Null	This methods allows you to close the payment modal via code. You can setup the wait time before modal close

Deployment

• Switch to Live Mode on the Dashboard settings page
• Use the Live Public API key from the API tab

Built Using

• Angular CLI
• Typescript
• Angular
• ng-packagr

Flutterwave API References

• Flutterwave API Doc
• Flutterwave Inline Payment Doc
• Flutterwave Dashboard