Skip to content

Commit b8208e6

Browse files
corneliusyaovicorneliusyaovi
authored
Merge pull request #3 from toybz/develop
added option of payment response as a promise, fixed lint errors
2 parents 07c4f9d + 107fe24 commit b8208e6

File tree

11 files changed

+186
-130
lines changed

11 files changed

+186
-130
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

‎README.md‎

Lines changed: 169 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,9 @@
2020
- [References](#references)
2121

2222
<a id="about"></a>
23-
2423
## About
2524

26-
Flutterwave official Angular library to accept payment via card , USSD, QrCode etc.
25+
Flutterwave official Angular library to accept payment via card , USSD, QrCode, Mobile Money etc.
2726

2827
<a id="getting-started"></a>
2928

@@ -59,40 +58,9 @@ $ yarn add flutterwave-angular-v3
5958

6059
## Usage
6160

62-
Include the Flutterwave V3 script tag to the index.html file
63-
```html
64-
65-
<script src="https://checkout.flutterwave.com/v3.js"></script>
66-
67-
<!--example below-->
68-
69-
<!doctype html>
70-
<html lang="en">
71-
<head>
72-
<meta charset="utf-8">
73-
<title>Flutterwave Angular SDK</title>
74-
<base href="/">
75-
76-
<meta name="viewport" content="width=device-width, initial-scale=1">
77-
<link rel="icon" type="image/x-icon" href="favicon.ico">
78-
</head>
79-
<body>
80-
<app-root></app-root>
81-
</body>
82-
83-
<script src="https://checkout.flutterwave.com/v3.js"></script>
84-
85-
86-
</html>
87-
88-
89-
90-
```
91-
92-
9361
Import FlutterwaveModule to the app root module
9462

95-
```javascript
63+
```typescript
9664
import { FlutterwaveModule } from "flutterwave-angular-v3"
9765

9866
@NgModule({
@@ -108,143 +76,225 @@ import { FlutterwaveModule } from "flutterwave-angular-v3"
10876
})
10977
```
11078

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

136-
Use as component. Method 2
137-
138-
```html
139-
140-
<!--
141-
Method 2: Pass in the payment parameters as an object to the component 'data' attribute
142-
-->
143-
144-
<flutterwave-make-payment [data]="{
145-
public_key: 'FLWPUBK_TEST-***********',
146-
tx_ref: '78**********',
147-
amount: 9000,
148-
currency: 'NGN',
149-
payment_options: 'card,ussd',
150-
redirect_url: '',
151-
text: 'Pay Now',
152-
className: '',
153-
style: '',
154-
meta :{ 'counsumer_id': '7898' , 'consumer_mac' : 'kjs9s8ss7dd' },
155-
customer : {name: 'Demo Customer Name',email: 'customer2@mail.com',phone_number: '081845***' },
156-
customizations: {title: 'Customization Title' , description: 'Customization Description' , logo : 'https://flutterwave.com/images/logo-colored.svg' } ,
157-
callback: makePaymentCallback ,
158-
onclose: cancelledPayment
159-
}
160-
></flutterwave-make-payment>
81+
```typescript
82+
import {Component, OnInit} from '@angular/core';
83+
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
84+
@Component({
85+
selector: 'app-root',
86+
template: ` <flutterwave-make-payment
87+
[public_key]="publicKey"
88+
amount='10'
89+
currency='NGN'
90+
payment_options="card"
91+
redirect_url=""
92+
text="Pay Now"
93+
[customer]="customerDetails"
94+
[customizations]="customizations"
95+
[meta]="meta"
96+
[tx_ref]="generateReference()"
97+
(callback)="makePaymentCallback($event)"
98+
(close)="closedPaymentModal()" >
99+
</flutterwave-make-payment>`
100+
})
101+
export class AppComponent{
102+
//use your PUBLIC_KEY here
103+
publicKey = "FLWPUBK_TEST-XXXXX-X";
104+
105+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
106+
107+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
161108

109+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
110+
111+
constructor( private flutterwave: Flutterwave) {}
112+
113+
makePaymentCallback(response: PaymentSuccessResponse): void {
114+
console.log("Pay", response);
115+
this.flutterwave.closePaymentModal(5)
116+
}
117+
closedPaymentModal(): void {
118+
console.log('payment is closed');
119+
}
120+
generateReference(): string {
121+
let date = new Date();
122+
return date.getTime().toString();
123+
}
124+
}
162125

163126
```
164127

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

166-
Use in code (Flutterwave service)
130+
```typescript
131+
import {Component, OnInit} from '@angular/core';
132+
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3"
167133

168-
```javascript
134+
@Component({
135+
selector: 'app-root',
136+
template: ` <flutterwave-make-payment [data]="paymentData" ></flutterwave-make-payment>`
137+
})
138+
export class AppComponent{
139+
publicKey = "FLWPUBK_TEST-0b0-XXXXXXXXXXX";
169140

141+
142+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
143+
144+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
145+
146+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
147+
148+
149+
paymentData: InlinePaymentOptions = {
150+
public_key: this.publicKey,
151+
tx_ref: this.generateReference(),
152+
amount: 10,
153+
currency: 'NGN',
154+
payment_options: 'card,ussd',
155+
redirect_url: '',
156+
meta: this.meta,
157+
customer: this.customerDetails,
158+
customizations: this.customizations,
159+
callback: this.makePaymentCallback,
160+
onclose: this.closedPaymentModal,
161+
callbackContext: this
162+
}
163+
164+
constructor( private flutterwave: Flutterwave) {}
165+
makePaymentCallback(response: PaymentSuccessResponse): void {
166+
console.log("Pay", response);
167+
this.flutterwave.closePaymentModal(5)
168+
}
169+
closedPaymentModal(): void {
170+
console.log('payment is closed');
171+
}
172+
generateReference(): string {
173+
let date = new Date();
174+
return date.getTime().toString();
175+
}
176+
177+
}
178+
```
179+
180+
Use in Code, Method 1 : Using the Flutterwave service.
181+
182+
```typescript
170183
import { Component } from '@angular/core';
171184
import {Flutterwave, InlinePaymentOptions, PaymentSuccessResponse} from "flutterwave-angular-v3";
172185

