Merge pull request #4 from LazerPay-Finance/franko4don/fix-white-screen

added fix for white screen issue
LazerpayHQ · Mar 1, 2022 · 549f883 · 549f883 · vercel · Mar 1, 2022
2 parents 0458a2c + 6953455
commit 549f883
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/src/Lazer/LazerPay.tsx b/src/Lazer/LazerPay.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { isRequired } from '../helpers';
 import type { PaymentProps } from '../@types';
 import SDKWrapper from '../components/SDKWrapper';
@@ -9,6 +9,7 @@ import { Text } from 'react-native';
 
 const LazerPay = (props: PaymentProps) => {
   const [checkPropsValue, setCheckProps] = useState(false);
+  const webviewRef: any = useRef();
 
   const {
     publicKey,
@@ -129,12 +130,22 @@ const LazerPay = (props: PaymentProps) => {
         break;
     }
   };
+
+  const injectValues = () => {
+    webviewRef.current.postMessage(JSON.stringify({
+      customerName, customerEmail, currency, amount, 
+      acceptPartialPayment,publicKey, businessLogo, reference
+    }));
+  }
+
   return (
     <SDKWrapper visible={openSDK} onRequestClose={onClose}>
       {checkPropsValue ? (
         <WebView
-          source={{ html: Lazerpaycontent }}
+          ref={webviewRef}
+          source={{ uri: '<URL>' }}
           onMessage={messageReceived}
+          onLoadEnd={() => injectValues()}
           cacheEnabled={false}
           cacheMode={'LOAD_NO_CACHE'}
           startInLoadingState={true}

diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta http-equiv="X-UA-Compatible" content="ie=edge">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <link
+            href="https://cdn.jsdelivr.net/gh/LazerPay-Finance/Sohne-font@main/Sohne-Buch.woff"
+            rel="stylesheet"
+            />
+          <title>Lazerpay Checkout</title>
+        </head>
+          <body style="background-color:#fff;height:100vh">
+            <script src="https://cdn.jsdelivr.net/gh/LazerPay-Finance/checkout-build@main/checkout%401.0.1/dist/index.min.js"></script>
+            <script type="text/javascript">
+                let wind = null
+                getMobileOS()
+                function getMobileOS() {
+                    var userAgent = navigator.userAgent.toLowerCase();
+                    var Android = userAgent.indexOf("android") > -1;
+
+                    if(Android) {
+                        wind = document
+                    }else{
+                        wind = window
+                    }
+
+                }
+
+              function payWithLazerpay(customerName, customerEmail, currency, amount, acceptPartialPayment,publicKey, businessLogo, reference){
+                LazerCheckout({
+                    name: customerName,
+                    email: customerEmail,
+                    amount: amount,
+                    key: publicKey,
+                    logo: businessLogo || '',
+                    reference: reference || '',
+                    acceptPartialPayment: acceptPartialPayment,
+                    currency: currency || 'USD',
+                    onClose: (data)=>{
+                        const resp = {event:'cancelled'};
+                        window.ReactNativeWebView.postMessage(JSON.stringify(resp))
+                    },
+                    onSuccess: (data)=>{
+                        const resp = {event:'successful', data};
+                        window.ReactNativeWebView.postMessage(JSON.stringify(resp))
+                    },
+                    onError: (data)=>{
+                        const resp = {event:'error'};
+                        window.ReactNativeWebView.postMessage(JSON.stringify(resp))
+                    }
+                })
+                }
+
+            </script>
+            <script>
+
+                wind.addEventListener("message", function(data) {                  
+                    var props = JSON.parse(data.data);
+
+                    payWithLazerpay(props.customerName, props.customerEmail, props.currency, props.amount, 
+                    props.acceptPartialPayment,props.publicKey, props.businessLogo, props.reference);
+                });
+
+            </script>
+          </body>
+      </html>