{"id":26084882,"url":"https://github.com/Flutterwave/Angular-v3","last_synced_at":"2025-03-09T05:01:35.083Z","repository":{"id":37922062,"uuid":"290497884","full_name":"Flutterwave/Angular-v3","owner":"Flutterwave","description":"Angular library for Flutterwave for Business (F4B) v3 APIs. ","archived":false,"fork":false,"pushed_at":"2024-07-12T16:43:11.000Z","size":1690,"stargazers_count":15,"open_issues_count":3,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-10T06:46:32.585Z","etag":null,"topics":["angular","credit-card","flutterwave","flutterwave-angular","mobile-money","payment"],"latest_commit_sha":null,"homepage":"https://developer.flutterwave.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Flutterwave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-26T13:03:00.000Z","updated_at":"2024-08-10T06:46:32.586Z","dependencies_parsed_at":"2023-07-20T03:22:21.015Z","dependency_job_id":"a7f22d5c-e038-4d77-9758-8224e5ed9755","html_url":"https://github.com/Flutterwave/Angular-v3","commit_stats":null,"previous_names":["flutterwave/flutterwave-angular-v3","flutterwave/angular-v2","flutterwave/angular"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterwave%2FAngular-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterwave%2FAngular-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterwave%2FAngular-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Flutterwave%2FAngular-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Flutterwave","download_url":"https://codeload.github.com/Flutterwave/Angular-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242646213,"owners_count":20162851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","credit-card","flutterwave","flutterwave-angular","mobile-money","payment"],"created_at":"2025-03-09T05:01:20.126Z","updated_at":"2025-03-09T05:01:35.017Z","avatar_url":"https://github.com/Flutterwave.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg title=\"Flutterwave\" height=\"200\" src=\"https://flutterwave.com/images/logo/full.svg\" width=\"50%\"/\u003e\n\u003c/p\u003e\n\n# Flutterwave Angular Library\n![npm](https://img.shields.io/npm/v/flutterwave-angular-v3)\n![npm](https://img.shields.io/npm/dt/flutterwave-angular-v3)\n![NPM](https://img.shields.io/npm/l/flutterwave-angular-v3)\n\n## Introduction\n\nThe Angular SDK helps you create seamless payment experiences in your Angular mobile or web app. By connecting to our modal, you can start collecting payment in no time.\n\nAvailable features include:\n\n- Collections: Card, Account, Mobile Money, Bank Transfers, USSD, Barter, NQR.\n- Recurring payments: Tokenization and Subscriptions.\n- Split payments\n\n## Table of Contents\n\n1. [Requirements](#requirements)\n2. [Installation](#installation)\n3. [Initialization](#Initialization)\n4. [Usage](#usage)\n5. [Support](#support)\n6. [Contribution Guidelines](#contribution-guidelines)\n7. [License](#license)\n8. [Changelog](#)\n\n## Requirements\n\n1. Flutterwave version 3 API keys\n2. Node version \u003e= 14.15.0 and npm \u003e= 6.14.8\n3. Angular version  \u003e= 18.\n\n## Installation\n\nInstall the SDK\n\n```bash\n$ npm install flutterwave-angular-v3\n# or\n$ yarn  add  flutterwave-angular-v3\n\n```\n\n## Initialization\n\nImport FlutterwaveModule to the app root module\n\n```typescript\nimport { FlutterwaveModule } from \"flutterwave-angular-v3\"\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FlutterwaveModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n```\n\n\u003e NB: If you experience compilation errors in your app after importing the Flutterwave module, component or service.\nKindly include the following line in tsconfig.app.json under `compilerOptions` :\n\n```\npaths\": { \"@angular/*\": [ \"node_modules/@angular/*\" ] }\n```\n\nThen restart server and try again\n\n## Usage\n\nAdd Flutterwave to your project as a component or directly in your code:\n\n1. [As a Component](#using-flutterwave-as-a-component)\n2. [Directly in your code](#using-flutterwave-directly-in-your-code)\n3. [Recurring Payments](#recurring-payments)\n\n\n### Using Flutterwave as a Component\n\n#### Method 1\n\nPass in payment parameters individually as component attributes.\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport {\n  FlutterwaveService,\n  InlinePaymentOptions,\n  PaymentSuccessResponse,\n} from \"flutterwave-angular-v3\";\n@Component({\n  selector: \"app-root\",\n  template: ` \u003cflutterwave-make-payment\n    [public_key]=\"publicKey\"\n    amount=\"10\"\n    currency=\"NGN\"\n    payment_options=\"card\"\n    redirect_url=\"\"\n    text=\"Pay Now\"\n    [customer]=\"customerDetails\"\n    [customizations]=\"customizations\"\n    [meta]=\"meta\"\n    [tx_ref]=\"generateReference()\"\n    (callback)=\"makePaymentCallback($event)\"\n    (close)=\"closedPaymentModal()\"\n  \u003e\n  \u003c/flutterwave-make-payment\u003e`,\n})\nexport class AppComponent {\n  //use your PUBLIC_KEY here\n  publicKey = \"FLWPUBK_TEST-XXXXX-X\";\n\n  customerDetails = {\n    name: \"Demo Customer  Name\",\n    email: \"customer@mail.com\",\n    phone_number: \"08100000000\",\n  };\n\n  customizations = {\n    title: \"Customization Title\",\n    description: \"Customization Description\",\n    logo: \"https://flutterwave.com/images/logo-colored.svg\",\n  };\n\n  meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" };\n\n  constructor(private flutterwaveService: FlutterwaveService) {}\n\n  makePaymentCallback(response: PaymentSuccessResponse): void {\n    console.log(\"Pay\", response);\n    this.flutterwaveService.closePaymentModal(5);\n  }\n  closedPaymentModal(): void {\n    console.log(\"payment is closed\");\n  }\n  generateReference(): string {\n    let date = new Date();\n    return date.getTime().toString();\n  }\n}\n```\n\n#### Method 2\n\nPass in the payment parameters as an object to the component `data` attribute.\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport {\n  FlutterwaveService,\n  InlinePaymentOptions,\n  PaymentSuccessResponse,\n} from \"flutterwave-angular-v3\";\n\n@Component({\n  selector: \"app-root\",\n  template: ` \u003cflutterwave-make-payment\n    [data]=\"paymentData\"\n  \u003e\u003c/flutterwave-make-payment\u003e`,\n})\nexport class AppComponent {\n  publicKey = \"FLWPUBK_TEST-0b0-XXXXXXXXXXX\";\n\n  customerDetails = {\n    name: \"Demo Customer  Name\",\n    email: \"customer@mail.com\",\n    phone_number: \"08100000000\",\n  };\n\n  customizations = {\n    title: \"Customization Title\",\n    description: \"Customization Description\",\n    logo: \"https://flutterwave.com/images/logo-colored.svg\",\n  };\n\n  meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" };\n\n  paymentData: InlinePaymentOptions = {\n    public_key: this.publicKey,\n    tx_ref: this.generateReference(),\n    amount: 10,\n    currency: \"NGN\",\n    payment_options: \"card,ussd\",\n    redirect_url: \"\",\n    meta: this.meta,\n    customer: this.customerDetails,\n    customizations: this.customizations,\n    callback: this.makePaymentCallback,\n    onclose: this.closedPaymentModal,\n    callbackContext: this,\n  };\n\n  constructor(private flutterwaveService: FlutterwaveService) {}\n  makePaymentCallback(response: PaymentSuccessResponse): void {\n    console.log(\"Pay\", response);\n    this.flutterwaveService.closePaymentModal(5);\n  }\n  closedPaymentModal(): void {\n    console.log(\"payment is closed\");\n  }\n  generateReference(): string {\n    let date = new Date();\n    return date.getTime().toString();\n  }\n}\n```\n\n### Using Flutterwave directly in your code\n\n#### Method 1\n\nUsing the Flutterwave service.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport {\n  FlutterwaveService,\n  InlinePaymentOptions,\n  PaymentSuccessResponse,\n} from \"flutterwave-angular-v3\";\n\n@Component({\n  selector: \"app-root\",\n  template: `\u003cbutton (click)=\"makePayment()\"\u003ePay\u003c/button\u003e`,\n})\nexport class AppComponent {\n  publicKey = \"FLWPUBK_TEST-XXXXXXXXX\";\n\n  customerDetails = {\n    name: \"Demo Customer  Name\",\n    email: \"customer@mail.com\",\n    phone_number: \"08100000000\",\n  };\n\n  customizations = {\n    title: \"Customization Title\",\n    description: \"Customization Description\",\n    logo: \"https://flutterwave.com/images/logo-colored.svg\",\n  };\n\n  meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" };\n\n  paymentData: InlinePaymentOptions = {\n    public_key: this.publicKey,\n    tx_ref: this.generateReference(),\n    amount: 10,\n    currency: \"NGN\",\n    payment_options: \"card,ussd\",\n    redirect_url: \"\",\n    meta: this.meta,\n    customer: this.customerDetails,\n    customizations: this.customizations,\n    callback: this.makePaymentCallback,\n    onclose: this.closedPaymentModal,\n    callbackContext: this,\n  };\n  //Inject the flutterwave service\n  constructor(private flutterwaveService: FlutterwaveService) {}\n  makePayment() {\n    this.flutterwaveService.inlinePay(this.paymentData);\n  }\n  makePaymentCallback(response: PaymentSuccessResponse): void {\n    console.log(\"Payment callback\", response);\n  }\n  closedPaymentModal(): void {\n    console.log(\"payment is closed\");\n  }\n}\n```\n\n#### Method 2 (Promise) \n\nAsync Payment Response.\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { FlutterwaveService, AsyncPaymentOptions } from \"flutterwave-angular-v3\";\n\n@Component({\n  selector: \"app-root\",\n  template: ` \u003cbutton (click)=\"payViaPromise()\"\u003ePay via Promise\u003c/button\u003e`,\n})\nexport class AppComponent {\n  publicKey = \"FLWPUBK_TEST-XXXXXXXXX\";\n\n  customerDetails = {\n    name: \"Demo Customer  Name\",\n    email: \"customer@mail.com\",\n    phone_number: \"08100000000\",\n  };\n\n  customizations = {\n    title: \"Customization Title\",\n    description: \"Customization Description\",\n    logo: \"https://flutterwave.com/images/logo-colored.svg\",\n  };\n\n  meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" };\n\n  paymentData: AsyncPaymentOptions = {\n    public_key: this.publicKey,\n    tx_ref: this.generateReference(),\n    amount: 10,\n    currency: \"NGN\",\n    payment_options: \"card,ussd\",\n    meta: this.meta,\n    customer: this.customerDetails,\n    customizations: this.customizations,\n  };\n\n  constructor(private flutterwaveService: FlutterwaveService) {}\n\n  payViaPromise() {\n    this.flutterwaveService.asyncInlinePay(this.paymentData).then((response) =\u003e {\n      console.log(\"Promise Res\", response);\n      this.flutterwaveService.closePaymentModal(5);\n    });\n  }\n  generateReference(): string {\n    let date = new Date();\n    return date.getTime().toString();\n  }\n}\n```\n\n### Recurring Payments\n\nPass the payment plan ID into your payload to make [recurring payments](https://developer.flutterwave.com/docs/recurring-payments/payment-plans).\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport {\n  FlutterwaveService,\n  InlinePaymentOptions,\n  PaymentSuccessResponse,\n} from \"flutterwave-angular-v3\";\n@Component({\n  selector: \"app-root\",\n  template: ` \u003cflutterwave-make-payment\n    [public_key]=\"publicKey\"\n    amount=\"10\"\n    currency=\"NGN\"\n    payment_options=\"card\"\n    payment_plan=\"6341\"\n    redirect_url=\"\"\n    text=\"Pay for Payment Plan\"\n    [customer]=\"customerDetails\"\n    [customizations]=\"customizations\"\n    [meta]=\"meta\"\n    [tx_ref]=\"generateReference()\"\n    (callback)=\"makePaymentCallback($event)\"\n    (close)=\"closedPaymentModal()\"\n  \u003e\n  \u003c/flutterwave-make-payment\u003e`,\n})\nexport class AppComponent {\n  //use your PUBLIC_KEY here\n  publicKey = \"FLWPUBK_TEST-XXXXX-X\";\n\n  customerDetails = {\n    name: \"Demo Customer  Name\",\n    email: \"customer@mail.com\",\n    phone_number: \"08100000000\",\n  };\n\n  customizations = {\n    title: \"Customization Title\",\n    description: \"Customization Description\",\n    logo: \"https://flutterwave.com/images/logo-colored.svg\",\n  };\n\n  meta = { counsumer_id: \"7898\", consumer_mac: \"kjs9s8ss7dd\" };\n\n  constructor(private flutterwaveService: FlutterwaveService) {}\n\n  makePaymentCallback(response: PaymentSuccessResponse): void {\n    console.log(\"Pay\", response);\n    this.flutterwaveService.closePaymentModal(5);\n  }\n  closedPaymentModal(): void {\n    console.log(\"payment is closed\");\n  }\n  generateReference(): string {\n    let date = new Date();\n    return date.getTime().toString();\n  }\n}\n```\n\n### Parameters\n\nRead more about our parameters and how they can be used [here](https://developer.flutterwave.com/docs/collecting-payments/inline).\n\n| Parameter           | Always Required ? | Description                                                                                                                                                                                                                             |\n| ------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| public_key          | True              | Your API public key                                                                                                                                                                                                                     |\n| tx_ref              | True              | Your transaction reference. This MUST be unique for every transaction                                                                                                                                                                   |\n| amount              | True              | Amount to charge the customer.                                                                                                                                                                                                          |\n| currency            | False             | currency to charge in. Defaults to NGN                                                                                                                                                                                                  |\n| integrity_hash      | False             | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway.                                                                                                                 |\n| payment_options     | True              | This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on.                                                                                                                                             |\n| payment_plan        | False             | This is the payment plan ID used for Recurring billing                                                                                                                                                                                  |\n| 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.                                                                  |\n| customer            | True              | This is an object that can contains your customer details: e.g - 'customer': {'email': 'example@example.com','phonenumber': '08012345678','name': 'Takeshi Kovacs' }                                                                    |\n| 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                                                                                                         |\n| 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' }                                                                                     |\n| 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' } |\n| callback (function) | False             | This is the function that runs after payment is completed                                                                                                                                                                               |\n| close (function)    | False             | This is the function that runs after payment modal is closed                                                                                                                                                                            |\n\n### Methods\n\nMethods provided by FlutterwaveService and descriptions:\n\n| Method Name       | Parameters                                    | Returns | Description                                                                                                                |\n| ----------------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |\n| inlinePay         | InlinePaymentOptions : Object                 | Null    | This methods allows you to setup and open the payment modal via code                                                       |\n| 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 |\n| 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                |\n\n\n## Debugging Errors\n\nWe understand that you may run into some errors while integrating our library. You can read more about our error messages [here](https://developer.flutterwave.com/docs/integration-guides/errors).\n\nFor `authorization` and `validation` error responses, double-check your API keys and request. If you get a `server` error, kindly engage the team for support.\n\nNB: If you experience compilation errors in your app after importing the Flutterwave module, component or service.\nKindly include the following line in tsconfig.app.json under `compilerOptions` :\n\n```\npaths\": { \"@angular/*\": [ \"node_modules/@angular/*\" ] }\n```\n\nThen restart server and try again\n\n# Support\n\nFor additional assistance using this library, please create an issue on the Github repo or contact the developer experience (DX) team via [email](mailto:developers@flutterwavego.com) or on [slack](https://bit.ly/34Vkzcg).\n\nYou can also follow us [@FlutterwaveEng](https://twitter.com/FlutterwaveEng) and let us know what you think 😊.\n\n## Contribution Guidelines\n\nWe welcome contributions from the community. Read more about our community contribution guidelines [here](/CONTRIBUTING.md).\n\n## License\n\nBy contributing to this library, you agree that your contributions will be licensed under its [MIT license](/LICENSE.md).\n\nCopyright (c) Flutterwave Inc.\n","funding_links":[],"categories":["Table of contents","Recently Updated"],"sub_categories":["Angular","[Mar 09, 2025](/content/2025/03/09/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFlutterwave%2FAngular-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFlutterwave%2FAngular-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFlutterwave%2FAngular-v3/lists"}