📝 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: 'customer@mail.com', 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: 'customer@mail.com', 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: 'customer@mail.com', 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: 'customer@mail.com', 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();
  }

}

🚀 Deployment

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

⛏️ Built Using

• Angular CLI
• Typescript
• Angular
• ng-packagr

🎉 Flutterwave API References

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