flutterwave-angular-v3
Advanced tools
Readme
Flutterwave official Angular library to accept payment via card , USSD, QrCode, Mobile Money etc.
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.
Node version >= 6.9.x and npm >= 3.x.x
Angular version >= 4
Flutterwave version 3 API keys
Install the SDK
$ npm install flutterwave-angular-v3
# or
$ yarn add flutterwave-angular-v3
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();
}
}
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: '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();
}
}
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': 'example@example.com','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 |
FAQs
Flutterwave official Angular library to accept payment via card , USSD, QrCode etc.
The npm package flutterwave-angular-v3 receives a total of 53 weekly downloads. As such, flutterwave-angular-v3 popularity was classified as not popular.
We found that flutterwave-angular-v3 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.