@paykka/card-checkout-ui 0.5.15 → 0.6.0

package/dist/es/components/SecuredFieldsProvider/SecuredFieldsProvider.js

@@ -8,22 +8,32 @@ import { w, A, F, y, q, u } from "../../core.js";
 import { SessionMode } from "../../constant.js";
 import { cdnUrl, cdnOrigin, apiUrl } from "../../config.js";
 import { safeParse } from "../../utils/index.js";
-var FieldType = /* @__PURE__ */ ((FieldType2) => {
-  FieldType2["CARD_NUMBER"] = "CARD_NUMBER";
-  FieldType2["CVV"] = "CVV";
-  FieldType2["EXPIRE_DATE"] = "EXPIRE_DATE";
-  return FieldType2;
-})(FieldType || {});
+var EFieldType = /* @__PURE__ */ ((EFieldType2) => {
+  EFieldType2["CARD_NUMBER"] = "CARD_NUMBER";
+  EFieldType2["CVV"] = "CVV";
+  EFieldType2["EXPIRE_DATE"] = "EXPIRE_DATE";
+  return EFieldType2;
+})(EFieldType || {});
 var MessageAction = /* @__PURE__ */ ((MessageAction2) => {
   MessageAction2["INIT"] = "init";
+  MessageAction2["ACTIVATED"] = "Activated";
+  MessageAction2["HIDDEN_IFRAME_READY"] = "hiddenIframeReady";
   MessageAction2["FOCUS"] = "focus";
   MessageAction2["BIN_VALUE"] = "binValue";
+  MessageAction2["BRAND"] = "brand";
   MessageAction2["VALID_WITH_VALUE"] = "validWithValue";
   MessageAction2["PAYMENT"] = "payment";
   MessageAction2["AFTER_PAYMENT"] = "afterPayment";
   MessageAction2["PAYMENT_ERROR"] = "paymentError";
   MessageAction2["PAYMENT_TIMEOUT"] = "paymentTimeout";
   MessageAction2["VALID_STATUS_CHANGED"] = "validStatusChanged";
+  MessageAction2["VALIDATE"] = "validate";
+  MessageAction2["VALIDATED"] = "validated";
+  MessageAction2["SET_CONFIG"] = "setConfig";
+  MessageAction2["AUTHORIZED"] = "authorized";
+  MessageAction2["ENCRYPT_CARD"] = "encryptCard";
+  MessageAction2["CARD_ENCRYPTED"] = "cardEncrypted";
+  MessageAction2["CARD_ENCRYPTION_FAILED"] = "cardEncryptionFailed";
   return MessageAction2;
 })(MessageAction || {});
 const SECURED_FILED_ATTR = "data-sf";
@@ -94,7 +104,7 @@ class SecuredField {
   }
 }
 const SecuredFieldsProvider = w((props, ref) => {
-  const { sessionMode, i18n } = props;
+  const { sessionMode, i18n, targetElement } = props;
   const rootNodeRef = A(null);
   const hiddenIframe = A(null);
   const payment = (formData) => {
@@ -112,27 +122,45 @@ const SecuredFieldsProvider = w((props, ref) => {
         return;
       }
       window.removeEventListener("message", onReceiveMessage);
-      console.log(hiddenIframe.current);
       if (hiddenIframe.current) {
         document.body.removeChild(hiddenIframe.current);
       }
       init();
+    },
+    encryptCard: (encryptedInfo) => {
+      const data = {
+        action: MessageAction.ENCRYPT_CARD,
+        ...encryptedInfo
+      };
+      postMessageToIframe(data, hiddenIframe.current.contentWindow, cdnOrigin);
+    },
+    validate: () => {
+      Object.values(securedFieldMap.current).forEach((field) => {
+        const data = {
+          action: MessageAction.VALIDATE
+        };
+        postMessageToIframe(data, field.iframe.contentWindow, cdnOrigin);
+      });
+    },
+    setConfig: (config) => {
+      props.style = config.style;
     }
   }));
