feat: paze integration initial commit

src/App.res

@@ -25,6 +25,7 @@ let make = () => {
     switch fullscreenMode {
     | "paymentloader" => <PaymentLoader />
     | "plaidSDK" => <PlaidSDKIframe />
+    | "pazeWallet" => <PazeWallet />
     | "fullscreen" =>
       <div id="fullscreen">
         <FullScreenDivDriver />

src/Components/Spinner.res

@@ -0,0 +1,7 @@
+@react.component
+let make = () => {
+  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  <div className=" w-8 h-8 animate-spin" style={color: themeObj.colorTextSecondary}>
+    <Icon size=32 name="loader" />
+  </div>
+}

src/Payments/PaymentRequestButtonElement.res

@@ -1,4 +1,4 @@
-type wallet = GPayWallet | PaypalWallet | ApplePayWallet | KlarnaWallet | NONE
+type wallet = GPayWallet | PaypalWallet | ApplePayWallet | KlarnaWallet | PazeWallet | NONE
 let paymentMode = str => {
   switch str {
   | "gpay"
@@ -9,6 +9,7 @@ let paymentMode = str => {
   | "apple_pay" =>
     ApplePayWallet
   | "klarna" => KlarnaWallet
+  | "paze" => PazeWallet
   | _ => NONE
   }
 }
@@ -64,7 +65,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
     Gpay,
   )
 
-  let klarnaTokenObj = SessionsType.getPaymentSessionObj(sessionObj.sessionsToken, Klarna)
+  let klarnaTokenObj = getPaymentSessionObj(sessionObj.sessionsToken, Klarna)
 
   let {clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
   let isPaypalSDKFlow = paypalPaymentMethodExperience->Array.includes(InvokeSDK)
@@ -137,6 +138,10 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
                 }}
               </SessionPaymentWrapper>
 
+            | PazeWallet =>
+              <SessionPaymentWrapper type_={Wallet}>
+                <PazeButton />
+              </SessionPaymentWrapper>
             | NONE => React.null
             }
           | None => React.null
@@ -145,6 +150,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
       </ErrorBoundary>
     })
     ->React.array}
+    <PazeButton />
     <Surcharge paymentMethod="wallet" paymentMethodType="google_pay" isForWallets=true />
     <WalletsSaveDetailsText paymentType=paymentMethodListValue.payment_type />
   </div>

src/Payments/PazeButton.res

@@ -0,0 +1,41 @@
+@react.component
+let make = () => {
+  open Utils
+  open RecoilAtoms
+  let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
+  let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
+  let (isDisabled, setIsDisabled) = React.useState(() => false)
+  let (showLoader, setShowLoader) = React.useState(() => false)
+
+  let onClick = _ => {
+    Console.log("Button clicked")
+    setIsDisabled(_ => true)
+    setShowLoader(_ => true)
+
+    let metaData = [("isForceSync", true->JSON.Encode.bool)]->getJsonFromArrayOfJson
+    let message = [
+      ("fullscreen", true->JSON.Encode.bool),
+      ("param", "pazeWallet"->JSON.Encode.string),
+      ("iframeId", iframeId->JSON.Encode.string),
+      ("metadata", metaData),
+    ]
+
+    messageParentWindow(message)
+  }
+
+  <button
+    disabled=false
+    onClick
+    className={`w-full flex flex-row justify-center items-center`}
+    style={
+      borderRadius: themeObj.buttonBorderRadius,
+      backgroundColor: "#2B63FF",
+      height: themeObj.buttonHeight,
+      cursor: {isDisabled ? "not-allowed" : "pointer"},
+      opacity: {isDisabled ? "0.6" : "1"},
+      width: themeObj.buttonWidth,
+      border: `${themeObj.buttonBorderWidth} solid ${themeObj.buttonBorderColor}`,
+    }>
+    {showLoader ? <Spinner /> : <Icon name="paze" size=55 />}
+  </button>
+}

src/Payments/PazeTypes.res

