@alipay/ams-checkout 2.0.19 → 2.0.20

package/esm/core/component/ckp/index.d.ts

@@ -20,7 +20,7 @@ export declare class AMSCheckoutPage {
     /**
      * 挂载组件
      */
-    mountComponent(params: Pick<IcreateComponent, 'sessionData'>, selector: string): Promise<void>;
+    mountComponent(params: Pick<IcreateComponent, 'sessionData' | 'isDemoMode'>, selector: string): Promise<void>;
     /**
      * 卸载组件
      */

package/esm/core/component/ckp/index.js

@@ -50,7 +50,7 @@ export var AMSCheckoutPage = /*#__PURE__*/function () {
     _defineProperty(this, "originOptions", void 0);
     _defineProperty(this, "APP_IFRAME_ID", 'antom-checkout-page-sub-page-iframe');
     _defineProperty(this, "eventListener", void 0);
-    _defineProperty(this, "generateIframeSrc", function (sessionData) {
+    _defineProperty(this, "generateIframeSrc", function (sessionData, isDemoMode) {
       var env = _this.originOptions.environment || 'prod';
       var session = sessionData || '';
       var lang = _this.originOptions.locale || 'en_US';
@@ -66,6 +66,9 @@ export var AMSCheckoutPage = /*#__PURE__*/function () {
       if (env === 'sandbox') {
         queryObj.shadow = 'true';
       }
+      if (isDemoMode) {
+        queryObj.demoMode = 'true';
+      }
       Object.keys(queryObj).forEach(function (key) {
         url += "".concat(url.includes('?') ? '&' : '?').concat(key, "=").concat(encodeURIComponent(queryObj[key]));
       });
@@ -177,7 +180,7 @@ export var AMSCheckoutPage = /*#__PURE__*/function () {
         throw new Error('PARAMS_ERROR_ALREADY_MOUNTED');
       }
       this.addListener();
-      var ckpPageAddress = this.generateIframeSrc(params.sessionData);
+      var ckpPageAddress = this.generateIframeSrc(params.sessionData, params.isDemoMode);
       var iframe = document.createElement('iframe');
       iframe.id = this.APP_IFRAME_ID;
       iframe.src = ckpPageAddress;

package/esm/core/component/element/elementProcessor/baseElementProcessor.d.ts

@@ -8,6 +8,7 @@ interface ElementProcessorOptions {
     mode: string;
     analytics?: Ianalytics;
     product: string;
+    preview?: boolean | 'web' | 'mobile';
 }
 declare abstract class BaseElementProcessor {
     elementContainer: AntomSDKCore;

package/esm/core/component/element/elementProcessor/baseElementProcessor.js

@@ -57,6 +57,7 @@ var BaseElementProcessor = /*#__PURE__*/function () {
       _setEnv();
       this.options.locale = (options === null || options === void 0 ? void 0 : options.locale) || '';
       this.options.product = options === null || options === void 0 ? void 0 : options.product;
+      this.options.preview = options === null || options === void 0 ? void 0 : options.preview;
     }
   }, {
     key: "registerElementContainer",

package/esm/core/component/element/elementProcessor/convertPaymentMethods.d.ts

@@ -0,0 +1,22 @@
+import { IPaymentMethod } from "../../../../types";
+interface PaymentMethodsConfig {
+    expressCheckout?: {
+        enabled: boolean;
+        methods?: {
+            paymentMethodName: string;
+            paymentMethodType: string;
+        }[];
+    };
+    supportedMethods?: {
+        paymentMethodName: string;
+        paymentMethodType: string;
+        logoUrl?: string;
+    }[];
+    topping?: string;
+}
+/**
+ * 将 paymentMethods 配置转换为内部格式
+ * 与 CKP 的 convertPaymentMethods 逻辑保持一致
+ */
+export declare function convertPaymentMethods(paymentMethodsConf?: PaymentMethodsConfig): IPaymentMethod[];
+export {};

package/esm/core/component/element/elementProcessor/convertPaymentMethods.js

@@ -0,0 +1,159 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 为 GOOGLEPAY 支付方式补充 mock 的 paymentMethodDetail 数据
+ * 预览模式下 GooglePay 需要完整的 googlePayProps 才能正常渲染
+ */
+function handleGooglePayMethodDetail(method) {
+  if (method.paymentMethodType === 'GOOGLEPAY') {
+    method.paymentMethodDetail = _objectSpread(_objectSpread({}, method.paymentMethodDetail), {}, {
+      googlePayProps: {
+        environment: 'TEST',
+        existingPaymentMethodRequired: true,
+        paymentRequest: {
+          allowedPaymentMethods: [{
+            parameters: {
+              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+              allowedCardNetworks: ['VISA', 'JCB']
+            },
+            tokenizationSpecification: {
+              parameters: {
+                protocolVersion: 'ECv2',
+                publicKey: 'BDM6GVTLZmxSmTQzm04QKI2av54kFpkqjhbkejtdDUx+VMvUtJ6vc+ZlDp8TygNTf+QeihxpD869sCVWaa0KMJc='
+              },
+              type: 'DIRECT'
+            },
+            type: 'CARD'
+          }],
+          apiVersion: 2,
+          apiVersionMinor: 0,
+          callbackIntents: ['PAYMENT_AUTHORIZATION'],
+          merchantInfo: {
+            merchantId: '123',
+            merchantName: 'merchantName'
+          },
+          shippingAddressRequired: true,
+          transactionInfo: {
+            countryCode: 'US',
+            currencyCode: 'EUR',
+            totalPrice: '10',
+            totalPriceStatus: 'FINAL'
+          }
+        }
+      }
+    });
+  }
+}
+
+/**
+ * 为 ONLINEBANKING_YAPILY 支付方式处理 mock 数据
+ * Yapily 在预览模式下需要清空 paymentElements
+ */
+function handleYapilyMethodDetail(method) {
+  if (method.paymentMethodType === 'ONLINEBANKING_YAPILY') {
+    method.paymentElements = [];
+  }
+}
+
+/**
+ * 合并所有的 Card 类支付方式
+ * 与 CKP handleAllCardsData 逻辑一致
+ */
+function handleAllCardsData() {
+  var supportedMethods = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var firstCardIndex = -1;
+  var logoList = [];
+  supportedMethods.forEach(function (item, index) {
+    if (item.paymentMethodName === 'CARD') {
+      logoList.push({
+        cardBrand: item.paymentMethodType,
+        logoUrl: item.logoUrl || ''
+      });
+      if (firstCardIndex === -1) {
+        firstCardIndex = index;
+      }
+    }
+  });
+  if (logoList.length) {
+    return {
+      firstCardIndex: firstCardIndex,
+      cardPaymentMethod: {
+        antomPage: 'paymentMetaPage',
+        category: 'CARD',
+        expressCheckout: false,
+        logoList: logoList,
+        paymentMethod: 'CARD',
+        paymentMethodName: 'Card',
+        paymentMethodType: 'CARD',
+        recommend: false,
+        webRedirectType: 'PAGE_REFRESH'
+      }
+    };
+  }
+  return null;
+}
+
+/**
+ * 将 paymentMethods 配置转换为内部格式
+ * 与 CKP 的 convertPaymentMethods 逻辑保持一致
+ */
+export function convertPaymentMethods(paymentMethodsConf) {
+  if (!paymentMethodsConf) {
+    return [];
+  }
+  var expressCheckout = paymentMethodsConf.expressCheckout,
+    supportedMethods = paymentMethodsConf.supportedMethods,
+    topping = paymentMethodsConf.topping;
+
+  // 1. 处理极速支付（排在最前面）
+  var supportedExpressCheckoutMethods = ((expressCheckout === null || expressCheckout === void 0 ? void 0 : expressCheckout.methods) || []).map(function (item) {
+    var method = {
+      paymentMethodName: item.paymentMethodName,
+      paymentMethodType: item.paymentMethodType,
+      category: item.paymentMethodType,
+      expressCheckout: true
+    };
+    handleGooglePayMethodDetail(method);
+    return method;
+  });
+
+  // 2. 处理普通支付方式（跳过 CARD，CARD 统一合并处理）
+  var supportedPaymentMethods = [];
+  (supportedMethods || []).forEach(function (item) {
+    if (item.paymentMethodName === 'CARD') {
+      return;
+    }
+    var method = {
+      paymentMethodName: item.paymentMethodName,
+      paymentMethodType: item.paymentMethodType,
+      category: item.paymentMethodType,
+      icon: item.logoUrl,
+      recommend: false
+    };
+    if (method.paymentMethodType === topping) {
+      method.recommend = true;
+    }
+    handleGooglePayMethodDetail(method);
+    handleYapilyMethodDetail(method);
+    supportedPaymentMethods.push(method);
+  });
+
+  // 3. 合并所有的 Card 类支付方式
+  var cardPaymentMethods = handleAllCardsData(supportedMethods);
+
+  // 4. 插入 Card 类支付方式 (card 第一次出现的位置)
+  if (cardPaymentMethods) {
+    supportedPaymentMethods.splice(cardPaymentMethods.firstCardIndex, 0, cardPaymentMethods.cardPaymentMethod);
+  }
+  return [].concat(_toConsumableArray(supportedExpressCheckoutMethods), supportedPaymentMethods);
+}

package/esm/core/component/element/elementProcessor/paymentProcessor.d.ts

@@ -23,6 +23,11 @@ declare class PaymentProcessor extends BaseElementProcessor {
         instanceId: any;
     }): string;
     obtainData(): Promise<any>;
+    /**
+     * 构建预览模式的 mock 数据
+     * 合并 mock.ts 的硬编码数据和 mount 传入的 paymentMethods 配置
+     */
+    private buildPreviewMockData;
     getValue(): any;
     update({ data, paymentSessionData }: {
         data: any;

package/esm/core/component/element/elementProcessor/paymentProcessor.js

@@ -27,11 +27,13 @@ import { ELEMENT_PAGE_URL } from "../../../../constant/element";
 import { EVENT } from "../../../../constant";
 import { ServiceProvider } from "../../../../foundation/service";
 import { ApplePaySdk, handleGooglePay, isSkipRenderPaymentMethod } from "../../../../plugin/component/channel";
+import { DisplayTypeEnum } from "../../../../types";
 import { queryParse } from "../../../../util";
 import { LogConfig, Logger } from "../../../../util/logger";
 import { parseSessionData } from "../../index";
 import { oneAccount, sdkAction } from "../mock";
-import { generateIframeSrc as _generateIframeSrc, isElementPad, isElementPC, safeStringify } from "../util";
+import { convertPaymentMethods } from "../elementProcessor/convertPaymentMethods";
+import { generateIframeSrc as _generateIframeSrc, isElementPad, isElementPC, safeParse, safeStringify } from "../util";
 import BaseElementProcessor from "./baseElementProcessor";
 import { executeWithTimeout, BEFORE_CONFIRM_TIMEOUT_MS } from "../../../../util/beforeConfirm";
 var logger = new Logger(LogConfig, true);
@@ -85,11 +87,44 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
   }, {
     key: "onReady",
     value: function onReady(extraParam) {
-      var _this$elementContaine, _this$elementContaine2, _this$elementContaine3, _this$elementContaine4, _this$elementContaine5;
+      var _this$options, _paymentContext$displ, _this$elementContaine, _this$elementContaine2, _this$elementContaine3, _this$elementContaine4, _this$elementContaine5;
       var paymentContext = this.elementContainer.getPaymentContext();
       this.getLogger().logInfo({
         title: 'sdk_event_renderComponent'
       });
+
+      // preview mobile 模式下，单普通支付方式（无表单、非快捷支付）不发送 renderComponent，阻止自动提交
+      var previewMode = (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.preview;
+      if (previewMode === 'mobile') {
+        var _extraParam$originAct, _extraParam$originAct2, _paymentMethods$, _paymentMethods$2;
+        var paymentMethods = (extraParam === null || extraParam === void 0 || (_extraParam$originAct = extraParam.originActionQueryResult) === null || _extraParam$originAct === void 0 ? void 0 : _extraParam$originAct.paymentMethods) || [];
+        var savedPaymentMethods = (extraParam === null || extraParam === void 0 || (_extraParam$originAct2 = extraParam.originActionQueryResult) === null || _extraParam$originAct2 === void 0 ? void 0 : _extraParam$originAct2.savedPaymentMethods) || [];
+        if (paymentMethods.length === 1 && savedPaymentMethods.length === 0 && !((_paymentMethods$ = paymentMethods[0]) !== null && _paymentMethods$ !== void 0 && (_paymentMethods$ = _paymentMethods$.paymentElements) !== null && _paymentMethods$ !== void 0 && _paymentMethods$.length) && !['APPLEPAY', 'GOOGLEPAY'].includes((_paymentMethods$2 = paymentMethods[0]) === null || _paymentMethods$2 === void 0 ? void 0 : _paymentMethods$2.paymentMethodType)) {
+          // 跳过 renderComponent，避免触发自动提交
+          return;
+        }
+      }
+
+      // ===== Element 自助化运营：appearance 二选一处理（不做 deepMerge）=====
+      // 根据 theme 值二选一：
+      // - 内置 6 大主题（非 APR_ 前缀）：完全使用 SDK mount 传入的 appearance
+      // - 自定义主题模版（APR_ 前缀 AppearanceID）：完全使用后端 sdkAction.query 返回的 appearance，
+      //   SDK mount 中传的 layout/variables/card 全部忽略
+      var mountAppearance = paymentContext === null || paymentContext === void 0 || (_paymentContext$displ = paymentContext.displayInfo) === null || _paymentContext$displ === void 0 ? void 0 : _paymentContext$displ.appearance;
+      var isAppearanceId = typeof (mountAppearance === null || mountAppearance === void 0 ? void 0 : mountAppearance.theme) === 'string' && mountAppearance.theme.startsWith('APR_');
+      var finalAppearance;
+      if (isAppearanceId) {
+        var _extraParam$originAct3, _safeParse;
+        // 分支 A：自定义主题模版（APR_xxxx）
+        // 完全使用后端返回的配置，忽略 SDK mount 中的 layout/variables/card
+        // elementSettings 可能是 JSON string，需统一解析为对象
+        var elementSettings = extraParam === null || extraParam === void 0 || (_extraParam$originAct3 = extraParam.originActionQueryResult) === null || _extraParam$originAct3 === void 0 || (_extraParam$originAct3 = _extraParam$originAct3.pageStyle) === null || _extraParam$originAct3 === void 0 ? void 0 : _extraParam$originAct3.elementSettings;
+        finalAppearance = typeof elementSettings === 'string' ? (_safeParse = safeParse(elementSettings)) === null || _safeParse === void 0 ? void 0 : _safeParse.appearance : elementSettings === null || elementSettings === void 0 ? void 0 : elementSettings.appearance;
+      } else {
+        // 分支 B：内置 6 大主题或未指定主题
+        // 完全使用 SDK mount 传入的配置；
+        finalAppearance = mountAppearance;
+      }
       this.eventCenter.dispatchToApp({
         event: 'renderComponent',
         data: {
@@ -108,7 +143,7 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
             merchantId: (_this$elementContaine4 = this.elementContainer) === null || _this$elementContaine4 === void 0 || (_this$elementContaine4 = _this$elementContaine4.getPaymentContext()) === null || _this$elementContaine4 === void 0 || (_this$elementContaine4 = _this$elementContaine4.paymentSessionObj) === null || _this$elementContaine4 === void 0 ? void 0 : _this$elementContaine4.clientId,
             paymentMethodType: (_this$elementContaine5 = this.elementContainer) === null || _this$elementContaine5 === void 0 || (_this$elementContaine5 = _this$elementContaine5.getPaymentContext()) === null || _this$elementContaine5 === void 0 || (_this$elementContaine5 = _this$elementContaine5.paymentSessionObj) === null || _this$elementContaine5 === void 0 || (_this$elementContaine5 = _this$elementContaine5.paymentMethodInfoView) === null || _this$elementContaine5 === void 0 ? void 0 : _this$elementContaine5.paymentMethodType
           },
-          appearance: paymentContext === null || paymentContext === void 0 ? void 0 : paymentContext.displayInfo.appearance,
+          appearance: finalAppearance,
           sessionResult: paymentContext === null || paymentContext === void 0 ? void 0 : paymentContext.paymentSessionObj,
           notRedirectAfterComplete: (extraParam === null || extraParam === void 0 ? void 0 : extraParam.notRedirectAfterComplete) === true,
           merchantAppointParam: extraParam === null || extraParam === void 0 ? void 0 : extraParam.merchantAppointParam,
@@ -344,6 +379,7 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
   }, {
     key: "generateIframeSrc",
     value: function generateIframeSrc(_ref3) {
+      var _this$options3;
       var link = _ref3.link,
         instanceId = _ref3.instanceId;
       this.instanceId = instanceId;
@@ -351,12 +387,15 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
         paymentSession = _ref4.paymentSession,
         paymentSessionObj = _ref4.paymentSessionObj,
         sdkMetaData = _ref4.sdkMetaData;
-      var _this$options = this.options,
-        environment = _this$options.env.environment,
-        analytics = _this$options.analytics,
-        locale = _this$options.locale;
+      var _this$options2 = this.options,
+        environment = _this$options2.env.environment,
+        analytics = _this$options2.analytics,
+        locale = _this$options2.locale;
       var _ref5 = paymentSessionObj || {},
         extendInfo = _ref5.extendInfo;
+      // 预览模式下，若为 'mobile' 需要让 iframe 以 popup（MobileElement）形态渲染
+      var previewMode = (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.preview;
+      var renderDisplayType = previewMode === 'mobile' ? DisplayTypeEnum.popup : DisplayTypeEnum.inline;
       var url = _generateIframeSrc({
         paymentSession: paymentSession,
         paymentSessionObj: paymentSessionObj,
@@ -366,7 +405,8 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
         link: link,
         appVersion: sdkMetaData === null || sdkMetaData === void 0 ? void 0 : sdkMetaData.webAppVersion,
         pageUrl: isExpressCheckout(extendInfo) ? ELEMENT_PAGE_URL.EXPRESS_CHECKOUT : ELEMENT_PAGE_URL.ELEMENT_PAYMENT,
-        instanceId: instanceId
+        instanceId: instanceId,
+        renderDisplayType: renderDisplayType
       });
       this.setElementUrl(url);
       return url;
@@ -376,8 +416,9 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
     value: function () {
       var _obtainData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
         var _paymentSessionObj$co,
+          _this$options5,
           _this3 = this;
-        var requestService, _this$elementContaine7, paymentSession, paymentSessionObj, displayInfo, _displayInfo, debugProps, _this$options2, environment, locale, _ref6, paymentSessionConfig, hostSign, isConnect, LOCAL_MOCK, _queryParse, appType, terminalType, generateActionQueryPromise, generateOneAccountQueryPromise, _yield$Promise$all, _yield$Promise$all2, originActionQueryResult, originOneAccountQueryResult;
+        var requestService, _this$elementContaine7, paymentSession, paymentSessionObj, displayInfo, _displayInfo, debugProps, _this$options4, environment, locale, _ref6, paymentSessionConfig, hostSign, isConnect, LOCAL_MOCK, previewMode, IS_PREVIEW, SHOULD_USE_MOCK, _queryParse, appType, terminalType, generateActionQueryPromise, generateOneAccountQueryPromise, _yield$Promise$all, _yield$Promise$all2, originActionQueryResult, originOneAccountQueryResult;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -385,11 +426,14 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
               _this$elementContaine7 = this.elementContainer.getPaymentContext(), paymentSession = _this$elementContaine7.paymentSession, paymentSessionObj = _this$elementContaine7.paymentSessionObj, displayInfo = _this$elementContaine7.displayInfo;
               _displayInfo = displayInfo;
               debugProps = _displayInfo.debugProps;
-              _this$options2 = this.options, environment = _this$options2.env.environment, locale = _this$options2.locale;
+              _this$options4 = this.options, environment = _this$options4.env.environment, locale = _this$options4.locale;
               _ref6 = paymentSessionObj || {}, paymentSessionConfig = _ref6.paymentSessionConfig;
               hostSign = paymentSession.split('&&')[1] || '';
               isConnect = paymentSessionObj === null || paymentSessionObj === void 0 || (_paymentSessionObj$co = paymentSessionObj.connectFactor) === null || _paymentSessionObj$co === void 0 ? void 0 : _paymentSessionObj$co.enableConnect;
-              LOCAL_MOCK = (debugProps === null || debugProps === void 0 ? void 0 : debugProps.isDebug) && (debugProps === null || debugProps === void 0 ? void 0 : debugProps.local_mock);
+              LOCAL_MOCK = (debugProps === null || debugProps === void 0 ? void 0 : debugProps.isDebug) && (debugProps === null || debugProps === void 0 ? void 0 : debugProps.local_mock); // 兼容三种预览开关取值：true / 'web' / 'mobile'
+              previewMode = (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.preview;
+              IS_PREVIEW = previewMode === true || previewMode === 'web' || previewMode === 'mobile';
+              SHOULD_USE_MOCK = LOCAL_MOCK || IS_PREVIEW;
               _queryParse = queryParse(this.getElementUrl()), appType = _queryParse.appType;
               terminalType = isElementPad() ? 'WEB' : appType ? 'APP' : isElementPC() ? 'WEB' : 'WAP';
               /**
@@ -401,10 +445,14 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
               generateActionQueryPromise = function generateActionQueryPromise() {
                 return new Promise(function (resolve, reject) {
                   var _displayInfo$merchant;
-                  // 本地mock模式：直接返回预设的sdkAction，用于开发调试
-                  if (LOCAL_MOCK) {
+                  if (SHOULD_USE_MOCK) {
                     setTimeout(function () {
-                      resolve(sdkAction);
+                      if (IS_PREVIEW) {
+                        var mockData = _this3.buildPreviewMockData(sdkAction);
+                        resolve(mockData);
+                      } else {
+                        resolve(sdkAction);
+                      }
                     }, 100);
                     return;
                   }
@@ -422,6 +470,12 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
                     }
                   };
 
+                  // 自定义主题模版（APR_ 前缀 AppearanceID）：额外传递 appearanceId
+                  var mountAppearance = displayInfo === null || displayInfo === void 0 ? void 0 : displayInfo.appearance;
+                  var isAppearanceId = typeof (mountAppearance === null || mountAppearance === void 0 ? void 0 : mountAppearance.theme) === 'string' && mountAppearance.theme.startsWith('APR_');
+                  if (isAppearanceId) {
+                    sdkRequestData.appearanceId = mountAppearance.theme;
+                  }
                   // 可选参数：商户指定的储值卡信息
                   if (displayInfo !== null && displayInfo !== void 0 && (_displayInfo$merchant = displayInfo.merchantAppointParam) !== null && _displayInfo$merchant !== void 0 && _displayInfo$merchant.storedCard) {
                     sdkRequestData.merchantAppointParam = displayInfo.merchantAppointParam;
@@ -486,8 +540,7 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
                */
               generateOneAccountQueryPromise = function generateOneAccountQueryPromise() {
                 return new Promise(function (resolve, reject) {
-                  // 本地mock模式：直接返回预设的oneAccount数据，用于开发调试
-                  if (LOCAL_MOCK) {
+                  if (SHOULD_USE_MOCK) {
                     setTimeout(function () {
                       resolve(oneAccount);
                     }, 100);
@@ -523,9 +576,9 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
                   });
                 });
               };
-              _context3.next = 15;
+              _context3.next = 18;
               return Promise.all(isConnect ? [generateActionQueryPromise(), generateOneAccountQueryPromise()] : [generateActionQueryPromise()]);
-            case 15:
+            case 18:
               _yield$Promise$all = _context3.sent;
               _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
               originActionQueryResult = _yield$Promise$all2[0];
@@ -538,7 +591,7 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
                 originActionQueryResult: originActionQueryResult,
                 originOneAccountQueryResult: originOneAccountQueryResult
               });
-            case 21:
+            case 24:
             case "end":
               return _context3.stop();
           }
@@ -549,6 +602,28 @@ var PaymentProcessor = /*#__PURE__*/function (_BaseElementProcessor) {
       }
       return obtainData;
     }()
+    /**
+     * 构建预览模式的 mock 数据
+     * 合并 mock.ts 的硬编码数据和 mount 传入的 paymentMethods 配置
+     */
+  }, {
+    key: "buildPreviewMockData",
+    value: function buildPreviewMockData(baseMock) {
+      var _this$elementContaine8 = this.elementContainer.getPaymentContext(),
+        displayInfo = _this$elementContaine8.displayInfo;
+      var mountOptions = displayInfo;
+      var paymentMethodsConfig = mountOptions === null || mountOptions === void 0 ? void 0 : mountOptions.previewPaymentMethods;
+
+      // 深拷贝 mock 数据，避免修改原始对象
+      var result = JSON.parse(JSON.stringify(baseMock));
+
+      // 转换 paymentMethods 配置为内部格式
+      var convertedMethods = convertPaymentMethods(paymentMethodsConfig);
+
+      // 替换 paymentMethods
+      result.paymentMethods = convertedMethods;
+      return result;
+    }
   }, {
     key: "getValue",
     value: function getValue() {

package/esm/core/component/element/mock.js

@@ -153,7 +153,7 @@ export var sdkAction1 = {
   }, {
     antomPage: 'paymentMetaPage',
     category: 'AC_WALLET',
-    expressCheckout: true,
+    expressCheckout: false,
     icon: 'https://cdn.marmot-cloud.com/storage/2024/05/15/5b829130-42d9-46e7-a23d-6774f7352900.svg',
     iconName: 'Alipay',
     interActionType: 'REDIRECT',

package/esm/core/component/element/type.d.ts

@@ -149,7 +149,7 @@ type CompatibleVariables<T extends Record<string, string>> = {
 export interface PaymentMountOptions extends BaseMountOptions {
     type: ElementType.payment;
     appearance?: {
-        theme?: ThemeType;
+        theme?: ThemeType | `APR_${string}`;
         layout?: {
             type: PaymentElementLayout;
         };
@@ -192,6 +192,54 @@ export interface PaymentMountOptions extends BaseMountOptions {
     };
     notRedirectAfterComplete?: boolean;
     merchantAppointParam?: IMerchantAppointParam;
+    /**
+     * 支付方式配置
+     *
+     * 使用说明：
+     * - preview: true 时生效，用于配置预览展示的支付方式和外观
+     * - preview: false/undefined 时，此配置被忽略，支付方式来自后端 sdkAction.query 接口
+     */
+    previewPaymentMethods?: {
+        /**
+         * 极速支付配置
+         */
+        expressCheckout?: {
+            enabled: boolean;
+            methods?: {
+                /**
+                 * 支付方式显示名称，如 "Apple Pay"
+                 */
+                paymentMethodName: string;
+                /**
+                 * 支付方式类型，如 "APPLEPAY"
+                 */
+                paymentMethodType: string;
+            }[];
+        };
+        /**
+         * 支持的支付方式列表
+         * 数组顺序即为前端展示顺序
+         */
+        supportedMethods?: {
+            /**
+             * 支付方式显示名称，如 "CARD", "AlipayHK"
+             */
+            paymentMethodName: string;
+            /**
+             * 支付方式类型，如 "VISA", "ALIPAY_HK"
+             */
+            paymentMethodType: string;
+            /**
+             * 支付方式图标 URL
+             */
+            logoUrl?: string;
+        }[];
+        /**
+         * 推荐支付方式
+         * 值为 paymentMethodType，匹配的支付方式会被标记为 recommend
+         */
+        topping?: string;
+    };
 }
 export declare enum AddressEventCallbackName {
     SHIPPING_CHANGE = "SHIPPING_CHANGE"
@@ -441,6 +489,15 @@ export interface IElementOptions {
         onStartLoading: () => void;
         onEndLoading: () => void;
     };
+    /**
+     * 预览模式开关
+     * - true / 'web': 跳过真实 API 请求，使用 mock 数据，按 WebElement（inline）方式渲染（向后兼容，等同于 'web'）
+     * - 'mobile': 跳过真实 API 请求，使用 mock 数据，按 MobileElement（popup）方式渲染，用于 mobileElement 降级预览
+     * - false / undefined: 发起真实请求（默认行为）
+     *
+     * 使用场景：B 端配置后台预览，C 端生产环境不应使用
+     */
+    preview?: boolean | 'web' | 'mobile';
 }
 export interface IElementProcessors {
     [ElementType.auth]: AuthProcessor;

package/esm/core/component/element/util.d.ts

@@ -1,5 +1,5 @@
 import { IElementStatus } from '../../../foundation';
-import { CashierSdkActionQueryResult, Ianalytics, IPaymentSessionMetaData } from '../../../types';
+import { CashierSdkActionQueryResult, DisplayTypeEnum, Ianalytics, IPaymentSessionMetaData } from '../../../types';
 import { ContainerController } from './elementContainerService/containerService';
 import { ELEMENT_ENVIRONMENT_TYPE, EventCallbackCode, IElementOptions, IToastOptions } from './type';
 export declare const formatElementOption: (options: IElementOptions) => {
@@ -19,6 +19,7 @@ export declare const formatElementOption: (options: IElementOptions) => {
         onStartLoading: () => void;
         onEndLoading: () => void;
     };
+    preview?: boolean | "mobile" | "web";
 };
 export declare const validateElementOption: (options: IElementOptions) => {
     isValid: boolean;
@@ -48,7 +49,7 @@ export declare function checkCanUpdate({ status, paymentContainerService, newPay
     newPaymentSessionData: string;
     oldPaymentSessionData: string;
 }): boolean;
-export declare function generateIframeSrc({ paymentSessionObj, paymentSession, instanceId, environment, appVersion, analytics, locale, pageUrl, link, }: {
+export declare function generateIframeSrc({ paymentSessionObj, paymentSession, instanceId, environment, appVersion, analytics, locale, pageUrl, link, renderDisplayType, }: {
     paymentSessionObj: IPaymentSessionMetaData;
     paymentSession: string;
     environment: string;
@@ -58,6 +59,12 @@ export declare function generateIframeSrc({ paymentSessionObj, paymentSession, i
     pageUrl: string;
     appVersion: string;
     link?: string;
+    /**
+     * iframe 中 checkout-v2 的渲染形态。
+     * - inline（默认）: WebElement 渲染
+     * - popup: MobileElement 渲染（用于 mobileElement 降级预览）
+     */
+    renderDisplayType?: DisplayTypeEnum;
 }): string;
 export declare function handleRedirect(data: any, fromFastSdk: boolean, eventCallback: ({ code, message }: {
     code: any;

package/esm/core/component/element/util.js

@@ -138,7 +138,8 @@ export function generateIframeSrc(_ref3) {
     analytics = _ref3.analytics,
     locale = _ref3.locale,
     pageUrl = _ref3.pageUrl,
-    link = _ref3.link;
+    link = _ref3.link,
+    renderDisplayType = _ref3.renderDisplayType;
   var componentSign = getComponentSign(paymentSessionObj);
   var productSceneVersion = (paymentSessionObj === null || paymentSessionObj === void 0 || (_paymentSessionObj$pa = paymentSessionObj.paymentSessionConfig) === null || _paymentSessionObj$pa === void 0 ? void 0 : _paymentSessionObj$pa.productSceneVersion) || '';
   var productScene = (paymentSessionObj === null || paymentSessionObj === void 0 || (_paymentSessionObj$pa2 = paymentSessionObj.paymentSessionConfig) === null || _paymentSessionObj$pa2 === void 0 ? void 0 : _paymentSessionObj$pa2.productScene) || '';
@@ -151,7 +152,7 @@ export function generateIframeSrc(_ref3) {
     link = "".concat(baseUrl[_env]).concat(pageUrl);
   }
   var _getIframeUrl = getIframeUrl({
-      renderDisplayType: DisplayTypeEnum.inline,
+      renderDisplayType: renderDisplayType !== null && renderDisplayType !== void 0 ? renderDisplayType : DisplayTypeEnum.inline,
       componentSign: componentSign,
       analytics: analytics,
       productScene: productScene,

package/esm/modern/index.js

@@ -15,7 +15,7 @@ import { createLoader } from '@antglobal/create-sdk-loader';
 
 import { stageName } from "./stageName";
 var SDKURL = {
-  DEV: "https://sdk-dev.marmot-cloud.com/package/ams-checkout/".concat("2.0.19", "/ams-checkout.js"),
+  DEV: "https://sdk-dev.marmot-cloud.com/package/ams-checkout/".concat("2.0.20", "/ams-checkout.js"),
   LOCAL: "http://localhost:3000/ams-checkout.min.js",
   PROD: 'https://js.antom.com/v2/ams-checkout.js'
 };