fix: added Fixes for one click widgets

src/CardUtils.res

@@ -361,7 +361,7 @@ let getCardBrandIcon = (cardType, paymentType) => {
     | GooglePayElement
     | PayPalElement
     | ApplePayElement
-    | PaymentRequestButtonsElement
+    | ExpressCheckoutElement
     | NONE =>
       <Icon size=brandIconSize name="default-card" />
     }

src/LoaderController.res

@@ -82,7 +82,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     | GooglePayElement
     | PayPalElement
     | ApplePayElement
-    | PaymentRequestButtonsElement
+    | ExpressCheckoutElement
     | Payment => {
         let paymentOptions = PaymentType.itemToObjMapper(optionsDict, logger)
         setOptionsPayment(_ => paymentOptions)

src/Payments/ApplePay.res

@@ -2,6 +2,8 @@ open Utils
 open Promise
 @react.component
 let make = (~sessionObj: option<JSON.t>) => {
+  let url = RescriptReactRouter.useUrl()
+  let componentName = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let {publishableKey, sdkHandleOneClickConfirmPayment} = Recoil.useRecoilValueFromAtom(
     RecoilAtoms.keys,
@@ -242,7 +244,14 @@ let make = (~sessionObj: option<JSON.t>) => {
             let bodyDict = PaymentBody.applePayThirdPartySdkBody(~connectors)
             processPayment(bodyDict, ~isThirdPartyFlow=true, ())
           } else {
-            let message = [("applePayButtonClicked", true->JSON.Encode.bool)]
+            let paymentRequest = ApplePayTypes.getPaymentRequestFromSession(
+              ~sessionObj,
+              ~componentName,
+            )
+            let message = [
+              ("applePayButtonClicked", true->JSON.Encode.bool),
+              ("applePayPaymentRequest", paymentRequest),
+            ]
             handlePostMessage(message)
           }
         } else {

src/Payments/GPay.res

@@ -6,6 +6,8 @@ open Promise
 
 @react.component
 let make = (~sessionObj: option<SessionsType.token>, ~thirdPartySessionObj: option<JSON.t>) => {
+  let url = RescriptReactRouter.useUrl()
+  let componentName = CardUtils.getQueryParamsDictforKey(url.search, "componentName")
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
   let {iframeId} = Recoil.useRecoilValueFromAtom(keys)
   let {publishableKey, sdkHandleOneClickConfirmPayment} = Recoil.useRecoilValueFromAtom(keys)
@@ -183,12 +185,18 @@ let make = (~sessionObj: option<SessionsType.token>, ~thirdPartySessionObj: opti
             let bodyDict = PaymentBody.gPayThirdPartySdkBody(~connectors)
             processPayment(bodyDict, ~isThirdPartyFlow=true, ())
           } else {
+            let paymentDataRequest = getPaymentDataFromSession(~sessionObj, ~componentName)
             handlePostMessage([
               ("fullscreen", true->JSON.Encode.bool),
               ("param", "paymentloader"->JSON.Encode.string),
               ("iframeId", iframeId->JSON.Encode.string),
             ])
-            options.readOnly ? () : handlePostMessage([("GpayClicked", true->JSON.Encode.bool)])
+            if !options.readOnly {
+              handlePostMessage([
+                ("GpayClicked", true->JSON.Encode.bool),
+                ("GpayPaymentDataRequest", paymentDataRequest->Identity.anyTypeToJson),
+              ])
+            }
           }
         } else {
           let bodyDict = PaymentBody.gpayRedirectBody(~connectors)

src/RenderPaymentMethods.res

@@ -82,7 +82,7 @@ let make = (
         | GooglePayElement
         | PayPalElement
         | ApplePayElement
-        | PaymentRequestButtonsElement
+        | ExpressCheckoutElement
         | Payment =>
           <React.Suspense
             fallback={<RenderIf condition={showLoader}>

src/Types/ApplePayTypes.res

@@ -1,3 +1,5 @@
+open Utils
+
 type token = {paymentData: JSON.t}
 type billingContact = {
   addressLines: array<string>,
@@ -65,68 +67,102 @@ type paymentRequestData = {
 
 let jsonToPaymentRequestDataType: Dict.t<JSON.t> => paymentRequestData = jsonDict => {
   let clientTimeZone = CardUtils.dateTimeFormat().resolvedOptions().timeZone
-  let clientCountry = Utils.getClientCountry(clientTimeZone)
+  let clientCountry = getClientCountry(clientTimeZone)
   let defaultCountryCode = clientCountry.isoAlpha2
 
   let getTotal = totalDict => {
-    Utils.getString(totalDict, "type", "") == ""
+    getString(totalDict, "type", "") == ""
       ? total(
-          ~label=Utils.getString(totalDict, "label", ""),
-          ~amount=Utils.getString(totalDict, "amount", ""),
+          ~label=getString(totalDict, "label", ""),
+          ~amount=getString(totalDict, "amount", ""),
           (),
         )
       : total(
-          ~label=Utils.getString(totalDict, "label", ""),
-          ~amount=Utils.getString(totalDict, "amount", ""),
-          ~\"type"=Utils.getString(totalDict, "type", ""),
+          ~label=getString(totalDict, "label", ""),
+          ~amount=getString(totalDict, "amount", ""),
+          ~\"type"=getString(totalDict, "type", ""),
           (),
         )
   }
 
-  if Utils.getString(jsonDict, "merchant_identifier", "") == "" {
+  if getString(jsonDict, "merchant_identifier", "") == "" {
     paymentRequestData(
-      ~countryCode=Utils.getString(jsonDict, "country_code", defaultCountryCode),
-      ~currencyCode=Utils.getString(jsonDict, "currency_code", ""),
-      ~merchantCapabilities=Utils.getStrArray(jsonDict, "merchant_capabilities"),
-      ~supportedNetworks=Utils.getStrArray(jsonDict, "supported_networks"),
-      ~total=getTotal(jsonDict->Utils.getDictFromObj("total")),
+      ~countryCode=getString(jsonDict, "country_code", defaultCountryCode),
+      ~currencyCode=getString(jsonDict, "currency_code", ""),
+      ~merchantCapabilities=getStrArray(jsonDict, "merchant_capabilities"),
+      ~supportedNetworks=getStrArray(jsonDict, "supported_networks"),
+      ~total=getTotal(jsonDict->getDictFromObj("total")),
       (),
     )
   } else {
     paymentRequestData(
-      ~countryCode=Utils.getString(jsonDict, "country_code", ""),
-      ~currencyCode=Utils.getString(jsonDict, "currency_code", ""),
-      ~merchantCapabilities=Utils.getStrArray(jsonDict, "merchant_capabilities"),
-      ~supportedNetworks=Utils.getStrArray(jsonDict, "supported_networks"),
-      ~total=getTotal(jsonDict->Utils.getDictFromObj("total")),
-      ~merchantIdentifier=Utils.getString(jsonDict, "merchant_identifier", ""),
+      ~countryCode=getString(jsonDict, "country_code", ""),
+      ~currencyCode=getString(jsonDict, "currency_code", ""),
+      ~merchantCapabilities=getStrArray(jsonDict, "merchant_capabilities"),
+      ~supportedNetworks=getStrArray(jsonDict, "supported_networks"),
+      ~total=getTotal(jsonDict->getDictFromObj("total")),
+      ~merchantIdentifier=getString(jsonDict, "merchant_identifier", ""),
       (),
     )
   }
 }
 
 let billingContactItemToObjMapper = dict => {
   {
-    addressLines: dict->Utils.getStrArray("addressLines"),
-    administrativeArea: dict->Utils.getString("administrativeArea", ""),
-    countryCode: dict->Utils.getString("countryCode", ""),
-    familyName: dict->Utils.getString("familyName", ""),
-    givenName: dict->Utils.getString("givenName", ""),
-    locality: dict->Utils.getString("locality", ""),
-    postalCode: dict->Utils.getString("postalCode", ""),
+    addressLines: dict->getStrArray("addressLines"),
+    administrativeArea: dict->getString("administrativeArea", ""),
+    countryCode: dict->getString("countryCode", ""),
+    familyName: dict->getString("familyName", ""),
+    givenName: dict->getString("givenName", ""),
+    locality: dict->getString("locality", ""),
+    postalCode: dict->getString("postalCode", ""),
   }
 }
 
 let shippingContactItemToObjMapper = dict => {
   {
-    emailAddress: dict->Utils.getString("emailAddress", ""),
-    phoneNumber: dict->Utils.getString("phoneNumber", ""),
-    addressLines: dict->Utils.getStrArray("addressLines"),
-    administrativeArea: dict->Utils.getString("administrativeArea", ""),
-    countryCode: dict->Utils.getString("countryCode", ""),
-    familyName: dict->Utils.getString("familyName", ""),
-    givenName: dict->Utils.getString("givenName", ""),
-    locality: dict->Utils.getString("locality", ""),
-    postalCode: dict->Utils.getString("postalCode", ""),
+    emailAddress: dict->getString("emailAddress", ""),
+    phoneNumber: dict->getString("phoneNumber", ""),
+    addressLines: dict->getStrArray("addressLines"),
+    administrativeArea: dict->getString("administrativeArea", ""),
+    countryCode: dict->getString("countryCode", ""),
+    familyName: dict->getString("familyName", ""),
+    givenName: dict->getString("givenName", ""),
+    locality: dict->getString("locality", ""),
+    postalCode: dict->getString("postalCode", ""),
   }
 }
+
+let getPaymentRequestFromSession = (~sessionObj, ~componentName) => {
+  let paymentRequest =
+    sessionObj
+    ->Option.flatMap(JSON.Decode.object)
+    ->Option.getOr(Dict.make())
+    ->Dict.get("payment_request_data")
+    ->Option.getOr(Dict.make()->JSON.Encode.object)
+    ->transformKeys(CamelCase)
+
+  let requiredShippingContactFields =
+    paymentRequest
+    ->getDictFromJson
+    ->getStrArray("requiredShippingContactFields")
+
+  if (
+    componentName->getIsExpressCheckoutComponent->not &&
+      requiredShippingContactFields->Array.length !== 0
+  ) {
+    let shippingFieldsWithoutPostalAddress =
+      requiredShippingContactFields->Array.filter(item => item !== "postalAddress")
+
+    paymentRequest
+    ->getDictFromJson
+    ->Dict.set(
+      "requiredShippingContactFields",
+      shippingFieldsWithoutPostalAddress
+      ->getArrofJsonString
+      ->JSON.Encode.array,
+    )
+  }
+
+  paymentRequest
+}

src/Types/CardThemeType.res

@@ -14,7 +14,7 @@ type mode =
   | GooglePayElement
   | PayPalElement
   | ApplePayElement
-  | PaymentRequestButtonsElement
+  | ExpressCheckoutElement
   | NONE
 type label = Above | Floating | Never
 type themeClass = {
@@ -98,7 +98,7 @@ let getPaymentMode = val => {
   | "googlePay" => GooglePayElement
   | "payPal" => PayPalElement
   | "applePay" => ApplePayElement
-  | "paymentRequestButtons" => PaymentRequestButtonsElement
+  | "expressCheckout" => ExpressCheckoutElement
   | _ => NONE
   }
 }
@@ -113,7 +113,7 @@ let getPaymentModeToStrMapper = val => {
   | GooglePayElement => "GooglePayElement"
   | PayPalElement => "PayPalElement"
   | ApplePayElement => "ApplePayElement"
-  | PaymentRequestButtonsElement => "PaymentRequestButtonsElement"
+  | ExpressCheckoutElement => "ExpressCheckoutElement"
   | NONE => "None"
   }
 }

src/Types/GooglePayType.res

@@ -156,3 +156,31 @@ let billingContactItemToObjMapper = dict => {
     sortingCode: dict->getString("sortingCode", ""),
   }
 }
+
+let baseRequest = {
+  "apiVersion": 2,
+  "apiVersionMinor": 0,
+}
+
+let getPaymentDataFromSession = (~sessionObj, ~componentName) => {
+  let gpayobj = switch sessionObj {
+  | Some(val) => val
+  | _ => SessionsType.defaultToken
+  }
+  let paymentDataRequest = assign2(
+    Dict.make()->JSON.Encode.object,
+    baseRequest->Identity.anyTypeToJson,
+  )
+  paymentDataRequest.allowedPaymentMethods = gpayobj.allowed_payment_methods->arrayJsonToCamelCase
+  paymentDataRequest.transactionInfo = gpayobj.transaction_info->transformKeys(CamelCase)
+  paymentDataRequest.merchantInfo = gpayobj.merchant_info->transformKeys(CamelCase)
+  paymentDataRequest.emailRequired = gpayobj.emailRequired
+
+  if componentName->getIsExpressCheckoutComponent {
+    paymentDataRequest.shippingAddressRequired = gpayobj.shippingAddressRequired
+    paymentDataRequest.shippingAddressParameters =
+      gpayobj.shippingAddressParameters->transformKeys(CamelCase)
+  }
+
+  paymentDataRequest
+}

src/Utilities/Utils.res

@@ -1230,7 +1230,7 @@ let getWalletPaymentMethod = (wallets, paymentType: CardThemeType.mode) => {
   }
 }
 
-let expressCheckoutComponents = ["googlePay", "payPal", "applePay", "paymentRequestButtons"]
+let expressCheckoutComponents = ["googlePay", "payPal", "applePay", "expressCheckout"]
 
 let componentsForPaymentElementCreate = ["payment"]->Array.concat(expressCheckoutComponents)
 
@@ -1246,7 +1246,7 @@ let walletElementPaymentType: array<CardThemeType.mode> = [
   GooglePayElement,
   PayPalElement,
   ApplePayElement,
-  PaymentRequestButtonsElement,
+  ExpressCheckoutElement,
 ]
 
 let getIsWalletElementPaymentType = (paymentType: CardThemeType.mode) => {

src/Window.res

@@ -60,13 +60,17 @@ external style: Dom.element => style = "style"
 @send external paymentRequest: (JSON.t, JSON.t, JSON.t) => JSON.t = "PaymentRequest"
 @send external click: Dom.element => unit = "click"
 
+let sendPostMessage = (element, message) => {
+  element->postMessage(message->JSON.Encode.object->JSON.stringify, GlobalVars.targetOrigin)
+}
+
 let iframePostMessage = (iframeRef: nullable<Dom.element>, message) => {
   switch iframeRef->Nullable.toOption {
   | Some(ref) =>
     try {
       ref
       ->contentWindow
-      ->postMessage(message->JSON.Encode.object->JSON.stringify, GlobalVars.targetOrigin)
+      ->sendPostMessage(message)
     } catch {
     | _ => ()
     }