@paykka/card-checkout-ui 0.18.0 → 0.21.0

package/dist/es/components/internal/icons/IconAlipay.js

@@ -0,0 +1,43 @@
+import { u } from "../../../core.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
+import { isUndefined } from "../../../utils/is.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+import "../../../core/context.js";
+import "../../../out/fraud-detection.js";
+import "../../../core/logger.js";
+const IconAlipay = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: computedSize,
+      height: computedSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: [
+        /* @__PURE__ */ u(
+          "path",
+          {
+            d: "M20.9984 18.0073V18.1189C20.9984 18.8826 20.695 19.615 20.155 20.155C19.615 20.695 18.8826 20.9984 18.1189 20.9984H5.88139C5.50326 20.9984 5.12883 20.9239 4.77948 20.7792C4.43013 20.6345 4.1127 20.4224 3.84532 20.155C3.57794 19.8876 3.36584 19.5702 3.22114 19.2208C3.07643 18.8715 3.00195 18.4971 3.00195 18.1189L3.00195 5.88139C3.00195 5.50326 3.07643 5.12883 3.22113 4.77948C3.36583 4.43013 3.57793 4.1127 3.84531 3.84532C4.11269 3.57794 4.43011 3.36584 4.77946 3.22114C5.12881 3.07643 5.50324 3.00195 5.88137 3.00195H18.1189C18.8826 3.00195 19.615 3.30532 20.155 3.84532C20.695 4.38531 20.9984 5.1177 20.9984 5.88137V18.0073Z",
+            fill: "#009FE9"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            d: "M17.8525 14.3973C17.1326 14.1454 16.1716 13.7855 15.0954 13.3931C15.7868 12.1613 16.319 10.8466 16.6791 9.48071H13.0798V8.40096H17.399V7.63789L13.0799 7.6811V5.52148H11.3018C10.9814 5.52148 10.9203 5.88141 10.9203 5.88141V7.68106H6.60113V8.40092H10.9203V9.48069H7.32101V10.2006H14.5196C14.2277 11.1053 13.8454 11.9783 13.3786 12.8064C11.1218 12.0542 8.69954 11.4423 7.15184 11.8382C6.39686 11.9978 5.7094 12.3861 5.18304 12.9504C3.50577 15.0056 4.72231 18.119 8.26402 18.119C10.3732 18.119 12.414 16.9348 13.9905 14.9948C16.3516 16.1538 20.9983 18.0938 20.9983 18.0938V15.3295C20.9983 15.3295 20.4296 15.2576 17.8525 14.3973ZM7.94366 16.9456C5.15062 16.9456 4.34438 14.7537 5.72291 13.5335C6.17244 13.1231 6.72465 12.842 7.32099 12.7201C8.96587 12.5401 10.6575 13.3464 12.4824 14.2426C11.165 15.9054 9.55254 16.9456 7.94368 16.9456H7.94366Z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  IconAlipay
+};

package/dist/es/components/internal/icons/IconAlipayHK.js

@@ -0,0 +1,66 @@
+import { u } from "../../../core.js";
+import { COMMON_CLASS_NAME } from "../../../constant.js";
+import { isUndefined } from "../../../utils/is.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+import "../../../core/context.js";
+import "../../../out/fraud-detection.js";
+import "../../../core/logger.js";
+const IconAlipayHK = ({ size, style, className }) => {
+  const computedSize = !isUndefined(size) ? `${size}px` : "1em";
+  return /* @__PURE__ */ u(
+    "svg",
+    {
+      width: computedSize,
+      height: computedSize,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: normalizedClass(COMMON_CLASS_NAME, className),
+      children: [
+        /* @__PURE__ */ u(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16.7106 3C19.3121 3 20.9996 4.68746 20.9996 7.28897V16.7106C20.9996 19.3121 19.3121 20.9996 16.7106 20.9996H7.28897C4.68746 20.9996 3 19.3121 3 16.7106V7.28897C3 4.68746 4.68746 3 7.28897 3H16.7106Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M16.7106 3C19.3121 3 20.9996 4.68746 20.9996 7.28897L21 15.0149C20.8311 14.9718 19.7477 14.7303 17.5907 14.0064C16.9167 13.7893 16.0365 13.4596 15.0725 13.1024C15.6453 12.1021 16.1148 10.9386 16.4284 9.68038H13.1678V8.51817H17.1387V7.8725H13.1678V5.93548H11.5536C11.282 5.93548 11.265 6.17409 11.2633 6.19303L11.2631 7.8725H7.2599V8.51817H11.2954V9.68038H7.97014V10.3261H14.3946C14.1588 11.1132 13.8458 11.8694 13.4584 12.5536C11.3813 11.8888 9.15142 11.3265 7.74416 11.682C6.84335 11.8888 6.27611 12.2767 5.93627 12.6828C4.35924 14.5649 5.47415 17.3962 8.77723 17.3962C10.7162 17.3962 12.594 16.3296 14.0395 14.5552C16.0448 15.5126 20.2966 17.2587 20.941 17.5277C20.621 19.6598 19.0287 20.9996 16.7106 20.9996H7.28897C4.68746 20.9996 3 19.3121 3 16.7106V11.5714L11.5472 3H16.7106Z",
+            fill: "#00A0E9"
+          }
+        ),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.45332 16.3347C5.90095 16.3347 5.13721 14.3372 6.41945 13.2594C6.84093 12.8828 7.60467 12.7083 8.00135 12.6767C9.54338 12.5143 10.9534 13.0961 12.6179 13.9068C11.4625 15.3844 9.95462 16.3347 8.45332 16.3347Z",
+            fill: "#00A0E9"
+          }
+        ),
+        /* @__PURE__ */ u("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.6312 3L3 11.6312L3 7.30065C3 4.69206 4.68746 3 7.28897 3L11.6312 3Z", fill: "#F8F8F8" }),
+        /* @__PURE__ */ u(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M6.54827 6.84334L6.35164 7.03998L5.63055 6.3189L4.76536 7.1841L5.48644 7.90518L5.2898 8.10181L3.70605 6.51807L3.90269 6.32143L4.58755 7.00629L5.45275 6.1411L4.76789 5.45623L4.96453 5.2596L6.54827 6.84334ZM6.95135 6.44026C6.95135 6.44026 6.94152 6.4501 6.92186 6.46976C6.90219 6.48942 6.87925 6.51236 6.85303 6.53858C6.82682 6.5648 6.80387 6.58774 6.78421 6.6074C6.76455 6.62707 6.75472 6.6369 6.75472 6.6369L5.17097 5.05315L5.3676 4.85652L6.14027 5.62918L6.1512 5.61826L6.0744 4.14972L6.32238 3.90174L6.3759 5.25087L7.96403 5.42759L7.71277 5.67885L6.37983 5.52791L6.39819 5.8871L6.95135 6.44026Z",
+            fill: "#00A0E9"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  IconAlipayHK
+};

package/dist/es/components/wallets/Alipay/Alipay.js

@@ -0,0 +1,148 @@
+import { w, F, u, b } from "../../../core.js";
+import { useBEM } from "../../../hooks/useBEM.js";
+import { CoreContext } from "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+import { PaymentMethod, PaymentCategory, COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, PAY_FORM_FOOTER_CLASS_NAME } from "../../../constant.js";
+import { getTimeDiff } from "../../../utils/date.js";
+import "../../../out/fraud-detection.js";
+import "../../../core/logger.js";
+import { usePayState } from "../../../hooks/usePayState.js";
+import { SCAN_CODE_RETRY_POLL_TIERS } from "../../../hooks/useRetry.js";
+import { useBaseWallet } from "../../../hooks/useBaseWallet.js";
+import { GuideCard } from "../../GuideCard/index.js";
+import { Info } from "../../internal/Info/Info.js";
+import "./ali-pay.js";
+import { PaymentButton } from "../../PaymentButton/index.js";
+import "../../internal/Modal/Modal.js";
+import { QRCodeContent } from "../../business/QRCodeContent/QRCodeContent.js";
+import "../../internal/Form/type.js";
+import "../../internal/Form/context.js";
+import "../../internal/Form/FormItem.js";
+import "../../internal/Form/Form.js";
+import "../../internal/Input/Input.js";
+import "../../internal/Input/type.js";
+import "../../internal/Select/Select.js";
+import "../../business/PhoneField/config.js";
+import "../../business/PhoneField/phone-field.js";
+import "../../business/Tooltip/tooltip.js";
+import "../../business/BlikCodeField/blik-code-field.js";
+import { Button } from "../../internal/Button/Button2.js";
+import "../../business/PaymentConfirmModal/payment-confirm-modal.js";
+import "../../internal/LoadingCheck/loading-check.js";
+const { bem } = useBEM("ali-pay");
+const CURR_PAYMENT_METHOD = PaymentMethod.ALIPAY;
+const Alipay = w((props, ref) => {
+  const {
+    session,
+    core,
+    showGuideCard = true,
+    hidePaymentButton = false
+  } = props;
+  const { i18n, disabled } = usePayState(session, props.core);
+  const {
+    isEnabled,
+    paymentButtonStatus,
+    setPaymentButtonStatus,
+    errorMessage,
+    setErrorMessage,
+    payment,
+    startRetry,
+    stopRetry,
+    showQRCodeModal,
+    qrCodeInfo,
+    processCloseQRCodeModal,
+    paymentTimeout,
+    getPaymentMethodContext
+  } = useBaseWallet(CURR_PAYMENT_METHOD, props, {
+    retryTimeout: 2 * 60 * 1e3,
+    supportQRCodeModal: true,
+    getRetryOptions: (paymentInfo) => {
+      var _a;
+      const expiredAt = (_a = paymentInfo.payInfo) == null ? void 0 : _a.paymentExpiredAt;
+      if (!expiredAt)
+        return void 0;
+      const timeout = getTimeDiff(expiredAt);
+      return Number.isNaN(timeout) ? void 0 : { timeout: Math.max(timeout, 0), pollTiers: SCAN_CODE_RETRY_POLL_TIERS };
+    },
+    timeoutMessage: i18n.get("common.paymentTimeout"),
+    expiredMessage: i18n.get("common.paymentTimeout"),
+    getFormData: () => ({})
+  });
+  F(ref, () => ({
+    stopRetry: () => stopRetry(),
+    startRetry: (timeout) => startRetry(timeout),
+    updateAddress: () => {
+    },
+    updateEmail: () => {
+    },
+    payment: () => {
+      hidePaymentButton && onSubmit();
+    }
+  }));
+  const onSubmit = async () => {
+    var _a;
+    setErrorMessage("");
+    const submitResult = await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, void 0, getPaymentMethodContext()));
+    if (submitResult === false)
+      return;
+    setPaymentButtonStatus("loading");
+    await payment();
+  };
+  const PaymentButtonView = () => {
+    return /* @__PURE__ */ u(
+      PaymentButton,
+      {
+        className: bem("button"),
+        status: paymentButtonStatus,
+        disabled,
+        verified: true,
+        onClick: onSubmit,
+        children: paymentTimeout ? i18n.get("common.repay") : void 0
+      }
+    );
+  };
+  const ErrorMessage = () => {
+    return /* @__PURE__ */ u(b, { children: !!errorMessage && /* @__PURE__ */ u(Info, { content: errorMessage }) });
+  };
+  const QRCode = () => {
+    var _a;
+    if (!showQRCodeModal || !qrCodeInfo)
+      return null;
+    return /* @__PURE__ */ u("div", { className: bem("qr-code"), children: [
+      /* @__PURE__ */ u(
+        QRCodeContent,
+        {
+          title: i18n.get("qrCode.scanBy", { method: i18n.get("dropIn.aliPay.label") }),
+          qrCode: qrCodeInfo.qrCode,
+          mode: "iframe",
+          borderColor: "#009fe9",
+          expiredTime: qrCodeInfo.expiredTime,
+          amount: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount
+        }
+      ),
+      /* @__PURE__ */ u(Button, { ghost: true, className: bem("cancel-button"), onClick: processCloseQRCodeModal, children: i18n.get("common.cancel") })
+    ] });
+  };
+  return /* @__PURE__ */ u(
+    CoreContext.Provider,
+    {
+      value: {
+        i18n,
+        session,
+        core
+      },
+      children: isEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
+        showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.ALIPAY }),
+        /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, bem()), children: /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
+          ErrorMessage(),
+          showQRCodeModal ? QRCode() : !hidePaymentButton && PaymentButtonView()
+        ] }) })
+      ] })
+    }
+  );
+});
+export {
+  Alipay
+};

