Flutterwave v3 Angular Library

Flutterwave v3 Angular Library

flutterwaveAngularSDk .Flutterwave v3 Angular Library

Flutterwave v3 Angular Library


Alt text


$ 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"

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]


  text="Pay Now"
  [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' }"

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


import { Component } from '@angular/core';
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-v3-angular";

  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 ) {


  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


  1. Fork it!
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Some commit message'
  4. Push to the branch: git push origin feature-name
  5. Submit a pull request

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.

πŸ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

Download Details:

Author: toybz

Source Code: https://github.com/toybz/flutterwaveAngularSDk

angular angularjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Angular vs AngularJS: Differences Between Angular and AngularJS

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 - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

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: Difference between Angular and AngularJS

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

Hire AngularJS Developers

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...