diff --git a/src/Payments/KlarnaSDK.res b/src/Payments/KlarnaSDK.res index 0dbbb1494..9b0ed400d 100644 --- a/src/Payments/KlarnaSDK.res +++ b/src/Payments/KlarnaSDK.res @@ -18,6 +18,7 @@ let make = (~sessionObj: SessionsType.token) => { let {iframeId} = Recoil.useRecoilValueFromAtom(keys) let status = CommonHooks.useScript("https://x.klarnacdn.net/kp/lib/v1/api.js") // Klarna SDK script let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) + let (isCompleted, setIsCompleted) = React.useState(_ => false) let setAreOneClickWalletsRendered = Recoil.useSetRecoilState(areOneClickWalletsRendered) let (stateJson, setStatesJson) = React.useState(_ => JSON.Encode.null) @@ -40,6 +41,12 @@ let make = (~sessionObj: SessionsType.token) => { PaymentUtils.useStatesJson(setStatesJson) + UtilityHooks.useHandlePostMessages( + ~complete=isCompleted, + ~empty=!isCompleted, + ~paymentType="klarna", + ) + React.useEffect(() => { if ( status === "ready" && @@ -67,6 +74,7 @@ let make = (~sessionObj: SessionsType.token) => { ("param", "paymentloader"->JSON.Encode.string), ("iframeId", iframeId->JSON.Encode.string), ]) + setIsCompleted(_ => true) authorize( {collect_shipping_address: componentName->getIsExpressCheckoutComponent}, Dict.make()->JSON.Encode.object, diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res index b1384a6c0..57bb69ba9 100644 --- a/src/Payments/PayPal.res +++ b/src/Payments/PayPal.res @@ -35,6 +35,11 @@ let make = () => { let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(RecoilAtoms.isManualRetryEnabled) let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal) + UtilityHooks.useHandlePostMessages( + ~complete=paypalClicked, + ~empty=!paypalClicked, + ~paymentType="paypal", + ) let onPaypalClick = _ev => { loggerState.setLogInfo( ~value="Paypal Button Clicked", diff --git a/src/Payments/PaypalSDK.res b/src/Payments/PaypalSDK.res index a3c05e954..0855aef17 100644 --- a/src/Payments/PaypalSDK.res +++ b/src/Payments/PaypalSDK.res @@ -8,6 +8,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = let (loggerState, _setLoggerState) = Recoil.useRecoilState(RecoilAtoms.loggerAtom) let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered) let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) + let (isCompleted, setIsCompleted) = React.useState(_ => false) let token = sessionObj.token let orderDetails = sessionObj.orderDetails->getOrderDetails(paymentType) @@ -51,6 +52,11 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ) PaymentUtils.useStatesJson(setStatesJson) + UtilityHooks.useHandlePostMessages( + ~complete=isCompleted, + ~empty=!isCompleted, + ~paymentType="paypal", + ) let mountPaypalSDK = () => { let clientId = sessionObj.token @@ -84,6 +90,7 @@ let make = (~sessionObj: SessionsType.token, ~paymentType: CardThemeType.mode) = ~completeAuthorize, ~handleCloseLoader, ~areOneClickWalletsRendered, + ~setIsCompleted, ) }) Window.body->Window.appendChild(paypalScript) diff --git a/src/Payments/PaypalSDKHelpers.res b/src/Payments/PaypalSDKHelpers.res index 3c6db1b01..e09785c17 100644 --- a/src/Payments/PaypalSDKHelpers.res +++ b/src/Payments/PaypalSDKHelpers.res @@ -19,6 +19,7 @@ let loadPaypalSDK = ( ~areOneClickWalletsRendered: ( RecoilAtoms.areOneClickWalletsRendered => RecoilAtoms.areOneClickWalletsRendered ) => unit, + ~setIsCompleted, ) => { loggerState.setLogInfo( ~value="Paypal SDK Button Clicked", @@ -32,6 +33,7 @@ let loadPaypalSDK = ( if result { let paypalWrapper = GooglePayType.getElementById(Utils.document, "paypal-button") paypalWrapper.innerHTML = "" + setIsCompleted(_ => true) paypal["Buttons"]({ style: buttonStyle, fundingSource: paypal["FUNDING"]["PAYPAL"],