Merge pull request #24 from Flutterwave/fix-update-react-version

update react version and fix closePaymentModal issues

Author: corneliusyaovi

dist/index.es.js

@@ -216,8 +216,10 @@ var FlutterWaveButton = function (_a) {
  * function to be called when you want to close payment
  */
 function closePaymentModal() {
-    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%;');
-    document.body.style.overflow = '';
+    document.getElementsByName('checkout').forEach(function (item) {
+        item.setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
+        document.body.style.overflow = '';
+    });
 }
 
 export { FlutterWaveButton, types as FlutterWaveTypes, closePaymentModal, useFlutterwave };

dist/index.js

@@ -220,8 +220,10 @@ var FlutterWaveButton = function (_a) {
  * function to be called when you want to close payment
  */
 function closePaymentModal() {
-    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%;');
-    document.body.style.overflow = '';
+    document.getElementsByName('checkout').forEach(function (item) {
+        item.setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
+        document.body.style.overflow = '';
+    });
 }
 
 exports.FlutterWaveButton = FlutterWaveButton;

example/package-lock.json

@@ -6,9 +6,9 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

example/package.json

@@ -26,7 +26,7 @@ export default function App() {
 
   const fwConfig = {
     ...config,
-    text: 'Pay with Flutterwave!',
+    text: 'Pay with Flutterwave btn',
     callback: (response) => {
       console.log(response);
       closePaymentModal()

example/src/App.js

@@ -216,8 +216,10 @@ var FlutterWaveButton = function (_a) {
  * function to be called when you want to close payment
  */
 function closePaymentModal() {
-    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%;');
-    document.body.style.overflow = '';
+    document.getElementsByName('checkout').forEach(function (item) {
+        item.setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
+        document.body.style.overflow = '';
+    });
 }
 
 export { FlutterWaveButton, types as FlutterWaveTypes, closePaymentModal, useFlutterwave };

example/src/dist/index.es.js

@@ -220,8 +220,10 @@ var FlutterWaveButton = function (_a) {
  * function to be called when you want to close payment
  */
 function closePaymentModal() {
-    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%;');
-    document.body.style.overflow = '';
+    document.getElementsByName('checkout').forEach(function (item) {
+        item.setAttribute('style', 'position:fixed;top:0;left:0;z-index:-1;border:none;opacity:0;pointer-events:none;width:100%;height:100%;');
+        document.body.style.overflow = '';
+    });
 }
 
 exports.FlutterWaveButton = FlutterWaveButton;