flutterwaveAngularSDk .Flutterwave v3 Angular Library
$ npm install flutterwave-v3-angular
# or
$ yarn add flutterwave-v3-angular
// include the script tag to the index.html file
<script src="https://checkout.flutterwave.com/v3.js"></script>
//Import FlutterwaveModule and add to app root module
import FlutterwaveModule from "flutterwave-v3-angular"
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlutterwaveModule
],
providers: [],
bootstrap: [AppComponent]
})
<flutterwave-make-payment
public_key="FLWPUBK_TEST-*************"
tx_ref="25673*******"
amount=90000
currency='NGN'
payment_options="card,ussd"
redirect_url=""
text="Pay Now"
className="class-name"
style=""
[meta]="{counsumer_id: '7898' ,consumer_mac: 'kjs9s8ss7dd' }"
[customer]="{ name: 'Demo Customer Name',email: '[email protected]', phone_number: '08184505144' }"
[customizations]="{ title: 'Customization Title' ,description: 'Customization Description' , logo : 'https://flutterwave.com/images/logo-colored.svg' }"
(callback)="makePaymentCallback($event)"
(close)="cancelledPayment()"
></flutterwave-make-payment>
OR Pass in Object containing the payment data
<flutterwave-make-payment [data]="{
public_key: 'FLWPUBK_TEST-***********',
tx_ref: '78**********',
amount: 9000,
currency: 'NGN',
payment_options: 'card,ussd',
redirect_url: '',
text: 'Pay Now',
className: '',
style: '',
meta :{ 'counsumer_id': '7898' , 'consumer_mac' : 'kjs9s8ss7dd' },
customer : {name: 'Demo Customer Name',email: '[email protected]',phone_number: '081845***' },
customizations: {title: 'Customization Title' , description: 'Customization Description' , logo : 'https://flutterwave.com/images/logo-colored.svg' } ,
callback: makePaymentCallback ,
onclose: cancelledPayment
}
></flutterwave-make-payment>
import { Component } from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-v3-angular";
@Component({
selector: 'app-root',
template: `<button (click)="makePayment()" )>Pay</button>`,
})
export class AppComponent {
title = 'app';
paymentData : InlinePaymentOptions = {
public_key: 'FLWPUBK_TEST-XXXXX-X',
tx_ref: '8*********',
amount: 9000,
currency: 'NGN',
payment_options: 'card,ussd',
redirect_url: '',
meta : {
counsumer_id: '7898' ,
consumer_mac : 'kjs9s8ss7dd'
},
customer : {
name: 'Demo Customer Name',
email: '[email protected]',
phone_number: '08184******'
},
customizations: {
title: 'Customization Title' ,
description: 'Customization Description' ,
logo : 'https://flutterwave.com/images/logo-colored.svg'
} ,
callback: this.makePaymentCallback ,
onclose: this.cancelledPayment
}
constructor(private flutterwave: Flutterwave ) {
}
makePayment(){
this.flutterwave.inlinePay(this.paymentData)
}
makePaymentCallback(response: PaymentSuccessResponse): void {
console.log("Payment callback", response);
}
cancelledPayment(): void {
console.log('payment is closed');
}
}
Please checkout Flutterwave Documentation for other available options you can add to config
For staging, Use TEST PUBLIC API Key and for production, use LIVE PUBLIC API Key. You can get your PUBLIC from the Flutterwave dashboard.
Go here to get your API Keys.
Turn on Sandbox to get TEST API KEYS and Turn off Sandbox to get LIVE API KEYS
This project is licensed under the MIT License - see the LICENSE.md file for details
git checkout -b feature-name
git commit -am 'Some commit message'
git push origin feature-name
Follow on Twitter @ArtOlamilekan
This project follows the all-contributors specification. Contributions of any kind welcome!
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Author: toybz
Source Code: https://github.com/toybz/flutterwaveAngularSDk
What is the difference between Angular vs AngularJS? One vital distinction between Angular vs AngularJS is AngularJS is JavaScript-based while Angular is TypeScript based. These two frameworks have similarities as a front end, open-source platform that create dynamic SPAs but letβs look at their differences.
Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.
What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc
Angular vs. AngularJS will help you differentiate between TypeScript-based Angular and JavaScript-based AngularJS based on various factors. What is Angularjs? What is Angular? Why compare Angular and AngularJS? Angular vs AngularJS
Is your business looking for Angularjs developers? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, our talented developers serve you to get the advantage of advanced features of the AngularJS framework. We offer...