@paykka/card-checkout-ui 0.18.0 → 0.21.2

package/dist/es/api/modules/apple-pay/index.js

@@ -1,7 +1,11 @@
 import { apiPrefix } from "../../../config.js";
 import { http } from "../../http.js";
-const getMerchantSession = async (options) => {
-  return http.post(`${apiPrefix}/apple-pay/create-session`, options);
+const getMerchantSession = async (params, options) => {
+  return http.post(
+    `${apiPrefix}/apple-pay/create-session`,
+    { merchant_id: params.merchantId },
+    options
+  );
 };
 export {
   getMerchantSession

package/dist/es/api/modules/checkout/map.js

@@ -31,7 +31,7 @@ const formatPaymentMethodInfo = (paymentMethods = []) => {
       };
     } else if (value === PaymentMethod.WECHAT_PAY) {
       channelParams.wechatPay = formatFeeInfo(configuration);
-    } else if (value === PaymentMethod.ALI_PAY) {
+    } else if (value === PaymentMethod.ALIPAY_PLUS) {
       channelParams.aliPay = formatFeeInfo(configuration);
     }
     if (value === PaymentMethod.BANKCARD) {

package/dist/es/api/modules/get-browser-params.js

@@ -35,7 +35,7 @@ const getBaseBrowserParams = async (params = {}) => {
     terminal_type: terminalType,
     fraud_detection_id: fraudDetectionId,
     // 当前组件库版本（构建时由 define 注入）
-    app_version: "0.18.0"
+    app_version: "0.21.2"
   };
 };
 const getBrowserParams = async (params = {}) => {

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

@@ -368,10 +368,12 @@ const ApplePay = w((props) => {
     initApplePaySession({
       request,
       onValidate: async () => {
-        var _a2;
+        var _a2, _b2, _c;
         onEvent == null ? void 0 : onEvent(ApplePayEventType.APPLE_PAY_VALIDATE_MERCHANT);
-        const merchantSession = await getMerchantSession();
-        (_a2 = applePaySession.current) == null ? void 0 : _a2.completeMerchantValidation(merchantSession);
+        const merchantSession = await getMerchantSession(
+          ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.sessionMode) === SessionMode.HOSTED ? {} : { merchantId: (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.merchantId }
+        );
+        (_c = applePaySession.current) == null ? void 0 : _c.completeMerchantValidation(merchantSession);
       },
       onAuthorized: async (event) => {
         var _a2;

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

@@ -29,7 +29,7 @@ import "../internal/Form/FormItem.js";
 import { Form } from "../internal/Form/Form.js";
 import { IconSwitch } from "../internal/icons/IconSwitch.js";
 import { Info } from "../internal/Info/Info.js";
-import { RecurringTip } from "../RecurringTip/index.js";
+import { Tip } from "../Tip/index.js";
 import { EFieldType, SecuredFieldsProvider } from "../SecuredFieldsProvider/index.js";
 import "../SubmitButton/index.js";
 import "../internal/Button/button.js";
@@ -47,7 +47,7 @@ import { normalizedClass, trimAll, limitedToNumber } from "../../utils/format.js
 const { bem } = useBEM("card");
 const CURR_PAYMENT_METHOD = PaymentMethod.BANKCARD;
 const Card = w((props, ref) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     showCardBrands = true,
     session,
@@ -154,7 +154,7 @@ const Card = w((props, ref) => {
     };
   };
   y(() => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c2;
     if (!sessionReady)
       return;
     const { status, supportMethods = [], tokens = [], sessionMode, country, bill = {} } = (session == null ? void 0 : session.checkout) || {};
@@ -173,7 +173,7 @@ const Card = w((props, ref) => {
     country && addressCore.setCountry(country);
     form.email = bill.email ?? "";
     form.address.country = country;
-    form.token = (_c = tokens[0]) == null ? void 0 : _c.token;
+    form.token = (_c2 = tokens[0]) == null ? void 0 : _c2.token;
     setSupportedCardBrands(intersection(cardBrandCodes, supportMethods || []));
     setIsCheckoutEnabled(true);
     if (status === "SUCCESS") {
@@ -278,6 +278,7 @@ const Card = w((props, ref) => {
         paymentMethod = cardBrand.code;
       }
     }
+    const storePaymentMethodPayload = isShowStoreCheckBox ? { storePaymentMethod } : isForceStorePaymentMethod ? { storePaymentMethod: true } : null;
     return {
       sessionId: session.sessionId,
       clientKey: session.clientKey,
@@ -291,7 +292,7 @@ const Card = w((props, ref) => {
           expYear: `20${expYear}`,
           expMonth,
           cardNo,
-          ...isShowStoreCheckBox ? { storePaymentMethod } : null
+          ...storePaymentMethodPayload
         }
       },
       bill: (fieldStatus == null ? void 0 : fieldStatus.address.show) ? {
@@ -316,7 +317,7 @@ const Card = w((props, ref) => {
     };
   };
   async function pay(search = false, timeout) {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h;
     try {
       core.payment.currPaymentMethod.value = CURR_PAYMENT_METHOD;
       const requestOptions = { locale: i18n.locale, timeout };
@@ -333,13 +334,13 @@ const Card = w((props, ref) => {
         );
       } else {
         const paymentParams = await getPaymentParams();
-        const extraParams = (_d = (_c = core.config)._getExtraParams) == null ? void 0 : _d.call(_c, "payment", CURR_PAYMENT_METHOD);
-        if ((_e = core.config._checkoutConfig) == null ? void 0 : _e.dynamicSessionId) {
+        const extraParams = (_d2 = (_c2 = core.config)._getExtraParams) == null ? void 0 : _d2.call(_c2, "payment", CURR_PAYMENT_METHOD);
+        if ((_e2 = core.config._checkoutConfig) == null ? void 0 : _e2.dynamicSessionId) {
           await core.updateSessionId(buildPaymentParams(paymentParams, extraParams));
           session.sessionId && (paymentParams.sessionId = session.sessionId);
         }
         if (security) {
-          (_f = SFPRef.current) == null ? void 0 : _f.payment(paymentParams, extraParams);
+          (_f2 = SFPRef.current) == null ? void 0 : _f2.payment(paymentParams, extraParams);
           return { end: true };
         } else {
           res = await commonPayment({
@@ -353,7 +354,7 @@ const Card = w((props, ref) => {
                   sessionId: session.sessionId,
                   clientKey: session.clientKey
                 },
-                extraParams: (_h = (_g = core.config)._getExtraParams) == null ? void 0 : _h.call(_g, "query", CURR_PAYMENT_METHOD)
+                extraParams: (_h = (_g2 = core.config)._getExtraParams) == null ? void 0 : _h.call(_g2, "query", CURR_PAYMENT_METHOD)
               }
             }
           });
@@ -471,7 +472,8 @@ const Card = w((props, ref) => {
         status: submitButtonStatus,
         disabled,
         verified: validated,
-        onClick: onSubmit
+        onClick: onSubmit,
+        children: isSaveButton ? i18n.get("common.save") : null
       }
     );
   };
@@ -556,19 +558,25 @@ const Card = w((props, ref) => {
       }
     }
   }
+  const isPurchase = ((_a = session == null ? void 0 : session.checkout) == null ? void 0 : _a.paymentType) === PaymentType.PURCHASE;
+  const isRecurring = ((_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.paymentType) === PaymentType.RECURRING;
   const isFastPayment = T(() => {
     var _a2;
     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);
+    const hasCardTokens = !!((_a2 = session.checkout.tokens) == null ? void 0 : _a2.length);
     return isPurchase && hasCardTokens;
-  }, [session == null ? void 0 : session.checkout]);
+  }, [session == null ? void 0 : session.checkout, isPurchase]);
+  const isNoAmount = Number((_d = (_c = session == null ? void 0 : session.checkout) == null ? void 0 : _c.transAmount) == null ? void 0 : _d.amount) === 0;
+  const canStorePaymentMethod = !!((_e = session == null ? void 0 : session.checkout) == null ? void 0 : _e.storePaymentMethod);
+  const isNoAmountPurchaseStore = isPurchase && isNoAmount && canStorePaymentMethod;
+  const isForceStorePaymentMethod = isRecurring || isNoAmountPurchaseStore;
+  const isSaveButton = isNoAmountPurchaseStore || isRecurring && isNoAmount;
   const isShowStoreCheckBox = T(() => {
     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]);
+    return isPurchase && canStorePaymentMethod && !isNoAmount;
+  }, [session == null ? void 0 : session.checkout, isPurchase, canStorePaymentMethod, isNoAmount]);
   const StoreCheckBox = () => {
     const onCheck = (checked) => {
       setStorePaymentMethod(checked);
@@ -583,10 +591,20 @@ const Card = w((props, ref) => {
       }
     ) });
   };
+  const StorePaymentTip = () => {
+    let tipText = null;
+    if (isNoAmountPurchaseStore) {
+      tipText = i18n.get("common.storePaymentTip");
+    } else if (isRecurring && isNoAmount) {
+      tipText = i18n.get("common.recurringStoreTip");
+    } else if (isRecurring) {
+      tipText = i18n.get("common.recurringTip");
+    }
+    return tipText ? /* @__PURE__ */ u(Tip, { text: tipText }) : null;
+  };
   const changeBox = () => {
-    var _a2, _b2, _c;
-    const isPurchase = ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.PURCHASE;
-    const hasCardTokens = !!((_c = (_b2 = session == null ? void 0 : session.checkout) == null ? void 0 : _b2.tokens) == null ? void 0 : _c.length);
+    var _a2, _b2;
+    const hasCardTokens = !!((_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2.length);
     const onClick = () => {
       var _a3;
       (_a3 = formRef.current) == null ? void 0 : _a3.resetValidation();
@@ -649,7 +667,7 @@ const Card = w((props, ref) => {
     [EFieldType.CVV]: null
   });
   const onFieldValidStatusChanged = (data) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c2, _d2;
     const fieldRef = splitCardInfo ? fieldRefMap[data.fieldType] : combinedCardInfoRef;
     const error = data.errorTip && i18n.get(data.errorTip);
     if (!splitCardInfo) {
@@ -670,10 +688,10 @@ const Card = w((props, ref) => {
       if (isSuccess) {
         (_b2 = fieldRef.current) == null ? void 0 : _b2.resetValidation("success");
       } else {
-        (_c = fieldRef.current) == null ? void 0 : _c.resetValidation("unValidate");
+        (_c2 = fieldRef.current) == null ? void 0 : _c2.resetValidation("unValidate");
       }
     } else {
-      (_d = fieldRef.current) == null ? void 0 : _d.resetValidation(data.status, error);
+      (_d2 = fieldRef.current) == null ? void 0 : _d2.resetValidation(data.status, error);
     }
     setTimeout(() => {
       validateFormSilently();
@@ -741,7 +759,7 @@ const Card = w((props, ref) => {
     ) });
   };
   const CardSplitInfo = () => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c2, _d2;
     return /* @__PURE__ */ u(b, { children: [
       /* @__PURE__ */ u("div", { children: [
         /* @__PURE__ */ u("div", { className: bem("card-number-wrapper"), children: [
@@ -761,7 +779,7 @@ const Card = w((props, ref) => {
           CardBrands,
           {
             className: bem("card-brands"),
-            supportedCardBrands: (_d = (_c = session == null ? void 0 : session.checkout) == null ? void 0 : _c.supportMethods) == null ? void 0 : _d.filter(Boolean)
+            supportedCardBrands: (_d2 = (_c2 = session == null ? void 0 : session.checkout) == null ? void 0 : _c2.supportMethods) == null ? void 0 : _d2.filter(Boolean)
           }
         )
       ] }),
@@ -786,13 +804,12 @@ const Card = w((props, ref) => {
     ] });
   };
   const PaymentForm = () => {
-    var _a2;
     return /* @__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(),
       splitCardInfo ? CardSplitInfo() : CardCombineInfo(),
       CardHolderName(),
       Address(),
-      ((_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.paymentType) === PaymentType.RECURRING && RecurringTip(),
+      StorePaymentTip(),
       /* @__PURE__ */ u("div", { className: PAY_FORM_FOOTER_CLASS_NAME, children: [
         isShowStoreCheckBox && StoreCheckBox(),
         ErrorMessage(),
@@ -801,15 +818,15 @@ const Card = w((props, ref) => {
     ] }) });
   };
   const FastPaymentForm = () => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c2, _d2;
     return /* @__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(),
       /* @__PURE__ */ u("div", { className: bem("card-selector-wrapper"), children: [
         /* @__PURE__ */ u(
           CardSelector,
           {
-            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,
+            value: (_c2 = (_b2 = (_a2 = session == null ? void 0 : session.checkout) == null ? void 0 : _a2.tokens) == null ? void 0 : _b2[0]) == null ? void 0 : _c2.token,
+            cardList: (_d2 = session == null ? void 0 : session.checkout) == null ? void 0 : _d2.tokens,
             disabled,
             onClickEdit: onEditOtherCard,
             onClickChange: onClickChangeCard,
@@ -844,7 +861,7 @@ const Card = w((props, ref) => {
         i18n,
         disabled,
         checkoutId: core.id,
-        sessionMode: (_a = session.checkout) == null ? void 0 : _a.sessionMode,
+        sessionMode: (_f = session.checkout) == null ? void 0 : _f.sessionMode,
         supportedCardBrands,
         style: inputStyle || defaultInputStyleConfig,
         core,
@@ -868,7 +885,7 @@ const Card = w((props, ref) => {
       ThreeDSAuth,
       {
         show: showThreeDSModal,
-        theme: (_b = session == null ? void 0 : session.checkout) == null ? void 0 : _b.theme,
+        theme: (_g = session == null ? void 0 : session.checkout) == null ? void 0 : _g.theme,
         onClose: handleCloseThreeDSModal,
         checkoutId: core.id,
         ...threeDSInfo

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

@@ -33,7 +33,9 @@ import { MbWay } from "../wallets/MbWay/MbWay.js";
 import { Multibanco } from "../wallets/Multibanco/Multibanco.js";
 import { PayU } from "../wallets/PayU/PayU.js";
 import { Satispay } from "../wallets/Satispay/Satispay.js";
-import { AliPay } from "../wallets/AliPay/AliPay.js";
+import { AlipayPlus } from "../wallets/AlipayPlus/AlipayPlus.js";
+import { Alipay } from "../wallets/Alipay/Alipay.js";
+import { AlipayHK } from "../wallets/AlipayHK/AlipayHK.js";
 import { WechatPay } from "../wallets/WechatPay/WechatPay.js";
 import { PayByBank } from "../wallets/PayByBank/PayByBank.js";
 import { Fpx } from "../wallets/Fpx/Fpx.js";
@@ -97,6 +99,8 @@ import { IconPayU } from "../internal/icons/IconPayU.js";
 import { IconSatispay } from "../internal/icons/IconSatispay.js";
 import { IconWechatPayGlobal } from "../internal/icons/IconWechatPayGlobal.js";
 import { IconAlipayPlus } from "../internal/icons/IconAlipayPlus.js";
+import { IconAlipay } from "../internal/icons/IconAlipay.js";
+import { IconAlipayHK } from "../internal/icons/IconAlipayHK.js";
 import { IconPayByBank } from "../internal/icons/IconPayByBank.js";
 import { IconFpx } from "../internal/icons/IconFpx.js";
 import { IconDragonPay } from "../internal/icons/IconDragonPay.js";
@@ -120,7 +124,9 @@ const dropInSupportedPaymentMethods = [
   ...CardPaymentMethods,
   PaymentMethod.GOOGLE_PAY,
   PaymentMethod.APPLE_PAY,
-  PaymentMethod.ALI_PAY,
+  PaymentMethod.ALIPAY_PLUS,
+  PaymentMethod.ALIPAY_HK,
+  PaymentMethod.ALIPAY,
   PaymentMethod.WECHAT_PAY,
   PaymentMethod.SEPA_DEBIT,
   PaymentMethod.BOOST,
@@ -223,7 +229,9 @@ const PaymentComponentMap = {
   [PaymentCategory.LINK_AJA]: LinkAja,
   [PaymentCategory.NU_PAY]: NuPay,
   [PaymentCategory.WECHAT_PAY]: WechatPay,
-  [PaymentCategory.ALI_PAY]: AliPay,
+  [PaymentCategory.ALIPAY_PLUS]: AlipayPlus,
+  [PaymentCategory.ALIPAY]: Alipay,
+  [PaymentCategory.ALIPAY_HK]: AlipayHK,
   [PaymentCategory.SEPA_DEBIT]: Sepa
 };
 const paymentCategoryOptionMap = {
@@ -423,10 +431,18 @@ const paymentCategoryOptionMap = {
     icon: IconNuPay,
     nameKey: "dropIn.nuPay.label"
   },
-  [PaymentCategory.ALI_PAY]: {
+  [PaymentCategory.ALIPAY_PLUS]: {
     icon: IconAlipayPlus,
+    nameKey: "dropIn.aliPayPlus.label"
+  },
+  [PaymentCategory.ALIPAY]: {
+    icon: IconAlipay,
     nameKey: "dropIn.aliPay.label"
   },
+  [PaymentCategory.ALIPAY_HK]: {
+    icon: IconAlipayHK,
+    nameKey: "dropIn.aliPayHK.label"
+  },
   [PaymentCategory.WECHAT_PAY]: {
     icon: IconWechatPayGlobal,
     nameKey: "dropIn.wechatPay.label"
@@ -580,7 +596,7 @@ const DropIn = w((props, ref) => {
       icon: () => {
         const Icon = paymentCategoryOptionMap[category].icon;
         const iconHeight = 24;
-        return Icon ? /* @__PURE__ */ u(Icon, { size: category === PaymentCategory.ALI_PAY ? 20 : iconHeight }) : null;
+        return Icon ? /* @__PURE__ */ u(Icon, { size: category === PaymentCategory.ALIPAY_PLUS ? 20 : iconHeight }) : null;
       },
       name: i18n.get(paymentCategoryOptionMap[category].nameKey)
     }));

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

@@ -12,7 +12,6 @@ import { IconRedirect } from "../internal/icons/IconRedirect.js";
 import { IconScan } from "../internal/icons/IconScan.js";
 const { bem } = useBEM("guide-card");
 const GuideCard = (props) => {
-  var _a, _b;
   const { type } = props;
   const { i18n } = useI18n();
   const redirectGuideCard = {
@@ -26,59 +25,17 @@ const GuideCard = (props) => {
     };
   };
   const guideCardInfoMap = {
-    [PaymentCategory.ALI_PAY]: redirectGuideCard,
     [PaymentCategory.WECHAT_PAY]: getQRCodeGuideCard(i18n.get("common.wechatPayGlobal")),
-    [PaymentCategory.BOOST]: redirectGuideCard,
-    [PaymentCategory.GRAB_PAY]: redirectGuideCard,
-    [PaymentCategory.LINE_PAY]: redirectGuideCard,
-    [PaymentCategory.NINE_PAY]: redirectGuideCard,
-    [PaymentCategory.SHOPEE_PAY]: redirectGuideCard,
-    [PaymentCategory.TNG_WALLET]: redirectGuideCard,
-    [PaymentCategory.MAY_BANK_QR_PAY]: redirectGuideCard,
+    [PaymentCategory.ALIPAY]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.aliPay.label")),
+    [PaymentCategory.ALIPAY_HK]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.aliPayHK.label")),
     [PaymentCategory.GCASH]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.gcash.label")),
-    [PaymentCategory.PAYMAYA]: redirectGuideCard,
     [PaymentCategory.ZALOPAY]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.zalopay.label")),
-    [PaymentCategory.VIETQR]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.vietqr.label")),
-    [PaymentCategory.PIX]: redirectGuideCard,
-    [PaymentCategory.PIC_PAY]: redirectGuideCard,
-    [PaymentCategory.OPAY_WALLET]: redirectGuideCard,
-    [PaymentCategory.PAGA_WALLET]: redirectGuideCard,
-    [PaymentCategory.BANCONTACT]: redirectGuideCard,
-    [PaymentCategory.IDEAL]: redirectGuideCard,
-    [PaymentCategory.BLIK]: redirectGuideCard,
-    [PaymentCategory.OVO]: redirectGuideCard,
-    [PaymentCategory.SKRILL]: redirectGuideCard,
-    [PaymentCategory.TRUSTLY]: redirectGuideCard,
-    [PaymentCategory.P24]: redirectGuideCard,
-    [PaymentCategory.BANCOMAT_PAY]: redirectGuideCard,
-    [PaymentCategory.MY_BANK]: redirectGuideCard,
-    [PaymentCategory.BIZUM]: redirectGuideCard,
-    [PaymentCategory.EPS]: redirectGuideCard,
-    [PaymentCategory.MB_WAY]: redirectGuideCard,
-    [PaymentCategory.MULTIBANCO]: redirectGuideCard,
-    [PaymentCategory.PAY_U]: redirectGuideCard,
-    [PaymentCategory.SATISPAY]: redirectGuideCard,
-    [PaymentCategory.PAY_BY_BANK]: redirectGuideCard,
-    [PaymentCategory.FPX]: redirectGuideCard,
-    [PaymentCategory.DRAGONPAY]: redirectGuideCard,
-    [PaymentCategory.UPI]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_FINLAND]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_ESTONIA]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_LATVIA]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_LITHUANIA]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_INDONESIA]: redirectGuideCard,
-    [PaymentCategory.ONLINE_BANKING_THAILAND]: redirectGuideCard,
-    [PaymentCategory.SWISH]: redirectGuideCard,
-    [PaymentCategory.TWINT]: redirectGuideCard,
-    [PaymentCategory.DOKU]: redirectGuideCard,
-    [PaymentCategory.GO_PAY]: redirectGuideCard,
-    [PaymentCategory.JENIUS]: redirectGuideCard,
-    [PaymentCategory.LINK_AJA]: redirectGuideCard,
-    [PaymentCategory.NU_PAY]: redirectGuideCard
+    [PaymentCategory.VIETQR]: isMobile() ? redirectGuideCard : getQRCodeGuideCard(i18n.get("dropIn.vietqr.label"))
   };
-  return /* @__PURE__ */ u(b, { children: guideCardInfoMap[type] && /* @__PURE__ */ u("div", { className: bem(), children: /* @__PURE__ */ u("div", { className: bem("content"), children: [
-    /* @__PURE__ */ u("div", { className: bem("icon"), children: (_a = guideCardInfoMap[type]) == null ? void 0 : _a.icon }),
-    /* @__PURE__ */ u("div", { className: bem("description"), children: (_b = guideCardInfoMap[type]) == null ? void 0 : _b.description })
+  const guideCardInfo = guideCardInfoMap[type] || redirectGuideCard;
+  return /* @__PURE__ */ u(b, { children: guideCardInfo && /* @__PURE__ */ u("div", { className: bem(), children: /* @__PURE__ */ u("div", { className: bem("content"), children: [
+    /* @__PURE__ */ u("div", { className: bem("icon"), children: guideCardInfo.icon }),
+    /* @__PURE__ */ u("div", { className: bem("description"), children: guideCardInfo.description })
   ] }) }) });
 };
 export {

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

@@ -11,7 +11,8 @@ import { usePayState } from "../../hooks/usePayState.js";
 import { useBaseWallet } from "../../hooks/useBaseWallet.js";
 import { DEFAULT_ADDRESS, AddressField } from "../AddressField/index.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/Form/type.js";
 import "../internal/Form/context.js";

package/dist/es/components/business/QRCodeContent/QRCodeContent.js

@@ -0,0 +1,68 @@
+import { h, y, u, b } from "../../../core.js";
+import { useBEM } from "../../../hooks/useBEM.js";
+import { useI18n } from "../../../hooks/useI18n.js";
+import "../../../out/fraud-detection.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import { formatAmount } from "../../../utils/format.js";
+import { formatTime } from "../../../utils/date.js";
+import "../../../core/context.js";
+import "../../../core/logger.js";
+import { QRCode } from "../../internal/QRCode/QRCode.js";
+import { Loading } from "../../internal/Loading/Loading2.js";
+import "./qr-code-content.js";
+const { bem } = useBEM("qr-code-modal");
+const QRCodeContent = (props) => {
+  const {
+    title,
+    bgColor = "#FFFFFF",
+    textColor = "#1F1F1F",
+    borderColor = "#000000",
+    expiredTime,
+    amount,
+    icon,
+    qrCode,
+    mode = "image"
+  } = props;
+  const { i18n } = useI18n();
+  const [iframeLoaded, setIframeLoaded] = h(mode !== "iframe");
+  y(() => {
+    setIframeLoaded(mode !== "iframe");
+  }, [mode, qrCode]);
+  const useRoundBorder = !bgColor || ["transparent", "white", "#FFFFFF"].includes(bgColor);
+  const RoundBorder = () => {
+    return /* @__PURE__ */ u("div", { className: bem("round-border"), children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ u("div", { className: bem("round-border-item"), style: { borderColor } }, index)) });
+  };
+  return /* @__PURE__ */ u("div", { className: bem(), children: [
+    /* @__PURE__ */ u("div", { className: bem("title"), children: title }),
+    /* @__PURE__ */ u("div", { className: bem("container"), children: /* @__PURE__ */ u("div", { className: bem("body"), style: { backgroundColor: bgColor }, children: [
+      icon && /* @__PURE__ */ u("div", { className: bem("icon"), children: icon }),
+      /* @__PURE__ */ u("div", { className: bem("qr-code-container"), children: [
+        useRoundBorder && /* @__PURE__ */ u(RoundBorder, {}),
+        /* @__PURE__ */ u("div", { className: bem("qr-code"), children: mode === "iframe" ? /* @__PURE__ */ u(b, { children: [
+          !iframeLoaded && /* @__PURE__ */ u(Loading, { fixed: false, style: { position: "absolute" } }),
+          /* @__PURE__ */ u(
+            "iframe",
+            {
+              className: bem("iframe", { loaded: iframeLoaded }),
+              src: qrCode,
+              title,
+              width: 160,
+              height: 160,
+              frameBorder: "0",
+              onLoad: () => setIframeLoaded(true)
+            }
+          )
+        ] }) : /* @__PURE__ */ u(QRCode, { size: 160, value: qrCode }) })
+      ] }),
+      expiredTime && /* @__PURE__ */ u(b, { children: [
+        /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time"), children: formatTime(expiredTime) }),
+        /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time-text"), children: i18n.get("qrCode.expired") })
+      ] })
+    ] }) }),
+    amount && /* @__PURE__ */ u("div", { className: bem("amount"), children: formatAmount(amount).jointSymbolAndCurrency() })
+  ] });
+};
+export {
+  QRCodeContent
+};

package/dist/es/components/business/QRCodeContent/index.js

@@ -0,0 +1,8 @@
+import "../../../core.js";
+import "../../../utils/card-brand/brands.js";
+import "../../../utils/system-info/get-browser-info.js";
+import "../../../core/context.js";
+import "../../../out/fraud-detection.js";
+import "../../../core/logger.js";
+import "../../internal/Loading/loading.js";
+import "./qr-code-content.js";

package/dist/es/components/business/QRCodeModal/QRCodeModal.js

@@ -1,61 +1,22 @@
-import { u, b } from "../../../core.js";
-import { useBEM } from "../../../hooks/useBEM.js";
-import { useI18n } from "../../../hooks/useI18n.js";
-import "../../../out/fraud-detection.js";
+import { u } from "../../../core.js";
 import "../../../utils/card-brand/brands.js";
 import "../../../utils/system-info/get-browser-info.js";
-import { formatAmount } from "../../../utils/format.js";
-import { formatTime } from "../../../utils/date.js";
 import "../../../core/context.js";
+import "../../../out/fraud-detection.js";
 import "../../../core/logger.js";
 import { useBreakpoints } from "../../../hooks/useBreakpoints.js";
 import { Modal } from "../../internal/Modal/Modal.js";
-import "./qr-code-modal.js";
-import { QRCode } from "../../internal/QRCode/QRCode.js";
-const { bem } = useBEM("qr-code-modal");
+import { QRCodeContent } from "../QRCodeContent/QRCodeContent.js";
 const QRCodeModal = (props) => {
-  const {
-    title,
-    bgColor = "#FFFFFF",
-    textColor = "#1F1F1F",
-    borderColor = "#000000",
-    expiredTime,
-    amount,
-    icon,
-    qrCode,
-    onClose
-  } = props;
-  const { i18n } = useI18n();
+  const { onClose } = props;
   const breakpoints = useBreakpoints();
-  const useRoundBorder = !bgColor || ["transparent", "white", "#FFFFFF"].includes(bgColor);
-  const RoundBorder = () => {
-    return /* @__PURE__ */ u("div", {
-      className: bem("round-border"),
-      // 表示4个边角
-      children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ u("div", { className: bem("round-border-item"), style: { borderColor } }, index))
-    });
-  };
   return /* @__PURE__ */ u(
     Modal,
     {
       show: true,
       width: breakpoints.smaller("xs") ? "90vw" : "340px",
       onChange: (status) => !status && (onClose == null ? void 0 : onClose()),
-      children: /* @__PURE__ */ u("div", { className: bem(), children: [
-        /* @__PURE__ */ u("div", { className: bem("title"), children: title }),
-        /* @__PURE__ */ u("div", { className: bem("container"), children: /* @__PURE__ */ u("div", { className: bem("body"), style: { backgroundColor: bgColor }, children: [
-          icon && /* @__PURE__ */ u("div", { className: bem("icon"), children: icon }),
-          /* @__PURE__ */ u("div", { className: bem("qr-code-container"), children: [
-            useRoundBorder && /* @__PURE__ */ u(RoundBorder, {}),
-            /* @__PURE__ */ u("div", { className: bem("qr-code"), children: /* @__PURE__ */ u(QRCode, { size: 160, value: qrCode }) })
-          ] }),
-          expiredTime && /* @__PURE__ */ u(b, { children: [
-            /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time"), children: formatTime(expiredTime) }),
-            /* @__PURE__ */ u("div", { style: { color: textColor }, className: bem("expired-time-text"), children: i18n.get("qrCode.expired") })
-          ] })
-        ] }) }),
-        amount && /* @__PURE__ */ u("div", { className: bem("amount"), children: formatAmount(amount).jointSymbolAndCurrency() })
-      ] })
+      children: /* @__PURE__ */ u(QRCodeContent, { ...props, mode: "image" })
     }
   );
 };

package/dist/es/components/business/QRCodeModal/index.js

@@ -5,4 +5,5 @@ import "../../../core/context.js";
 import "../../../out/fraud-detection.js";
 import "../../../core/logger.js";
 import "../../internal/Modal/Modal.js";
-import "./qr-code-modal.js";
+import "../../internal/Loading/loading.js";
+import "../QRCodeContent/qr-code-content.js";

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

@@ -5,7 +5,8 @@ import "../../core/context.js";
 import "../../out/fraud-detection.js";
 import "../../core/logger.js";
 import "../internal/Modal/Modal.js";
-import "./QRCodeModal/qr-code-modal.js";
+import "../internal/Loading/loading.js";
+import "./QRCodeContent/qr-code-content.js";
 import "../internal/Form/type.js";
 import "../internal/Form/context.js";
 import "../internal/Form/FormItem.js";

package/dist/es/components/index.js

@@ -58,7 +58,9 @@ import "./wallets/MbWay/MbWay.js";
 import "./wallets/Multibanco/Multibanco.js";
 import "./wallets/PayU/PayU.js";
 import "./wallets/Satispay/Satispay.js";
-import "./wallets/AliPay/AliPay.js";
+import "./wallets/AlipayPlus/AlipayPlus.js";
+import "./wallets/Alipay/Alipay.js";
+import "./wallets/AlipayHK/AlipayHK.js";
 import "./wallets/WechatPay/WechatPay.js";
 import "./wallets/PayByBank/PayByBank.js";
 import "./wallets/Fpx/Fpx.js";

package/dist/es/components/internal/Button/Button2.js

@@ -10,7 +10,7 @@ import "../../../out/fraud-detection.js";
 import "../../../core/logger.js";
 const { bem } = useBEM("button");
 function Button(props) {
-  const { style, className, children, icon, loading, disabled, dashed } = props;
+  const { style, className, children, icon, loading, disabled, dashed, ghost } = props;
   function onClick(event) {
     var _a;
     if (loading || disabled)
@@ -20,7 +20,7 @@ function Button(props) {
   return /* @__PURE__ */ u(
     "button",
     {
-      className: normalizedClass(COMMON_CLASS_NAME, bem({ loading, disabled, dashed }), className),
+      className: normalizedClass(COMMON_CLASS_NAME, bem({ loading, disabled, dashed, ghost }), className),
       style,
       onClick,
       children: [