package/dist/es/components/wallets/Alipay/index.js

@@ -0,0 +1 @@
+import "./Alipay.js";

package/dist/es/components/wallets/Alipay/type.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/AlipayHK/AlipayHK.js

@@ -0,0 +1,148 @@
+import { w, F, u, b } from "../../../core.js";
+import { useBEM } from "../../../hooks/useBEM.js";
+import { CoreContext } from "../../../core/context.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { normalizedClass } from "../../../utils/format.js";
+import { PaymentMethod, PaymentCategory, COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, PAY_FORM_FOOTER_CLASS_NAME } from "../../../constant.js";
+import { getTimeDiff } from "../../../utils/date.js";
+import "../../../out/fraud-detection.js";
+import "../../../core/logger.js";
+import { usePayState } from "../../../hooks/usePayState.js";
+import { SCAN_CODE_RETRY_POLL_TIERS } from "../../../hooks/useRetry.js";
+import { useBaseWallet } from "../../../hooks/useBaseWallet.js";
+import { GuideCard } from "../../GuideCard/index.js";
+import { Info } from "../../internal/Info/Info.js";
+import "./alipay-hk.js";
+import { PaymentButton } from "../../PaymentButton/index.js";
+import "../../internal/Modal/Modal.js";
+import { QRCodeContent } from "../../business/QRCodeContent/QRCodeContent.js";
+import "../../internal/Form/type.js";
+import "../../internal/Form/context.js";
+import "../../internal/Form/FormItem.js";
+import "../../internal/Form/Form.js";
+import "../../internal/Input/Input.js";
+import "../../internal/Input/type.js";
+import "../../internal/Select/Select.js";
+import "../../business/PhoneField/config.js";
+import "../../business/PhoneField/phone-field.js";
+import "../../business/Tooltip/tooltip.js";
+import "../../business/BlikCodeField/blik-code-field.js";
+import { Button } from "../../internal/Button/Button2.js";
+import "../../business/PaymentConfirmModal/payment-confirm-modal.js";
+import "../../internal/LoadingCheck/loading-check.js";
+const { bem } = useBEM("ali-pay-hk");
+const CURR_PAYMENT_METHOD = PaymentMethod.ALIPAY_HK;
+const AlipayHK = w((props, ref) => {
+  const {
+    session,
+    core,
+    showGuideCard = true,
+    hidePaymentButton = false
+  } = props;
+  const { i18n, disabled } = usePayState(session, props.core);
+  const {
+    isEnabled,
+    paymentButtonStatus,
+    setPaymentButtonStatus,
+    errorMessage,
+    setErrorMessage,
+    payment,
+    startRetry,
+    stopRetry,
+    showQRCodeModal,
+    qrCodeInfo,
+    processCloseQRCodeModal,
+    paymentTimeout,
+    getPaymentMethodContext
+  } = useBaseWallet(CURR_PAYMENT_METHOD, props, {
+    retryTimeout: 2 * 60 * 1e3,
+    supportQRCodeModal: true,
+    getRetryOptions: (paymentInfo) => {
+      var _a;
+      const expiredAt = (_a = paymentInfo.payInfo) == null ? void 0 : _a.paymentExpiredAt;
+      if (!expiredAt)
+        return void 0;
+      const timeout = getTimeDiff(expiredAt);
+      return Number.isNaN(timeout) ? void 0 : { timeout: Math.max(timeout, 0), pollTiers: SCAN_CODE_RETRY_POLL_TIERS };
+    },
+    timeoutMessage: i18n.get("common.paymentTimeout"),
+    expiredMessage: i18n.get("common.paymentTimeout"),
+    getFormData: () => ({})
+  });
+  F(ref, () => ({
+    stopRetry: () => stopRetry(),
+    startRetry: (timeout) => startRetry(timeout),
+    updateAddress: () => {
+    },
+    updateEmail: () => {
+    },
+    payment: () => {
+      hidePaymentButton && onSubmit();
+    }
+  }));
+  const onSubmit = async () => {
+    var _a;
+    setErrorMessage("");
+    const submitResult = await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, void 0, getPaymentMethodContext()));
+    if (submitResult === false)
+      return;
+    setPaymentButtonStatus("loading");
+    await payment();
+  };
+  const PaymentButtonView = () => {
+    return /* @__PURE__ */ u(
+      PaymentButton,
+      {
+        className: bem("button"),
+        status: paymentButtonStatus,
+        disabled,
+        verified: true,
+        onClick: onSubmit,
+        children: paymentTimeout ? i18n.get("common.repay") : void 0
+      }
+    );
+  };
+  const ErrorMessage = () => {
+    return /* @__PURE__ */ u(b, { children: !!errorMessage && /* @__PURE__ */ u(Info, { content: errorMessage }) });
+  };
+  const QRCode = () => {
+    var _a;
+    if (!showQRCodeModal || !qrCodeInfo)
+      return null;
+    return /* @__PURE__ */ u("div", { className: bem("qr-code"), children: [
+      /* @__PURE__ */ u(
+        QRCodeContent,
+        {
+          title: i18n.get("qrCode.scanBy", { method: i18n.get("dropIn.aliPayHK.label") }),
+          qrCode: qrCodeInfo.qrCode,
+          mode: "iframe",
+          borderColor: "#009fe9",
+          expiredTime: qrCodeInfo.expiredTime,
+          amount: (_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.transAmount
+        }
+      ),
+      /* @__PURE__ */ u(Button, { ghost: true, className: bem("cancel-button"), onClick: processCloseQRCodeModal, children: i18n.get("common.cancel") })
+    ] });
+  };
+  return /* @__PURE__ */ u(
+    CoreContext.Provider,
+    {
+      value: {
+        i18n,
+        session,
+        core
+      },
+      children: isEnabled && i18n.ready.value && /* @__PURE__ */ u("div", { className: core.theme.className, children: [
+        showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.ALIPAY_HK }),
+        /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, bem()), children: /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
+          ErrorMessage(),
+          showQRCodeModal ? QRCode() : !hidePaymentButton && PaymentButtonView()
+        ] }) })
+      ] })
+    }
+  );
+});
+export {
+  AlipayHK
+};

