feat: express checkout for paze (#779)

juspay · Nov 12, 2024 · f5dd999 · f5dd999
1 parent f12ce20
commit f5dd999
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 43 deletions.
diff --git a/src/CardUtils.res b/src/CardUtils.res
@@ -365,6 +365,7 @@ let getCardBrandIcon = (cardType, paymentType) => {
     | KlarnaElement
     | ExpressCheckoutElement
     | PaymentMethodsManagement
+    | PazeElement
     | NONE =>
       <Icon size=brandIconSize name="default-card" />
     }

diff --git a/src/LoaderController.res b/src/LoaderController.res
@@ -97,6 +97,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     | PayPalElement
     | ApplePayElement
     | KlarnaElement
+    | PazeElement
     | ExpressCheckoutElement
     | Payment => {
         let paymentOptions = PaymentType.itemToObjMapper(optionsDict, logger)

diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
@@ -69,6 +69,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
   let pazeTokenObj = getPaymentSessionObj(sessionObj.sessionsToken, Paze)
 
   let {clientSecret} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
+  let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let isPaypalSDKFlow = paypalPaymentMethodExperience->Array.includes(InvokeSDK)
   let isPaypalRedirectFlow = paypalPaymentMethodExperience->Array.includes(RedirectToURL)
 
@@ -140,16 +141,18 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
               </SessionPaymentWrapper>
 
             | PazeWallet =>
-              <SessionPaymentWrapper type_={Wallet}>
-                {switch pazeTokenObj {
-                | OtherTokenOptional(optToken) =>
-                  switch optToken {
-                  | Some(token) => <PazeButton token />
-                  | None => React.null
-                  }
-                | _ => React.null
-                }}
-              </SessionPaymentWrapper>
+              <RenderIf condition={options.wallets.paze === Auto}>
+                <SessionPaymentWrapper type_={Wallet}>
+                  {switch pazeTokenObj {
+                  | OtherTokenOptional(optToken) =>
+                    switch optToken {
+                    | Some(token) => <PazeButton token />
+                    | None => React.null
+                    }
+                  | _ => React.null
+                  }}
+                </SessionPaymentWrapper>
+              </RenderIf>
             | NONE => React.null
             }
           | None => React.null

diff --git a/src/Payments/PazeButton.res b/src/Payments/PazeButton.res
@@ -2,6 +2,10 @@
 let make = (~token: SessionsType.token) => {
   open Utils
   open RecoilAtoms
+
+  let url = RescriptReactRouter.useUrl()
+  let componentName = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
+
   let {iframeId, publishableKey, clientSecret} = Recoil.useRecoilValueFromAtom(keys)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let options = Recoil.useRecoilValueFromAtom(optionAtom)
@@ -15,6 +19,7 @@ let make = (~token: SessionsType.token) => {
     setShowLoader(_ => true)
     let metadata =
       [
+        ("componentName", componentName->JSON.Encode.string),
         ("wallet", (token.walletName :> string)->JSON.Encode.string),
         ("clientId", token.clientId->JSON.Encode.string),
         ("clientName", token.clientName->JSON.Encode.string),

diff --git a/src/Payments/PazeWallet.res b/src/Payments/PazeWallet.res
@@ -21,6 +21,7 @@ let make = () => {
         let emailAddress = metaData->getString("emailAddress", "")
         let transactionAmount = metaData->getString("transactionAmount", "")
         let transactionCurrencyCode = metaData->getString("transactionCurrencyCode", "")
+        let componentName = metaData->getString("componentName", "")
 
         let mountPazeSDK = () => {
           let pazeScriptURL =
@@ -84,6 +85,7 @@ let make = () => {
               messageParentWindow([
                 ("fullscreen", false->JSON.Encode.bool),
                 ("isPaze", true->JSON.Encode.bool),
+                ("componentName", componentName->JSON.Encode.string),
                 (
                   "completeResponse",
                   completeResponse
@@ -100,6 +102,7 @@ let make = () => {
                 ("fullscreen", false->JSON.Encode.bool),
                 ("isPaze", true->JSON.Encode.bool),
                 ("flowExited", "stop"->JSON.Encode.string),
+                ("componentName", componentName->JSON.Encode.string),
               ])
               resolve()
             }

diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res
@@ -86,6 +86,7 @@ let make = (
         | PayPalElement
         | ApplePayElement
         | KlarnaElement
+        | PazeElement
         | ExpressCheckoutElement
         | Payment =>
           <ReusableReactSuspense

diff --git a/src/Types/ApplePayTypes.res b/src/Types/ApplePayTypes.res
@@ -185,21 +185,3 @@ let getPaymentRequestFromSession = (~sessionObj, ~componentName) => {
 
   paymentRequest
 }
-
-let handleApplePayIframePostMessage = (msg, componentName, mountedIframeRef) => {
-  let isApplePayMessageSent = ref(false)
-
-  let iframes = Window.querySelectorAll("iframe")
-
-  iframes->Array.forEach(iframe => {
-    let iframeSrc = iframe->Window.getAttribute("src")->Option.getOr("")
-    if iframeSrc->String.includes(`componentName=${componentName}`) {
-      iframe->Js.Nullable.return->Window.iframePostMessage(msg)
-      isApplePayMessageSent := true
-    }
-  })
-
-  if !isApplePayMessageSent.contents {
-    mountedIframeRef->Window.iframePostMessage(msg)
-  }
-}
diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
@@ -1,4 +1,4 @@
-type theme = Default | Brutal | Midnight | Soft | Charcoal| Bubblegum | NONE
+type theme = Default | Brutal | Midnight | Soft | Charcoal | Bubblegum | NONE
 
 type innerLayout = Spaced | Compressed
 
@@ -15,6 +15,7 @@ type mode =
   | PayPalElement
   | ApplePayElement
   | KlarnaElement
+  | PazeElement
   | ExpressCheckoutElement
   | PaymentMethodsManagement
   | NONE
@@ -105,6 +106,7 @@ let getPaymentMode = val => {
   | "paymentMethodCollect" => PaymentMethodCollectElement
   | "klarna" => KlarnaElement
   | "expressCheckout" => ExpressCheckoutElement
+  | "paze" => PazeElement
   | "paymentMethodsManagement" => PaymentMethodsManagement
   | _ => NONE
   }

diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
@@ -95,6 +95,7 @@ type wallets = {
   googlePay: showType,
   payPal: showType,
   klarna: showType,
+  paze: showType,
   style: style,
 }
 type business = {name: string}
@@ -283,6 +284,7 @@ let defaultWallets = {
   googlePay: Auto,
   payPal: Auto,
   klarna: Auto,
+  paze: Auto,
   style: defaultStyle,
 }
 let defaultBillingAddress = {
@@ -830,6 +832,10 @@ let getWallets = (dict, str, logger) => {
         "options.wallets.klarna",
         logger,
       ),
+      paze: getWarningString(json, "paze", "auto", ~logger)->getShowType(
+        "options.wallets.paze",
+        logger,
+      ),
       style: getStyle(json, "style", logger),
     }
   })

diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
@@ -1284,11 +1284,19 @@ let getWalletPaymentMethod = (wallets, paymentType: CardThemeType.mode) => {
   | PayPalElement => wallets->Array.filter(item => item === "paypal")
   | ApplePayElement => wallets->Array.filter(item => item === "apple_pay")
   | KlarnaElement => wallets->Array.filter(item => item === "klarna")
+  | PazeElement => wallets->Array.filter(item => item === "paze")
   | _ => wallets
   }
 }
 
-let expressCheckoutComponents = ["googlePay", "payPal", "applePay", "klarna", "expressCheckout"]
+let expressCheckoutComponents = [
+  "googlePay",
+  "payPal",
+  "applePay",
+  "klarna",
+  "paze",
+  "expressCheckout",
+]
 
 let spmComponents = ["paymentMethodCollect"]->Array.concat(expressCheckoutComponents)
 
@@ -1310,6 +1318,7 @@ let walletElementPaymentType: array<CardThemeType.mode> = [
   PayPalElement,
   ApplePayElement,
   KlarnaElement,
+  PazeElement,
   ExpressCheckoutElement,
 ]
 
@@ -1425,3 +1434,32 @@ let mergeAndFlattenToTuples = (body, requiredFieldsBody) =>
   ->flattenObject(true)
   ->mergeTwoFlattenedJsonDicts(requiredFieldsBody)
   ->getArrayOfTupleFromDict
+
+let sendMessageToIframe = (~msg, ~componentName, ~eventSource=None, ~mountedIframeRef=None) => {
+  let isMessageSent = ref(false)
+  let iframes = Window.querySelectorAll("iframe")
+
+  iframes->Array.forEach(iframe => {
+    let iframeSrc = iframe->Window.getAttribute("src")->Option.getOr("")
+    if iframeSrc->String.includes(`componentName=${componentName}`) {
+      iframe->Js.Nullable.return->Window.iframePostMessage(msg)
+      isMessageSent := true
+    }
+  })
+
+  if !isMessageSent.contents {
+    switch (eventSource, mountedIframeRef) {
+    | (Some(source), _) => source->Window.sendPostMessage(msg)
+    | (None, Some(ref)) => ref->Window.iframePostMessage(msg)
+    | (None, None) => ()
+    }
+  }
+}
+
+let handleApplePayIframePostMessage = (msg, componentName, mountedIframeRef) => {
+  sendMessageToIframe(~msg, ~componentName, ~mountedIframeRef=Some(mountedIframeRef))
+}
+
+let handlePazeIframePostMessage = (msg, componentName, eventSource) => {
+  sendMessageToIframe(~msg, ~componentName, ~eventSource=Some(eventSource))
+}
diff --git a/src/hyper-loader/Elements.res b/src/hyper-loader/Elements.res
@@ -3,10 +3,9 @@ open ErrorUtils
 open Identity
 open Utils
 open EventListenerManager
-open ApplePayTypes
 
 type trustPayFunctions = {
-  finishApplePaymentV2: (string, paymentRequestData) => promise<JSON.t>,
+  finishApplePaymentV2: (string, ApplePayTypes.paymentRequestData) => promise<JSON.t>,
   executeGooglePayment: (string, GooglePayType.paymentDataRequest) => promise<JSON.t>,
 }
 @new external trustPayApi: JSON.t => trustPayFunctions = "TrustPayApi"
@@ -130,14 +129,13 @@ let make = (
       }
     }
 
-    let onPazeCallback = mountedIframeRef => {
-      (ev: Types.event) => {
-        let json = ev.data->Identity.anyTypeToJson
-        let dict = json->getDictFromJson
-        let isPazeExist = dict->getBool("isPaze", false)
-        if isPazeExist {
-          mountedIframeRef->Window.iframePostMessage([("data", json)]->Dict.fromArray)
-        }
+    let onPazeCallback = (event: Types.event) => {
+      let json = event.data->Identity.anyTypeToJson
+      let dict = json->getDictFromJson
+      if dict->getBool("isPaze", false) {
+        let componentName = dict->getString("componentName", "payment")
+        let msg = [("data", json)]->Dict.fromArray
+        handlePazeIframePostMessage(msg, componentName, event.source)
       }
     }
 
@@ -150,7 +148,7 @@ let make = (
           isTaxCalculationEnabled.contents =
             dict->getDictFromDict("response")->getBool("is_tax_calculation_enabled", false)
           addSmartEventListener("message", onPlaidCallback(mountedIframeRef), "onPlaidCallback")
-          addSmartEventListener("message", onPazeCallback(mountedIframeRef), "onPazeCallback")
+          addSmartEventListener("message", onPazeCallback, "onPazeCallback")
 
           let json = dict->getJsonFromDict("response", JSON.Encode.null)
           let isApplePayPresent = PaymentMethodsRecord.getPaymentMethodTypeFromList(
@@ -292,6 +290,7 @@ let make = (
       | "applePay"
       | "klarna"
       | "expressCheckout"
+      | "paze"
       | "paymentMethodsManagement"
       | "payment" => ()
       | str => manageErrorWarning(UNKNOWN_KEY, ~dynamicStr=`${str} type in create`, ~logger)
@@ -355,7 +354,7 @@ let make = (
 
           if dict->Dict.get("applePayMounted")->Option.isSome {
             if wallets.applePay === Auto {
-              switch sessionForApplePay->Nullable.toOption {
+              switch ApplePayTypes.sessionForApplePay->Nullable.toOption {
               | Some(session) =>
                 try {
                   if session.canMakePayments() {
@@ -943,7 +942,7 @@ let make = (
                         intermediatePaymentData
                         ->getDictFromJson
                         ->getDictFromDict("shippingAddress")
-                        ->billingContactItemToObjMapper
+                        ->ApplePayTypes.billingContactItemToObjMapper
                       let newShippingAddress =
                         [
                           ("state", shippingAddress.administrativeArea->JSON.Encode.string),