Skip to content

Commit d186557

Browse files
author
Toyeeb
committed
Add: Close Payment Modal and Payment Response Via Promise
1 parent c4c9e1a commit d186557

38 files changed

+1108
-423
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ Thumbs.db
4343

4444
todo.md
4545
developmentInfos.md
46+
Archive.zip

‎License.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 Toyeeb Olamilekan Rahmon
3+
Copyright (c) 2020 Flutterwave
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 174 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<p align="center">
2-
<img title="Flutterwave" height="200" src="https://flutterwave.com/images/logo-colored.svg" width="50%"/>
3-
</p>
4-
5-
## Table of Contents
1+
## 📝 Table of Contents
62

73
- [About](#about)
84
- [Getting Started](#getting-started)
@@ -13,14 +9,13 @@
139
- [References](#references)
1410

1511
<a id="about"></a>
16-
1712
## About
1813

19-
Flutterwave official Angular library to accept payment via card , USSD, QrCode etc.
14+
Flutterwave official Angular library to accept payment via card , USSD, QrCode, Mobile Money etc.
2015

2116
<a id="getting-started"></a>
2217

23-
## Getting Started
18+
## 🏁 Getting Started
2419

2520
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.
2621
See [references](#references) for links to dashboard and API documentation.
@@ -50,42 +45,11 @@ $ yarn add flutterwave-angular-v3
5045

5146
<a id="usage"></a>
5247

53-
## Usage
54-
55-
Include the Flutterwave V3 script tag to the index.html file
56-
```html
57-
58-
<script src="https://checkout.flutterwave.com/v3.js"></script>
59-
60-
<!--example below-->
61-
62-
<!doctype html>
63-
<html lang="en">
64-
<head>
65-
<meta charset="utf-8">
66-
<title>Flutterwave Angular SDK</title>
67-
<base href="/">
68-
69-
<meta name="viewport" content="width=device-width, initial-scale=1">
70-
<link rel="icon" type="image/x-icon" href="favicon.ico">
71-
</head>
72-
<body>
73-
<app-root></app-root>
74-
</body>
75-
76-
<script src="https://checkout.flutterwave.com/v3.js"></script>
77-
78-
79-
</html>
80-
81-
82-
83-
```
84-
48+
## 🔧 Usage
8549

8650
Import FlutterwaveModule to the app root module
8751

88-
```javascript
52+
```typescript
8953
import { FlutterwaveModule } from "flutterwave-angular-v3"
9054

9155
@NgModule({
@@ -101,144 +65,226 @@ import { FlutterwaveModule } from "flutterwave-angular-v3"
10165
})
10266
```
10367

104-
Use as component. Method 1
105-
106-
```html
107-
<!--
108-
Method 1: Pass in payment parameters individually as component attributes
109-
-->
110-
111-
<flutterwave-make-payment
112-
public_key="FLWPUBK_TEST-*************"
113-
tx_ref="25673*******"
114-
amount=9000
115-
currency='NGN'
116-
payment_options="card,ussd"
117-
redirect_url=""
118-
text="Pay Now"
119-
className="class-name"
120-
style=""
121-
[meta]="{counsumer_id: '7898' ,consumer_mac: 'kjs9s8ss7dd' }"
122-
[customer]="{ name: 'Demo Customer Name',email: 'customer@mail.com', phone_number: '0818450****' }"
123-
[customizations]="{ title: 'Customization Title' ,description: 'Customization Description' , logo : 'https://flutterwave.com/images/logo-colored.svg' }"
124-
(callback)="makePaymentCallback($event)"
125-
(close)="cancelledPayment()"
126-
></flutterwave-make-payment>
127-
```
68+
Use as component, Method 1 : Pass in payment parameters individually as component attributes
12869

129-
Use as component. Method 2
130-
131-
```html
132-
133-
<!--
134-
Method 2: Pass in the payment parameters as an object to the component 'data' attribute
135-
-->
136-
137-
<flutterwave-make-payment [data]="{
138-
public_key: 'FLWPUBK_TEST-***********',
139-
tx_ref: '78**********',
140-
amount: 9000,
141-
currency: 'NGN',
142-
payment_options: 'card,ussd',
143-
redirect_url: '',
144-
text: 'Pay Now',
145-
className: '',
146-
style: '',
147-
meta :{ 'counsumer_id': '7898' , 'consumer_mac' : 'kjs9s8ss7dd' },
148-
customer : {name: 'Demo Customer Name',email: 'customer2@mail.com',phone_number: '081845***' },
149-
customizations: {title: 'Customization Title' , description: 'Customization Description' , logo : 'https://flutterwave.com/images/logo-colored.svg' } ,
150-
callback: makePaymentCallback ,
151-
onclose: cancelledPayment
152-
}
153-
></flutterwave-make-payment>
70+
```typescript
71+
import {Component, OnInit} from '@angular/core';
72+
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
73+
@Component({
74+
selector: 'app-root',
75+
template: ` <flutterwave-make-payment
76+
[public_key]="publicKey"
77+
amount='10'
78+
currency='NGN'
79+
payment_options="card"
80+
redirect_url=""
81+
text="Pay Now"
82+
[customer]="customerDetails"
83+
[customizations]="customizations"
84+
[meta]="meta"
85+
[tx_ref]="generateReference()"
86+
(callback)="makePaymentCallback($event)"
87+
(close)="closedPaymentModal()" >
88+
</flutterwave-make-payment>`
89+
})
90+
export class AppComponent{
91+
//use your PUBLIC_KEY here
92+
publicKey = "FLWPUBK_TEST-XXXXX-X";
93+
94+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
15495

96+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
97+
98+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
99+
100+
constructor( private flutterwave: Flutterwave) {}
101+
102+
makePaymentCallback(response: PaymentSuccessResponse): void {
103+
console.log("Pay", response);
104+
this.flutterwave.closePaymentModal(5)
105+
}
106+
closedPaymentModal(): void {
107+
console.log('payment is closed');
108+
}
109+
generateReference(): string {
110+
let date = new Date();
111+
return date.getTime().toString();
112+
}
113+
}
155114

156115
```
157116

117+
Use as component, Method 2: Pass in the payment parameters as an object to the component 'data' attribute
158118

159-
Use in code (Flutterwave service)
119+
```typescript
120+
import {Component, OnInit} from '@angular/core';
121+
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
122+
123+
@Component({
124+
selector: 'app-root',
125+
template: ` <flutterwave-make-payment [data]="paymentData" ></flutterwave-make-payment>`
126+
})
127+
export class AppComponent{
128+
publicKey = "FLWPUBK_TEST-0b0-XXXXXXXXXXX";
129+
130+
131+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
132+
133+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
134+
135+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
136+
137+
138+
paymentData: InlinePaymentOptions = {
139+
public_key: this.publicKey,
140+
tx_ref: this.generateReference(),
141+
amount: 10,
142+
currency: 'NGN',
143+
payment_options: 'card,ussd',
144+
redirect_url: '',
145+
meta: this.meta,
146+
customer: this.customerDetails,
147+
customizations: this.customizations,
148+
callback: this.makePaymentCallback,
149+
onclose: this.closedPaymentModal,
150+
callbackContext: this
151+
}
152+
153+
constructor( private flutterwave: Flutterwave) {}
154+
makePaymentCallback(response: PaymentSuccessResponse): void {
155+
console.log("Pay", response);
156+
this.flutterwave.closePaymentModal(5)
157+
}
158+
closedPaymentModal(): void {
159+
console.log('payment is closed');
160+
}
161+
generateReference(): string {
162+
let date = new Date();
163+
return date.getTime().toString();
164+
}
165+
166+
}
167+
```
160168

161-
```javascript
169+
Use in Code, Method 1 : Using the Flutterwave service.
162170

171+
```typescript
163172
import { Component } from '@angular/core';
164173
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3";
165174

166175
@Component({
167176
selector: 'app-root',
168-
template: `<button (click)="makePayment()" )>Pay</button>`,
177+
template: `<button (click)="makePayment()">Pay</button>`,
169178
})
170179
export class AppComponent {
171-
title = 'app';
172180

173-
paymentData : InlinePaymentOptions = {
174-
public_key: 'FLWPUBK_TEST-XXXXX-X',
175-
tx_ref: '8*********',
176-
amount: 9000,
181+
publicKey = "FLWPUBK_TEST-XXXXXXXXX";
182+
183+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
184+
185+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
186+
187+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
188+
189+
paymentData: InlinePaymentOptions = {
190+
public_key: this.publicKey,
191+
tx_ref: this.generateReference(),
192+
amount: 10,
177193
currency: 'NGN',
178194
payment_options: 'card,ussd',
179195
redirect_url: '',
180-
meta : {
181-
counsumer_id: '7898' ,
182-
consumer_mac : 'kjs9s8ss7dd'
183-
},
184-
customer : {
185-
name: 'Demo Customer Name',
186-
email: 'customer@mail.com',
187-
phone_number: '08184******'
188-
},
189-
customizations: {
190-
title: 'Customization Title' ,
191-
description: 'Customization Description' ,
192-
logo : 'https://flutterwave.com/images/logo-colored.svg'
193-
} ,
194-
callback: this.makePaymentCallback ,
195-
onclose: this.cancelledPayment
196+
meta: this.meta,
197+
customer: this.customerDetails,
198+
customizations: this.customizations,
199+
callback: this.makePaymentCallback,
200+
onclose: this.closedPaymentModal,
201+
callbackContext: this
196202
}
197-
198203
//Inject the flutterwave service
199204
constructor(private flutterwave: Flutterwave ) {
200205
}
201-
202206
makePayment(){
203207
this.flutterwave.inlinePay(this.paymentData)
204208
}
205-
206209
makePaymentCallback(response: PaymentSuccessResponse): void {
207210
console.log("Payment callback", response);
208211
}
209-
210-
cancelledPayment(): void {
212+
closedPaymentModal(): void {
211213
console.log('payment is closed');
212-
213214
}
215+
}
216+
217+
```
214218

215219

216-
}
220+
Use in Code, Method 2 (Promise): Async Payment Response.
217221

222+
```typescript
223+
import {Component} from '@angular/core';
224+
import {Flutterwave, AsyncPaymentOptions} from "flutterwave-angular-v3"
218225

219-
```
226+
@Component({
227+
selector: 'app-root',
228+
template: ` <button (click)="payViaPromise()" >Pay via Promise </button>`
229+
})
230+
export class AppComponent{
220231

232+
publicKey = "FLWPUBK_TEST-XXXXXXXXX";
221233

234+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
222235

223-
<a id="deployment"></a>
236+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
237+
238+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
239+
240+
paymentData : AsyncPaymentOptions = {
241+
public_key: this.publicKey,
242+
tx_ref: this.generateReference(),
243+
amount: 10,
244+
currency: 'NGN',
245+
payment_options: 'card,ussd',
246+
meta: this.meta,
247+
customer: this.customerDetails,
248+
customizations: this.customizations,
249+
}
224250

225-
## Deployment
251+
constructor( private flutterwave: Flutterwave) {}
252+
253+
payViaPromise() {
254+
this.flutterwave.asyncInlinePay(this.paymentData).then(
255+
(response) =>{
256+
console.log("Promise Res" , response)
257+
this.flutterwave.closePaymentModal(5)
258+
}
259+
)
260+
}
261+
generateReference(): string {
262+
let date = new Date();
263+
return date.getTime().toString();
264+
}
265+
266+
}
267+
268+
```
269+
270+
<a id="deployment"></a>
271+
## 🚀 Deployment
226272

227273
- Switch to Live Mode on the Dashboard settings page
228274
- Use the Live Public API key
229275

230276
<a id="build-tools"></a>
231-
232-
## Built Using
277+
## ⛏️ Built Using
233278

234279
- [Angular CLI](https://cli.angular.io/)
235280
- [Typescript](https://www.typescriptlang.org/)
236281
- [Angular](https://angular.io/)
282+
- [ng-packagr](https://github.com/ng-packagr/ng-packagr)
237283

238284

239-
<a id="references"></a>
240285

241-
## Flutterwave API References
286+
<a id="references"></a>
287+
## 🎉 Flutterwave API References
242288

243289
- [Flutterwave API Doc](https://developer.flutterwave.com/docs)
244290
- [Flutterwave Inline Payment Doc](https://developer.flutterwave.com/docs/flutterwave-inline)

0 commit comments

Comments
 (0)