diff --git a/package-lock.json b/package-lock.json
index db5ba3512..cf3546ce5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6747,6 +6747,16 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -10005,6 +10015,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -14898,6 +14915,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
+      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -22491,7 +22515,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob": {
           "version": "7.2.3",
diff --git a/src/Components/PayNowButton.res b/src/Components/PayNowButton.res
index def4bbdfb..4c8d3cc93 100644
--- a/src/Components/PayNowButton.res
+++ b/src/Components/PayNowButton.res
@@ -19,6 +19,8 @@ let make = (
   ~cardProps: CardUtils.cardProps,
   ~expiryProps: CardUtils.expiryProps,
   ~selectedOption: PaymentModeType.payment,
+  ~savedMethods: array<PaymentType.customerMethods>,
+  ~paymentToken,
 ) => {
   open RecoilAtoms
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -26,14 +28,32 @@ let make = (
   let (showLoader, setShowLoader) = React.useState(() => false)
   let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
+  let showFields = Recoil.useRecoilValueFromAtom(showCardFieldsAtom)
 
-  let (isCVCValid, _, _, _, _, _, _, _, _, _) = cvcProps
+  let (isCVCValid, _, cvcNumber, _, _, _, _, _, _, _) = cvcProps
   let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
   let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
 
+  let (token, _) = paymentToken
+  let customerMethod =
+    savedMethods
+    ->Array.filter(savedMethod => {
+      savedMethod.paymentToken === token
+    })
+    ->Array.get(0)
+    ->Option.getOr(PaymentType.defaultCustomerMethods)
+  let isCardPaymentMethod = customerMethod.paymentMethod === "card"
+  let complete = switch isCVCValid {
+  | Some(val) => token !== "" && val
+  | _ => false
+  }
+  let empty = cvcNumber == ""
+  let isSavedMethodCheck =
+    areRequiredFieldsValidValue && (!isCardPaymentMethod || (complete && !empty))
+
   let validFormat =
-    isCVCValid->Option.getOr(false) &&
     isCardValid->Option.getOr(false) &&
+    isCVCValid->Option.getOr(false) &&
     isExpiryValid->Option.getOr(false) &&
     areRequiredFieldsValidValue
 
@@ -44,14 +64,19 @@ let make = (
     setShowLoader(_ => true)
     Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
   }
-  React.useEffect3(() => {
-    if selectedOption === Card {
-      setIsDisabled(_ => !validFormat)
+
+  React.useEffect4(() => {
+    if showFields {
+      if selectedOption === Card {
+        setIsDisabled(_ => !validFormat)
+      } else {
+        setIsDisabled(_ => !areRequiredFieldsValidValue)
+      }
     } else {
-      setIsDisabled(_ => !areRequiredFieldsValidValue)
+      setIsDisabled(_ => !isSavedMethodCheck)
     }
     None
-  }, (validFormat, areRequiredFieldsValidValue, selectedOption))
+  }, (validFormat, areRequiredFieldsValidValue, selectedOption, isSavedMethodCheck))
 
   <div className="flex flex-col gap-1 h-auto w-full items-center">
     <button
diff --git a/src/Payment.res b/src/Payment.res
index 74baac979..8ec944f5e 100644
--- a/src/Payment.res
+++ b/src/Payment.res
@@ -127,6 +127,12 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
     if cvc->Js.String2.length > 0 && cvcNumberInRange(cvc, cardBrand)->Js.Array2.includes(true) {
       zipRef.current->Js.Nullable.toOption->Belt.Option.forEach(input => input->focus)->ignore
     }
+
+    if cvc->Js.String2.length > 0 && cvcNumberInRange(cvc, cardBrand)->Js.Array2.includes(true) {
+      setIsCVCValid(_ => Some(true))
+    } else {
+      setIsCVCValid(_ => None)
+    }
   }
 
   let changeZipCode = ev => {
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index e373568b3..7557e3b04 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -80,8 +80,7 @@ let make = (
 
   React.useEffect1(() => {
     let defaultPaymentMethod =
-      savedMethods
-      ->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
+      savedMethods->Js.Array2.find(savedMethod => savedMethod.defaultPaymentMethodSet)
 
     let isSavedMethodsEmpty = savedMethods->Js.Array2.length === 0
 
@@ -400,6 +399,8 @@ let make = (
           cardProps
           expiryProps
           selectedOption={selectedOption->PaymentModeType.paymentMode}
+          savedMethods
+          paymentToken
         />
       </div>
     </RenderIf>
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index 7a798a732..3d7c08669 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -123,12 +123,12 @@ let make = (
     )
     let banContactBody = PaymentBody.bancontactBody()
     let cardBody = if displaySavedPaymentMethodsCheckbox {
-      if isSaveCardsChecked || list.payment_type === "setup_mandate" {
+      if isSaveCardsChecked || list.payment_type === SETUP_MANDATE {
         defaultCardBody->Js.Array2.concat(onSessionBody)
       } else {
         defaultCardBody
       }
-    } else if isGuestCustomer || list.payment_type === "normal" {
+    } else if isGuestCustomer || list.payment_type === NORMAL {
       defaultCardBody
     } else {
       defaultCardBody->Js.Array2.concat(onSessionBody)
@@ -178,7 +178,7 @@ let make = (
   let paymentMethodType = isBancontact ? "bancontact_card" : "debit"
   let conditionsForShowingSaveCardCheckbox =
     !isGuestCustomer &&
-    list.payment_type !== "setup_mandate" &&
+    list.payment_type !== SETUP_MANDATE &&
     options.displaySavedPaymentMethodsCheckbox &&
     !isBancontact
 
diff --git a/src/Payments/PaymentMethodsRecord.res b/src/Payments/PaymentMethodsRecord.res
index f32589f81..e5c387f60 100644
--- a/src/Payments/PaymentMethodsRecord.res
+++ b/src/Payments/PaymentMethodsRecord.res
@@ -706,13 +706,14 @@ type mandate = {
   single_use: option<mandateType>,
   multi_use: option<mandateType>,
 }
+type payment_type = NORMAL | NEW_MANDATE | SETUP_MANDATE | NONE
 
 type list = {
   redirect_url: string,
   currency: string,
   payment_methods: array<methods>,
   mandate_payment: option<mandate>,
-  payment_type: string,
+  payment_type: payment_type,
 }
 
 open Utils
@@ -733,7 +734,7 @@ let defaultList = {
   currency: "",
   payment_methods: [],
   mandate_payment: None,
-  payment_type: "",
+  payment_type: NONE,
 }
 let getMethod = str => {
   switch str {
@@ -927,13 +928,31 @@ let getMandate = (dict, str) => {
   })
 }
 
+let paymentTypeMapper = payment_type => {
+  switch payment_type {
+  | "normal" => NORMAL
+  | "new_mandate" => NEW_MANDATE
+  | "setup_mandate" => SETUP_MANDATE
+  | _ => NONE
+  }
+}
+
+let paymentTypeToStringMapper = payment_type => {
+  switch payment_type {
+  | NORMAL => "normal"
+  | NEW_MANDATE => "new_mandate"
+  | SETUP_MANDATE => "setup_mandate"
+  | NONE => ""
+  }
+}
+
 let itemToObjMapper = dict => {
   {
     redirect_url: getString(dict, "redirect_url", ""),
     currency: getString(dict, "currency", ""),
     payment_methods: getMethodsArr(dict, "payment_methods"),
     mandate_payment: getMandate(dict, "mandate_payment"),
-    payment_type: getString(dict, "payment_type", ""),
+    payment_type: getString(dict, "payment_type", "")->paymentTypeMapper,
   }
 }
 
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index ffc308d62..217871046 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -171,7 +171,7 @@ let achBankDebitBody = (
       ->Js.Dict.fromArray
       ->Js.Json.object_,
     ),
-  ]->Js.Array2.concat(mandateBody(paymentType))
+  ]->Array.concat(mandateBody(paymentType->PaymentMethodsRecord.paymentTypeToStringMapper))
 
 let sepaBankDebitBody = (
   ~fullName,
diff --git a/src/Utilities/PaymentHelpers.res b/src/Utilities/PaymentHelpers.res
index 35bacc01b..9f76ddf1e 100644
--- a/src/Utilities/PaymentHelpers.res
+++ b/src/Utilities/PaymentHelpers.res
@@ -749,7 +749,9 @@ let usePaymentIntent = (optLogger: option<OrcaLogger.loggerMake>, paymentType: p
           body
           ->Js.Array2.concat(
             bodyArr->Js.Array2.concatMany([
-              PaymentBody.mandateBody(mandatePaymentType),
+              PaymentBody.mandateBody(
+                mandatePaymentType->PaymentMethodsRecord.paymentTypeToStringMapper,
+              ),
               broswerInfo(),
             ]),
           )
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index 983a550a5..a26b8efc3 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -228,8 +228,11 @@ let getPaymentMethodName = (~paymentMethodType, ~paymentMethodName) => {
   }
 }
 
-let isAppendingCustomerAcceptance = (~isGuestCustomer, ~paymentType) => {
-  !isGuestCustomer && (paymentType === "new_mandate" || paymentType === "setup_mandate")
+let isAppendingCustomerAcceptance = (
+  ~isGuestCustomer,
+  ~paymentType: PaymentMethodsRecord.payment_type,
+) => {
+  !isGuestCustomer && (paymentType === NEW_MANDATE || paymentType === SETUP_MANDATE)
 }
 
 let appendedCustomerAcceptance = (~isGuestCustomer, ~paymentType, ~body) => {