173186
@Component({
174187
selector: 'app-root',
175-
template: `<button (click)="makePayment()" )>Pay</button>`,
188+
template: `<button (click)="makePayment()">Pay</button>`,
176189
})
177190
export class AppComponent {
178-
title = 'app';
179191

180-
paymentData : InlinePaymentOptions = {
181-
public_key: 'FLWPUBK_TEST-XXXXX-X',
182-
tx_ref: '8*********',
183-
amount: 9000,
192+
publicKey = "FLWPUBK_TEST-XXXXXXXXX";
193+
194+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
195+
196+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
197+
198+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
199+
200+
paymentData: InlinePaymentOptions = {
201+
public_key: this.publicKey,
202+
tx_ref: this.generateReference(),
203+
amount: 10,
184204
currency: 'NGN',
185205
payment_options: 'card,ussd',
186206
redirect_url: '',
187-
meta : {
188-
counsumer_id: '7898' ,
189-
consumer_mac : 'kjs9s8ss7dd'
190-
},
191-
customer : {
192-
name: 'Demo Customer Name',
193-
email: 'customer@mail.com',
194-
phone_number: '08184******'
195-
},
196-
customizations: {
197-
title: 'Customization Title' ,
198-
description: 'Customization Description' ,
199-
logo : 'https://flutterwave.com/images/logo-colored.svg'
200-
} ,
201-
callback: this.makePaymentCallback ,
202-
onclose: this.cancelledPayment
207+
meta: this.meta,
208+
customer: this.customerDetails,
209+
customizations: this.customizations,
210+
callback: this.makePaymentCallback,
211+
onclose: this.closedPaymentModal,
212+
callbackContext: this
203213
}
204-
205214
//Inject the flutterwave service
206215
constructor(private flutterwave: Flutterwave ) {
207216
}
208-
209217
makePayment(){
210218
this.flutterwave.inlinePay(this.paymentData)
211219
}
212-
213220
makePaymentCallback(response: PaymentSuccessResponse): void {
214221
console.log("Payment callback", response);
215222
}
216-
217-
cancelledPayment(): void {
223+
closedPaymentModal(): void {
218224
console.log('payment is closed');
219-
220225
}
226+
}
221227

228+
```
222229

223-
}
224230

231+
Use in Code, Method 2 (Promise): Async Payment Response.
225232

226-
```
233+
```typescript
234+
import {Component} from '@angular/core';
235+
import {Flutterwave, AsyncPaymentOptions} from "flutterwave-angular-v3"
227236

237+
@Component({
238+
selector: 'app-root',
239+
template: ` <button (click)="payViaPromise()" >Pay via Promise </button>`
240+
})
241+
export class AppComponent{
228242

243+
publicKey = "FLWPUBK_TEST-XXXXXXXXX";
229244

230-
<a id="deployment"></a>
245+
customerDetails = { name: 'Demo Customer Name', email: 'customer@mail.com', phone_number: '08100000000'}
246+
247+
customizations = {title: 'Customization Title', description: 'Customization Description', logo: 'https://flutterwave.com/images/logo-colored.svg'}
248+
249+
meta = {'counsumer_id': '7898', 'consumer_mac': 'kjs9s8ss7dd'}
250+
251+
paymentData : AsyncPaymentOptions = {
252+
public_key: this.publicKey,
253+
tx_ref: this.generateReference(),
254+
amount: 10,
255+
currency: 'NGN',
256+
payment_options: 'card,ussd',
257+
meta: this.meta,
258+
customer: this.customerDetails,
259+
customizations: this.customizations,
260+
}
261+
262+
constructor( private flutterwave: Flutterwave) {}
263+
264+
payViaPromise() {
265+
this.flutterwave.asyncInlinePay(this.paymentData).then(
266+
(response) =>{
267+
console.log("Promise Res" , response)
268+
this.flutterwave.closePaymentModal(5)
269+
}
270+
)
271+
}
272+
generateReference(): string {
273+
let date = new Date();
274+
return date.getTime().toString();
275+
}
276+
277+
}
278+
279+
```
231280

281+
<a id="deployment"></a>
232282
## Deployment
233283

234284
- Switch to Live Mode on the Dashboard settings page
235285
- Use the Live Public API key from the API tab
236286

237287
<a id="build-tools"></a>
238-
239-
## Built Using
288+
## Built Using
240289

241290
- [Angular CLI](https://cli.angular.io/)
242291
- [Typescript](https://www.typescriptlang.org/)
243292
- [Angular](https://angular.io/)
293+
- [ng-packagr](https://github.com/ng-packagr/ng-packagr)
244294

245295

246-
<a id="references"></a>
247296

297+
<a id="references"></a>
248298
## Flutterwave API References
249299

250300
- [Flutterwave API Doc](https://developer.flutterwave.com/docs)

‎dist/bundles/flutterwave-angular-v3.umd.js.map‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)