Skip to content

Commit 239f483

Browse files
ugwumadu116ugwumadu116
authored
Merge pull request #6 from Flutterwave/fix-API-tracking-ClosePaymentModal
fix api tracking
2 parents 7ee5b16 + 2b70499 commit 239f483

17 files changed

+495
-20
lines changed

‎README.md

+11-4
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ $ yarn add flutterwave-react-v3
5050

5151
```javascript
5252
import React from 'react';
53-
import { useFlutterwave } from 'flutterwave-react-v3';
53+
import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
5454

5555
export default function App() {
5656
const config = {
@@ -81,7 +81,8 @@ export default function App() {
8181
onClick={() => {
8282
handleFlutterPayment({
8383
callback: (response) => {
84-
console.log(response);
84+
console.log(response);
85+
closePaymentModal() // this will close the modal programmatically
8586
},
8687
onClose: () => {},
8788
});
@@ -99,7 +100,7 @@ export default function App() {
99100

100101
```javascript
101102
import React from 'react';
102-
import { FlutterWaveButton } from 'flutterwave-react-v3';
103+
import { FlutterWaveButton, closePaymentModal } from 'flutterwave-react-v3';
103104

104105
export default function App() {
105106
const config = {
@@ -124,7 +125,8 @@ export default function App() {
124125
...config,
125126
text: 'Pay with Flutterwave!',
126127
callback: (response) => {
127-
console.log(response);
128+
console.log(response);
129+
closePaymentModal() // this will close the modal programmatically
128130
},
129131
onClose: () => {},
130132
};
@@ -137,6 +139,11 @@ export default function App() {
137139
);
138140
}
139141
```
142+
## Other methods and descriptions:
143+
144+
| Method Name | Parameters | Returns |Description |
145+
| ------------- | ------------- | ------------- | ------------- |
146+
| closePaymentModal | Null | Null | This methods allows you to close the payment modal via code. |
140147

141148
Please checkout [Flutterwave Documentation](https://developer.flutterwave.com/docs/flutterwave-standard) for other available options you can add to the tag.
142149

‎dist/closeModal.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* function to be called when you want to close payment
3+
*/
4+
export default function closePaymentModal(): void;

‎dist/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * as FlutterWaveTypes from './types';
22
export { default as useFlutterwave } from './useFW';
33
export { default as FlutterWaveButton } from './FWButton';
4+
export { default as closePaymentModal } from './closeModal';

‎dist/index.es.js

+92-2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,44 @@ function __rest(s, e) {
4444
t[p[i]] = s[p[i]];
4545
}
4646
return t;
47+
}
48+
49+
function __awaiter(thisArg, _arguments, P, generator) {
50+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
51+
return new (P || (P = Promise))(function (resolve, reject) {
52+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
53+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
54+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
55+
step((generator = generator.apply(thisArg, _arguments || [])).next());
56+
});
57+
}
58+
59+
function __generator(thisArg, body) {
60+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
61+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
62+
function verb(n) { return function (v) { return step([n, v]); }; }
63+
function step(op) {
64+
if (f) throw new TypeError("Generator is already executing.");
65+
while (_) try {
66+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
67+
if (y = 0, t) op = [op[0] & 2, t.value];
68+
switch (op[0]) {
69+
case 0: case 1: t = op; break;
70+
case 4: _.label++; return { value: op[1], done: false };
71+
case 5: _.label++; y = op[1]; op = [0]; continue;
72+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
73+
default:
74+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
75+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
76+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
77+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
78+
if (t[2]) _.ops.pop();
79+
_.trys.pop(); continue;
80+
}
81+
op = body.call(thisArg, _);
82+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
83+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
84+
}
4785
}
4886

4987
var loadedScripts = {};
@@ -107,12 +145,56 @@ function useFlutterwave(flutterWaveConfig) {
107145
* @param object - {callback, onClose}
108146
*/
109147
function handleFlutterwavePayment(_a) {
148+
var _this = this;
110149
var _b, _c;
111150
var callback = _a.callback, onClose = _a.onClose;
112151
if (error)
113152
throw new Error('Unable to load flutterwave payment modal');
114153
if (loaded) {
115-
var flutterwaveArgs = __assign(__assign({}, flutterWaveConfig), { amount: (_b = flutterWaveConfig.amount) !== null && _b !== void 0 ? _b : 0, callback: callback, onclose: onClose, payment_options: (_c = flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) !== null && _c !== void 0 ? _c : 'card, ussd, mobilemoney' });
154+
var flutterwaveArgs = __assign(__assign({}, flutterWaveConfig), { amount: (_b = flutterWaveConfig.amount) !== null && _b !== void 0 ? _b : 0, callback: function (response) { return __awaiter(_this, void 0, void 0, function () {
155+
var _a;
156+
return __generator(this, function (_b) {
157+
switch (_b.label) {
158+
case 0:
159+
if (!(response.status === "successful")) return [3 /*break*/, 2];
160+
return [4 /*yield*/, fetch(" https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent", {
161+
method: "post",
162+
headers: {
163+
"Content-Type": "application/json",
164+
},
165+
body: JSON.stringify({
166+
publicKey: flutterWaveConfig.public_key,
167+
language: "Flutterwave-React-v3",
168+
version: "1.0.7",
169+
title: "" + ((flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options.split(",").length) > 1 ? "Initiate-Charge-Multiple" : "Initiate-Charge-" + (flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options)),
170+
message: "15s"
171+
})
172+
})];
173+
case 1:
174+
_b.sent();
175+
callback(response);
176+
return [3 /*break*/, 4];
177+
case 2: return [4 /*yield*/, fetch(" https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent", {
178+
method: "post",
179+
headers: {
180+
"Content-Type": "application/json",
181+
},
182+
body: JSON.stringify({
183+
publicKey: (_a = flutterWaveConfig.public_key) !== null && _a !== void 0 ? _a : "",
184+
language: "Flutterwave-React-v3",
185+
version: "1.0.7",
186+
title: "" + ((flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options.split(",").length) > 1 ? "Initiate-Charge-Multiple-error" : "Initiate-Charge-" + (flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) + "-error"),
187+
message: "15s"
188+
})
189+
})];
190+
case 3:
191+
_b.sent();
192+
callback(response);
193+
_b.label = 4;
194+
case 4: return [2 /*return*/];
195+
}
196+
});
197+
}); }, onclose: onClose, payment_options: (_c = flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) !== null && _c !== void 0 ? _c : 'card, ussd, mobilemoney' });
116198
return (
117199
// @ts-ignore
118200
window.FlutterwaveCheckout &&
@@ -129,4 +211,12 @@ var FlutterWaveButton = function (_a) {
129211
return (createElement("button", { disabled: disabled, className: className, onClick: function () { return handleFlutterwavePayment({ callback: callback, onClose: onClose }); } }, text || children));
130212
};
131213

132-
export { FlutterWaveButton, types as FlutterWaveTypes, useFlutterwave };
214+
/**
215+
* function to be called when you want to close payment
216+
*/
217+
function closePaymentModal() {
218+
document.getElementsByName('checkout')[0].setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
219+
document.body.style.overflow = '';
220+
}
221+
222+
export { FlutterWaveButton, types as FlutterWaveTypes, closePaymentModal, useFlutterwave };

‎dist/index.js

+92-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,44 @@ function __rest(s, e) {
4848
t[p[i]] = s[p[i]];
4949
}
5050
return t;
51+
}
52+
53+
function __awaiter(thisArg, _arguments, P, generator) {
54+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
55+
return new (P || (P = Promise))(function (resolve, reject) {
56+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
57+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
58+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
59+
step((generator = generator.apply(thisArg, _arguments || [])).next());
60+
});
61+
}
62+
63+
function __generator(thisArg, body) {
64+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
65+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
66+
function verb(n) { return function (v) { return step([n, v]); }; }
67+
function step(op) {
68+
if (f) throw new TypeError("Generator is already executing.");
69+
while (_) try {
70+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
71+
if (y = 0, t) op = [op[0] & 2, t.value];
72+
switch (op[0]) {
73+
case 0: case 1: t = op; break;
74+
case 4: _.label++; return { value: op[1], done: false };
75+
case 5: _.label++; y = op[1]; op = [0]; continue;
76+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
77+
default:
78+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
79+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
80+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
81+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
82+
if (t[2]) _.ops.pop();
83+
_.trys.pop(); continue;
84+
}
85+
op = body.call(thisArg, _);
86+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
87+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
88+
}
5189
}
5290

5391
var loadedScripts = {};
@@ -111,12 +149,56 @@ function useFlutterwave(flutterWaveConfig) {
111149
* @param object - {callback, onClose}
112150
*/
113151
function handleFlutterwavePayment(_a) {
152+
var _this = this;
114153
var _b, _c;
115154
var callback = _a.callback, onClose = _a.onClose;
116155
if (error)
117156
throw new Error('Unable to load flutterwave payment modal');
118157
if (loaded) {
119-
var flutterwaveArgs = __assign(__assign({}, flutterWaveConfig), { amount: (_b = flutterWaveConfig.amount) !== null && _b !== void 0 ? _b : 0, callback: callback, onclose: onClose, payment_options: (_c = flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) !== null && _c !== void 0 ? _c : 'card, ussd, mobilemoney' });
158+
var flutterwaveArgs = __assign(__assign({}, flutterWaveConfig), { amount: (_b = flutterWaveConfig.amount) !== null && _b !== void 0 ? _b : 0, callback: function (response) { return __awaiter(_this, void 0, void 0, function () {
159+
var _a;
160+
return __generator(this, function (_b) {
161+
switch (_b.label) {
162+
case 0:
163+
if (!(response.status === "successful")) return [3 /*break*/, 2];
164+
return [4 /*yield*/, fetch(" https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent", {
165+
method: "post",
166+
headers: {
167+
"Content-Type": "application/json",
168+
},
169+
body: JSON.stringify({
170+
publicKey: flutterWaveConfig.public_key,
171+
language: "Flutterwave-React-v3",
172+
version: "1.0.7",
173+
title: "" + ((flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options.split(",").length) > 1 ? "Initiate-Charge-Multiple" : "Initiate-Charge-" + (flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options)),
174+
message: "15s"
175+
})
176+
})];
177+
case 1:
178+
_b.sent();
179+
callback(response);
180+
return [3 /*break*/, 4];
181+
case 2: return [4 /*yield*/, fetch(" https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent", {
182+
method: "post",
183+
headers: {
184+
"Content-Type": "application/json",
185+
},
186+
body: JSON.stringify({
187+
publicKey: (_a = flutterWaveConfig.public_key) !== null && _a !== void 0 ? _a : "",
188+
language: "Flutterwave-React-v3",
189+
version: "1.0.7",
190+
title: "" + ((flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options.split(",").length) > 1 ? "Initiate-Charge-Multiple-error" : "Initiate-Charge-" + (flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) + "-error"),
191+
message: "15s"
192+
})
193+
})];
194+
case 3:
195+
_b.sent();
196+
callback(response);
197+
_b.label = 4;
198+
case 4: return [2 /*return*/];
199+
}
200+
});
201+
}); }, onclose: onClose, payment_options: (_c = flutterWaveConfig === null || flutterWaveConfig === void 0 ? void 0 : flutterWaveConfig.payment_options) !== null && _c !== void 0 ? _c : 'card, ussd, mobilemoney' });
120202
return (
121203
// @ts-ignore
122204
window.FlutterwaveCheckout &&
@@ -133,6 +215,15 @@ var FlutterWaveButton = function (_a) {
133215
return (React.createElement("button", { disabled: disabled, className: className, onClick: function () { return handleFlutterwavePayment({ callback: callback, onClose: onClose }); } }, text || children));
134216
};
135217

218+
/**
219+
* function to be called when you want to close payment
220+
*/
221+
function closePaymentModal() {
222+
document.getElementsByName('checkout')[0].setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
223+
document.body.style.overflow = '';
224+
}
225+
136226
exports.FlutterWaveButton = FlutterWaveButton;
137227
exports.FlutterWaveTypes = types;
228+
exports.closePaymentModal = closePaymentModal;
138229
exports.useFlutterwave = useFlutterwave;

‎example/src/App.js

+40-6
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,63 @@
11
import React from 'react';
2-
import { useFlutterwave, FlutterWaveButton } from './dist/index';
2+
import { useFlutterwave, FlutterWaveButton, closePaymentModal } from './dist/index';
3+
34

45
export default function App() {
56
const config = {
6-
public_key: 'FLWPUBK-ad8d5d4eca114b1255ac7798d3d1787d-X',
7+
public_key: 'FLWPUBK-d5f9ffa65be83a121705e72e0f6a2679-X',
78
tx_ref: Date.now(),
8-
amount: 100,
9+
amount: 10,
910
currency: 'NGN',
1011
payment_options: 'card,mobilemoney,ussd',
1112
customer: {
1213
email: '[email protected]',
1314
phonenumber: '08102909304',
1415
name: 'test user',
1516
},
17+
subaccounts: [
18+
{
19+
id: "RS_ED071C8796497315BD851F4A0B89DAC9",
20+
transaction_split_ratio: 2,
21+
},
22+
{
23+
id: "RS_1CCEB40AFBC50D0CB3ADAAF102CC974F",
24+
transaction_split_ratio: 2,
25+
},
26+
{
27+
id: "RS_ED071C8796497315BD851F4A0B89DAC9",
28+
transaction_split_ratio: 2,
29+
},
30+
31+
{
32+
id: "RS_1CCEB40AFBC50D0CB3ADAAF102CC974F",
33+
transaction_split_ratio: 2,
34+
},
35+
{
36+
id: "RS_ED071C8796497315BD851F4A0B89DAC9",
37+
transaction_split_ratio: 2,
38+
}
39+
],
40+
1641
customizations: {
1742
title: 'My store',
1843
description: 'Payment for items in cart',
1944
logo: 'https://assets.piedpiper.com/logo.png',
2045
},
2146
};
22-
47+
2348
const handleFlutterPayment = useFlutterwave(config);
2449

2550
const fwConfig = {
2651
...config,
2752
text: 'Pay with Flutterwave!',
2853
callback: (response) => {
2954
console.log(response);
55+
closePaymentModal()
3056
},
31-
onClose: () => {},
57+
onClose: () => {
58+
console.log("You close me ooo")
59+
},
60+
3261
};
3362

3463
return (
@@ -41,8 +70,13 @@ export default function App() {
4170
handleFlutterPayment({
4271
callback: (response) => {
4372
console.log(response);
73+
closePaymentModal()
74+
75+
},
76+
onClose: () => {
77+
console.log("You close me ooo")
4478
},
45-
onClose: () => {},
79+
4680
});
4781
}}
4882
>

‎example/src/dist/closeModal.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/**
2+
* function to be called when you want to close payment
3+
*/
4+
export default function closePaymentModal(): void;

‎example/src/dist/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * as FlutterWaveTypes from './types';
22
export { default as useFlutterwave } from './useFW';
33
export { default as FlutterWaveButton } from './FWButton';
4+
export { default as closePaymentModal } from './closeModal';

0 commit comments

Comments
 (0)