@@ -0,0 +1,33 @@
+type client = {
+  id: string,
+  name: string,
+  profileId: string,
+}
+type initialize = {client: client}
+
+type canCheckout = {emailAddress: string}
+
+type checkout = {
+  acceptedPaymentCardNetworks: array<string>,
+  emailAddress: string,
+  sessionId: string,
+  actionCode: string,
+  transactionValue: JSON.t,
+  shippingPreference: string,
+}
+
+type complete = {
+  transactionOptions: JSON.t,
+  transactionId: string,
+  emailAddress: string,
+  sessionId: string,
+  transactionType: string,
+  transactionValue: JSON.t,
+}
+
+type digitalWalletSdk = {
+  canCheckout: canCheckout => promise<JSON.t>,
+  checkout: checkout => promise<JSON.t>,
+  complete: complete => promise<JSON.t>,
+  initialize: initialize => promise<JSON.t>,
+}

src/Payments/PazeWallet.res

@@ -0,0 +1,81 @@
+@val @scope("window")
+external digitalWalletSdk: PazeTypes.digitalWalletSdk = "DIGITAL_WALLET_SDK"
+
+@react.component
+let make = () => {
+  open Promise
+  let mountPazeSDK = () => {
+    let pazeScriptURL = `https://sandbox.digitalwallet.earlywarning.com/web/resources/js/digitalwallet-sdk.js`
+
+    let loadPazeSDK = _ => {
+      digitalWalletSdk.initialize({
+        client: {
+          id: "YK2L1TY5GL0Y1UYLYM9O13oRBRPaMPqYO20N34ByCkwn-c6Is",
+          name: "Hyperswitch",
+          profileId: "Getin",
+        },
+      })->then(val => {
+        Console.log2("PAZE --- init completed", val)
+        digitalWalletSdk.canCheckout({
+          emailAddress: "[email protected]",
+        })->then(consumerPresent => {
+          Console.log("PAZE --- canCheckout completed")
+          Console.log2("PAZE --- consumerPresent: ", consumerPresent)
+          let transactionValue = {
+            "transactionAmount": "50.21",
+            "transactionCurrencyCode": "USD",
+          }->Identity.anyTypeToJson
+
+          let transactionOptions = {
+            "billingPreference": "ALL",
+            "merchantCategoryCode": "US",
+            "payloadTypeIndicator": "PAYMENT",
+          }->Identity.anyTypeToJson
+
+          digitalWalletSdk.checkout({
+            acceptedPaymentCardNetworks: ["VISA", "MASTERCARD"],
+            // emailAddress: "[email protected]",
+            emailAddress: "[email protected]",
+            sessionId: "m206xe0zacyslo1lsj",
+            actionCode: "START_FLOW",
+            transactionValue,
+            shippingPreference: "ALL",
+          })->then(
+            checkoutResponse => {
+              Console.log2("PAZE --- Checkout Response Object: ", checkoutResponse)
+              digitalWalletSdk.complete({
+                transactionOptions,
+                transactionId: "",
+                emailAddress: "[email protected]",
+                sessionId: "m206xe0zacyslo1lsj",
+                transactionType: "PURCHASE",
+                transactionValue,
+              })->then(
+                completeResponse => {
+                  Console.log2("PAZE --- Complete Response Object: ", completeResponse)
+                  resolve()
+                },
+              )
+            },
+          )
+        })
+      })
+    }
+
+    let pazeScript = Window.createElement("script")
+    pazeScript->Window.elementSrc(pazeScriptURL)
+    pazeScript->Window.elementOnerror(exn => {
+      let err = exn->Identity.anyTypeToJson->JSON.stringify
+      Console.log2("PAZE --- errrorrr", err)
+    })
+    pazeScript->Window.elementOnload(_ => loadPazeSDK()->ignore)
+    Window.body->Window.appendChild(pazeScript)
+  }
+
+  React.useEffect(() => {
+    mountPazeSDK()
+    None
+  }, [])
+
+  <div id="paze-button" className="w-full flex flex-row justify-center rounded-md h-auto" />
+}

src/Types/SessionsType.res

@@ -1,5 +1,8 @@
-type wallet = Gpay | Paypal | Klarna | ApplePay | NONE
-type tokenCategory = ApplePayObject | GooglePayThirdPartyObject | Others
+open Utils
+
+type wallet = Gpay | Paypal | Klarna | ApplePay | Paze | NONE
+
+type tokenCategory = ApplePayObject | GooglePayThirdPartyObject | PazeObject | Others
 
 type paymentType = Wallet | Others
 
@@ -15,15 +18,21 @@ type token = {
   shippingAddressParameters: JSON.t,
   orderDetails: JSON.t,
   connector: string,
+  clientId: string,
+  clientName: string,
+  clientProfileId: string,
 }
 
 type tokenType =
   | ApplePayToken(array<JSON.t>)
   | GooglePayThirdPartyToken(array<JSON.t>)
+  | PazeToken(array<JSON.t>)
   | OtherToken(array<token>)
+
 type optionalTokenType =
   | ApplePayTokenOptional(option<JSON.t>)
   | GooglePayThirdPartyTokenOptional(option<JSON.t>)
+  | PazeTokenOptional(option<JSON.t>)
   | OtherTokenOptional(option<token>)
 
 type sessions = {
@@ -43,19 +52,22 @@ let defaultToken = {
   shippingAddressParameters: Dict.make()->JSON.Encode.object,
   orderDetails: Dict.make()->JSON.Encode.object,
   connector: "",
+  clientId: "",
+  clientName: "",
+  clientProfileId: "",
 }
 let getWallet = str => {
   switch str {
   | "apple_pay" => ApplePay
   | "paypal" => Paypal
   | "klarna" => Klarna
   | "google_pay" => Gpay
+  | "paze" => Paze
   | _ => NONE
   }
 }
-open Utils
 
-let getSessionsToken = (dict, str) => {
+let getSessionsToken = (dict, str) =>
   dict
   ->Dict.get(str)
   ->Option.flatMap(JSON.Decode.array)
@@ -74,14 +86,15 @@ let getSessionsToken = (dict, str) => {
         shippingAddressParameters: getJsonObjectFromDict(dict, "shipping_address_parameters"),
         orderDetails: getJsonObjectFromDict(dict, "order_details"),
         connector: getString(dict, "connector", ""),
+        clientId: getString(dict, "client_id", ""),
+        clientName: getString(dict, "client_name", ""),
+        clientProfileId: getString(dict, "client_profile_id", ""),
       }
     })
   })
   ->Option.getOr([defaultToken])
-}
-let getSessionsTokenJson = (dict, str) => {
+let getSessionsTokenJson = (dict, str) =>
   dict->Dict.get(str)->Option.flatMap(JSON.Decode.array)->Option.getOr([])
-}
 
 let itemToObjMapper = (dict, returnType) => {
   switch returnType {
@@ -97,6 +110,12 @@ let itemToObjMapper = (dict, returnType) => {
       sessionsToken: GooglePayThirdPartyToken(getSessionsTokenJson(dict, "session_token")),
     }
 
+  | PazeObject => {
+      paymentId: getString(dict, "payment_id", ""),
+      clientSecret: getString(dict, "client_secret", ""),
+      sessionsToken: PazeToken(getSessionsTokenJson(dict, "session_token")),
+    }
+
   | Others => {
       paymentId: getString(dict, "payment_id", ""),
       clientSecret: getString(dict, "client_secret", ""),
@@ -105,27 +124,21 @@ let itemToObjMapper = (dict, returnType) => {
   }
 }
 
-let getWalletFromTokenType = (arr, val: wallet) => {
-  let x = arr->Array.find(item =>
+let getWalletFromTokenType = (arr, val) =>
+  arr->Array.find(item =>
     item
     ->JSON.Decode.object
-    ->Option.flatMap(x => {
-      x->Dict.get("wallet_name")
-    })
+    ->Option.flatMap(x => x->Dict.get("wallet_name"))
     ->Option.flatMap(JSON.Decode.string)
     ->Option.getOr("")
     ->getWallet === val
   )
-  x
-}
 
-let getPaymentSessionObj = (tokenType: tokenType, val: wallet) => {
+let getPaymentSessionObj = (tokenType, val) =>
   switch tokenType {
   | ApplePayToken(arr) => ApplePayTokenOptional(getWalletFromTokenType(arr, val))
-
   | GooglePayThirdPartyToken(arr) =>
     GooglePayThirdPartyTokenOptional(getWalletFromTokenType(arr, val))
-
+  | PazeToken(arr) => PazeTokenOptional(getWalletFromTokenType(arr, val))
   | OtherToken(arr) => OtherTokenOptional(arr->Array.find(item => item.walletName == val))
   }
-}