@paykka/card-checkout-ui 0.13.17 → 0.14.0

package/dist/es/components/Card/index.js

@@ -12,7 +12,7 @@ import { createPromise } from "../../utils/create-promise.js";
 import { useBEM } from "../../hooks/useBEM.js";
 import { usePayState } from "../../hooks/usePayState.js";
 import { useRetry } from "../../hooks/useRetry.js";
-import { AddressField } from "../AddressField/index.js";
+import { DEFAULT_ADDRESS, AddressField } from "../AddressField/index.js";
 import { CardBrands } from "../CardBrands/index.js";
 import { CardExpireDateField } from "../CardExpireDateField/index.js";
 import { CardHolderNameField } from "../CardHolderNameField/index.js";
@@ -35,11 +35,11 @@ import { CombinedCardInfo } from "../CombinedCardInfo/index.js";
 import { cardBrandCodes } from "../../utils/card-brand/brands.js";
 import { findCardBrand } from "../../utils/card-brand/index.js";
 import { separateInputStyle } from "../../utils/style.js";
-import { formatPaymentResult } from "../../utils/payment.js";
-import { normalizedClass, trimAll, formatAmount } from "../../utils/format.js";
-const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
+import { normalizedClass, trimAll, limitedToNumber, formatAmount } from "../../utils/format.js";
+import { formatPaymentResult, processPaymentStatus } from "../../utils/payment.js";
 const { bem } = useBEM("card");
 const fieldClassNames = bem("field");
