flutterwave-angular-v3

v1.2.1

Published

2 years ago

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

Downloads

310

0High
0Medium
0Low

flutterwave-dev-admin

Flutterwave Fintech Angular Fluterwave Ionic

Flutterwave v3 Angular Library

npm npm NPM

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: '[email protected]', 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: '[email protected]', 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: '[email protected]', 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: '[email protected]', 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: '[email protected]', 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': '[email protected]','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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme