Updated SDK for recurring payments

Author: Toyeeb

README.md

@@ -278,6 +278,88 @@ export class AppComponent{
 
 ```
 
+Recurring payment (Payment Plans) Example: 
+See [here](https://developer.flutterwave.com/docs/payment-plans)  for how to create and fetch payment plans.
+```typescript
+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 |
+
+
+
+
 <a id="deployment"></a>
 ## Deployment
 
@@ -303,4 +385,4 @@ export class AppComponent{
 
 
 
-  
+  

dist/README.md

@@ -1,4 +1,15 @@
-## 📝 Table of Contents
+<p align="center">
+    <img title="Flutterwave" height="200" src="https://flutterwave.com/images/logo-colored.svg" width="50%"/>
+</p>
+
+
+# Flutterwave v3 Angular Library
+![Node.js Package](https://github.com/Flutterwave/Flutterwave-Angular-v3/workflows/Node.js%20Package/badge.svg)
+![npm](https://img.shields.io/npm/v/flutterwave-angular-v3)
+![npm](https://img.shields.io/npm/dt/flutterwave-angular-v3)
+![NPM](https://img.shields.io/npm/l/flutterwave-angular-v3)
+
+## Table of Contents
 
 - [About](#about)
 - [Getting Started](#getting-started)
@@ -15,7 +26,7 @@ Flutterwave official  Angular library to accept payment via  card , USSD, QrCode
 
 <a id="getting-started"></a>
 
-## 🏁 Getting Started
+## 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](#deployment) for notes on how to deploy the project on a live system.
 See [references](#references) for links to dashboard and API documentation.
@@ -45,7 +56,7 @@ $ yarn  add  flutterwave-angular-v3
 
 <a id="usage"></a>
 
-## 🔧 Usage
+## Usage
 
 Import FlutterwaveModule to the  app root module
 
@@ -267,14 +278,96 @@ export class AppComponent{
 
 ```
 
+Recurring payment (Payment Plans) Example: 
+See [here](https://developer.flutterwave.com/docs/payment-plans)  for how to create and fetch payment plans.
+```typescript
+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 |
+
+
+
+
 <a id="deployment"></a>
-## 🚀 Deployment
+## Deployment
 
 - Switch to Live Mode on the Dashboard settings page
-- Use the Live Public API key 
+- Use the Live Public API key from the API tab
 
 <a id="build-tools"></a>
-## ⛏️ Built Using
+## Built Using
 
 - [Angular CLI](https://cli.angular.io/) 
 - [Typescript](https://www.typescriptlang.org/)
@@ -284,8 +377,12 @@ export class AppComponent{
 
 
 <a id="references"></a>
-## 🎉 Flutterwave API  References
+## Flutterwave API  References
 
 - [Flutterwave API Doc](https://developer.flutterwave.com/docs)
 - [Flutterwave Inline Payment Doc](https://developer.flutterwave.com/docs/flutterwave-inline)
 - [Flutterwave Dashboard](https://dashboard.flutterwave.com/login)  
+
+
+
+