+const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
 const Card = w((props, ref) => {
   var _a, _b;
   const {
@@ -56,10 +56,9 @@ const Card = w((props, ref) => {
     core,
     hidePaymentButton = false
   } = props;
-  console.log(props);
   const addressCore = core.getAddressCore();
   const emailState = createEmailCore();
-  const { i18n, fraudDetection, sessionReady } = usePayState(session, core);
+  const { i18n, fraudDetection, sessionReady, disabled } = usePayState(session, core);
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const combinedCardInfoRef = A(null);
@@ -71,15 +70,7 @@ const Card = w((props, ref) => {
     securityCode: "",
     holderName: "",
     cardInfo: "",
-    address: {
-      country: void 0,
-      province: void 0,
-      city: void 0,
-      area: void 0,
-      postCode: void 0,
-      address1: void 0,
-      address2: void 0
-    }
+    address: { ...DEFAULT_ADDRESS }
   });
   const [validated, setValidated] = h(false);
   const [submitButtonStatus, setSubmitButtonStatus] = h("unSubmit");
@@ -96,25 +87,27 @@ const Card = w((props, ref) => {
   const [inputStyle, setInputStyle] = h({});
   const [splitCardInfo] = h(cardInfoLayout === "split");
   const currentBin = A("");
+  const [hiddenIframeName, setHiddenIframeName] = h("");
   F(ref, () => ({
     checkThreeDS,
     updateAddress: () => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.address.show))
         return;
-      const newForm = Object.assign(form, { address: addressCore.getAddressState() });
-      setForm(newForm);
-      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(addressCore.getAddressState());
-      validateForm();
+      const address = addressCore.getAddressState();
+      form.address = address;
+      setForm(form);
+      (_a2 = addressFieldRef.current) == null ? void 0 : _a2.update(address);
+      validateFormSilently();
     },
     updateEmail: () => {
       var _a2;
       if (!(fieldStatus == null ? void 0 : fieldStatus.email.show))
         return;
-      const newForm = Object.assign(form, { email: emailState.email });
-      setForm(newForm);
+      form.email = emailState.email;
+      setForm(form);
       (_a2 = emailFieldRef.current) == null ? void 0 : _a2.update(emailState.email);
-      validateForm();
+      validateFormSilently();
     },
     payment: () => {
       hidePaymentButton && onSubmit();
@@ -138,9 +131,8 @@ const Card = w((props, ref) => {
     setFieldStatus({ ...field });
   };
   const initElementStyles = () => {
-    if (!styles) {
+    if (!styles)
       return;
-    }
     const { input } = separateInputStyle(styles);
     input && setInputStyle(input);
   };
@@ -151,9 +143,8 @@ const Card = w((props, ref) => {
   };
   y(() => {
     var _a2, _b2;
-    if (!sessionReady) {
+    if (!sessionReady)
       return;
-    }
     const { status, supportMethods = [], bill = {}, sessionMode, country } = (session == null ? void 0 : session.checkout) || {};
     if (sessionMode === SessionMode.DROP_IN && !isDropIn) {
       (_b2 = (_a2 = props.core.config).onInitError) == null ? void 0 : _b2.call(
@@ -162,9 +153,8 @@ const Card = w((props, ref) => {
       );
       return;
     }
-    if (!intersection(supportMethods, CardPaymentMethods).length) {
+    if (!intersection(supportMethods, CardPaymentMethods).length)
       return;
-    }
     initFieldStatus();
     initElementStyles();
     setSecurity(sessionMode !== SessionMode.HOSTED);
@@ -183,7 +173,7 @@ const Card = w((props, ref) => {
       setErrorMsg(message || i18n.get("common.payTimeout"));
       setSubmitButtonStatus("unSubmit");
       (_a2 = props.onTimeout) == null ? void 0 : _a2.call(props, "retry", getPaymentMethodContext());
-      core.resetEnablePaymentMethod();
+      core.payment.resetCurrPaymentMethod();
     },
     [i18n, props.onTimeout]
   );
@@ -199,18 +189,19 @@ const Card = w((props, ref) => {
   const processOnError = (error) => {
     var _a2;
     (_a2 = props.onError) == null ? void 0 : _a2.call(props, error, getPaymentMethodContext());
-    core.resetEnablePaymentMethod();
+    core.payment.resetCurrPaymentMethod();
   };
-  const { start: startReFetchPayInfo } = useRetry((timeout) => pay(true, timeout), {
-    onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
-  });
+  const { start: startReFetchPayInfo } = useRetry(
+    (timeout) => pay(true, timeout),
+    {
+      onTimeout: () => onTimeout(i18n.get("common.queryTimeout"))
+    }
+  );
   const validatePromise = A(createPromise());
   const onValidated = (data) => {
     fieldValidStatusMap.current[data.fieldType].status = data.status;
     const results = Object.values(fieldValidStatusMap.current);
-    if (results.includes(null)) {
-      return;
-    } else {
+    if (!results.includes(null)) {
       const validateResult = results.every((result) => result.status === "success");
       if (validateResult) {
         validatePromise.current.resolve(true);
@@ -219,6 +210,9 @@ const Card = w((props, ref) => {
       }
     }
   };
+  const onHiddenIframeReady = (data) => {
+    setHiddenIframeName(data.name);
+  };
   const validateCombineCardInfo = async () => {
     var _a2;
     validatePromise.current = createPromise();
@@ -253,7 +247,7 @@ const Card = w((props, ref) => {
     });
   }
   const getPaymentParams = async () => {
-    var _a2, _b2, _c;
+    var _a2;
     const cardNo = trimAll(form.number);
     const cardBrand = findCardBrand(cardNo);
     const [expMonth, expYear] = form.expireDate.split("/");
@@ -269,10 +263,6 @@ const Card = w((props, ref) => {
         paymentMethod = cardBrand.code;
       }
     }
-    let cardBin;
-    if (security) {
-      cardBin = splitCardInfo ? (_b2 = cardNumberFieldRef.current) == null ? void 0 : _b2.binValue() : (_c = combinedCardInfoRef.current) == null ? void 0 : _c.binValue();
-    }
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -303,7 +293,9 @@ const Card = w((props, ref) => {
       },
       browser: await getBrowserParams({
         fraudDetectionId: await (fraudDetection == null ? void 0 : fraudDetection.getFraudDetectionId({
-          bin: cardBin || currentBin.current || ""
+          bin: limitedToNumber(form.number).slice(0, 9),
+          // 快捷支付场景没有 bin，不需要传 hiddenIframeName
+          hiddenIframeName: isFastPayment ? "" : hiddenIframeName
         }))
       })
     };
@@ -311,6 +303,7 @@ const Card = w((props, ref) => {
   async function pay(search = false, timeout) {
     var _a2, _b2, _c, _d, _e;
     try {
+      core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
       let res = null;
       if (search) {
@@ -370,43 +363,62 @@ const Card = w((props, ref) => {
     setThreeDSInfo(void 0);
     checkThreeDS();
   };
-  const processAfterPayment = (res, search = false) => {
-    var _a2, _b2, _c;
-    const { status, orderStatus, errorMessage, errorCode, payInfo = {}, sessionId } = res;
+  const processAfterPayment = async (res, search = false) => {
+    var _a2;
+    const { errorMessage, errorCode, payInfo = {}, sessionId } = res;
     const { threeDSUrl } = payInfo;
     sessionId && (session.sessionId = sessionId);
-    !search && ((_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, getPaymentMethodContext()));
-    if (status === "PROCESSING") {
-      if (!orderStatus) {
+    if (!search) {
+      (_a2 = props.onSubmitResponse) == null ? void 0 : _a2.call(props, res, {
+        ...getPaymentMethodContext(),
+        orderId: res.orderId,
+        sessionId: session.sessionId
+      });
+    }
+    let end = true;
+    await processPaymentStatus(res, {
+      onProcessing: () => {
+        !search && startReFetchPayInfo();
+        end = false;
+      },
+      onAuthorized: () => {
+        var _a3;
         setSubmitButtonStatus("unSubmit");
-      } else if (orderStatus === "SUCCESS") {
+        (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+      },
+      onInThreeDS: () => {
+        if (threeDSUrl) {
+          processThreeDS(threeDSUrl, false);
+        } else {
+          end = false;
+        }
+      },
+      onInPreviousThreeDS: () => {
+        if (threeDSUrl) {
+          processThreeDS(threeDSUrl, true);
+        } else {
+          end = false;
+        }
+      },
+      onSuccess: () => {
         processOnSuccess(res);
-      } else if (orderStatus === "PROCESSING") {
-        !search && startReFetchPayInfo();
-        return { end: false };
-      } else if (orderStatus === "FAILURE") {
+      },
+      onExpired: () => {
+        var _a3;
+        setSubmitButtonStatus("unSubmit");
+        (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+      },
+      onFailure: () => {
         errorMessage && setErrorMsg(errorMessage);
         setSubmitButtonStatus("unSubmit");
         processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-      } else if (orderStatus === "AUTHORIZED") {
+      },
+      onDefault: () => {
+        core.payment.resetCurrPaymentMethod();
         setSubmitButtonStatus("unSubmit");
-        (_b2 = props.onAuthorized) == null ? void 0 : _b2.call(props, getPaymentMethodContext());
-      } else if (orderStatus === "IN_THREED") {
-        threeDSUrl && processThreeDS(threeDSUrl, false);
-      } else if (orderStatus === "IN_PREVIOUS_THREED") {
-        threeDSUrl && processThreeDS(threeDSUrl, true);
       }
-      return { end: true };
-    } else if (status === "SUCCESS") {
-      processOnSuccess(res);
-      return { end: true };
-    } else if (status === "EXPIRED") {
-      setSubmitButtonStatus("unSubmit");
-      (_c = props.onExpired) == null ? void 0 : _c.call(props, getPaymentMethodContext());
-      return { end: true };
-    }
-    setSubmitButtonStatus("unSubmit");
-    return { end: true };
+    });
+    return { end };
   };
   const processPaymentError = (error) => {
     const message = error.i18nKey ? i18n.get(error.i18nKey) : error.message;
@@ -414,16 +426,12 @@ const Card = w((props, ref) => {
     setSubmitButtonStatus("unSubmit");
     processOnError(new PayKKaError("API_ERROR", message, { code: error.code, cause: error }));
   };
-  const validateForm = () => {
+  const validateFormSilently = () => {
     var _a2;
-    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => {
-      setValidated(true);
-    }).catch(() => {
-      setValidated(false);
-    });
+    (_a2 = formRef.current) == null ? void 0 : _a2.validate(void 0, false).then(() => setValidated(true)).catch(() => setValidated(false));
   };
   y(() => {
-    validateForm();
+    validateFormSilently();
   }, [form]);
   const Button = () => {
     var _a2;
@@ -435,6 +443,7 @@ const Card = w((props, ref) => {
       {
         className: bem("button"),
         status: submitButtonStatus,
+        disabled,
         text,
         loadingText: i18n.get("common.payProcessing"),
         successText: i18n.get("common.paySuccess"),
@@ -451,7 +460,7 @@ const Card = w((props, ref) => {
     }
   );
   async function checkThreeDS(search = false, timeout = 2e4) {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2;
     if (!session)
       return { end: true };
     try {
@@ -467,42 +476,48 @@ const Card = w((props, ref) => {
           timeout
         }
       );
-      const { status, orderStatus, errorMessage, errorCode } = res;
-      if (status === "PROCESSING") {
-        if (orderStatus === "PROCESSING") {
+      const { errorMessage, errorCode } = res;
+      let end = true;
+      await processPaymentStatus(res, {
+        onProcessing: () => {
           startReFetchPayInfo();
-        } else if (orderStatus === "FAILURE") {
-          errorMessage && setErrorMsg(errorMessage);
-          setSubmitButtonStatus("unSubmit");
-          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
-        } else if (orderStatus === "AUTHORIZED") {
+        },
+        onAuthorized: () => {
+          var _a3;
           setSubmitButtonStatus("unSubmit");
-          (_c = props.onAuthorized) == null ? void 0 : _c.call(props, getPaymentMethodContext());
-        } else if (orderStatus === "IN_THREED") {
+          (_a3 = props.onAuthorized) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+        },
+        onInThreeDS: () => {
           setSubmitButtonStatus("loading");
           !search && startReFetchCardPay3DSInfo();
-          return { end: false };
-        } else if (orderStatus === "IN_PREVIOUS_THREED") {
+          end = false;
+        },
+        onInPreviousThreeDS: () => {
+          setSubmitButtonStatus("unSubmit");
           setErrorMsg(i18n.get("common.pay3DSIncomplete"));
+        },
+        onSuccess: () => {
+          processOnSuccess(res);
+          stopReFetchCardPay3DSInfo();
+        },
+        onExpired: () => {
+          var _a3;
+          setSubmitButtonStatus("unSubmit");
+          (_a3 = props.onExpired) == null ? void 0 : _a3.call(props, getPaymentMethodContext());
+          stopReFetchCardPay3DSInfo();
+        },
+        onFailure: () => {
+          errorMessage && setErrorMsg(errorMessage);
           setSubmitButtonStatus("unSubmit");
-        } else if (!orderStatus) {
+          processOnError(new PayKKaError("API_ERROR", errorMessage, { code: errorCode }));
+        },
+        onDefault: () => {
+          core.payment.resetCurrPaymentMethod();
           setSubmitButtonStatus("unSubmit");
+          stopReFetchCardPay3DSInfo();
         }
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "SUCCESS") {
-        processOnSuccess(res);
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      } else if (status === "EXPIRED") {
-        setSubmitButtonStatus("unSubmit");
-        (_d = props.onExpired) == null ? void 0 : _d.call(props, getPaymentMethodContext());
-        stopReFetchCardPay3DSInfo();
-        return { end: true };
-      }
-      setSubmitButtonStatus("unSubmit");
-      stopReFetchCardPay3DSInfo();
-      return { end: true };
+      });
+      return { end };
     } catch (error) {
       if (isTimeoutError(error)) {
         if (search) {
@@ -520,17 +535,15 @@ const Card = w((props, ref) => {
   }
   const isFastPayment = T(() => {
     var _a2;
-    if (!(session == null ? void 0 : session.checkout)) {
+    if (!(session == null ? void 0 : session.checkout))
       return;
-    }
     const isPurchase = (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE;
     const hasCardTokens = !!((_a2 = session == null ? void 0 : session.checkout.tokens) == null ? void 0 : _a2.length);
     return isPurchase && hasCardTokens;
   }, [session == null ? void 0 : session.checkout]);
   const isShowStoreCheckBox = T(() => {
-    if (!(session == null ? void 0 : session.checkout)) {
+    if (!(session == null ? void 0 : session.checkout))
       return;
-    }
     return (session == null ? void 0 : session.checkout.paymentType) === PaymentType.PURCHASE && (session == null ? void 0 : session.checkout.storePaymentMethod);
   }, [session == null ? void 0 : session.checkout]);
   const StoreCheckBox = () => {
@@ -541,6 +554,7 @@ const Card = w((props, ref) => {
       CheckBox,
       {
         label: i18n.get("card.storeInfo"),
+        disabled,
         checked: storePaymentMethod,
         onChange: onCheck
       }
@@ -555,7 +569,7 @@ const Card = w((props, ref) => {
       (_a3 = formRef.current) == null ? void 0 : _a3.resetValidation();
       setIsEditOtherCard(false);
     };
-    return isPurchase && hasCardTokens && /* @__PURE__ */ u("div", { className: bem("change-box"), onClick, children: [
+    return isPurchase && hasCardTokens && /* @__PURE__ */ u("div", { className: bem("change-box", { disabled }), onClick, children: [
       /* @__PURE__ */ u(IconSwitch, {}),
       /* @__PURE__ */ u("span", { style: { marginLeft: "2px" }, children: i18n.get("card.cardSelector.change") })
     ] });
@@ -568,9 +582,8 @@ const Card = w((props, ref) => {
   const onClickChangeCard = () => {
     var _a2;
     const tokens = ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) || [];
-    if (tokens.length > 1) {
+    if (tokens.length > 1)
       return;
-    }
     onEditOtherCard();
   };
   const onCardChange = (option) => {
@@ -579,7 +592,7 @@ const Card = w((props, ref) => {
   };
   const setFormRef = (dom) => {
     formRef.current = dom;
-    dom && validateForm();
+    dom && validateFormSilently();
   };
   const cardNumberFieldRef = A(null);
   const cardExpireDateFieldRef = A(null);
@@ -640,7 +653,7 @@ const Card = w((props, ref) => {
       (_d = fieldRef.current) == null ? void 0 : _d.resetValidation(data.status, error);
     }
     setTimeout(() => {
-      validateForm();
+      validateFormSilently();
     }, 100);
   };
   const onBrand = (data) => {
@@ -672,16 +685,20 @@ const Card = w((props, ref) => {
       {
         ref: emailFieldRef,
         value: form.email,
-        disabled: fieldStatus == null ? void 0 : fieldStatus.email.disabled
+        disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
       }
     ) }) });
   };
+  const CardHolderName = () => {
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: (fieldStatus == null ? void 0 : fieldStatus.holderName.disabled) || disabled }) }) });
+  };
   const Address = () => {
     return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(
       AddressField,
       {
         ref: addressFieldRef,
         value: form.address,
+        disabled,
         onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
     ) }) });
@@ -689,9 +706,20 @@ const Card = w((props, ref) => {
   const ErrorMessage = () => {
     return /* @__PURE__ */ u(b, { children: !!errorMsg && /* @__PURE__ */ u(Info, { content: errorMsg }) });
   };
-  const CardInfo = q(() => {
+  const CardCombineInfo = () => {
+    return /* @__PURE__ */ u("div", { className: bem("card-info"), children: /* @__PURE__ */ u(
+      CombinedCardInfo,
+      {
+        ref: combinedCardInfoRef,
+        supportedCardBrands,
+        showLabel: true,
+        security
+      }
+    ) });
+  };
+  const CardSplitInfo = () => {
     var _a2, _b2, _c, _d;
-    return splitCardInfo ? /* @__PURE__ */ u(b, { children: [
+    return /* @__PURE__ */ u(b, { children: [
       /* @__PURE__ */ u("div", { className: fieldClassNames, children: [
         /* @__PURE__ */ u("div", { className: bem("card-number-wrapper"), children: [
           /* @__PURE__ */ u(
@@ -700,6 +728,7 @@ const Card = w((props, ref) => {
               supportedCardBrands: (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.supportMethods) == null ? void 0 : _b2.filter(Boolean),
               security,
               ref: cardNumberFieldRef,
+              disabled,
               onBinValue: onBinValueChanged
             }
           ),
@@ -719,6 +748,7 @@ const Card = w((props, ref) => {
           {
             security,
             className: fieldClassNames,
+            disabled,
             ref: cardExpireDateFieldRef
           }
         ),
@@ -727,26 +757,19 @@ const Card = w((props, ref) => {
           {
             security,
             className: fieldClassNames,
+            disabled,
             ref: cardSecurityCodeFieldRef
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ u("div", { className: bem("card-info"), children: /* @__PURE__ */ u(
-      CombinedCardInfo,
-      {
-        ref: combinedCardInfoRef,
-        supportedCardBrands,
-        showLabel: true,
-        security
-      }
-    ) });
-  }, [splitCardInfo, security]);
-  const cardForm = () => {
+    ] });
+  };
+  const PaymentForm = () => {
     var _a2;
     return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
-      CardInfo(),
-      (fieldStatus == null ? void 0 : fieldStatus.holderName.show) && /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(CardHolderNameField, { disabled: fieldStatus == null ? void 0 : fieldStatus.holderName.disabled }) }),
+      splitCardInfo ? CardSplitInfo() : CardCombineInfo(),
+      CardHolderName(),
       Address(),
       ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.RECURRING && RecurringTip(),
       /* @__PURE__ */ u("div", { className: bem("footer-wrapper"), children: [
@@ -756,7 +779,7 @@ const Card = w((props, ref) => {
       ] })
     ] }) });
   };
-  const fastPaymentCardForm = () => {
+  const FastPaymentForm = () => {
     var _a2, _b2, _c, _d;
     return /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), children: [
       Email(),
@@ -766,6 +789,7 @@ const Card = w((props, ref) => {
           {
             value: (_c = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c.token,
             cardList: (_d = session == null ? void 0 : session.checkout) == null ? void 0 : _d.tokens,
+            disabled,
             onClickEdit: onEditOtherCard,
             onClickChange: onClickChangeCard,
             onCardChange,
@@ -778,6 +802,7 @@ const Card = w((props, ref) => {
           {
             className: bem("card-security-code", fieldClassNames),
             style: { flex: 1 },
+            disabled,
             security,
             ref: cardSecurityCodeFieldRef
           }
@@ -796,6 +821,7 @@ const Card = w((props, ref) => {
       {
         ref: SFPRef,
         i18n,
+        disabled,
         checkoutId: core.id,
         sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
         supportedCardBrands,
@@ -809,11 +835,12 @@ const Card = w((props, ref) => {
         onPaymentTimeout: ({ message }) => onTimeout(i18n.get(message)),
         onValidStatusChanged: onFieldValidStatusChanged,
         onValidated,
+        onHiddenIframeReady: (data) => onHiddenIframeReady(data),
         onEvent: (type, data) => {
           var _a2, _b2;
           return (_b2 = (_a2 = core.config).onEvent) == null ? void 0 : _b2.call(_a2, type, data);
         },
-        children: showFastPaymentForm ? fastPaymentCardForm() : cardForm()
+        children: showFastPaymentForm ? FastPaymentForm() : PaymentForm()
       }
     ),
     /* @__PURE__ */ u(

package/dist/es/components/CardExpireDateField/index.js

@@ -14,7 +14,7 @@ import { formatExpireDateOnInsert, formatExpireDateOnPaste } from "../../utils/e
 import { limitedToNumber } from "../../utils/format.js";
 import { isUndefined } from "../../utils/is.js";
 const CardExpireDateField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -120,6 +120,7 @@ const CardExpireDateField = w((props, ref) => {
           ref: inputRef,
           maxLength: 5,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardExpireDate.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.EXPIRE_DATE })

package/dist/es/components/CardNo/index.js

@@ -8,7 +8,7 @@ import { normalizedClass } from "../../utils/format.js";
 import "../../out/worldpay-jsc-origin.js";
 const { bem } = useBEM("card-no");
 const CardNo = (props) => {
-  const { value, className, style } = props;
+  const { value, className, style, disabled } = props;
   return /* @__PURE__ */ u(
     "div",
     {
@@ -18,7 +18,7 @@ const CardNo = (props) => {
         Array.from({ length: 4 }, (_, i) => i).map(() => {
           return /* @__PURE__ */ u("span", { className: bem("dot") });
         }),
-        /* @__PURE__ */ u("span", { className: bem("card-no"), children: value })
+        /* @__PURE__ */ u("span", { className: bem("card-no"), disabled, children: value })
       ]
     }
   );

package/dist/es/components/CardNumberField/index.js

@@ -15,7 +15,7 @@ import { getSupportedCardBrands, getSupportedCardBrandsLengths, finCardBrandInfo
 import { trimAll, limitedToNumber } from "../../utils/format.js";
 const CardNumberField = w(
   (props, ref) => {
-    const { supportedCardBrands = [], className, security, showLabel, onBinValue } = props;
+    const { supportedCardBrands = [], className, security, showLabel, onBinValue, disabled } = props;
     const inputRef = A(null);
     const formItemRef = A(null);
     F(ref, () => ({
@@ -132,6 +132,7 @@ const CardNumberField = w(
             ref: inputRef,
             maxLength: 23,
             value,
+            disabled,
             onInput,
             rightIcon: RightIcon(),
             placeholder: i18n.get("card.cardNumber.placeholder"),

package/dist/es/components/CardSecurityCodeField/index.js

@@ -14,7 +14,7 @@ import "../internal/Form/Form.js";
 import { Input } from "../internal/Input/Input.js";
 import "../internal/Input/type.js";
 const CardSecurityCodeField = w((props, ref) => {
-  const { className, style, security, showLabel } = props;
+  const { className, style, security, showLabel, disabled } = props;
   const inputRef = A(null);
   const formItemRef = A(null);
   F(ref, () => ({
@@ -75,6 +75,7 @@ const CardSecurityCodeField = w((props, ref) => {
           ref: inputRef,
           maxLength: 4,
           value,
+          disabled,
           onInput,
           placeholder: i18n.get("card.cardSecurityCode.placeholder"),
           children: security && /* @__PURE__ */ u("div", { style: "width:100%;height:100%", "data-sf": EFieldType.CVV })