fix: multiple iframe resolve

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)
@@ -26,6 +30,7 @@ let make = (~token: SessionsType.token) => {
       (
         "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),

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 =
@@ -100,6 +101,7 @@ let make = () => {
                 ("fullscreen", false->JSON.Encode.bool),
                 ("isPaze", true->JSON.Encode.bool),
                 ("flowExited", "stop"->JSON.Encode.string),
+                ("componentName", componentName->JSON.Encode.string),
               ])
               resolve()
             }

src/Types/ApplePayTypes.res

@@ -203,3 +203,19 @@ let handleApplePayIframePostMessage = (msg, componentName, mountedIframeRef) =>
     mountedIframeRef->Window.iframePostMessage(msg)
   }
 }
+
+let handlePazeIframePostMessage = (msg, componentName, eventSource) => {
+  let isPazePresent = 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)
+      isPazePresent := true
+    }
+  })
+
+  if !isPazePresent.contents {
+    eventSource->Window.sendPostMessage(msg)
+  }
+}

src/hyper-loader/Elements.res

@@ -129,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)
       }
     }
 
@@ -149,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(