From fcae637d89f867ca2a8a4b9d2f1860b36eaaaf08 Mon Sep 17 00:00:00 2001
From: Arush <arush.kapoor@juspay.in>
Date: Thu, 19 Dec 2024 04:36:15 +0530
Subject: [PATCH] feat: added support for ClickToPay

---
 public/icons/orca.svg                     |   8 +
 src/App.res                               |   1 +
 src/Components/ClickToPayDetails.res      | 179 ++++
 src/Components/ClickToPayLearnMore.res    |  59 ++
 src/Components/ClickToPayNotYou.res       | 245 ++++++
 src/Components/DynamicFields.res          |  11 +-
 src/Components/SaveDetailsCheckbox.res    |  22 +-
 src/Components/SavedMethods.res           | 240 +++++-
 src/Hooks/CommonHooks.res                 |  48 +-
 src/PaymentElement.res                    |  73 +-
 src/Payments/CardPayment.res              | 129 ++-
 src/Types/ClickToPayHelpers.res           | 961 ++++++++++++++++++++++
 src/Types/PaymentType.res                 |  43 +
 src/Types/SessionsType.res                |  15 +-
 src/Utilities/DynamicFieldsUtils.res      |  33 +
 src/Utilities/PaymentBody.res             |  14 +
 src/Utilities/RecoilAtoms.res             |  20 +
 src/Window.res                            |   6 +
 src/hyper-loader/Elements.res             |   2 +-
 src/hyper-loader/LoaderPaymentElement.res |   1 +
 src/hyper-log-catcher/HyperLogger.res     |   2 +
 21 files changed, 2080 insertions(+), 32 deletions(-)
 create mode 100644 src/Components/ClickToPayDetails.res
 create mode 100644 src/Components/ClickToPayLearnMore.res
 create mode 100644 src/Components/ClickToPayNotYou.res
 create mode 100644 src/Types/ClickToPayHelpers.res

diff --git a/public/icons/orca.svg b/public/icons/orca.svg
index 17a7c7aaa..989db5f7e 100644
--- a/public/icons/orca.svg
+++ b/public/icons/orca.svg
@@ -169,6 +169,14 @@ License)
       d="M70.94 285.81c-16.17 16.24-42.46 16.32-58.71.15-16.24-16.16-16.32-42.46-.15-58.7L226.57 12.23c16.16-16.24 42.46-16.32 58.7-.15l214.65 215.18c16.17 16.24 16.09 42.54-.15 58.7-16.25 16.17-42.54 16.09-58.71-.15L256 100.29 70.94 285.81z"
     />
   </symbol>
+  <symbol id="arrow-back" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_2608_28566" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <rect width="16" height="16" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_2608_28566)">
+      <path d="M5.21797 8.67187L8.9513 12.4052L8.0013 13.3385L2.66797 8.00521L8.0013 2.67188L8.9513 3.60521L5.21797 7.33854H13.3346V8.67187H5.21797Z" fill="#1C1B1F" />
+    </g>
+  </symbol>
   <symbol id="card-1" viewBox="0 0 512 512">
     <g>
       <g>