package/dist/es/components/wallets/AlipayHK/alipay-hk.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/AlipayHK/index.js

@@ -0,0 +1 @@
+import "./AlipayHK.js";

package/dist/es/components/wallets/AlipayHK/type.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/{AliPay/AliPay.js → AlipayPlus/AlipayPlus.js}

@@ -1,5 +1,5 @@
 import { w, A, h, F, y, u, b } from "../../../core.js";
-import "./ali-pay.js";
+import "./ali-pay-plus.js";
 import { PaymentMethod, PaymentCategory, COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, PaymentType, PAY_FORM_FOOTER_CLASS_NAME } from "../../../constant.js";
 import { CoreContext } from "../../../core/context.js";
 import "../../../utils/card-brand/brands.js";
@@ -17,14 +17,13 @@ import "../../internal/Form/context.js";
 import "../../internal/Form/FormItem.js";
 import { Form } from "../../internal/Form/Form.js";
 import { Info } from "../../internal/Info/Info.js";
-import { RecurringTip } from "../../RecurringTip/index.js";
+import { Tip } from "../../Tip/index.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { calcAmountWithFee } from "../../../utils/business/amount.js";
 import { GuideCard } from "../../GuideCard/index.js";
-const { bem } = useBEM("ali-pay");
-const fieldClassNames = bem("field");
-const CURR_PAYMENT_METHOD = PaymentMethod.ALI_PAY;
-const AliPay = w((props, ref) => {
+const { bem } = useBEM("ali-pay-plus");
+const CURR_PAYMENT_METHOD = PaymentMethod.ALIPAY_PLUS;
+const AlipayPlus = w((props, ref) => {
   const {
     session,
     core,
@@ -126,7 +125,6 @@ const AliPay = w((props, ref) => {
     return /* @__PURE__ */ u(
       PaymentButton,
       {
-        className: bem("button"),
         status: paymentButtonStatus,
         disabled,
         verified: validated,
@@ -136,17 +134,17 @@ const AliPay = w((props, ref) => {
     );
   };
   const Email = () => {
-    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.email.show) && /* @__PURE__ */ u(
       EmailField,
       {
         ref: emailFieldRef,
         value: form.email,
         disabled: (fieldStatus == null ? void 0 : fieldStatus.email.disabled) || disabled
       }
-    ) }) });
+    ) });
   };
   const Address = () => {
-    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u("div", { className: fieldClassNames, children: /* @__PURE__ */ u(
+    return /* @__PURE__ */ u(b, { children: (fieldStatus == null ? void 0 : fieldStatus.address.show) && /* @__PURE__ */ u(
       AddressField,
       {
         ref: addressFieldRef,
@@ -154,10 +152,10 @@ const AliPay = w((props, ref) => {
         disabled,
         onChange: (value) => setForm(Object.assign(form, { address: value }))
       }
-    ) }) });
+    ) });
   };
   const ErrorMessage = () => {
-    return /* @__PURE__ */ u(b, { children: !!errorMessage && /* @__PURE__ */ u(Info, { className: bem("error"), content: errorMessage }) });
+    return /* @__PURE__ */ u(b, { children: !!errorMessage && /* @__PURE__ */ u(Info, { content: errorMessage }) });
   };
   return /* @__PURE__ */ u(
     CoreContext.Provider,
@@ -168,11 +166,11 @@ const AliPay = w((props, ref) => {
         core
       },
       children: isEnabled && i18n.ready.value && /* @__PURE__ */ u(b, { children: [
-        showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.ALI_PAY }),
+        showGuideCard && /* @__PURE__ */ u(GuideCard, { type: PaymentCategory.ALIPAY_PLUS }),
         /* @__PURE__ */ u("div", { className: core.theme.className, children: /* @__PURE__ */ u(Form, { form, ref: setFormRef, onFormChange: (form2) => setForm(form2), children: /* @__PURE__ */ u("div", { className: normalizedClass(COMMON_CLASS_NAME, PAY_FORM_CLASS_NAME, bem()), children: [
           Email(),
           Address(),
-          (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && RecurringTip(),
+          (session == null ? void 0 : session.checkout.paymentType) === PaymentType.RECURRING && /* @__PURE__ */ u(Tip, { text: i18n.get("common.recurringTip") }),
           /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
             ErrorMessage(),
             !hidePaymentButton && Button()
@@ -183,5 +181,5 @@ const AliPay = w((props, ref) => {
   );
 });
 export {
-  AliPay
+  AlipayPlus
 };

package/dist/es/components/wallets/AlipayPlus/ali-pay-plus.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/AlipayPlus/index.js

@@ -0,0 +1 @@
+import "./AlipayPlus.js";

package/dist/es/components/wallets/AlipayPlus/type.js

@@ -0,0 +1 @@
+

package/dist/es/components/wallets/Bancontact/Bancontact.js

@@ -18,7 +18,8 @@ import { Form } from "../../internal/Form/Form.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { Info } from "../../internal/Info/Info.js";
 import "../../internal/Modal/Modal.js";
-import "../../business/QRCodeModal/qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import { NameField } from "../../business/NameField/NameField.js";
 import "../../internal/Select/Select.js";
 import "../../internal/Input/Input.js";
@@ -31,7 +32,7 @@ import "../../internal/Button/button.js";
 import "../../business/PaymentConfirmModal/payment-confirm-modal.js";
 import "../../internal/LoadingCheck/loading-check.js";
 import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
-import { RecurringTip } from "../../RecurringTip/index.js";
+import { Tip } from "../../Tip/index.js";
 import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
 const { bem } = useBEM("bancontact");
 const CURR_PAYMENT_METHOD = PaymentMethod.BANCONTACT;
@@ -183,7 +184,7 @@ const Bancontact = w((props, ref) => {
           Email(),
           /* @__PURE__ */ u(NameField, { disabled }),
           Address(),
-          ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && RecurringTip(false),
+          ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && /* @__PURE__ */ u(Tip, { text: i18n.get("common.recurringTip2") }),
           /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
             ErrorMessage(),
             !hidePaymentButton && Button()

package/dist/es/components/wallets/Blik/Blik.js

@@ -17,7 +17,8 @@ import { Form } from "../../internal/Form/Form.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { Info } from "../../internal/Info/Info.js";
 import "../../internal/Modal/Modal.js";
-import "../../business/QRCodeModal/qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import { NameField } from "../../business/NameField/NameField.js";
 import "../../internal/Select/Select.js";
 import "../../internal/Input/Input.js";
@@ -28,7 +29,7 @@ import { BlikCodeField } from "../../business/BlikCodeField/BlikCodeField.js";
 import { PaymentConfirmModal } from "../../business/PaymentConfirmModal/PaymentConfirmModal.js";
 import "../../business/Tooltip/tooltip.js";
 import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
-import { RecurringTip } from "../../RecurringTip/index.js";
+import { Tip } from "../../Tip/index.js";
 import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
 const { bem } = useBEM("blik");
 const CURR_PAYMENT_METHOD = PaymentMethod.BLIK;
@@ -219,7 +220,7 @@ const Blik = w((props, ref) => {
           /* @__PURE__ */ u(NameField, { disabled }),
           Address(),
           /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u(BlikCodeField, { disabled }) }),
-          ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && RecurringTip(false),
+          ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.RECURRING && /* @__PURE__ */ u(Tip, { text: i18n.get("common.recurringTip2") }),
           /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
             ErrorMessage(),
             !hidePaymentButton && Button()

package/dist/es/components/wallets/Doku/Doku.js

@@ -18,7 +18,8 @@ import { Form } from "../../internal/Form/Form.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { Info } from "../../internal/Info/Info.js";
 import "../../internal/Modal/Modal.js";
-import "../../business/QRCodeModal/qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import { NameField } from "../../business/NameField/NameField.js";
 import { PhoneField } from "../../business/PhoneField/PhoneField.js";
 import { AREA_CODE_ID } from "../../business/PhoneField/area-codes.js";

package/dist/es/components/wallets/EPS/EPS.js

@@ -16,7 +16,8 @@ import "../../internal/Form/context.js";
 import "../../internal/Form/FormItem.js";
 import { Form } from "../../internal/Form/Form.js";
 import "../../internal/Modal/Modal.js";
-import "../../business/QRCodeModal/qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import { NameField } from "../../business/NameField/NameField.js";
 import "../../internal/Select/Select.js";
 import "../../internal/Input/Input.js";
@@ -32,7 +33,7 @@ import { createEmailCore, EmailField } from "../../EmailField/EmailField.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { Info } from "../../internal/Info/Info.js";
 import { DEFAULT_ADDRESS, AddressField } from "../../AddressField/index.js";
-import { RecurringTip } from "../../RecurringTip/index.js";
+import { Tip } from "../../Tip/index.js";
 const { bem } = useBEM("eps");
 const CURR_PAYMENT_METHOD = PaymentMethod.EPS;
 const DEFAULT_COUNTRY = "AT";
@@ -164,7 +165,7 @@ const EPS = w((props, ref) => {
       Email(),
       isRecurring && /* @__PURE__ */ u(NameField, { disabled }),
       Address(),
-      isRecurring && RecurringTip(false),
+      isRecurring && /* @__PURE__ */ u(Tip, { text: i18n.get("common.recurringTip2") }),
       /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
         ErrorMessage(),
         !hidePaymentButton && Button()

package/dist/es/components/wallets/GCash/GCash.js

@@ -17,6 +17,8 @@ import "../../internal/Form/context.js";
 import "../../internal/Form/FormItem.js";
 import { Form } from "../../internal/Form/Form.js";
 import { QRCodeModal } from "../../business/QRCodeModal/QRCodeModal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import "../../internal/Input/Input.js";
 import "../../internal/Input/type.js";
 import "../../internal/Select/Select.js";

package/dist/es/components/wallets/GoPay/GoPay.js

@@ -18,7 +18,8 @@ import { Form } from "../../internal/Form/Form.js";
 import { PaymentButton } from "../../PaymentButton/index.js";
 import { Info } from "../../internal/Info/Info.js";
 import "../../internal/Modal/Modal.js";
-import "../../business/QRCodeModal/qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../../business/QRCodeContent/qr-code-content.js";
 import { NameField } from "../../business/NameField/NameField.js";
 import "../../internal/Select/Select.js";
 import "../../internal/Input/Input.js";