-  if (sessionMode !== SessionMode.EMBEDDED) {
+  if (!frames && sessionMode !== SessionMode.EMBEDDED) {
     return props.children;
   }
   let fieldNodes = [];
+  const securedFieldMap = A({});
   const securedFieldPlaceholderMap = {
-    [FieldType.CARD_NUMBER]: i18n.get("card.cardNumber.placeholder"),
-    [FieldType.CVV]: i18n.get("card.cardSecurityCode.placeholder"),
-    [FieldType.EXPIRE_DATE]: i18n.get("card.cardExpireDate.placeholder")
+    [EFieldType.CARD_NUMBER]: i18n.get("card.cardNumber.placeholder"),
+    [EFieldType.CVV]: i18n.get("card.cardSecurityCode.placeholder"),
+    [EFieldType.EXPIRE_DATE]: i18n.get("card.cardExpireDate.placeholder")
   };
   y(() => {
     init();
   }, []);
   const init = async () => {
-    fieldNodes = getFieldElements(rootNodeRef.current);
+    fieldNodes = getFieldElements(targetElement || rootNodeRef.current);
     if (!fieldNodes.length) {
       return;
     }
@@ -161,7 +189,7 @@ const SecuredFieldsProvider = w((props, ref) => {
   const initAllFieldIframe = () => {
     fieldNodes.forEach((fieldNode) => {
       const fieldType = fieldNode.getAttribute(SECURED_FILED_ATTR);
-      new SecuredField({
+      securedFieldMap.current[fieldType] = new SecuredField({
         fieldNode,
         hiddenIframe: hiddenIframe.current,
         hiddenIframeName: hiddenIframe.current.name,
@@ -170,9 +198,7 @@ const SecuredFieldsProvider = w((props, ref) => {
         iframeClassName: SECURED_IFRAME_CLASS_NAME,
         fieldType,
         placeholder: securedFieldPlaceholderMap[fieldType],
-        style: {
-          paddingLeft: "12px"
-        },
+        style: props.style,
         supportedCardBrands: props.supportedCardBrands,
         onFocus: props.onFocus,
         onBinValue: props.onBinValue,
@@ -184,6 +210,7 @@ const SecuredFieldsProvider = w((props, ref) => {
     });
   };
   const onReceiveMessage = q((event) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const { data, origin } = event;
     if (origin !== cdnOrigin) {
       return;
@@ -194,29 +221,47 @@ const SecuredFieldsProvider = w((props, ref) => {
     }
     switch (feedbackData.action) {
       case MessageAction.FOCUS:
-        props.onFocus(feedbackData);
+        (_a = props.onFocus) == null ? void 0 : _a.call(props, feedbackData);
         break;
       case MessageAction.BIN_VALUE:
-        props.onBinValue(feedbackData);
+        (_b = props.onBinValue) == null ? void 0 : _b.call(props, feedbackData);
+        break;
+      case MessageAction.BRAND:
+        (_c = props.onBrand) == null ? void 0 : _c.call(props, feedbackData);
         break;
       case MessageAction.AFTER_PAYMENT:
-        props.onAfterPayment(feedbackData);
+        (_d = props.onAfterPayment) == null ? void 0 : _d.call(props, feedbackData);
         break;
       case MessageAction.PAYMENT_ERROR:
-        props.onPaymentError(feedbackData);
+        (_e = props.onPaymentError) == null ? void 0 : _e.call(props, feedbackData);
         break;
       case MessageAction.PAYMENT_TIMEOUT:
-        props.onPaymentTimeout(feedbackData);
+        (_f = props.onPaymentTimeout) == null ? void 0 : _f.call(props, feedbackData);
         break;
       case MessageAction.VALID_STATUS_CHANGED:
-        props.onValidStatusChanged(feedbackData);
+        (_g = props.onValidStatusChanged) == null ? void 0 : _g.call(props, feedbackData);
+        break;
+      case MessageAction.AUTHORIZED:
+        (_h = props.onAuthorized) == null ? void 0 : _h.call(props, feedbackData);
+        break;
+      case MessageAction.ACTIVATED:
+        (_i = props.onActivated) == null ? void 0 : _i.call(props, feedbackData);
+        break;
+      case MessageAction.CARD_ENCRYPTED:
+        (_j = props.onCardEncrypted) == null ? void 0 : _j.call(props, feedbackData);
+        break;
+      case MessageAction.CARD_ENCRYPTION_FAILED:
+        (_k = props.onCardEncryptionFailed) == null ? void 0 : _k.call(props, feedbackData);
+        break;
+      case MessageAction.VALIDATED:
+        (_l = props.onValidated) == null ? void 0 : _l.call(props, feedbackData);
         break;
     }
   }, []);
-  return /* @__PURE__ */ u("div", { ref: rootNodeRef, children: props.children });
+  return /* @__PURE__ */ u("div", { ref: rootNodeRef, children: !targetElement && props.children });
 });
 export {
-  FieldType,
+  EFieldType,
   MessageAction,
   SecuredFieldsProvider,
   postMessageToIframe

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

@@ -1,14 +1,14 @@
 import { A, h, y, u, b } from "../../core.js";
 import { clamp, isExpired, safeParse } from "../../utils/index.js";
-import { FieldType, MessageAction, postMessageToIframe } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
+import { EFieldType, MessageAction, postMessageToIframe } from "../SecuredFieldsProvider/SecuredFieldsProvider.js";
 import { getSupportedCardBrands, getSupportedCardBrandsLengths, findCardBrand } from "../../utils/card-brand/index.js";
 import { limitedToNumber, trimAll } from "../../utils/format.js";
 import { isUndefined, isNil } from "../../utils/is.js";
-import "../../utils/card-brand/brands.js";
-import "../../utils/system-info/get-browser-info.js";
 import { cdnOrigin, setApiUrl, setCDNUrl } from "../../config.js";
+import { generateClassNameMap, style2String, createPlaceholderStyle, loadStyle } from "../../utils/style.js";
 import { isTimeoutError } from "../../api/http.js";
 import { cardPay } from "../../api/modules/card/index.js";
+import { encryptCard } from "../../api/modules/encrypted-card/index.js";
 const useSecuredInput = () => {
   let fieldType;
   let supportedCardBrands;
@@ -16,6 +16,7 @@ const useSecuredInput = () => {
   const [cardBin, setCardBin] = h("");
   let brands;
   let brandLengths;
+  const [brand, setBrand] = h(void 0);
   const initSecuredInput = (options) => {
     fieldType = options.fieldType;
     supportedCardBrands = options.supportedCardBrands;
@@ -29,25 +30,28 @@ const useSecuredInput = () => {
       }
     };
     switch (fieldType) {
-      case FieldType.CVV: {
+      case EFieldType.CVV: {
         config = {
           maxLength: 4,
+          inputMode: "numeric",
           onInput: onInputCVV,
           validator: cvvValidator
         };
         break;
       }
-      case FieldType.CARD_NUMBER: {
+      case EFieldType.CARD_NUMBER: {
         config = {
           maxLength: 23,
+          inputMode: "numeric",
           onInput: onInputCardNumber,
           validator: cardNumberValidator
         };
         break;
       }
-      case FieldType.EXPIRE_DATE: {
+      case EFieldType.EXPIRE_DATE: {
         config = {
           maxLength: 5,
+          inputMode: "numeric",
           onInput: onInputExpireDate,
           validator: expireDateValidator
         };
@@ -62,6 +66,7 @@ const useSecuredInput = () => {
     value.current = currentTarget.value = val;
   };
   const onInputCardNumber = (event) => {
+    var _a;
     const { inputType } = event;
     const currentTarget = event.currentTarget;
     const selectionStart = currentTarget.selectionStart;
@@ -73,7 +78,9 @@ const useSecuredInput = () => {
     }
     value.current = currentTarget.value = val;
     currentTarget.setSelectionRange(pos, pos);
-    setCardBin(trimAll(currentTarget.value).substring(0, 6));
+    const newBin = trimAll(currentTarget.value).substring(0, 6);
+    setCardBin(newBin.length < 6 ? "" : newBin);
+    setBrand((_a = getCurrCardBrand(trimAll(currentTarget.value))) == null ? void 0 : _a.code);
   };
   const onInputExpireDate = (event) => {
     const { inputType } = event;
@@ -145,7 +152,7 @@ const useSecuredInput = () => {
     if (!brandLengths.includes(realValue.length)) {
       throw new Error("card.cardNumber.incomplete");
     }
-    const cardBrand = findCardBrand(realValue, brands);
+    const cardBrand = getCurrCardBrand(realValue);
     if (!cardBrand) {
       throw new Error("card.cardNumber.invalid");
     }
@@ -159,18 +166,35 @@ const useSecuredInput = () => {
       throw new Error("card.cardExpireDate.expired");
     }
   };
+  const getCurrCardBrand = (realValue) => {
+    return findCardBrand(realValue, brands);
+  };
+  const validate = () => {
+    if (fieldType === EFieldType.CARD_NUMBER) {
+      return cardNumberValidator();
+    } else if (fieldType === EFieldType.CVV) {
+      return cvvValidator();
+    } else if (fieldType === EFieldType.EXPIRE_DATE) {
+      return expireDateValidator();
+    }
+  };
   return {
     value,
     cardBin,
     initSecuredInput,
-    getConfigByFieldType
+    getConfigByFieldType,
+    getCurrCardBrand,
+    brand,
+    validate
   };
 };
+const inputClassNameMap = generateClassNameMap("input");
 const FieldIframe = (props) => {
   const hiddenIframe = window.parent.frames[props.hiddenIframeName];
   const inputRef = A(null);
-  const { initSecuredInput, getConfigByFieldType, cardBin, value } = useSecuredInput();
+  const { initSecuredInput, getConfigByFieldType, getCurrCardBrand, cardBin, value, brand } = useSecuredInput();
   const [hasInit, setHasInit] = h(false);
+  const inputId = "securedInput";
   const initInput = () => {
     initSecuredInput({
       fieldType: props.fieldType,
@@ -179,47 +203,128 @@ const FieldIframe = (props) => {
         postMessageToIframe(message, window.parent);
       }
     });
+    processInputStyleConfig(props.style);
+  };
+  const processInputStyleConfig = (style = {}) => {
+    const { base, hover, focus, valid, invalid, placeholder } = style;
+    const baseStyleStr = `input { ${style2String(base)} }`;
+    const hoverStyleStr = `input.${inputClassNameMap.hover} { ${style2String(hover)} }`;
+    const focusStyleStr = `input.${inputClassNameMap.focus} { ${style2String(focus)} }`;
+    const validStyleStr = `input.${inputClassNameMap.valid} { ${style2String(valid)} }`;
+    const invalidStyleStr = `input.${inputClassNameMap.invalid} { ${style2String(invalid)} }`;
+    const placeholderStyleStr = createPlaceholderStyle("input", placeholder == null ? void 0 : placeholder.base);
+    const placeholderFocusStyleStr = createPlaceholderStyle(
+      `input.${inputClassNameMap.focus}`,
+      placeholder == null ? void 0 : placeholder.focus
+    );
+    const styleStr = `
+      ${baseStyleStr}
+      ${hoverStyleStr}
+      ${focusStyleStr}
+      ${validStyleStr}
+      ${invalidStyleStr}
+      ${placeholderStyleStr}
+      ${placeholderFocusStyleStr}
+    `;
+    const styleId = "securedInputStyle";
+    if (!document.querySelector(`style#${styleId}`)) {
+      loadStyle(styleStr, { id: styleId });
+    }
   };
   y(() => {
+    initInput();
     const inputConfig = getConfigByFieldType();
     const inputEl = inputRef.current;
     inputEl.oninput = inputConfig.onInput;
     inputEl.maxLength = inputConfig.maxLength;
-    inputEl.onfocus = () => sendFocusMessage(true);
+    inputEl.inputMode = inputConfig.inputMode;
+    inputEl.onfocus = () => {
+      var _a;
+      (_a = inputEl == null ? void 0 : inputEl.classList) == null ? void 0 : _a.add(inputClassNameMap.focus);
+      sendFocusMessage(true);
+    };
     inputEl.onblur = () => {
-      sendFocusMessage(false);
+      var _a;
       try {
+        (_a = inputEl == null ? void 0 : inputEl.classList) == null ? void 0 : _a.remove(inputClassNameMap.focus);
         if (isNil(value.current) || value.current === "") {
-          sendValidStatusChanged("unValidate");
+          processValidStatusChanged("unValidate");
+          sendFocusMessage(false);
           return;
         }
         inputConfig.validator();
-        sendValidStatusChanged("success");
+        processValidStatusChanged("success");
       } catch (error) {
-        sendValidStatusChanged("error", error);
+        processValidStatusChanged("error", error);
       }
+      sendFocusMessage(false);
+    };
+    inputEl.onmouseenter = (e) => {
+      var _a;
+      const inputEl2 = e.target;
+      (_a = inputEl2 == null ? void 0 : inputEl2.classList) == null ? void 0 : _a.add(inputClassNameMap.hover);
+    };
+    inputEl.onmouseleave = (e) => {
+      var _a;
+      const inputEl2 = e.target;
+      (_a = inputEl2 == null ? void 0 : inputEl2.classList) == null ? void 0 : _a.remove(inputClassNameMap.hover);
     };
     setHasInit(true);
+    sendActivatedMessage();
+    window.addEventListener("message", onReceiveMessage);
   }, []);
-  initInput();
+  const onReceiveMessage = (event) => {
+    const { data } = event;
+    const parsedData = safeParse(data);
+    if (!Reflect.has(parsedData, "action")) {
+      return;
+    }
+    if (parsedData.action === MessageAction.VALIDATE) {
+      try {
+        const inputConfig = getConfigByFieldType();
+        inputConfig.validator();
+        processValidStatusChanged("success");
+        sendValidateMessage("success");
+      } catch (error) {
+        processValidStatusChanged("error", error);
+        sendValidateMessage("error");
+      }
+    }
+  };
   y(() => {
     if (!hasInit) {
       return;
     }
     sendBinValueMessage(cardBin);
   }, [cardBin]);
+  y(() => {
+    if (!hasInit) {
+      return;
+    }
+    sendBrandMessage(brand);
+  }, [brand]);
   y(() => {
     if (!hasInit) {
       return;
     }
     if (!value) {
-      sendValidStatusChanged("unValidate");
+      processValidStatusChanged("unValidate");
     }
   }, [value]);
   const sendBinValueMessage = (binValue) => {
+    var _a;
     const data = {
       action: MessageAction.BIN_VALUE,
       binValue,
+      fieldType: props.fieldType,
+      brand: (_a = getCurrCardBrand(binValue)) == null ? void 0 : _a.code
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendBrandMessage = (brand2) => {
+    const data = {
+      action: MessageAction.BRAND,
+      brand: brand2,
       fieldType: props.fieldType
     };
     postMessageToIframe(data, window.parent);
@@ -232,6 +337,19 @@ const FieldIframe = (props) => {
     };
     postMessageToIframe(data, window.parent);
   };
+  const processValidStatusChanged = (status, err) => {
+    const inputEl = inputRef.current;
+    if (status === "unValidate") {
+      inputEl.classList.remove(inputClassNameMap.valid, inputClassNameMap.invalid);
+    } else if (status === "success") {
+      inputEl.classList.add(inputClassNameMap.valid);
+      inputEl.classList.remove(inputClassNameMap.invalid);
+    } else {
+      inputEl.classList.add(inputClassNameMap.invalid);
+      inputEl.classList.remove(inputClassNameMap.valid);
+    }
+    sendValidStatusChanged(status, err);
+  };
   const sendValidStatusChanged = (status, err) => {
     const validData = {
       action: MessageAction.VALID_STATUS_CHANGED,
@@ -243,6 +361,9 @@ const FieldIframe = (props) => {
     if (status !== "success") {
       return;
     }
+    sendValidWithValueMessage();
+  };
+  const sendValidWithValueMessage = () => {
     const validWithValueData = {
       action: MessageAction.VALID_WITH_VALUE,
       value: value.current,
@@ -250,12 +371,27 @@ const FieldIframe = (props) => {
     };
     postMessageToIframe(validWithValueData, hiddenIframe, cdnOrigin);
   };
+  const sendActivatedMessage = () => {
+    const data = {
+      action: MessageAction.ACTIVATED,
+      fieldType: props.fieldType
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendValidateMessage = (status) => {
+    const data = {
+      action: MessageAction.VALIDATED,
+      fieldType: props.fieldType,
+      status
+    };
+    postMessageToIframe(data, window.parent);
+  };
   return /* @__PURE__ */ u(
     "input",
     {
+      id: inputId,
       ref: inputRef,
       placeholder: props.placeholder,
-      style: props.style,
       autocomplete: "off",
       disabled: !hasInit
     }
@@ -268,7 +404,7 @@ const HiddenIframe = () => {
     cardNo: "",
     cvv: ""
   };
-  const onReceiveMessage = (event) => {
+  const onReceiveMessage = async (event) => {
     const { data } = event;
     const parsedData = safeParse(data);
     if (!Reflect.has(parsedData, "action")) {
@@ -277,15 +413,15 @@ const HiddenIframe = () => {
     if (parsedData.action === MessageAction.VALID_WITH_VALUE) {
       const feedbackData = parsedData;
       switch (feedbackData.fieldType) {
-        case FieldType.CVV: {
+        case EFieldType.CVV: {
           formData.cvv = feedbackData.value;
           break;
         }
-        case FieldType.CARD_NUMBER: {
+        case EFieldType.CARD_NUMBER: {
           formData.cardNo = trimAll(feedbackData.value);
           break;
         }
-        case FieldType.EXPIRE_DATE: {
+        case EFieldType.EXPIRE_DATE: {
           const [expMonth, expYear] = feedbackData.value.split("/");
           formData.expMonth = expMonth;
           formData.expYear = `20${expYear}`;
@@ -295,6 +431,15 @@ const HiddenIframe = () => {
     } else if (parsedData.action === MessageAction.PAYMENT) {
       const feedbackData = parsedData;
       pay(feedbackData.formData, feedbackData.locale);
+    } else if (parsedData.action === MessageAction.ENCRYPT_CARD) {
+      const feedbackData = parsedData;
+      try {
+        const res = await encryptCard({ ...feedbackData, ...formData });
+        sendCardEncryptedMessage(res);
+      } catch (error) {
+        console.log("error", error);
+        sendCardEncryptionFailedMessage(error);
+      }
     }
   };
   window.addEventListener("message", onReceiveMessage);
@@ -339,6 +484,29 @@ const HiddenIframe = () => {
     };
     postMessageToIframe(data, window.parent);
   };
+  const sendHiddenIframeReadyMessage = () => {
+    const data = {
+      action: MessageAction.HIDDEN_IFRAME_READY
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendCardEncryptedMessage = (encryptedInfo) => {
+    const data = {
+      action: MessageAction.CARD_ENCRYPTED,
+      encryptedInfo
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  const sendCardEncryptionFailedMessage = (error) => {
+    const data = {
+      action: MessageAction.CARD_ENCRYPTION_FAILED,
+      error
+    };
+    postMessageToIframe(data, window.parent);
+  };
+  y(() => {
+    sendHiddenIframeReadyMessage();
+  }, []);
   return /* @__PURE__ */ u(b, {});
 };
 const SecuredIframe = () => {

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

@@ -17,6 +17,7 @@ import { useRetry } from "../../hooks/useRetry.js";
 import { AddressField } from "../AddressField/index.js";
 import { EmailField, createEmailCore } from "../EmailField/EmailField.js";
 import { SubmitButton } from "../SubmitButton/index.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 import { Form } from "../internal/Form/Form.js";
@@ -27,10 +28,9 @@ const { bem } = useBEM("sepa");
 const fieldClassNames = bem("field");
 const Sepa = w((props, ref) => {
   var _a, _b, _c, _d, _e, _f;
-  const { sessionId, clientKey } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
-  const { i18n, session, sessionReady } = usePayState(props);
+  const { i18n, session, sessionReady } = usePayState();
   const addressFieldRef = A(null);
   const emailFieldRef = A(null);
   const formRef = A(null);
@@ -160,8 +160,8 @@ const Sepa = w((props, ref) => {
   });
   const getPaymentParams = async () => {
     return {
-      sessionId,
-      clientKey,
+      sessionId: session.sessionId,
+      clientKey: session.clientKey,
       payment: {
         holderName: form.holderName,
         iban: trimAll(form.iban)
@@ -182,7 +182,10 @@ const Sepa = w((props, ref) => {
     try {
       const paymentParams = await getPaymentParams();
       const options = { locale: i18n.locale, timeout };
-      const res = search ? await getSepaPayInfo({ sessionId, clientKey }, options) : await sepaPay(paymentParams, options);
+      const res = search ? await getSepaPayInfo(
+        { sessionId: session.sessionId, clientKey: session.clientKey },
+        options
+      ) : await sepaPay(paymentParams, options);
       return processAfterPayment(res, search);
     } catch (error) {
       if (isTimeoutError(error)) {
@@ -250,7 +253,14 @@ const Sepa = w((props, ref) => {
         session
       },
       children: sessionReady && isCheckoutEnabled && i18n.ready.value && /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, bem()), style: formStyle, children: [
-        /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(EmailField, { ref: emailFieldRef, value: form.email, disabled: !!disabledEmail.current }) }),
+        /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+          EmailField,
+          {
+            ref: emailFieldRef,
+            value: form.email,
+            disabled: !!disabledEmail.current
+          }
+        ) }),
         /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u("div", { className: bem("iban-wrapper"), children: /* @__PURE__ */ u(IBANField, {}) }) }),
         /* @__PURE__ */ u("div", { className: bem("holder-name"), children: /* @__PURE__ */ u(AccountNameField, {}) }),
         requiredBill && /* @__PURE__ */ u("div", { className: bem("address"), children: /* @__PURE__ */ u(

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

@@ -7,14 +7,15 @@ import "../../utils/system-info/get-browser-info.js";
 import { formatAmount } from "../../utils/format.js";
 import { getWechatPayInfo, wechatPay } from "../../api/modules/wechat-pay/index.js";
 import { CoreContext } from "../../core/context.js";
-import { createAddressCore } from "../../core/Address.js";
-import { useBEM } from "../../hooks/useBEM.js";
 import "../../i18n/util.js";
 import "../../i18n/locales/index.js";
+import { createAddressCore } from "../../core/Address.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 { EmailField, createEmailCore } from "../EmailField/EmailField.js";
+import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";
 import { Form } from "../internal/Form/Form.js";
@@ -23,7 +24,6 @@ import { RecurringTip } from "../RecurringTip/index.js";
 import { SubmitButton } from "../SubmitButton/index.js";
 const { bem } = useBEM("wechat-pay");
 const WechatPay = w((props, ref) => {
-  const { sessionId, clientKey } = props;
   let addressState = createAddressCore();
   let emailState = createEmailCore();
   const emailFieldRef = A(null);
@@ -57,7 +57,7 @@ const WechatPay = w((props, ref) => {
     submitButtonStatus,
     errorMsg,
     sessionReady
-  } = usePayState(props);
+  } = usePayState();
   const formRef = A(null);
   const [form, setForm] = h({
     email: "",
@@ -119,14 +119,14 @@ const WechatPay = w((props, ref) => {
     try {
       const res = search ? await getWechatPayInfo(
         {
-          sessionId,
-          clientKey
+          sessionId: session.sessionId,
+          clientKey: session.clientKey
         },
         { locale: i18n.locale, timeout }
       ) : await wechatPay(
         {
-          sessionId,
-          clientKey,
+          sessionId: session.sessionId,
+          clientKey: session.clientKey,
           bill: requiredBill ? {
             email: form.email,
             ...form.address,