diff --git a/src/App.res b/src/App.res
index aab35134e..28f9def64 100644
--- a/src/App.res
+++ b/src/App.res
@@ -56,6 +56,7 @@ let make = () => {
   | _ =>
     switch fullscreenMode {
     | "paymentloader" => <PaymentLoader />
+    | "clickToPayLearnMore" => <ClickToPayLearnMore />
     | "plaidSDK" => <PlaidSDKIframe />
     | "pazeWallet" => <PazeWallet logger />
     | "fullscreen" =>
diff --git a/src/Components/ClickToPayDetails.res b/src/Components/ClickToPayDetails.res
new file mode 100644
index 000000000..37179748c
--- /dev/null
+++ b/src/Components/ClickToPayDetails.res
@@ -0,0 +1,179 @@
+@react.component
+let make = (
+  ~isSaveDetailsWithClickToPay,
+  ~setIsSaveDetailsWithClickToPay,
+  ~clickToPayCardBrand,
+  ~clickToPayRememberMe,
+  ~setClickToPayRememberMe,
+) => {
+  let clickToPayConfig = Recoil.useRecoilValueFromAtom(RecoilAtoms.clickToPayConfig)
+  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let {iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
+  let isUnrecognizedUser = clickToPayConfig.clickToPayCards->Option.getOr([])->Array.length == 0
+
+  let css = SaveDetailsCheckbox.saveDetailsCssStyle(themeObj)
+
+  let getPrivacyNoticeUrl = () => {
+    switch Js.String.toLowerCase(clickToPayCardBrand) {
+    | "mastercard" => "https://www.mastercard.com/global/click-to-pay/en-us/privacy-notice.html"
+    | "visa" => "https://www.visa.com.hk/en_HK/legal/global-privacy-notice.html"
+    | _ => "https://www.mastercard.com/global/click-to-pay/en-us/privacy-notice.html"
+    }
+  }
+
+  let getTermsUrl = () => {
+    switch Js.String.toLowerCase(clickToPayCardBrand) {
+    | "mastercard" => "https://www.mastercard.com/global/click-to-pay/en-us/terms-of-use.html"
+    | "visa" => "https://www.visa.com.hk/en_HK/legal/visa-checkout/terms-of-service.html"
+    | _ => "https://www.mastercard.com/global/click-to-pay/en-us/terms-of-use.html"
+    }
+  }
+
+  let handleOpenUrl = (event: ReactEvent.Mouse.t, url: string) => {
+    ReactEvent.Mouse.preventDefault(event)
+    let _ = ClickToPayHelpers.windowOpen(url, "_blank", "")
+  }
+
+  let capitalizeCardBrand = (brand: string) => {
+    String.toUpperCase(String.substring(brand, ~start=0, ~end=1)) ++
+    String.substring(brand, ~start=1, ~end=String.length(brand))
+  }
+
+  let formattedCardBrand = capitalizeCardBrand(clickToPayCardBrand)
+
+  let getIsChecked = ev => {
+    let target = ev->ReactEvent.Form.target
+    target["checked"]
+  }
+
+  let (
+    isSaveDetailsCheckboxState,
+    isSaveDetailsCheckedState,
+    isSaveDetailsCheckBoxLabelState,
+  ) = isSaveDetailsWithClickToPay
+    ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
+    : ("", "", "")
+
+  let (
+    isRememberMeCheckboxState,
+    isRememberMeCheckedState,
+    isRememberMeCheckBoxLabelState,
+  ) = clickToPayRememberMe
+    ? ("Checkbox--checked", "CheckboxInput--checked", "CheckboxLabel--checked")
+    : ("", "", "")
+
+  let handleLearnMore = _ => {
+    let cardBrands =
+      clickToPayConfig.availableCardBrands->Array.map(brand => brand->JSON.Encode.string)
+    Utils.messageParentWindow([
+      ("fullscreen", true->JSON.Encode.bool),
+      ("param", `clickToPayLearnMore`->JSON.Encode.string),
+      ("iframeId", iframeId->JSON.Encode.string),
+      ("metadata", [("cardBrands", cardBrands->JSON.Encode.array)]->Utils.getJsonFromArrayOfJson),
+    ])
+  }
+
+  <React.Fragment>
+    <style> {React.string(css)} </style>
+    {!isUnrecognizedUser
+      ? <div className="text-xs font-normal">
+          {React.string(
+            `By continuing, ${clickToPayConfig.dpaName} will share your card details, billing address,
+        and email with ${formattedCardBrand} to allow you to securely enroll in Click to
+        Pay for faster checkouts.`,
+          )}
+          {React.string(" ")}
+          <span
+            className="underline decoration-1 underline-offset-2 cursor-pointer"
+            onClick={handleLearnMore}>
+            {React.string("Learn more")}
+          </span>
+        </div>
+      : <>
+          <style> {React.string(css)} </style>
+          <div className={`Checkbox ${isSaveDetailsCheckboxState} flex`}>
+            <label
+              className={`container CheckboxInput ${isSaveDetailsCheckedState}`}
+              style={width: "fit-content"}>
+              <input
+                type_={`checkbox`} onChange={e => setIsSaveDetailsWithClickToPay(e->getIsChecked)}
+              />
+              <div className={`checkmark CheckboxInput ${isSaveDetailsCheckedState}`} />
+            </label>
+            <div
+              className={`CheckboxLabel ${isSaveDetailsCheckBoxLabelState} ml-2 w-11/12 text-xs space-y-2`}
+              style={color: "#a9a9a9"}>
+              <div>
+                {React.string(`Save my information with ${formattedCardBrand} `)}
+                <span
+                  className="underline decoration-1 underline-offset-2 cursor-pointer"
+                  onClick={handleLearnMore}>
+                  {React.string("Click to Pay")}
+                </span>
+                {React.string(" ")}
+                {React.string("for a faster and secure checkout")}
+              </div>
+              <div>
+                {React.string("Your email or mobile number will be used to verify you.")}
+                {React.string("Message/data rates may apply.")}
+              </div>
+            </div>
+          </div>
+          <div className={`Checkbox ${isRememberMeCheckboxState} flex`}>
+            <label
+              className={`container CheckboxInput ${isRememberMeCheckedState}`}
+              style={width: "fit-content"}>
+              <input type_={`checkbox`} onChange={e => setClickToPayRememberMe(e->getIsChecked)} />
+              <div className={`checkmark CheckboxInput ${isRememberMeCheckedState}`} />
+            </label>
+            <div
+              className={`CheckboxLabel ${isRememberMeCheckBoxLabelState} ml-2 w-11/12 text-xs space-y-2`}
+              style={color: "#a9a9a9"}>
+              <div className="flex items-center">
+                {React.string("Remember me on this browser")}
+                <div className="relative inline-block ml-2">
+                  <div className="group cursor-help">
+                    <div
+                      className="w-4 h-4 rounded-full bg-[#4a4a4a] flex items-center justify-center cursor-help">
+                      <span className="text-white text-xs cursor-help" style={fontSize: "10px"}>
+                        {React.string("i")}
+                      </span>
+                    </div>
+                    <div
+                      className="invisible group-hover:visible absolute z-10 w-64 bg-white text-xs rounded-md p-2 left-1/2 transform -translate-x-1/2 bottom-[150%] shadow-md border border-gray-200 before:content-[''] before:absolute before:top-[100%] before:left-1/2 before:ml-[-5px] before:border-[5px] before:border-solid before:border-gray-200 before:border-b-transparent before:border-l-transparent before:border-r-transparent after:content-[''] after:absolute after:top-[100%] after:left-1/2 after:ml-[-4px] after:border-[4px] after:border-solid after:border-white after:border-b-transparent after:border-l-transparent after:border-r-transparent">
+                      //   {/* Content */}
+                      <div className="flex flex-col space-y-2">
+                        <span>
+                          {React.string("When remembered, you'll skip verification and securely")}
+                          {React.string("access your saved cards when paying with Click to Pay.")}
+                        </span>
+                        <span>
+                          {React.string("Not recommended for public or shared devices because")}
+                          {React.string("this uses cookies.")}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                {React.string(`By continuing, you agree to ${formattedCardBrand}'s `)}
+                <span
+                  className="underline decoration-1 underline-offset-2 cursor-pointer"
+                  onClick={ev => handleOpenUrl(ev, getTermsUrl())}>
+                  {React.string("Terms")}
+                </span>
+                {React.string(" ")}
+                {React.string("and understand your data will be processed according to the ")}
+                <span
+                  className="underline decoration-1 underline-offset-2 cursor-pointer"
+                  onClick={ev => handleOpenUrl(ev, getPrivacyNoticeUrl())}>
+                  {React.string("Privacy Notice")}
+                </span>
+                {React.string(".")}
+              </div>
+            </div>
+          </div>
+        </>}
+  </React.Fragment>
+}
diff --git a/src/Components/ClickToPayLearnMore.res b/src/Components/ClickToPayLearnMore.res
new file mode 100644
index 000000000..18f7522d1
--- /dev/null
+++ b/src/Components/ClickToPayLearnMore.res
@@ -0,0 +1,59 @@
+open Utils
+
+@react.component
+let make = () => {
+  let (openModal, setOpenModal) = React.useState(_ => false)
+  let (cardBrand, setCardBrand) = React.useState(_ => "")
+
+  let logger = HyperLogger.make(~source=Elements(Payment))
+
+  let closeClickToPayModal = () => {
+    setOpenModal(_ => false)
+    messageParentWindow([("fullscreen", false->JSON.Encode.bool)])
+  }
+
+  React.useEffect0(() => {
+    ClickToPayHelpers.loadClickToPayScripts(logger)
+    let handle = (ev: Window.event) => {
+      let json = ev.data->safeParse
+      let dict = json->getDictFromJson
+      if dict->Dict.get("fullScreenIframeMounted")->Option.isSome {
+        let metadata = dict->getJsonObjectFromDict("metadata")->getDictFromJson
+        let cardBrands =
+          metadata
+          ->Utils.getArray("cardBrands")
+          ->Array.map(x => x->JSON.Decode.string->Option.getOr(""))
+          ->Array.filter(x => x !== "")
+          ->Array.joinWith(",")
+
+        if cardBrands === "" {
+          closeClickToPayModal()
+        }
+        setCardBrand(_ => cardBrands)
+      }
+    }
+    Window.addEventListener("message", handle)
+    messageParentWindow([("iframeMountedCallback", true->JSON.Encode.bool)])
+    Some(() => {Window.removeEventListener("message", handle)})
+  })
+
+  React.useEffect(() => {
+    let handleClickToPayLearnMore = _ => {
+      closeClickToPayModal()
+    }
+    Window.addEventListener("ok", handleClickToPayLearnMore)
+    Some(
+      () => {
+        Window.removeEventListener("ok", handleClickToPayLearnMore)
+      },
+    )
+  }, [])
+
+  <RenderIf condition={cardBrand !== ""}>
+    <div>
+      <Modal showClose=false openModal setOpenModal>
+        <ClickToPayHelpers.SrcLearnMore cardBrands=cardBrand />
+      </Modal>
+    </div>
+  </RenderIf>
+}
diff --git a/src/Components/ClickToPayNotYou.res b/src/Components/ClickToPayNotYou.res
new file mode 100644
index 000000000..cb4f1a2ee
--- /dev/null
+++ b/src/Components/ClickToPayNotYou.res
@@ -0,0 +1,245 @@
+open ClickToPayHelpers
+open Utils
+
+@react.component
+let make = (~setIsShowClickToPayNotYou, ~isCTPAuthenticateNotYouClicked, ~setConsumerIdentity) => {
+  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let (clickToPayConfig, setClickToPayConfig) = Recoil.useRecoilState(RecoilAtoms.clickToPayConfig)
+
+  let (identifier, setIdentifier) = React.useState(_ => "")
+  let (isValid, setIsValid) = React.useState(_ => false)
+  let (identifierType, setIdentifierType) = React.useState(_ => EMAIL_ADDRESS)
+
+  let onContinue = consumerIdentity => {
+    ClickToPayHelpers.signOut()
+    ->Promise.finally(() => {
+      setClickToPayConfig(prev => {
+        ...prev,
+        clickToPayCards: Some([]),
+      })
+      setIsShowClickToPayNotYou(_ => false)
+      setConsumerIdentity(_ => consumerIdentity)
+    })
+    ->ignore
+  }
+
+  let onBack = _ => {
+    setIsShowClickToPayNotYou(_ => false)
+  }
+
+  let countryAndCodeCodeList =
+    phoneNumberJson
+    ->JSON.Decode.object
+    ->Option.getOr(Dict.make())
+    ->getArray("countries")
+
+  let countryCodes = countryAndCodeCodeList->Array.map(countryObj => {
+    let countryObjDict = countryObj->getDictFromJson
+    let countryCode = countryObjDict->getString("phone_number_code", "")
+    let countryName = countryObjDict->getString("country_code", "")
+    {code: countryCode, countryISO: countryName}
+  })
+
+  let (countryCode, setCountryCode) = React.useState(() =>
+    (countryCodes->Array.get(0)->Option.getOr(defaultCountry)).countryISO
+  )
+
+  let validateIdentifier = (value, identityType: identityType) => {
+    let emailRegex = %re("/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/")
+    let phoneRegex = %re("/^\d{6,14}$/")
+
+    switch identityType {
+    | EMAIL_ADDRESS => emailRegex->Js.Re.test_(value)
+    | MOBILE_PHONE_NUMBER => phoneRegex->Js.Re.test_(value)
+    | _ => false
+    }
+  }
+
+  let formatPhoneNumber: string => string = value => {
+    if Js.String.startsWith(value, "+") {
+      if Js.String.includes(value, " ") {
+        value
+      } else {
+        String.replaceRegExp(value, %re("/^\+(\d{1,3})(\d+)$/"), "+$1 $2")
+      }
+    } else if String.match(value, %re("/^\d+$/"))->Option.isSome {
+      `+${value}`
+    } else {
+      value
+    }
+  }
+
+  let handleInputChange = ev => {
+    let target = ev->ReactEvent.Form.target
+    let newValue = target["value"]
+    let formattedValue =
+      identifierType === MOBILE_PHONE_NUMBER ? newValue->formatPhoneNumber : newValue
+    setIdentifier(_ => formattedValue)
+  }
+
+  let handleTypeChange = ev => {
+    let target = ev->ReactEvent.Form.target
+    let newValue = target["value"]
+    setIdentifierType(_ => newValue)
+    setIdentifier(_ => "") // Clear the input when changing type
+  }
+
+  let handleCountryCodeChange = ev => {
+    let target = ev->ReactEvent.Form.target
+    let newValue = target["value"]
+    setCountryCode(_ => newValue)
+  }
+
+  let handlePhoneInputChange = ev => {
+    let target = ev->ReactEvent.Form.target
+    let newValue = target["value"]->String.replaceRegExp(%re("/\\D/g"), "") // Remove non-digit characters
+    setIdentifier(_ => newValue)
+  }
+
+  React.useEffect(() => {
+    setIsValid(_ => validateIdentifier(identifier, identifierType))
+    None
+  }, (identifier, identifierType))
+
+  let handleSubmit = e => {
+    e->ReactEvent.Form.preventDefault
+    if isValid {
+      let country =
+        countryCodes
+        ->Array.find(country => countryCode === country.countryISO)
+        ->Option.getOr(defaultCountry)
+      let submittedIdentifier =
+        identifierType === MOBILE_PHONE_NUMBER
+          ? String.sliceToEnd(country.code, ~start=1) ++ " " ++ identifier
+          : identifier
+      Js.log2("submittedIdentifier", submittedIdentifier)
+      onContinue({identityValue: submittedIdentifier, identityType: identifierType})
+    }
+  }
+
+  let maskedEmail = (~onNotYouClick) => {
+    <div className="flex space-x-2 text-sm text-[#484848]">
+      <button
+        onClick={onNotYouClick} className="underline cursor-pointer [text-underline-offset:0.2rem]">
+        {React.string("Not you?")}
+      </button>
+    </div>
+  }
+
+  <div className="p-4 bg-white rounded-lg border border-[#E6E1E1] flex flex-col space-y-4">
+    <div className="flex flex-col">
+      <RenderIf condition={!isCTPAuthenticateNotYouClicked}>
+        <button onClick={onBack}>
+          <Icon name="arrow-back" size=16 />
+        </button>
+      </RenderIf>
+      <div className="flex justify-center items-center">
+        <div>
+          <ClickToPayHelpers.SrcMark
+            cardBrands={clickToPayConfig.availableCardBrands->Array.joinWith(",")} height="32"
+          />
+        </div>
+      </div>
+    </div>
+    <div className="flex flex-col justify-center items-center space-y-4 px-4">
+      <p className="text-sm font-normal">
+        {React.string(
+          "Enter a new email or mobile number to access a different set of linked cards.",
+        )}
+      </p>
+      <form
+        onSubmit={handleSubmit}
+        className="w-full flex flex-col justify-center items-center space-y-4">
+        <div className="w-full flex space-x-2">
+          <div className="relative w-1/3">
+            <select
+              value={identifierType->getIdentityType}
+              onChange={handleTypeChange}
+              className="w-full p-3 pr-10 border border-gray-300 rounded-md appearance-none">
+              <option value={EMAIL_ADDRESS->getIdentityType}> {React.string("Email")} </option>
+              <option value={MOBILE_PHONE_NUMBER->getIdentityType}>
+                {React.string("Phone")}
+              </option>
+            </select>
+            <div
+              className="absolute inset-y-0 right-4 flex items-center selection:pointer-events-none">
+              <Icon
+                className="absolute z-10 pointer pointer-events-none" name="arrow-down" size=10
+              />
+            </div>
+          </div>
+          {identifierType === EMAIL_ADDRESS
+            ? <input
+                type_="text"
+                value={identifier}
+                onChange={handleInputChange}
+                placeholder="Enter email"
+                className="w-2/3 p-3 border border-gray-300 rounded-md"
+                required=true
+              />
+            : <div className="w-2/3 flex border border-gray-300 rounded-md overflow-hidden">
+                <div className="relative">
+                  <select
+                    value={countryCode}
+                    onChange={handleCountryCodeChange}
+                    className="h-full p-3 appearance-none focus:outline-none">
+                    {countryCodes
+                    ->Array.map(country =>
+                      <option
+                        key={`${country.code}-${country.countryISO}`} value={country.countryISO}>
+                        {React.string(`${country.countryISO} ${country.code}`)}
+                      </option>
+                    )
+                    ->React.array}
+                  </select>
+                  <div
+                    className="absolute inset-y-0 right-4 flex items-center selection:pointer-events-none">
+                    <Icon
+                      className="absolute z-10 pointer pointer-events-none"
+                      name="arrow-down"
+                      size=10
+                    />
+                  </div>
+                </div>
+                <input
+                  type_="tel"
+                  value={identifier}
+                  onChange={handlePhoneInputChange}
+                  placeholder="Mobile number"
+                  className="flex-grow p-3 focus:outline-none w-full"
+                  required=true
+                />
+              </div>}
+        </div>
+        <button
+          type_="submit"
+          className={`w-full p-3 ${isValid ? "" : "opacity-50 cursor-not-allowed"}`}
+          style={
+            backgroundColor: themeObj.buttonBackgroundColor,
+            color: themeObj.buttonTextColor,
+            borderRadius: themeObj.buttonBorderRadius,
+            fontSize: themeObj.buttonTextFontSize,
+          }
+          disabled={!isValid}>
+          {React.string("Switch ID")}
+        </button>
+      </form>
+    </div>
+  </div>
+}
+
+module ClickToPayNotYouText = {
+  @react.component
+  let make = (~setIsShowClickToPayNotYou) => {
+    let onNotYouClick = _ => {
+      setIsShowClickToPayNotYou(_ => true)
+    }
+
+    <div className="flex space-x-2 text-sm text-[#484848]">
+      <button
+        onClick={onNotYouClick} className="underline cursor-pointer [text-underline-offset:0.2rem]">
+        {React.string("Not you?")}
+      </button>
+    </div>
+  }
+}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index 734cfc1ba..2013d0036 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -10,6 +10,7 @@ let make = (
   ~expiryProps=None,
   ~cvcProps=None,
   ~isBancontact=false,
+  ~isSaveDetailsWithClickToPay=false,
 ) => {
   open DynamicFieldsUtils
   open Utils
@@ -57,8 +58,10 @@ let make = (
   ))
 
   let requiredFields = React.useMemo(() => {
-    requiredFieldsWithBillingDetails->removeBillingDetailsIfUseBillingAddress(billingAddress)
-  }, [requiredFieldsWithBillingDetails])
+    requiredFieldsWithBillingDetails
+    ->removeBillingDetailsIfUseBillingAddress(billingAddress)
+    ->removeClickToPayFieldsIfSaveDetailsWithClickToPay(isSaveDetailsWithClickToPay)
+  }, (requiredFieldsWithBillingDetails, isSaveDetailsWithClickToPay))
 
   let isAllStoredCardsHaveName = React.useMemo(() => {
     PaymentType.getIsStoredPaymentMethodHasName(savedMethod)
@@ -72,10 +75,10 @@ let make = (
       ~isSavedCardFlow,
       ~isAllStoredCardsHaveName,
     )
-    ->updateDynamicFields(billingAddress)
+    ->updateDynamicFields(billingAddress, isSaveDetailsWithClickToPay)
     ->Belt.SortArray.stableSortBy(PaymentMethodsRecord.sortPaymentMethodFields)
     //<...>//
-  }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow))
+  }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow, isSaveDetailsWithClickToPay))
 
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
diff --git a/src/Components/SaveDetailsCheckbox.res b/src/Components/SaveDetailsCheckbox.res
index fb8b59535..a2a6b8f70 100644
--- a/src/Components/SaveDetailsCheckbox.res
+++ b/src/Components/SaveDetailsCheckbox.res
@@ -1,14 +1,8 @@
-@react.component
-let make = (~isChecked, ~setIsChecked) => {
-  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
-  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
-  let {business, customMessageForCardTerms} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
-
-  let css = `.container {
+let saveDetailsCssStyle = (themeObj: CardThemeType.themeClass) => {
+  `.container {
   display: flex;
   cursor: pointer;
   position: relative;
-  justify-content: center;
 }
 
 .container input {
@@ -36,8 +30,16 @@ let make = (~isChecked, ~setIsChecked) => {
   border-radius: 2px;
   transition: all .3s;
 }
-
 `
+}
+
+@react.component
+let make = (~isChecked, ~setIsChecked) => {
+  let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFieldsAtom)
+  let {business, customMessageForCardTerms} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
+
+  let css = saveDetailsCssStyle(themeObj)
   let onChange = ev => {
     let target = ev->ReactEvent.Form.target
     let value = target["checked"]
@@ -58,7 +60,7 @@ let make = (~isChecked, ~setIsChecked) => {
 
   <div className={`Checkbox ${checkboxState} flex flex-row gap-2 items-center`}>
     <style> {React.string(css)} </style>
-    <label className={`container CheckboxInput ${checkedState}`}>
+    <label className={`container justify-center CheckboxInput ${checkedState}`}>
       <input type_={`checkbox`} onChange />
       <div className={`checkmark CheckboxInput ${checkedState} mt-1`} />
       <div className={`CheckboxLabel ${checkBoxLabelState} ml-2 w-11/12 opacity-50 text-xs`}>
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 7448157c9..b561c0de8 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -11,6 +11,25 @@ let make = (
   open CardUtils
   open Utils
   open UtilityHooks
+  open Promise
+  open ClickToPayHelpers
+
+  let (clickToPayConfig, setClickToPayConfig) = Recoil.useRecoilState(RecoilAtoms.clickToPayConfig)
+
+  let customerMethods =
+    clickToPayConfig.clickToPayCards
+    ->Option.getOr([])
+    ->Array.map(obj => obj->PaymentType.convertClickToPayCardToCustomerMethod)
+
+  let (isClickToPayAuthenticateError, setIsClickToPayAuthenticateError) = React.useState(_ => false)
+  let (isCTPAuthenticateNotYouClicked, setIsCTPAuthenticateNotYouClicked) = React.useState(_ =>
+    false
+  )
+  let (isShowClickToPayNotYou, setIsShowClickToPayNotYou) = React.useState(_ => false)
+  let (consumerIdentity, setConsumerIdentity) = React.useState(_ => {
+    identityType: EMAIL_ADDRESS,
+    identityValue: "",
+  })
 
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
@@ -46,6 +65,22 @@ let make = (
 
   let {paymentToken: paymentTokenVal, customerId} = paymentToken
 
+  React.useEffect(() => {
+    if clickToPayConfig.email !== "" && consumerIdentity.identityValue === "" {
+      setConsumerIdentity(_ => {
+        identityType: EMAIL_ADDRESS,
+        identityValue: clickToPayConfig.email,
+      })
+    }
+    None
+  }, [clickToPayConfig.email])
+
+  let closeComponentIfSavedMethodsAreEmpty = () => {
+    if savedMethods->Array.length === 0 {
+      setShowFields(_ => true)
+    }
+  }
+
   let bottomElement = {
     <div className="PickerItemContainer">
       {savedMethods
@@ -63,6 +98,168 @@ let make = (
         />
       )
       ->React.array}
+      <RenderIf
+        condition={clickToPayConfig.clickToPayCards->Option.getOr([])->Array.length == 0 &&
+        !isClickToPayAuthenticateError &&
+        clickToPayConfig.email !== ""}>
+        <ClickToPayHelpers.SrcMark
+          cardBrands={clickToPayConfig.availableCardBrands->Array.joinWith(",")} height="32"
+        />
+      </RenderIf>
+      <div id="mastercard-account-verification" />
+      {isShowClickToPayNotYou
+        ? <ClickToPayNotYou
+            setIsShowClickToPayNotYou isCTPAuthenticateNotYouClicked setConsumerIdentity
+          />
+        : <React.Fragment>
+            {switch clickToPayConfig.clickToPayCards {
+            | Some(cards) =>
+              if cards->Array.length == 0 {
+                if !isClickToPayAuthenticateError && clickToPayConfig.email !== "" {
+                  let iframe = CommonHooks.createElement("iframe")
+                  iframe.id = "mastercard-account-verification-iframe"
+                  iframe.width = "100%"
+                  iframe.height = "410px"
+                  let element = ClickToPayHelpers.getElementById(
+                    ClickToPayHelpers.myDocument,
+                    "mastercard-account-verification",
+                  )
+                  try {
+                    switch element->Nullable.toOption {
+                    | Some(ele) =>
+                      if ele.children->Array.length === 0 {
+                        ele.appendChild(iframe)
+                        switch iframe.contentWindow {
+                        | Some(iframeContentWindow) => {
+                            let authenticateConsumerIdentity = {
+                              identityType: consumerIdentity.identityType,
+                              identityValue: consumerIdentity.identityValue->String.replaceAll(
+                                " ",
+                                "",
+                              ),
+                            }
+                            let authenticatePayload: ClickToPayHelpers.authenticateInputPayload = {
+                              windowRef: iframeContentWindow,
+                              consumerIdentity: authenticateConsumerIdentity,
+                            }
+                            ClickToPayHelpers.authenticate(authenticatePayload, loggerState)
+                            ->then(res => {
+                              switch res {
+                              | Ok(data) =>
+                                let cards =
+                                  data
+                                  ->Utils.getDictFromJson
+                                  ->Utils.getJsonFromDict("cards", Js.Json.null)
+                                  ->JSON.Decode.array
+                                  ->Option.flatMap(arr => Some(
+                                    arr->Array.map(ClickToPayHelpers.clickToPayCardItemToObjMapper),
+                                  ))
+                                  ->Option.getOr([])
+                                setClickToPayConfig(prev => {
+                                  ...prev,
+                                  clickToPayCards: Some(cards),
+                                })
+                                ele.replaceChildren()
+                                if cards->Array.length === 0 && savedMethods->Array.length === 0 {
+                                  setShowFields(_ => true)
+                                }
+                                resolve()
+                              | Error(err) => {
+                                  let errException = err->formatException
+
+                                  loggerState.setLogError(
+                                    ~value=`Error authenticating consumer identity - ${errException->JSON.stringify}`,
+                                    ~eventName=CLICK_TO_PAY_FLOW,
+                                  )
+
+                                  let exceptionMessage =
+                                    errException
+                                    ->getDictFromJson
+                                    ->getJsonFromDict("message", Js.Json.null)
+                                    ->JSON.Decode.string
+                                    ->Option.getOr("")
+
+                                  let isNotYouClicked =
+                                    exceptionMessage->String.includes("Not you clicked")
+
+                                  if isNotYouClicked {
+                                    setIsCTPAuthenticateNotYouClicked(_ => true)
+                                    setIsShowClickToPayNotYou(_ => true)
+                                  } else {
+                                    setIsClickToPayAuthenticateError(_ => true)
+                                  }
+
+                                  ele.replaceChildren()
+
+                                  closeComponentIfSavedMethodsAreEmpty()
+
+                                  resolve()
+                                }
+                              }
+                            })
+                            ->catch(err => {
+                              loggerState.setLogError(
+                                ~value=`Error authenticating consumer identity - ${err
+                                  ->Utils.formatException
+                                  ->JSON.stringify}`,
+                                ~eventName=CLICK_TO_PAY_FLOW,
+                              )
+                              closeComponentIfSavedMethodsAreEmpty()
+                              resolve()
+                            })
+                            ->ignore
+                          }
+                        | None => closeComponentIfSavedMethodsAreEmpty()
+                        }
+                      }
+                    | None => ()
+                    }
+                  } catch {
+                  | err => {
+                      loggerState.setLogError(
+                        ~value=`Error - ${err->Utils.formatException->JSON.stringify}`,
+                        ~eventName=CLICK_TO_PAY_FLOW,
+                      )
+                      closeComponentIfSavedMethodsAreEmpty()
+                    }
+                  }
+                }
+                React.null
+              } else {
+                <>
+                  <ClickToPayHelpers.SrcMark
+                    cardBrands={clickToPayConfig.availableCardBrands->Array.joinWith(",")}
+                    height="32"
+                  />
+                  <ClickToPayNotYou.ClickToPayNotYouText setIsShowClickToPayNotYou />
+                  {cards
+                  ->Array.mapWithIndex((obj, i) => {
+                    let customerMethod = obj->PaymentType.convertClickToPayCardToCustomerMethod
+                    <SavedCardItem
+                      key={"ctp_" ++ i->Int.toString}
+                      setPaymentToken
+                      isActive={paymentTokenVal == customerMethod.paymentToken}
+                      paymentItem=customerMethod
+                      brandIcon={customerMethod->getPaymentMethodBrand}
+                      index=i
+                      savedCardlength={cards->Array.length}
+                      cvcProps
+                      paymentType
+                    />
+                  })
+                  ->React.array}
+                </>
+              }
+            | None => {
+                loggerState.setLogInfo(
+                  ~value="Click to Pay cards not found",
+                  ~eventName=CLICK_TO_PAY_FLOW,
+                )
+                closeComponentIfSavedMethodsAreEmpty()
+                React.null
+              }
+            }}
+          </React.Fragment>}
     </div>
   }
 
@@ -74,6 +271,7 @@ let make = (
   let empty = cvcNumber == ""
   let customerMethod = React.useMemo(_ =>
     savedMethods
+    ->Array.concat(customerMethods)
     ->Array.filter(savedMethod => savedMethod.paymentToken === paymentTokenVal)
     ->Array.get(0)
     ->Option.getOr(PaymentType.defaultCustomerMethods)
@@ -87,9 +285,10 @@ let make = (
     !isUnknownPaymentMethod &&
     (!isCardPaymentMethod || isCardPaymentMethodValid)
 
-  let paymentType = customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
+  let paymentMethodType =
+    customerMethod.paymentMethodType->Option.getOr(customerMethod.paymentMethod)
 
-  useHandlePostMessages(~complete, ~empty, ~paymentType, ~savedMethod=true)
+  useHandlePostMessages(~complete, ~empty, ~paymentType=paymentMethodType, ~savedMethod=true)
 
   GooglePayHelpers.useHandleGooglePayResponse(~connectors=[], ~intent, ~isSavedMethodsFlow=true)
 
@@ -127,7 +326,36 @@ let make = (
     }
 
     if confirm.doSubmit {
-      if (
+      if customerMethod.card.isClickToPayCard {
+        ClickToPayHelpers.handleProceedToPay(
+          ~srcDigitalCardId=customerMethod.paymentToken,
+          ~logger=loggerState,
+        )
+        ->then(resp => {
+          let dict = resp.payload->Utils.getDictFromJson
+          let headers = dict->Utils.getDictFromDict("headers")
+          let merchantTransactionId = headers->Utils.getString("merchant-transaction-id", "")
+          let xSrcFlowId = headers->Utils.getString("x-src-cx-flow-id", "")
+          let correlationId =
+            dict
+            ->Utils.getDictFromDict("checkoutResponseData")
+            ->Utils.getString("srcCorrelationId", "")
+
+          let clickToPayBody = PaymentBody.clickToPayBody(
+            ~merchantTransactionId,
+            ~correlationId,
+            ~xSrcFlowId,
+          )
+          intent(
+            ~bodyArr=clickToPayBody->mergeAndFlattenToTuples(requiredFieldsBody),
+            ~confirmParam=confirm.confirmParams,
+            ~handleUserError=false,
+            ~manualRetry=isManualRetryEnabled,
+          )
+          resolve(resp)
+        })
+        ->ignore
+      } else if (
         areRequiredFieldsValid &&
         !isUnknownPaymentMethod &&
         (!isCardPaymentMethod || isCardPaymentMethodValid) &&
@@ -220,7 +448,11 @@ let make = (
   ))
 
   <div className="flex flex-col overflow-auto h-auto no-scrollbar animate-slowShow">
-    {if savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields) {
+    {if (
+      savedCardlength === 0 &&
+      clickToPayConfig.isReady->not &&
+      (loadSavedCards === PaymentType.LoadingSavedCards || !showFields)
+    ) {
       <div
         className="Label flex flex-row gap-3 items-end cursor-pointer"
         style={
diff --git a/src/Hooks/CommonHooks.res b/src/Hooks/CommonHooks.res
index 2010e179d..7e6eae254 100644
--- a/src/Hooks/CommonHooks.res
+++ b/src/Hooks/CommonHooks.res
@@ -1,3 +1,7 @@
+type contentRect = {
+  height: float,
+}
+
 type element = {
   mutable getAttribute: string => string,
   mutable src: string,
@@ -6,6 +10,11 @@ type element = {
   mutable href: string,
   mutable \"as": string,
   mutable crossorigin: string,
+  mutable \"type": string,
+  mutable id: string,
+  mutable width: string,
+  mutable height: string,
+  contentWindow: option<Window.window>,
   setAttribute: (string, string) => unit,
 }
 type keys = {
@@ -29,7 +38,7 @@ external addEventListener: (element, string, event => unit) => unit = "addEventL
 @send
 external removeEventListener: (element, string, event => unit) => unit = "removeEventListener"
 
-let useScript = (src: string) => {
+let useScript = (src: string, ~\"type"="") => {
   let (status, setStatus) = React.useState(_ => src != "" ? "loading" : "idle")
   React.useEffect(() => {
     if src == "" {
@@ -43,6 +52,9 @@ let useScript = (src: string) => {
     | None =>
       let script = createElement("script")
       script.src = src
+      if \"type" != "" {
+        script.\"type" = \"type"
+      }
       script.async = true
       script.setAttribute("data-status", "loading")
       appendChild(script)
@@ -63,6 +75,40 @@ let useScript = (src: string) => {
   status
 }
 
+let useLink = (src: string) => {
+  let (status, setStatus) = React.useState(_ => src != "" ? "loading" : "idle")
+  React.useEffect(() => {
+    if src == "" {
+      setStatus(_ => "idle")
+    }
+    let link = querySelector(`link[href="${src}"]`)
+    switch link->Nullable.toOption {
+    | Some(dom) =>
+      setStatus(_ => dom.getAttribute("data-status"))
+      None
+    | None =>
+      let link = createElement("link")
+      link.href = src
+      link.rel = "stylesheet"
+      link.setAttribute("data-status", "loading")
+      appendChild(link)
+      let setAttributeFromEvent = (event: event) => {
+        setStatus(_ => event.\"type" === "load" ? "ready" : "error")
+        link.setAttribute("data-status", event.\"type" === "load" ? "ready" : "error")
+      }
+      link->addEventListener("load", setAttributeFromEvent)
+      link->addEventListener("error", setAttributeFromEvent)
+      Some(
+        () => {
+          link->removeEventListener("load", setAttributeFromEvent)
+          link->removeEventListener("error", setAttributeFromEvent)
+        },
+      )
+    }
+  }, [src])
+  status
+}
+
 let updateKeys = (dict, keyPair, setKeys) => {
   let (key, value) = keyPair
   let valueStr = value->Utils.getStringFromJson("")
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index e97420f6e..87697a367 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -27,6 +27,8 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
   let isGPayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
+  let (clickToPayConfig, setClickToPayConfig) = Recoil.useRecoilState(clickToPayConfig)
+  let {publishableKey} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
 
   let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
     PaymentUtils.paymentMethodListValue,
@@ -100,7 +102,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
             ? NoResult(isGuestCustomer)
             : LoadedSavedCards(finalSavedPaymentMethods, isGuestCustomer)
         )
-        setShowFields(prev => finalSavedPaymentMethods->Array.length == 0 || prev)
+        setShowFields(prev =>
+          (finalSavedPaymentMethods->Array.length == 0 || prev) && clickToPayConfig.isReady->not
+        )
       }
     | (_, NoResult(isGuestCustomer)) => {
         setLoadSavedCards(_ => NoResult(isGuestCustomer))
@@ -115,6 +119,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     optionAtomValue,
     isApplePayReady,
     isGPayReady,
+    clickToPayConfig.isReady,
   ))
 
   React.useEffect(() => {
@@ -203,9 +208,54 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     }
     None
   }, (paymentMethodList, walletList, paymentOptionsList, actualList, showCardFormByDefault))
+
+  let loadMastercardClickToPayScript = ssn => {
+    open Promise
+    let dict = ssn->getDictFromJson
+    let clickToPaySessionObj = SessionsType.itemToObjMapper(dict, ClickToPayObject)
+    let clickToPayToken = SessionsType.getPaymentSessionObj(
+      clickToPaySessionObj.sessionsToken,
+      ClickToPay,
+    )
+
+    switch clickToPayToken {
+    | ClickToPayTokenOptional(optToken) =>
+      switch optToken {
+      | Some(token) =>
+        let clickToPayToken = ClickToPayHelpers.clickToPayTokenItemToObjMapper(token)
+        let isProd = publishableKey->String.startsWith("pk_prd_")
+        ClickToPayHelpers.loadClickToPayScripts(loggerState)
+        ClickToPayHelpers.loadMastercardScript(clickToPayToken, isProd, loggerState)
+        ->then(resp => {
+          let availableCardBrands =
+            resp
+            ->Utils.getDictFromJson
+            ->Utils.getArray("availableCardBrands")
+            ->Array.map(item => item->JSON.Decode.string->Option.getOr(""))
+            ->Array.filter(item => item !== "")
+
+          setClickToPayConfig(prev => {
+            ...prev,
+            isReady: true,
+            availableCardBrands,
+            email: clickToPayToken.email,
+            dpaName: clickToPayToken.dpaName,
+          })
+          resolve()
+        })
+        ->ignore
+      | None => ()
+      }
+    | _ => ()
+    }
+  }
+
   React.useEffect(() => {
     switch sessionsObj {
-    | Loaded(ssn) => setSessions(_ => ssn)
+    | Loaded(ssn) => {
+        setSessions(_ => ssn)
+        loadMastercardClickToPayScript(ssn)
+      }
     | _ => ()
     }
     None
@@ -427,6 +477,25 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     None
   }, (paymentMethodList, customerPaymentMethods))
 
+  React.useEffect(() => {
+    let fetchCards = async () => {
+      if clickToPayConfig.isReady {
+        let cardsResult = await ClickToPayHelpers.getCards(loggerState)
+        switch cardsResult {
+        | Ok(cards) => {
+            setClickToPayConfig(prev => {
+              ...prev,
+              clickToPayCards: Some(cards),
+            })
+          }
+        | Error(_) => ()
+        }
+      }
+    }
+    fetchCards()->ignore
+    None
+  }, [clickToPayConfig.isReady])
+
   <>
     <RenderIf condition={paymentLabel->Option.isSome}>
       <div className="text-2xl font-semibold text-[#151619] mb-6">
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index f4ae74a78..e7f02c0b1 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -13,6 +13,7 @@ let make = (
   open PaymentModeType
   open Utils
   open UtilityHooks
+  open Promise
 
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(RecoilAtoms.isManualRetryEnabled)
@@ -20,6 +21,12 @@ let make = (
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
+  let email = Recoil.useRecoilValueFromAtom(RecoilAtoms.userEmailAddress)
+  let phoneNumber = Recoil.useRecoilValueFromAtom(RecoilAtoms.userPhoneNumber)
+  let (isSaveDetailsWithClickToPay, setIsSaveDetailsWithClickToPay) = React.useState(_ => false)
+  let clickToPayConfig = Recoil.useRecoilValueFromAtom(RecoilAtoms.clickToPayConfig)
+  let (clickToPayCardBrand, setClickToPayCardBrand) = React.useState(_ => "")
+  let (clickToPayRememberMe, setClickToPayRememberMe) = React.useState(_ => false)
 
   let nickname = Recoil.useRecoilValueFromAtom(RecoilAtoms.userCardNickName)
 
@@ -72,6 +79,18 @@ let make = (
     postFailedSubmitResponse(~errortype="validation_error", ~message)
   }
 
+  React.useEffect(() => {
+    if (
+      cardBrand === "" ||
+        clickToPayConfig.availableCardBrands->Array.includes(cardBrand->String.toLowerCase)->not
+    ) {
+      setClickToPayCardBrand(_ => "")
+    } else if cardBrand !== clickToPayCardBrand {
+      setClickToPayCardBrand(_ => cardBrand)
+    }
+    None
+  }, (cardBrand, clickToPayConfig.availableCardBrands))
+
   let combinedCardNetworks = React.useMemo1(() => {
     let cardPaymentMethod =
       paymentMethodListValue.payment_methods
@@ -153,6 +172,13 @@ let make = (
     } else {
       defaultCardBody
     }
+
+    let isRecognizedClickToPayPayment =
+      clickToPayConfig.clickToPayCards->Option.getOr([])->Array.length > 0 &&
+        clickToPayCardBrand !== ""
+
+    let isUnrecognizedClickToPayPayment = isSaveDetailsWithClickToPay
+
     if confirm.doSubmit {
       let isCardDetailsValid =
         isCVCValid->Option.getOr(false) &&
@@ -166,14 +192,85 @@ let make = (
         (isBancontact || isCardDetailsValid) && isNicknameValid && areRequiredFieldsValid
 
       if validFormat && (showFields || isBancontact) {
-        intent(
-          ~bodyArr={
-            (isBancontact ? banContactBody : cardBody)->mergeAndFlattenToTuples(requiredFieldsBody)
-          },
-          ~confirmParam=confirm.confirmParams,
-          ~handleUserError=false,
-          ~manualRetry=isManualRetryEnabled,
-        )
+        if isRecognizedClickToPayPayment || isUnrecognizedClickToPayPayment {
+          ClickToPayHelpers.handleOpenClickToPayWindow()
+
+          ClickToPayHelpers.encryptCardForClickToPay(
+            ~cardNumber=cardNumber->CardUtils.clearSpaces,
+            ~expiryMonth=month,
+            ~expiryYear=year->CardUtils.formatExpiryToTwoDigit,
+            ~cvcNumber,
+            ~logger=loggerState,
+          )
+          ->then(res => {
+            switch res {
+            | Ok(res) => ClickToPayHelpers.handleProceedToPay(
+                ~encryptedCard=res,
+                ~isCheckoutWithNewCard=true,
+                ~isUnrecognizedUser={
+                  clickToPayConfig.clickToPayCards->Option.getOr([])->Array.length == 0
+                },
+                ~email=email.value,
+                ~phoneNumber=phoneNumber.value,
+                ~countryCode=phoneNumber.countryCode->Option.getOr("")->String.replace("+", ""),
+                ~rememberMe=clickToPayRememberMe,
+                ~logger=loggerState,
+              )
+              ->then(
+                resp => {
+                  let dict = resp.payload->Utils.getDictFromJson
+                  let headers = dict->Utils.getDictFromDict("headers")
+                  let merchantTransactionId =
+                    headers->Utils.getString("merchant-transaction-id", "")
+                  let xSrcFlowId = headers->Utils.getString("x-src-cx-flow-id", "")
+                  let correlationId =
+                    dict
+                    ->Utils.getDictFromDict("checkoutResponseData")
+                    ->Utils.getString("srcCorrelationId", "")
+
+                  let clickToPayBody = PaymentBody.clickToPayBody(
+                    ~merchantTransactionId,
+                    ~correlationId,
+                    ~xSrcFlowId,
+                  )
+                  intent(
+                    ~bodyArr=clickToPayBody->mergeAndFlattenToTuples(requiredFieldsBody),
+                    ~confirmParam=confirm.confirmParams,
+                    ~handleUserError=false,
+                    ~manualRetry=isManualRetryEnabled,
+                  )
+                  resolve()
+                },
+              )
+              ->ignore
+            | Error(err) =>
+              loggerState.setLogError(
+                ~value=`Error during checkout - ${err->Utils.formatException->JSON.stringify}`,
+                ~eventName=CLICK_TO_PAY_FLOW,
+              )
+            }
+            resolve()
+          })
+          ->catch(err => {
+            loggerState.setLogError(
+              ~value=`Error during checkout - ${err->Utils.formatException->JSON.stringify}`,
+              ~eventName=CLICK_TO_PAY_FLOW,
+            )
+            resolve()
+          })
+          ->ignore
+        } else {
+          intent(
+            ~bodyArr={
+              (isBancontact ? banContactBody : cardBody)->mergeAndFlattenToTuples(
+                requiredFieldsBody,
+              )
+            },
+            ~confirmParam=confirm.confirmParams,
+            ~handleUserError=false,
+            ~manualRetry=isManualRetryEnabled,
+          )
+        }
       } else {
         if cardNumber === "" {
           setCardError(_ => localeString.cardNumberEmptyText)
@@ -210,6 +307,9 @@ let make = (
     isCardBrandValid,
     isManualRetryEnabled,
     cardProps,
+    clickToPayConfig,
+    clickToPayCardBrand,
+    clickToPayRememberMe,
   ))
   useSubmitPaymentData(submitCallback)
 
@@ -335,6 +435,7 @@ let make = (
             expiryProps={Some(expiryProps)}
             cvcProps={Some(cvcProps)}
             isBancontact
+            isSaveDetailsWithClickToPay
           />
           <RenderIf condition={conditionsForShowingSaveCardCheckbox}>
             <div className="flex items-center justify-start">
@@ -375,5 +476,17 @@ let make = (
       | (_, _, _) => React.null
       }}
     </RenderIf>
+    <RenderIf condition={clickToPayCardBrand !== ""}>
+      <div className="space-y-3 mt-2">
+        <ClickToPayHelpers.SrcMark cardBrands=clickToPayCardBrand height="32" />
+        <ClickToPayDetails
+          isSaveDetailsWithClickToPay
+          setIsSaveDetailsWithClickToPay
+          clickToPayCardBrand
+          clickToPayRememberMe
+          setClickToPayRememberMe
+        />
+      </div>
+    </RenderIf>
   </div>
 }
diff --git a/src/Types/ClickToPayHelpers.res b/src/Types/ClickToPayHelpers.res
new file mode 100644
index 000000000..f63a0db5d
--- /dev/null
+++ b/src/Types/ClickToPayHelpers.res
@@ -0,0 +1,961 @@
+open Promise
+let scriptId = "mastercard-external-script"
+
+let getScriptSrc = (isProd: bool) => {
+  let clickToPayMastercardBaseUrl = isProd
+    ? "https://src.mastercard.com"
+    : "https://sandbox.src.mastercard.com"
+  clickToPayMastercardBaseUrl ++ "/srci/integration/2/lib.js"
+}
+
+let srcUiKitScriptSrc = "https://src.mastercard.com/srci/integration/components/src-ui-kit/src-ui-kit.esm.js"
+let srcUiKitCssHref = "https://src.mastercard.com/srci/integration/components/src-ui-kit/src-ui-kit.css"
+
+let recognitionTokenCookieName = "__mastercard_click_to_pay"
+let manualCardId = "click_to_pay_manual_card"
+let savedCardId = "click_to_pay_saved_card_"
+
+let orderIdRef = ref("")
+
+type element = {
+  mutable innerHTML: string,
+  appendChild: CommonHooks.element => unit,
+  removeChild: CommonHooks.element => unit,
+  replaceChildren: unit => unit,
+  children: array<CommonHooks.element>,
+}
+type elementDocument
+@val external myDocument: elementDocument = "document"
+@send external getElementById: (elementDocument, string) => Nullable.t<element> = "getElementById"
+
+open Window
+let clickToPayWindowRef: ref<Nullable.t<window>> = ref(Nullable.null)
+
+@send external closeWindow: window => unit = "close"
+@val external windowOpen: (string, string, string) => Nullable.t<window> = "open"
+
+let handleCloseClickToPayWindow = () => {
+  switch clickToPayWindowRef.contents->Nullable.toOption {
+  | Some(window) => {
+      window->closeWindow
+      clickToPayWindowRef.contents = Nullable.null
+    }
+  | None => ()
+  }
+}
+
+let handleOpenClickToPayWindow = () => {
+  clickToPayWindowRef.contents = windowOpen("", "ClickToPayWindow", "width=480,height=600")
+}
+
+// Global window extensions
+type mastercardCheckoutServices
+
+@val
+external mastercardCheckoutServices: mastercardCheckoutServices =
+  "window.MastercardCheckoutServices"
+
+// Response types
+type responsePayloadStatus = COMPLETE | CANCEL | PAY_V3_CARD | ERROR
+
+type responsePayload = {
+  status: responsePayloadStatus,
+  payload: JSON.t,
+}
+
+type cardBrand = [
+  | #visa
+  | #mastercard
+  | #discover
+  | #amex
+]
+
+type authenticationPreferences = {payloadRequested: [#AUTHENTICATED | #NON_AUTHENTICATED]}
+
+type paymentOption = {
+  dpaDynamicDataTtlMinutes: int,
+  dynamicDataType: [#CARD_APPLICATION_CRYPTOGRAM_SHORT_FORM | #NONE],
+}
+
+type transactionAmount = {
+  transactionAmount: float,
+  transactionCurrencyCode: string,
+}
+
+type dpaTransactionOptions = {
+  dpaLocale: string,
+  authenticationPreferences: authenticationPreferences,
+  paymentOptions: array<paymentOption>,
+  transactionAmount: transactionAmount,
+  acquirerBIN: string,
+  acquirerMerchantId: string,
+  merchantCategoryCode: string,
+  merchantCountryCode: string,
+}
+
+type dpaData = {dpaName: string}
+
+type params = {
+  srcDpaId: string,
+  dpaData: dpaData,
+  dpaTransactionOptions: dpaTransactionOptions,
+  cardBrands: array<string>,
+  recognitionToken?: string,
+  checkoutExperience: [#WITHIN_CHECKOUT | #PAYMENT_SETTINGS],
+}
+
+type country = {
+  code: string,
+  countryISO: string,
+}
+
+let defaultCountry: country = {code: "", countryISO: ""}
+
+// Cookie helpers
+@val external document: {..} = "document"
+
+let setLocalStorage = (~key: string, ~value: string) => {
+  Window.LocalStorage.setItem(key, value)
+}
+
+let getLocalStorage = (~key: string) => {
+  Window.LocalStorage.getItem(key)
+}
+
+let deleteLocalStorage = (~key: string) => {
+  Window.LocalStorage.removeItem(key)
+}
+
+type mobileNumber = {
+  phoneNumber: string,
+  countryCode: string,
+}
+
+type savedCardInfo = {
+  panBin: string,
+  cardBrand: string,
+}
+
+type identityType = EMAIL_ADDRESS | MOBILE_PHONE_NUMBER
+
+let getIdentityType = identityType => {
+  switch identityType {
+  | EMAIL_ADDRESS => "EMAIL_ADDRESS"
+  | MOBILE_PHONE_NUMBER => "MOBILE_PHONE_NUMBER"
+  }
+}
+
+type consumerIdentity = {
+  identityType: identityType,
+  identityValue: string,
+}
+
+type accountReference = {consumerIdentity: consumerIdentity}
+
+type authenticatePayload = {
+  windowRef: window,
+  requestRecognitionToken: bool,
+  accountReference: accountReference,
+}
+
+type encryptCardPayload = {
+  primaryAccountNumber: string,
+  panExpirationMonth: string,
+  panExpirationYear: string,
+  cardSecurityCode: string,
+}
+
+type checkoutWithCardPayload = {
+  windowRef: window,
+  srcDigitalCardId: string,
+  rememberMe: bool,
+}
+
+type digitalCardData = {descriptorName: string}
+
+type clickToPayCard = {
+  srcDigitalCardId: string,
+  panLastFour: string,
+  panExpirationMonth: string,
+  panExpirationYear: string,
+  paymentCardDescriptor: string,
+  digitalCardData: digitalCardData,
+  panBin: string,
+}
+
+let clickToPayCardItemToObjMapper = (json: JSON.t): clickToPayCard => {
+  let dict = json->Utils.getDictFromJson
+  {
+    srcDigitalCardId: dict->Utils.getString("srcDigitalCardId", ""),
+    panLastFour: dict->Utils.getString("panLastFour", ""),
+    panExpirationMonth: dict->Utils.getString("panExpirationMonth", ""),
+    panExpirationYear: dict->Utils.getString("panExpirationYear", ""),
+    paymentCardDescriptor: dict->Utils.getString("paymentCardDescriptor", ""),
+    digitalCardData: {
+      descriptorName: dict
+      ->Utils.getDictFromDict("digitalCardData")
+      ->Utils.getString("descriptorName", ""),
+    },
+    panBin: dict->Utils.getString("panBin", ""),
+  }
+}
+
+type clickToPayToken = {
+  dpaId: string,
+  dpaName: string,
+  locale: string,
+  transactionAmount: float,
+  transactionCurrencyCode: string,
+  acquirerBIN: string,
+  acquirerMerchantId: string,
+  merchantCategoryCode: string,
+  merchantCountryCode: string,
+  cardBrands: array<string>,
+  email: string,
+}
+
+let clickToPayTokenItemToObjMapper = (json: JSON.t) => {
+  let dict = json->Utils.getDictFromJson
+  {
+    dpaId: dict->Utils.getString("dpa_id", ""),
+    dpaName: dict->Utils.getString("dpa_name", ""),
+    locale: dict->Utils.getString("locale", ""),
+    transactionAmount: dict->Utils.getFloat("transaction_amount", 0.0),
+    transactionCurrencyCode: dict->Utils.getString("transaction_currency_code", ""),
+    acquirerBIN: dict->Utils.getString("acquirer_bin", ""),
+    acquirerMerchantId: dict->Utils.getString("acquirer_merchant_id", ""),
+    merchantCategoryCode: dict->Utils.getString("merchant_category_code", ""),
+    merchantCountryCode: dict->Utils.getString("merchant_country_code", ""),
+    cardBrands: dict
+    ->Utils.getArray("card_brands")
+    ->Array.map(item => item->JSON.Decode.string->Option.getOr("")),
+    email: dict->Utils.getString("email", ""),
+  }
+}
+
+// Update the previously defined mastercardCheckoutServices type
+@send
+external getCards: (mastercardCheckoutServices, unit) => promise<array<clickToPayCard>> = "getCards"
+
+@send
+external authenticate: (mastercardCheckoutServices, authenticatePayload) => promise<JSON.t> =
+  "authenticate"
+
+@send
+external checkoutWithCard: (
+  mastercardCheckoutServices,
+  checkoutWithCardPayload,
+) => promise<JSON.t> = "checkoutWithCard"
+
+@send
+external encryptCard: (mastercardCheckoutServices, encryptCardPayload) => promise<JSON.t> =
+  "encryptCard"
+
+type consumer = {
+  emailAddress: string,
+  mobileNumber: mobileNumber,
+}
+
+type complianceSettingsData = {
+  acceptedVersion: string,
+  latestVersion: string,
+  latestVersionUri: string,
+}
+
+type complianceSettings = {
+  privacy: complianceSettingsData,
+  tnc: complianceSettingsData,
+  cookie: complianceSettingsData,
+}
+
+// Add the CheckoutWithNewCardPayload type
+type checkoutWithNewCardPayload = {
+  windowRef: window,
+  cardBrand: string,
+  encryptedCard: JSON.t,
+  rememberMe: bool,
+  consumer?: consumer,
+  complianceSettings: complianceSettings,
+}
+
+let mcCheckoutService: ref<option<mastercardCheckoutServices>> = ref(None)
+
+// First, let's add the ClickToPayOptions type
+type clickToPayOptions = {
+  dpaId: string,
+  dpaName: string,
+  locale?: string,
+  transactionAmount: float,
+  transactionCurrencyCode: string,
+  acquirerBIN: string,
+  acquirerMerchantId: string,
+  merchantCategoryCode: string,
+  merchantCountryCode: string,
+  cardBrands: array<string>,
+}
+
+// Add the init external
+@send
+external init: (mastercardCheckoutServices, params) => promise<JSON.t> = "init"
+
+// First add this external to check window property
+@val @scope("window")
+external getOptionMastercardCheckoutServices: option<unit => mastercardCheckoutServices> =
+  "MastercardCheckoutServices"
+
+@new @scope("window")
+external getMastercardCheckoutServices: unit => mastercardCheckoutServices =
+  "MastercardCheckoutServices"
+
+// Then update the initialization function
+let initializeMastercardCheckout = (
+  clickToPayToken: clickToPayToken,
+  logger: HyperLogger.loggerMake,
+) => {
+  switch getOptionMastercardCheckoutServices {
+  | Some(_) => {
+      logger.setLogInfo(
+        ~value="MastercardCheckoutServices constructor found",
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      // Create new instance by calling the constructor
+      mcCheckoutService := Some(getMastercardCheckoutServices())
+
+      // Get recognition token
+      let recognitionToken = getLocalStorage(~key=recognitionTokenCookieName)
+      logger.setLogInfo(~value="Recognition token fetched", ~eventName=CLICK_TO_PAY_FLOW)
+
+      // Construct params
+      let params = {
+        srcDpaId: clickToPayToken.dpaId,
+        dpaData: {
+          dpaName: clickToPayToken.dpaName,
+        },
+        dpaTransactionOptions: {
+          dpaLocale: clickToPayToken.locale,
+          authenticationPreferences: {
+            payloadRequested: #AUTHENTICATED,
+          },
+          paymentOptions: [
+            {
+              dpaDynamicDataTtlMinutes: 15,
+              dynamicDataType: #CARD_APPLICATION_CRYPTOGRAM_SHORT_FORM,
+            },
+          ],
+          transactionAmount: {
+            transactionAmount: clickToPayToken.transactionAmount,
+            transactionCurrencyCode: clickToPayToken.transactionCurrencyCode,
+          },
+          acquirerBIN: clickToPayToken.acquirerBIN,
+          acquirerMerchantId: clickToPayToken.acquirerMerchantId,
+          merchantCategoryCode: clickToPayToken.merchantCategoryCode,
+          merchantCountryCode: clickToPayToken.merchantCountryCode,
+        },
+        checkoutExperience: #WITHIN_CHECKOUT,
+        cardBrands: clickToPayToken.cardBrands,
+      }
+
+      // Add recognition token if exists
+      let params = switch recognitionToken->Nullable.toOption {
+      | Some(token) => {...params, recognitionToken: token}
+      | None => params
+      }
+
+      try {
+        switch mcCheckoutService.contents {
+        | Some(service) => {
+            logger.setLogInfo(
+              ~value="Mastercard Checkout Service initialized",
+              ~eventName=CLICK_TO_PAY_FLOW,
+            )
+            service
+            ->init(params)
+            ->then(resp => {
+              logger.setLogInfo(
+                ~value="Mastercard Checkout initialized",
+                ~eventName=CLICK_TO_PAY_FLOW,
+              )
+              resolve(resp)
+            })
+            ->catch(err => {
+              logger.setLogError(
+                ~value=`Error initializing Mastercard Checkout - ${err
+                  ->Utils.formatException
+                  ->JSON.stringify}`,
+                ~eventName=CLICK_TO_PAY_FLOW,
+              )
+              reject(err)
+            })
+          }
+        | None => {
+            logger.setLogError(
+              ~value="Mastercard Checkout Service not initialized",
+              ~eventName=CLICK_TO_PAY_FLOW,
+            )
+            reject(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+          }
+        }
+      } catch {
+      | error => {
+          logger.setLogError(
+            ~value=`Error initializing Mastercard Checkout - ${error
+              ->Utils.formatException
+              ->JSON.stringify}`,
+            ~eventName=CLICK_TO_PAY_FLOW,
+          )
+          reject(error)
+        }
+      }
+    }
+  | None => {
+      logger.setLogError(
+        ~value="MastercardCheckoutServices is not available",
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Js.Exn.raiseError("MastercardCheckoutServices is not available")
+    }
+  }
+}
+
+let getCards = async (logger: HyperLogger.loggerMake) => {
+  try {
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        let cards = await service->getCards()
+        logger.setLogInfo(~value="Cards returned from API", ~eventName=CLICK_TO_PAY_FLOW)
+        Ok(cards)
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Mastercard Checkout Service not initialized",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        Ok([])
+      }
+    }
+  } catch {
+  | error => {
+      logger.setLogError(
+        ~value=`Error getting cards - ${error->Utils.formatException->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Ok([])
+    }
+  }
+}
+
+// First, let's define the AuthenticatePayload type
+type authenticateInputPayload = {
+  windowRef: window,
+  consumerIdentity: consumerIdentity,
+}
+
+// Add this external for getting hostname
+@val @scope(("window", "location"))
+external hostname: string = "hostname"
+
+let authenticate = async (payload: authenticateInputPayload, logger: HyperLogger.loggerMake) => {
+  // Construct the authenticate payload
+  let authenticatePayload = {
+    windowRef: payload.windowRef,
+    requestRecognitionToken: true,
+    accountReference: {
+      consumerIdentity: {
+        identityType: payload.consumerIdentity.identityType,
+        identityValue: payload.consumerIdentity.identityValue,
+      },
+    },
+  }
+
+  try {
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        let authentication = await service->authenticate(authenticatePayload)
+
+        // Check and set recognition token if present
+        let recognitionToken =
+          authentication
+          ->Js.Json.decodeObject
+          ->Belt.Option.flatMap(obj => obj->Js.Dict.get("recognitionToken"))
+          ->Belt.Option.flatMap(Js.Json.decodeString)
+          ->Option.getOr("")
+
+        if recognitionToken !== "" {
+          setLocalStorage(~key=recognitionTokenCookieName, ~value=recognitionToken)
+        }
+
+        Ok(authentication)
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Mastercard Checkout Service not initialized",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        Error(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+      }
+    }
+  } catch {
+  | error => {
+      logger.setLogError(
+        ~value=`Error during authentication - ${error->Utils.formatException->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Error(error)
+    }
+  }
+}
+
+let checkoutWithCard = async (
+  ~windowRef: window,
+  ~srcDigitalCardId: string,
+  ~logger: HyperLogger.loggerMake,
+) => {
+  let checkoutPayload = {
+    windowRef,
+    srcDigitalCardId,
+    rememberMe: true,
+  }
+
+  try {
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        let checkoutResp = await service->checkoutWithCard(checkoutPayload)
+        Ok(checkoutResp)
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Mastercard Checkout Service not initialized",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        Error(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+      }
+    }
+  } catch {
+  | error => {
+      logger.setLogError(
+        ~value=`Error during checkout with card - ${error->Utils.formatException->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Error(error)
+    }
+  }
+}
+
+let encryptCardForClickToPay = async (
+  ~cardNumber,
+  ~expiryMonth,
+  ~expiryYear,
+  ~cvcNumber,
+  ~logger: HyperLogger.loggerMake,
+) => {
+  let card: encryptCardPayload = {
+    primaryAccountNumber: cardNumber,
+    panExpirationMonth: expiryMonth,
+    panExpirationYear: expiryYear,
+    cardSecurityCode: cvcNumber,
+  }
+  try {
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        logger.setLogInfo(~value="Encrypting card for Click to Pay", ~eventName=CLICK_TO_PAY_FLOW)
+        let encryptedCard = await service->encryptCard(card)
+        Ok(encryptedCard)
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Mastercard Checkout Service not initialized",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        Error(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+      }
+    }
+  } catch {
+  | error => {
+      logger.setLogError(
+        ~value=`Error encrypting card - ${error->Utils.formatException->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Error(error)
+    }
+  }
+}
+
+@send
+external checkoutWithNewCard: (
+  mastercardCheckoutServices,
+  checkoutWithNewCardPayload,
+) => promise<JSON.t> = "checkoutWithNewCard"
+
+let checkoutWithNewCard = async (
+  payload: checkoutWithNewCardPayload,
+  ~logger: HyperLogger.loggerMake,
+) => {
+  try {
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        let checkoutResp = await service->checkoutWithNewCard(payload->Obj.magic)
+        Ok(checkoutResp)
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Mastercard Checkout Service not initialized",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        Error(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+      }
+    }
+  } catch {
+  | error => {
+      logger.setLogError(
+        ~value=`Error during checkout with new card - ${error
+          ->Utils.formatException
+          ->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      Error(error)
+    }
+  }
+}
+
+// Add these externals at the top with other DOM-related externals
+@val @scope("document")
+external querySelector: string => Nullable.t<Dom.element> = "querySelector"
+
+@val @scope("document")
+external createElement: string => Dom.element = "createElement"
+
+@val @scope(("document", "head"))
+external appendChild: Dom.element => unit = "appendChild"
+
+@set external setType: (Dom.element, string) => unit = "type"
+@set external setSrc: (Dom.element, string) => unit = "src"
+@set external setRel: (Dom.element, string) => unit = "rel"
+@set external setHref: (Dom.element, string) => unit = "href"
+@val @scope(("top", "location"))
+external topLocationHref: string = "href"
+
+// Add these externals for script events
+@set external setOnLoad: (Dom.element, unit => unit) => unit = "onload"
+@set external setOnError: (Dom.element, unit => unit) => unit = "onerror"
+
+// Add the function at the end of the file
+let loadClickToPayScripts = (logger: HyperLogger.loggerMake) => {
+  let scriptSelector = `script[src="${srcUiKitScriptSrc}"]`
+  let linkSelector = `link[href="${srcUiKitCssHref}"]`
+
+  // Add script if not exists
+  switch querySelector(scriptSelector)->Nullable.toOption {
+  | None => {
+      let script = createElement("script")
+      script->setType("module")
+      script->setSrc(srcUiKitScriptSrc)
+      appendChild(script)
+      logger.setLogInfo(~value="ClickToPay UI Kit Script Loaded", ~eventName=CLICK_TO_PAY_SCRIPT)
+    }
+  | Some(_) => ()
+  }
+
+  // Add link if not exists
+  switch querySelector(linkSelector)->Nullable.toOption {
+  | None => {
+      let link = createElement("link")
+      link->setRel("stylesheet")
+      link->setHref(srcUiKitCssHref)
+      appendChild(link)
+      logger.setLogInfo(~value="ClickToPay UI Kit CSS Loaded", ~eventName=CLICK_TO_PAY_SCRIPT)
+    }
+  | Some(_) => ()
+  }
+}
+
+// Add this function at the end of the file
+let loadMastercardScript = (clickToPayToken, isProd, logger: HyperLogger.loggerMake) => {
+  let scriptSrc = isProd->getScriptSrc
+  Promise.make((resolve, reject) => {
+    let scriptSelector = `script[src="${scriptSrc}"]`
+
+    switch querySelector(scriptSelector)->Nullable.toOption {
+    | Some(_) => {
+        logger.setLogInfo(~value="Mastercard Script Already Exists", ~eventName=CLICK_TO_PAY_SCRIPT)
+        // Script already exists, just initialize
+        initializeMastercardCheckout(clickToPayToken, logger)
+        ->then(resp => {
+          resp->resolve
+          Promise.resolve()
+        })
+        ->catch(err => {
+          err->reject
+          Promise.resolve()
+        })
+        ->ignore
+      }
+    | None => {
+        let script = createElement("script")
+        script->setType("text/javascript")
+        script->setSrc(scriptSrc)
+
+        // Set onload handler
+        script->setOnLoad(() => {
+          logger.setLogInfo(
+            ~value="Script loaded, initializing Mastercard Checkout",
+            ~eventName=CLICK_TO_PAY_SCRIPT,
+          )
+          // Initialize after script loads
+          initializeMastercardCheckout(clickToPayToken, logger)
+          ->Promise.then(
+            resp => {
+              resp->resolve
+              Promise.resolve()
+            },
+          )
+          ->Promise.catch(
+            err => {
+              err->reject
+              Promise.resolve()
+            },
+          )
+          ->ignore
+        })
+
+        // Set onerror handler
+        script->setOnError(() => {
+          logger.setLogError(
+            ~value="Error loading Mastercard script",
+            ~eventName=CLICK_TO_PAY_SCRIPT,
+          )
+          let exn = Js.Exn.raiseError("Failed to load Mastercard script")
+          exn->reject
+        })
+
+        appendChild(script)
+      }
+    }
+  })
+}
+
+// Define props types for each component
+type srcMarkProps = {
+  @as("card-brands") cardBrands?: string,
+  height?: string,
+  width?: string,
+  className?: string,
+}
+
+type srcLoaderProps = {
+  className?: string,
+  size?: string,
+}
+
+type srcLearnMoreProps = {
+  @as("card-brands") cardBrands: string,
+  className?: string,
+}
+
+// Components in modules with capitalized names (React convention)
+module SrcMark = {
+  @val
+  external makeOrig: (@as("src-mark") _, srcMarkProps) => React.element = "React.createElement"
+
+  let make = React.memo(makeOrig)
+}
+
+module SrcLoader = {
+  @val
+  external make: (@as("src-loader") _, srcLoaderProps) => React.element = "React.createElement"
+}
+
+module SrcLearnMore = {
+  @val
+  external make: (@as("src-learn-more") _, srcLearnMoreProps) => React.element =
+    "React.createElement"
+}
+
+type paramUrl = {
+  key: string,
+  value: string,
+}
+
+let defaultParamUrl = {
+  key: "",
+  value: "",
+}
+
+let urlToParamUrlItemToObjMapper = url => {
+  let params = url->Js.String2.replace("?", "")->Js.String2.split("&")
+  params
+  ->Js.Array2.filter(param => param !== "")
+  ->Js.Array2.map(param => {
+    let paramValues = param->Js.String2.split("=")
+    {
+      key: paramValues->Belt.Array.get(0)->Belt.Option.getWithDefault(""),
+      value: paramValues->Belt.Array.get(1)->Belt.Option.getWithDefault(""),
+    }
+  })
+}
+
+let handleProceedToPay = async (
+  ~srcDigitalCardId: string="",
+  ~encryptedCard: JSON.t=JSON.Encode.null,
+  ~isCheckoutWithNewCard: bool=false,
+  ~isUnrecognizedUser: bool=false,
+  ~email: string="",
+  ~phoneNumber: string="",
+  ~countryCode: string="",
+  ~rememberMe: bool=false,
+  ~logger: HyperLogger.loggerMake,
+) => {
+  let closeWindow = (status, payload: JSON.t) => {
+    handleCloseClickToPayWindow()
+
+    {
+      status,
+      payload,
+    }
+  }
+
+  let handleSuccessResponse = response => {
+    let checkoutActionCode =
+      response->Utils.getDictFromJson->Utils.getString("checkoutActionCode", "")
+
+    switch checkoutActionCode {
+    | "COMPLETE" => closeWindow(COMPLETE, response)
+    | "ERROR" => closeWindow(ERROR, response)
+    | "CANCEL" => closeWindow(CANCEL, response)
+    | "PAY_V3_CARD" => closeWindow(PAY_V3_CARD, response)
+    | _ => closeWindow(ERROR, response)
+    }
+  }
+
+  let handleCheckoutWithCard = async () => {
+    switch clickToPayWindowRef.contents->Nullable.toOption {
+    | Some(window) => {
+        let checkoutResp = await checkoutWithCard(~windowRef=window, ~srcDigitalCardId, ~logger)
+        switch checkoutResp {
+        | Ok(response) => response->handleSuccessResponse
+        | Error(_) => closeWindow(ERROR, Js.Json.null)
+        }
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Click to Pay window reference is null",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        closeWindow(ERROR, Js.Json.null)
+      }
+    }
+  }
+
+  let handleCheckoutWithNewCard = async () => {
+    switch clickToPayWindowRef.contents->Nullable.toOption {
+    | Some(window) => {
+        let cardBrand = encryptedCard->Utils.getDictFromJson->Utils.getString("cardBrand", "")
+        let encryptedCard =
+          encryptedCard
+          ->Utils.getDictFromJson
+          ->Utils.getJsonFromDict("encryptedCard", JSON.Encode.null)
+        let consumer = {
+          emailAddress: email,
+          mobileNumber: {
+            phoneNumber,
+            countryCode,
+          },
+        }
+        let complianceSettings = {
+          privacy: {
+            acceptedVersion: "LATEST",
+            latestVersion: "LATEST",
+            latestVersionUri: "https://www.mastercard.com/global/click-to-pay/country-listing/privacy.html",
+          },
+          tnc: {
+            acceptedVersion: "LATEST",
+            latestVersion: "LATEST",
+            latestVersionUri: "https://www.mastercard.com/global/click-to-pay/country-listing/terms.html",
+          },
+          cookie: {
+            acceptedVersion: "LATEST",
+            latestVersion: "LATEST",
+            latestVersionUri: "https://www.mastercard.com/global/click-to-pay/en-us/privacy-notice.html",
+          },
+        }
+        let payload = if isUnrecognizedUser {
+          {
+            windowRef: window,
+            cardBrand,
+            encryptedCard,
+            rememberMe,
+            complianceSettings,
+            consumer,
+          }
+        } else {
+          {
+            windowRef: window,
+            cardBrand,
+            encryptedCard,
+            rememberMe,
+            complianceSettings,
+          }
+        }
+        let checkoutResp = await checkoutWithNewCard(payload, ~logger)
+
+        switch checkoutResp {
+        | Ok(response) => response->handleSuccessResponse
+        | Error(_) => closeWindow(ERROR, Js.Json.null)
+        }
+      }
+    | None => {
+        logger.setLogError(
+          ~value="Click to Pay window reference is null",
+          ~eventName=CLICK_TO_PAY_FLOW,
+        )
+        closeWindow(ERROR, Js.Json.null)
+      }
+    }
+  }
+
+  try {
+    if clickToPayWindowRef.contents->Nullable.toOption->Option.isNone {
+      handleOpenClickToPayWindow()
+    }
+    if isCheckoutWithNewCard {
+      await handleCheckoutWithNewCard()
+    } else {
+      await handleCheckoutWithCard()
+    }
+  } catch {
+  | err => {
+      logger.setLogError(
+        ~value=`Error during checkout - ${err->Utils.formatException->JSON.stringify}`,
+        ~eventName=CLICK_TO_PAY_FLOW,
+      )
+      closeWindow(ERROR, Js.Json.null)
+    }
+  }
+}
+
+// First add the external binding for signOut
+@send
+external signOutMastercard: mastercardCheckoutServices => promise<JSON.t> = "signOut"
+
+// Then add the signOut function implementation
+let signOut = async () => {
+  try {
+    Js.Console.log("signOut")
+    deleteLocalStorage(~key=recognitionTokenCookieName)
+
+    switch mcCheckoutService.contents {
+    | Some(service) => {
+        let signOutResp = await service->signOutMastercard
+        Ok(signOutResp)
+      }
+    | None => {
+        Js.Console.error("Mastercard Checkout Service not initialized")
+        Error(Js.Exn.raiseError("Mastercard Checkout Service not initialized"))
+      }
+    }
+  } catch {
+  | error => {
+      Js.Console.error2("Error during signOut:", error)
+      Error(error)
+    }
+  }
+}
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index ac0e83994..b8396525c 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -123,6 +123,7 @@ type customerCard = {
   cardToken: string,
   cardHolderName: option<string>,
   nickname: string,
+  isClickToPayCard: bool,
 }
 type bank = {mask: string}
 type customerMethods = {
@@ -193,6 +194,7 @@ let defaultCardDetails = {
   cardToken: "",
   cardHolderName: None,
   nickname: "",
+  isClickToPayCard: false,
 }
 let defaultCustomerMethods = {
   paymentToken: "",
@@ -865,6 +867,7 @@ let getCardDetails = (dict, str) => {
       cardToken: getString(json, "card_token", ""),
       cardHolderName: getOptionString(json, "card_holder_name"),
       nickname: getString(json, "nick_name", ""),
+      isClickToPayCard: false,
     }
   })
   ->Option.getOr(defaultCardDetails)
@@ -1090,3 +1093,43 @@ let itemToPayerDetailsObjectMapper = dict => {
   ->Option.flatMap(Dict.get(_, "national_number"))
   ->Option.flatMap(JSON.Decode.string),
 }
+
+let convertClickToPayCardToCustomerMethod = (
+  clickToPayCard: ClickToPayHelpers.clickToPayCard,
+): customerMethods => {
+  paymentToken: clickToPayCard.srcDigitalCardId,
+  customerId: "", // Empty as Click to Pay doesn't provide this
+  paymentMethod: "card",
+  paymentMethodId: clickToPayCard.srcDigitalCardId,
+  paymentMethodIssuer: None,
+  card: {
+    scheme: Some(
+      switch clickToPayCard.paymentCardDescriptor->Js.String2.toLowerCase {
+      | "amex" => "AmericanExpress"
+      | "mastercard" => "Mastercard"
+      | "visa" => "Visa"
+      | "discover" => "Discover"
+      | other =>
+        other
+        ->Js.String2.charAt(0)
+        ->Js.String.toUpperCase
+        ->Js.String.concat(other->Js.String2.sliceToEnd(~from=1)->Js.String.toLowerCase)
+      },
+    ),
+    last4Digits: clickToPayCard.panLastFour,
+    expiryMonth: clickToPayCard.panExpirationMonth,
+    expiryYear: clickToPayCard.panExpirationYear,
+    cardToken: clickToPayCard.srcDigitalCardId,
+    cardHolderName: None,
+    nickname: clickToPayCard.digitalCardData.descriptorName,
+    isClickToPayCard: true,
+  },
+  paymentMethodType: Some("click_to_pay"),
+  defaultPaymentMethodSet: false, // Default to false as Click to Pay doesn't provide this
+  requiresCvv: false, // Click to Pay handles CVV internally
+  lastUsedAt: Js.Date.make()->Js.Date.toISOString, // Current timestamp as Click to Pay doesn't provide this
+  bank: {
+    mask: "", // Just use the mask field that exists in the type
+  },
+  recurringEnabled: true, // Since Click to Pay cards can be used for recurring payments
+}
diff --git a/src/Types/SessionsType.res b/src/Types/SessionsType.res
index 27673c709..b89c6cbb5 100644
--- a/src/Types/SessionsType.res
+++ b/src/Types/SessionsType.res
@@ -1,8 +1,9 @@
 open Utils
 
-type wallet = Gpay | Paypal | Klarna | ApplePay | SamsungPay | Paze | NONE
+type wallet = Gpay | Paypal | Klarna | ApplePay | SamsungPay | Paze | ClickToPay | NONE
+
 type tokenCategory =
-  ApplePayObject | GooglePayThirdPartyObject | SamsungPayObject | PazeObject | Others
+  ApplePayObject | GooglePayThirdPartyObject | SamsungPayObject | PazeObject | ClickToPayObject | Others
 
 type paymentType = Wallet | Others
 
@@ -31,6 +32,7 @@ type tokenType =
   | GooglePayThirdPartyToken(array<JSON.t>)
   | PazeToken(array<JSON.t>)
   | SamsungPayToken(array<JSON.t>)
+  | ClickToPayToken(array<JSON.t>)
   | OtherToken(array<token>)
 
 type optionalTokenType =
@@ -38,6 +40,7 @@ type optionalTokenType =
   | GooglePayThirdPartyTokenOptional(option<JSON.t>)
   | PazeTokenOptional(option<JSON.t>)
   | SamsungPayTokenOptional(option<JSON.t>)
+  | ClickToPayTokenOptional(option<JSON.t>)
   | OtherTokenOptional(option<token>)
 
 type sessions = {
@@ -72,6 +75,7 @@ let getWallet = str => {
   | "samsung_pay" => SamsungPay
   | "google_pay" => Gpay
   | "paze" => Paze
+  | "click_to_pay" => ClickToPay
   | _ => NONE
   }
 }
@@ -133,6 +137,12 @@ let itemToObjMapper = (dict, returnType) => {
       sessionsToken: SamsungPayToken(getSessionsTokenJson(dict, "session_token")),
     }
 
+  | ClickToPayObject => {
+      paymentId: getString(dict, "payment_id", ""),
+      clientSecret: getString(dict, "client_secret", ""),
+      sessionsToken: ClickToPayToken(getSessionsTokenJson(dict, "session_token")),
+    }
+
   | Others => {
       paymentId: getString(dict, "payment_id", ""),
       clientSecret: getString(dict, "client_secret", ""),
@@ -158,5 +168,6 @@ let getPaymentSessionObj = (tokenType, val) =>
     GooglePayThirdPartyTokenOptional(getWalletFromTokenType(arr, val))
   | PazeToken(arr) => PazeTokenOptional(getWalletFromTokenType(arr, val))
   | SamsungPayToken(arr) => SamsungPayTokenOptional(getWalletFromTokenType(arr, val))
+  | ClickToPayToken(arr) => ClickToPayTokenOptional(getWalletFromTokenType(arr, val))
   | OtherToken(arr) => OtherTokenOptional(arr->Array.find(item => item.walletName == val))
   }
diff --git a/src/Utilities/DynamicFieldsUtils.res b/src/Utilities/DynamicFieldsUtils.res
index 8714428c5..23c02b58a 100644
--- a/src/Utilities/DynamicFieldsUtils.res
+++ b/src/Utilities/DynamicFieldsUtils.res
@@ -104,6 +104,37 @@ let addBillingAddressIfUseBillingAddress = (
   }
 }
 
+let clickToPayFields: array<PaymentMethodsRecord.paymentMethodsFields> = [Email, PhoneNumber]
+
+let isClickToPayFieldType = (fieldType: PaymentMethodsRecord.paymentMethodsFields) => {
+  switch fieldType {
+  | Email
+  | PhoneNumber => true
+  | _ => false
+  }
+}
+
+let removeClickToPayFieldsIfSaveDetailsWithClickToPay = (
+  requiredFields: array<PaymentMethodsRecord.required_fields>,
+  isSaveDetailsWithClickToPay,
+) => {
+  if isSaveDetailsWithClickToPay {
+    requiredFields->Array.filter(requiredField => {
+      !(requiredField.field_type->isClickToPayFieldType)
+    })
+  } else {
+    requiredFields
+  }
+}
+
+let addClickToPayFieldsIfSaveDetailsWithClickToPay = (fieldsArr, isSaveDetailsWithClickToPay) => {
+  if isSaveDetailsWithClickToPay {
+    fieldsArr->Array.concat(clickToPayFields)
+  } else {
+    fieldsArr
+  }
+}
+
 let checkIfNameIsValid = (
   requiredFieldsType: array<PaymentMethodsRecord.required_fields>,
   paymentMethodFields,
@@ -798,11 +829,13 @@ let combineCardExpiryAndCvc = arr => {
 let updateDynamicFields = (
   arr: array<PaymentMethodsRecord.paymentMethodsFields>,
   billingAddress,
+  isSaveDetailsWithClickToPay,
 ) => {
   arr
   ->Utils.removeDuplicate
   ->Array.filter(item => item !== None)
   ->addBillingAddressIfUseBillingAddress(billingAddress)
+  ->addClickToPayFieldsIfSaveDetailsWithClickToPay(isSaveDetailsWithClickToPay)
   ->combineStateAndCity
   ->combineCountryAndPostal
   ->combineCardExpiryMonthAndYear
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index e5c59717c..f33405daf 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -129,6 +129,20 @@ let savedCardBody = (
   savedCardBody
 }
 
+let clickToPayBody = (~merchantTransactionId, ~correlationId, ~xSrcFlowId) => {
+  [
+    ("payment_method", "card"->JSON.Encode.string),
+    (
+      "ctp_service_details",
+      [
+        ("merchant_transaction_id", merchantTransactionId->JSON.Encode.string),
+        ("correlation_id", correlationId->JSON.Encode.string),
+        ("x_src_flow_id", xSrcFlowId->JSON.Encode.string),
+      ]->Utils.getJsonFromArrayOfJson,
+    ),
+  ]
+}
+
 let savedPaymentMethodBody = (
   ~paymentToken,
   ~customerId,
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index b84380843..013735588 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -100,3 +100,23 @@ let areOneClickWalletsRendered = Recoil.atom(
   "areOneClickWalletsBtnRendered",
   defaultAreOneClickWalletsRendered,
 )
+
+type clickToPayConfig = {
+  isReady: bool,
+  availableCardBrands: array<string>,
+  email: string,
+  clickToPayCards: option<
+    array<OrcaPaymentPage.ClickToPayHelpers.clickToPayCard>,
+  >,
+  dpaName: string,
+}
+
+let defaultClickToPayConfig = {
+  isReady: false,
+  availableCardBrands: [],
+  email: "",
+  clickToPayCards: None,
+  dpaName: "",
+}
+
+let clickToPayConfig = Recoil.atom("clickToPayConfig", defaultClickToPayConfig)
diff --git a/src/Window.res b/src/Window.res
index 4c4263247..4a9755298 100644
--- a/src/Window.res
+++ b/src/Window.res
@@ -130,6 +130,12 @@ module Top = {
   }
 }
 
+module LocalStorage = {
+  @scope(("window", "localStorage")) @val external setItem: (string, string) => unit = "setItem"
+  @scope(("window", "localStorage")) @val external getItem: string => Nullable.t<string> = "getItem"
+  @scope(("window", "localStorage")) @val external removeItem: string => unit = "removeItem"
+}
+
 module Element = {
   @get external clientWidth: Dom.element => int = "clientWidth"
 }
diff --git a/src/hyper-loader/Elements.res b/src/hyper-loader/Elements.res
index 911290ffa..f0be601cc 100644
--- a/src/hyper-loader/Elements.res
+++ b/src/hyper-loader/Elements.res
@@ -94,7 +94,7 @@ let make = (
 
     let unMountPreMountLoaderIframe = () => {
       switch preMountLoaderIframeDiv->Nullable.toOption {
-      | Some(iframe) => iframe->remove
+      | Some(iframe) => () //iframe->remove
       | None => ()
       }
     }
diff --git a/src/hyper-loader/LoaderPaymentElement.res b/src/hyper-loader/LoaderPaymentElement.res
index 533658fdc..04fc9d757 100644
--- a/src/hyper-loader/LoaderPaymentElement.res
+++ b/src/hyper-loader/LoaderPaymentElement.res
@@ -385,6 +385,7 @@ let make = (
            name="orca-${elementIframeId}-iframeRef-${localSelectorString}"
           src="${ApiEndpoint.sdkDomainUrl}/index.html?componentName=${componentType}"
           allow="payment *"
+          sandbox="allow-scripts allow-popups allow-same-origin allow-forms"
           name="orca-payment"
           style="border: 0px; ${additionalIframeStyle} outline: none;"
           width="100%"
diff --git a/src/hyper-log-catcher/HyperLogger.res b/src/hyper-log-catcher/HyperLogger.res
index a0f5851ff..dfbbec480 100644
--- a/src/hyper-log-catcher/HyperLogger.res
+++ b/src/hyper-log-catcher/HyperLogger.res
@@ -89,6 +89,8 @@ type eventName =
   | PAZE_SDK_FLOW
   | SAMSUNG_PAY_SCRIPT
   | SAMSUNG_PAY
+  | CLICK_TO_PAY_SCRIPT
+  | CLICK_TO_PAY_FLOW
 
 let eventNameToStrMapper = (eventName: eventName) => (eventName :> string)