@alipay/ams-checkout 0.0.1694675458-dev.0 → 0.0.1694675458-dev.1

package/esm/config/request.js

@@ -12,8 +12,8 @@ var _queryParse = queryParse(),
   groupId = _queryParse.groupId,
   host = _queryParse.requestHost;
 export var requestHost = {
-  local: 'http://imgs-1164.gz00b.dev.alipay.net/mgw.htm',
-  dev: host || 'http://imgs-1164.gz00b.dev.alipay.net/mgw.htm',
+  local: 'http://imgs-6517.sggz00b.dev.alipay.net/mgw.htm',
+  dev: host || 'http://imgs-6517.sggz00b.dev.alipay.net/mgw.htm',
   sit: host || 'http://imgs-9.sggz00a.test.alipay.net/mgw.htm',
   pre: 'https://imgs-sea-pre.alipay.com/mgw.htm',
   prod: 'https://imgs-sea-global.alipay.com/mgw.htm',
@@ -22,7 +22,7 @@ export var requestHost = {
 export var clientId = '5J5Y8X4E2Y25GR00690';
 export var tntInstId = 'ALIPW3SG';
 export var appId = 'ANTOM_PAYMENT_WEB';
-export var sofaId = groupId || 'GROUP_20230523202227';
+export var sofaId = groupId || 'GROUP_20230913102142';
 export var hostSignMap = function hostSignMap(hostSign, env) {
   var map = {
     SG: 'https://imgs-sea-global.alipay.com/mgw.htm',

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

@@ -1,12 +1,5 @@
-/**
- * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), the rights to use, copy, modify, merge, and/or distribute the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
- * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
- */
 import ComponentApp from '../../plugin/component';
-import { IcreateComponent, IoptionsParams, Iselector } from '../../types';
+import { IcreateComponent, IoptionsParams, Iselector, Isubmit } from '../../types';
 import CoreInstance from '../instance/index';
 export declare class AMSComponent extends CoreInstance {
     _componentApp: ComponentApp;
@@ -15,17 +8,17 @@ export declare class AMSComponent extends CoreInstance {
     private pluginAppendIframe;
     /**
      * @description Create component application
-     * @param params - The data source created by the component, necessary paymentSessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
+     * @param params - The data source created by the component, necessary sessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
      */
     createComponent(params: IcreateComponent): Promise<void>;
     /**
      * @description Create and render components in the specified element area
-     * @param params - The data source created by the component, necessary paymentSessionData, necessary element selector IDs, optional appearance configurations, and refer to the documentation for other parameters and detailed information.
+     * @param params - The data source created by the component, necessary sessionData, necessary element selector IDs, optional appearance configurations, and refer to the documentation for other parameters and detailed information.
      */
     mountComponent(params: IcreateComponent, selector: Iselector): Promise<void>;
     /**
      * @description Execute payment submission process
      * @description - When using your own payment button, you can execute the submit payment process by actively calling this function.
      */
-    submit(): void;
+    submit(data?: Isubmit): Promise<unknown>;
 }

package/esm/core/component/index.js

@@ -25,7 +25,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
-
+import { v4 as uuid } from 'uuid';
 import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
 import ComponentApp from "../../plugin/component";
 import { componentSignEnum, modeEnum, networkModeEnum, productSceneEnum, renderDisplayTypeEnum } from "../../types";
@@ -41,12 +41,12 @@ var getComponentSign = function getComponentSign(params) {
     paymentMethodCategoryType = _params$paymentSessio4 === void 0 ? '' : _params$paymentSessio4;
   return productScene && paymentMethodCategoryType ? "".concat(productScene, "_").concat(paymentMethodCategoryType) : componentSignEnum.NONE;
 };
-var parsePaymentSessionData = function parsePaymentSessionData(paymentSessionData) {
+var parseSessionData = function parseSessionData(sessionData) {
   try {
-    return [JSON.parse(atob(paymentSessionData.split('&&')[3])), paymentSessionData.split('&&').slice(0, 3).join('&&')];
+    return [JSON.parse(atob(sessionData.split('&&')[3])), sessionData.split('&&').slice(0, 3).join('&&')];
   } catch (error) {
-    console.error('Parsing paymentSessionData is abnormal and may affect the payment link. Please ensure to use the new version of SDK.');
-    return [{}, paymentSessionData];
+    console.error('Parsing sessionData is abnormal and may affect the payment link. Please ensure to use the new version of SDK.');
+    return [{}, sessionData];
   }
 };
 
@@ -59,23 +59,23 @@ var resetEasyPaySceneVersion = function resetEasyPaySceneVersion(parseData) {
     }
   }
 };
-var handlePaymentSessionData = function handlePaymentSessionData(originPaymentSessionData) {
-  var _parsePaymentSessionD = parsePaymentSessionData(originPaymentSessionData),
-    _parsePaymentSessionD2 = _slicedToArray(_parsePaymentSessionD, 2),
-    parseData = _parsePaymentSessionD2[0],
-    paymentSessionData = _parsePaymentSessionD2[1];
+var handleSessionData = function handleSessionData(originSessionData) {
+  var _parseSessionData = parseSessionData(originSessionData),
+    _parseSessionData2 = _slicedToArray(_parseSessionData, 2),
+    parseData = _parseSessionData2[0],
+    sessionData = _parseSessionData2[1];
   resetEasyPaySceneVersion(parseData);
-  return [parseData, paymentSessionData];
+  return [parseData, sessionData];
 };
 var handleParams = function handleParams(params) {
   var _params = Object.assign({
     paymentSessionMetaData: {},
     renderDisplayType: renderDisplayTypeEnum.popup
   }, params);
-  var _handlePaymentSession = handlePaymentSessionData(_params.paymentSessionData),
-    _handlePaymentSession2 = _slicedToArray(_handlePaymentSession, 2),
-    parseData = _handlePaymentSession2[0],
-    paymentSessionData = _handlePaymentSession2[1];
+  var _handleSessionData = handleSessionData(_params.sessionData),
+    _handleSessionData2 = _slicedToArray(_handleSessionData, 2),
+    parseData = _handleSessionData2[0],
+    sessionData = _handleSessionData2[1];
   var componentSign = getComponentSign(parseData);
   if (componentSign === componentSignEnum.NONE) {
     // eslint-disable-next-line prefer-promise-reject-errors
@@ -84,7 +84,7 @@ var handleParams = function handleParams(params) {
       message: "Abnormal response data, interface failure, or unsupported payment method"
     });
   }
-  _params.paymentSessionData = paymentSessionData;
+  _params.sessionData = sessionData;
   _params.paymentSessionMetaData = parseData;
   return Promise.resolve({
     iframeNodesParams: _params,
@@ -119,7 +119,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         selector: selector,
         renderDisplayType: renderDisplayType
       }, params);
-      if (_params && !_params.paymentSessionData) {
+      if (_params && !_params.sessionData) {
         return Promise.reject(ERRORMESSAGE.CREATEPAYMENT_PARAMETER_ERROR);
       }
       if (this.options.networkMode === networkModeEnum.proxy) {
@@ -140,7 +140,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
 
     /**
      * @description Create component application
-     * @param params - The data source created by the component, necessary paymentSessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
+     * @param params - The data source created by the component, necessary sessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
      */
   }, {
     key: "createComponent",
@@ -160,7 +160,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     }
     /**
      * @description Create and render components in the specified element area
-     * @param params - The data source created by the component, necessary paymentSessionData, necessary element selector IDs, optional appearance configurations, and refer to the documentation for other parameters and detailed information.
+     * @param params - The data source created by the component, necessary sessionData, necessary element selector IDs, optional appearance configurations, and refer to the documentation for other parameters and detailed information.
      */
   }, {
     key: "mountComponent",
@@ -185,17 +185,26 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
      */
   }, {
     key: "submit",
-    value: function submit() {
-      try {
-        this._componentApp.dispatchToApp({
-          context: {
-            event: 'submitPay',
-            data: {}
-          }
-        });
-      } catch (error) {
-        console.error(error);
-      }
+    value: function submit(data) {
+      var _this4 = this;
+      return new Promise(function (resolve, reject) {
+        try {
+          var eventCallbackId = uuid();
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          _this4._eventCenter.once(eventCallbackId, function (_data) {
+            resolve(_data);
+          });
+          _this4._componentApp.dispatchToApp({
+            context: {
+              event: 'submitPay',
+              eventCallbackId: eventCallbackId,
+              data: data
+            }
+          });
+        } catch (error) {
+          reject(error);
+        }
+      });
     }
   }]);
   return AMSComponent;

package/esm/core/drop-in/index.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), the rights to use, copy, modify, merge, and/or distribute the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
- * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
- */
 import { IcreatePaymentParams, IoptionsParams } from '../../types';
 export declare const mixinDropInConstructor: (options: IoptionsParams, context: any) => void;
 /**

package/esm/core/drop-in/index.js

@@ -8,7 +8,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { BASEPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
 import CheckoutApp from "../../plugin/drop-in";
 import { messageName, networkModeEnum } from "../../types";
@@ -49,8 +49,8 @@ export var createPayment = function createPayment(params) {
 export var confirmPayment = function confirmPayment(result) {
   var _this2 = this;
   return new Promise(function (resolve, reject) {
-    _this2.eventCenter.once('onRedirect', function (playload) {
-      _this2._redirect(playload).then(function () {
+    _this2.eventCenter.once('onRedirect', function (payload) {
+      _this2._redirect(payload).then(function () {
         resolve();
       }).catch(function (err) {
         reject(err);
@@ -73,21 +73,21 @@ export var confirmPayment = function confirmPayment(result) {
  */
 export var _subscribeFromCheckoutPlugin = function _subscribeFromCheckoutPlugin() {
   var _this3 = this;
-  var eventKeyMap = new Map([[EVENT.error.name, function (playload) {
-    _this3.eventCenter.emit(EVENT.error.name, playload.context.data);
-  }], [EVENT.ready.name, function (playload) {
-    _this3.eventCenter.emit(EVENT.ready.name, playload.context.data);
-  }], [EVENT.redirect.name, function (playload) {
-    _this3.eventCenter.emit(EVENT.redirect.name, playload.context.data);
-  }], [EVENT.paymentMethodSelected.name, function (playload) {
-    _this3.checkoutState.paymentMethodType = playload.context.data.paymentMethodType;
+  var eventKeyMap = new Map([[EVENT.error.name, function (payload) {
+    _this3.eventCenter.emit(EVENT.error.name, payload.context.data);
+  }], [EVENT.ready.name, function (payload) {
+    _this3.eventCenter.emit(EVENT.ready.name, payload.context.data);
+  }], [EVENT.redirect.name, function (payload) {
+    _this3.eventCenter.emit(EVENT.redirect.name, payload.context.data);
+  }], [EVENT.paymentMethodSelected.name, function (payload) {
+    _this3.checkoutState.paymentMethodType = payload.context.data.paymentMethodType;
     _this3.eventCenter.emit(EVENT.paymentMethodSelected.name, {
-      paymentMethodType: playload.context.data.paymentMethodType
+      paymentMethodType: payload.context.data.paymentMethodType
     });
-  }], [EVENT.sizeChanged.name, function (playload) {
-    _this3.eventCenter.emit(EVENT.sizeChanged.name, playload.context.data);
-  }], [EVENT.log.name, function (playload) {
-    _this3.eventCenter.emit(EVENT.log.name, playload.context.data);
+  }], [EVENT.sizeChanged.name, function (payload) {
+    _this3.eventCenter.emit(EVENT.sizeChanged.name, payload.context.data);
+  }], [EVENT.log.name, function (payload) {
+    _this3.eventCenter.emit(EVENT.log.name, payload.context.data);
   }]]);
   var _iterator = _createForOfIteratorHelper(eventKeyMap.keys()),
     _step;

package/esm/core/instance/index.js

@@ -15,6 +15,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { v4 as uuid } from 'uuid';
 import { ERRORMESSAGE, EVENT } from "../../constant";
 import { environmentEnum, modeEnum, networkModeEnum, osTypeEnum, terminalTypeEnum } from "../../types/index";

package/esm/plugin/component/cashierApp.d.ts

@@ -1,5 +1,6 @@
 import { componentSignEnum, Ianalytics } from '../../types';
-export declare const getAppPath: (environment: string | undefined, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
+import { renderDisplayTypeEnum } from '../../types/index';
+export declare const getAppPath: (environment: string, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
 export declare const getAppDomain: (domainParams: {
     environment: string;
     appVersion: string;
@@ -16,6 +17,7 @@ export declare const getIframeUrl: (iframeParams: {
     extendInfo: string;
     locale: string;
     instanceId: string;
+    renderDisplayType: renderDisplayTypeEnum;
 }) => string;
 /**
  * @description Create iframe

package/esm/plugin/component/cashierApp.js

@@ -22,7 +22,7 @@ var getAppVersion = function getAppVersion(_extendInfo) {
 };
 var getFinalProductSceneVersion = function getFinalProductSceneVersion(componentSign, productSceneVersion) {
   var _signSupportMap;
-  var signSupportMap = (_signSupportMap = {}, _defineProperty(_signSupportMap, componentSignEnum.NONE, ['']), _defineProperty(_signSupportMap, componentSignEnum.AUTO_DEBIT_WALLET, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_BANK, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_CARD, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.EASY_PAY_WALLET, ['1.0', '2.0']), _signSupportMap);
+  var signSupportMap = (_signSupportMap = {}, _defineProperty(_signSupportMap, componentSignEnum.NONE, ['']), _defineProperty(_signSupportMap, componentSignEnum.AUTO_DEBIT_WALLET, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_BANK, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.CASHIER_PAYMENT_CARD, ['1.0']), _defineProperty(_signSupportMap, componentSignEnum.EASY_PAY_WALLET, ['1.0', '2.0']), _defineProperty(_signSupportMap, componentSignEnum.VAULTING_CARD, ['1.0']), _signSupportMap);
   var supportProductSceneVersion = signSupportMap[componentSign];
   // 从左到右，从旧到新
   var isSupport = supportProductSceneVersion.find(function (it) {
@@ -69,7 +69,8 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     appVersion = iframeParams.appVersion,
     extendInfo = iframeParams.extendInfo,
     locale = iframeParams.locale,
-    instanceId = iframeParams.instanceId;
+    instanceId = iframeParams.instanceId,
+    renderDisplayType = iframeParams.renderDisplayType;
   var path = getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo || '');
   var initialScale = 1;
   var scale = getViewPort('initial-scale') || initialScale;
@@ -80,8 +81,10 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     requestHost = _queryParse$requestHo === void 0 ? '' : _queryParse$requestHo,
     _queryParse$groupId = _queryParse.groupId,
     groupId = _queryParse$groupId === void 0 ? '' : _queryParse$groupId,
-    LOCAL_MOCK = _queryParse.LOCAL_MOCK;
+    LOCAL_MOCK = _queryParse.LOCAL_MOCK,
+    _displayType = _queryParse._displayType;
   var urlParams = Object.assign({}, {
+    displayType: renderDisplayType,
     locale: locale,
     scale: scale,
     instanceId: instanceId,
@@ -94,6 +97,7 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
   if (groupId) urlParams.groupId = groupId;
   if (environment === 'light_sandbox' || _light_sandbox === 'true') urlParams.sandbox = 'true';
   if (environment === 'sandbox' || _sandbox === 'true') urlParams.shadow = 'true';
+  if (_displayType) urlParams.displayType = _displayType;
   var locationSearch = serialize(urlParams);
   return "".concat(path, "?").concat(locationSearch);
 };

package/esm/plugin/component/component.inline.style.d.ts

@@ -8,4 +8,4 @@
 import { platformEnum } from '../../types';
 export declare const inlineComponentAddCss: () => void;
 export declare const addInlineLoading: (_selector: HTMLDivElement, platform: platformEnum) => void;
-export declare const createInlineBaseElement: (selector: string) => HTMLDivElement | undefined;
+export declare const createInlineBaseElement: (selector: string) => HTMLDivElement;

package/esm/plugin/component/component.popup.style.d.ts

@@ -1,6 +1,6 @@
 import { platformEnum } from '../../types';
 export declare const componentAddCSS: () => void;
-export declare const createBaseElement: (platform: platformEnum, closeBtnFunc: () => void) => HTMLDivElement | undefined;
+export declare const createBaseElement: (platform: platformEnum, closeBtnFunc: () => void) => HTMLDivElement;
 export declare const createCloseBtn: (platform: platformEnum, closeBtnFunc: () => void) => void;
 export declare const createRetentionPopup: (platform: platformEnum, remainBtnFunc: () => void, leaveBtnFunc: () => void) => void;
 export declare const hideRetentionPopup: () => void;

package/esm/plugin/component/component.popup.style.js

@@ -113,6 +113,8 @@ export var addPopupLoading = function addPopupLoading() {
   var body = document.getElementsByTagName('body')[0];
   body === null || body === void 0 ? void 0 : body.appendChild(loading);
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var handleDeclareInfo = function handleDeclareInfo(_ref) {
   var _ref$closeDialogData = _ref.closeDialogData,
     closeDialogData = _ref$closeDialogData === void 0 ? {} : _ref$closeDialogData;

package/esm/plugin/component/index.d.ts

@@ -1,5 +1,5 @@
 import type AMSCheckout from '../../core/instance';
-import type { eventPlayload, IappendIframeNodesParams, Iselector } from '../../types';
+import type { eventPayload, eventPayloadContext, IappendIframeNodesParams, Iselector } from '../../types';
 import { componentSignEnum, platformEnum, renderDisplayTypeEnum } from '../../types';
 type IrenderFuncParams = (context: ComponentApp, selector: Iselector, renderDisplayType: renderDisplayTypeEnum) => Promise<void>;
 export default class ComponentApp {
@@ -7,7 +7,7 @@ export default class ComponentApp {
     AMSSDK: AMSCheckout;
     platform: platformEnum;
     _performanceData: any[];
-    _loadAppPromiseResolve: ((value: Boolean) => void) | null;
+    _loadAppPromiseResolve: ((value: boolean) => void) | null;
     _isInitComponent: boolean;
     private appDomain;
     private createIframeNode;
@@ -32,6 +32,7 @@ export default class ComponentApp {
      * @description Set the rendering capability of the cashier plug-in. Different technology stacks have some differences in the packaging and use of rendering functions
      */
     setRender(renderFunc: IrenderFuncParams): void;
+    initAPSecurity(): void;
     /**
      * @description render iframe content
      */
@@ -58,7 +59,7 @@ export default class ComponentApp {
     /**
      * @description Processing messages from iframe
      */
-    _handleAppMessage(data: eventPlayload): void;
+    _handleAppMessage(data: eventPayload): void;
     private handleSizeChanged;
     private handleRedirect;
     private handleDeclareInfo;
@@ -66,15 +67,12 @@ export default class ComponentApp {
     /**
      * @description Send message to SDK
      */
-    dispatchToSDK(event: string, data: any): void;
+    dispatchToSDK(event: string, data: any, eventCallbackId?: string): void;
     /**
      * @description Send message to iframe
      */
     dispatchToApp(payload: {
-        context: {
-            event: string;
-            data: any;
-        };
+        context: eventPayloadContext;
     }): any;
     /**
      * @description Subscribe to messages from SDK

package/esm/plugin/component/index.js

@@ -15,14 +15,22 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
 /* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID } from "../../constant";
 import { queryPaymentInfo } from "../../service";
 import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
-import { getType, isJsonString, isPC } from "../../util";
+import { getType, isJsonString, isPC, queryParse } from "../../util";
 import { isLocalMock } from "../../util/mock";
 import { createIframe, getAppDomain, getIframeUrl } from "./cashierApp";
 import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
 import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, handleDeclareInfo as _handleDeclareInfo, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup } from "./component.popup.style";
+import APDID from '@alipay/jshield-apdid';
+import { getSecurityHost, getAppname } from "../../util/security";
+var _ref = queryParse() || {},
+  preinit = _ref.preinit,
+  rebuild = _ref.rebuild,
+  scene = _ref.scene,
+  region = _ref.region;
 var _window = window,
   innerHeight = _window.innerHeight;
 var ComponentApp = /*#__PURE__*/function () {
@@ -86,6 +94,29 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function setRender(renderFunc) {
       this.createIframeNode = renderFunc;
     }
+  }, {
+    key: "initAPSecurity",
+    value: function initAPSecurity() {
+      var _this$_renderParams, _this$_renderParams$p;
+      if (componentSignEnum.CASHIER_PAYMENT_CARD !== this._componentSign) {
+        return;
+      }
+      var securityConfig = (_this$_renderParams = this._renderParams) === null || _this$_renderParams === void 0 ? void 0 : (_this$_renderParams$p = _this$_renderParams.paymentSessionMetaData) === null || _this$_renderParams$p === void 0 ? void 0 : _this$_renderParams$p.securityConfig;
+      if (!securityConfig) {
+        return;
+      }
+      var appName = securityConfig === null || securityConfig === void 0 ? void 0 : securityConfig.appName;
+      var h5gateway = securityConfig === null || securityConfig === void 0 ? void 0 : securityConfig.h5gateway;
+      if (preinit === 'true' || rebuild === 'true') {
+        appName = getAppname(scene);
+        h5gateway = getSecurityHost(region);
+      }
+      APDID.initToken(appName, {
+        host: h5gateway
+      }, function (success, tokenResult, msg) {
+        console.log("initToken result tokenResult", JSON.stringify(tokenResult));
+      });
+    }
 
     /**
      * @description render iframe content
@@ -104,6 +135,7 @@ var ComponentApp = /*#__PURE__*/function () {
       if (renderParams !== null && renderParams !== void 0 && renderParams.selector) this._selector = renderParams.selector;
       this._renderDisplayType = renderParams.renderDisplayType;
       var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
+      this.initAPSecurity();
       this._performanceData.push({
         key: 'sdk_create_component',
         value: Date.now()
@@ -179,32 +211,45 @@ var ComponentApp = /*#__PURE__*/function () {
         value: Date.now()
       });
       this._actionQueryPromise = new Promise(function (resolve, reject) {
-        var _this3$_renderParams, _this3$_renderParams2, _this3$_renderParams3;
+        var _this3$_renderParams, _this3$_renderParams2, _this3$_renderParams3, _this3$_renderParams4, _this3$_renderParams5;
         var params = {
-          paymentSessionData: _this3._renderParams && ((_this3$_renderParams = _this3._renderParams) === null || _this3$_renderParams === void 0 ? void 0 : _this3$_renderParams.paymentSessionData) || '',
+          paymentSessionData: _this3._renderParams && ((_this3$_renderParams = _this3._renderParams) === null || _this3$_renderParams === void 0 ? void 0 : _this3$_renderParams.sessionData) || '',
           paymentSessionConfig: (_this3$_renderParams2 = _this3._renderParams) === null || _this3$_renderParams2 === void 0 ? void 0 : (_this3$_renderParams3 = _this3$_renderParams2.paymentSessionMetaData) === null || _this3$_renderParams3 === void 0 ? void 0 : _this3$_renderParams3.paymentSessionConfig
         };
         /**
          * @description card
          */
-        if (componentSignEnum.CASHIER_PAYMENT_CARD === _this3._componentSign) {
+        if (componentSignEnum.CASHIER_PAYMENT_CARD === _this3._componentSign || componentSignEnum.VAULTING_CARD === _this3._componentSign) {
           params.paymentMethodType = 'CARD';
         }
+        var needDeviceId = false;
+        var waitTime = '3000';
+        var securityConfig = (_this3$_renderParams4 = _this3._renderParams) === null || _this3$_renderParams4 === void 0 ? void 0 : (_this3$_renderParams5 = _this3$_renderParams4.paymentSessionMetaData) === null || _this3$_renderParams5 === void 0 ? void 0 : _this3$_renderParams5.securityConfig;
+        if (componentSignEnum.CASHIER_PAYMENT_CARD === _this3._componentSign && securityConfig) {
+          var _this3$_renderParams6, _this3$_renderParams7;
+          var extendInfo = ((_this3$_renderParams6 = _this3._renderParams) === null || _this3$_renderParams6 === void 0 ? void 0 : (_this3$_renderParams7 = _this3$_renderParams6.paymentSessionMetaData) === null || _this3$_renderParams7 === void 0 ? void 0 : _this3$_renderParams7.extendInfo) || '';
+          var info = JSON.parse(extendInfo);
+          if ((info === null || info === void 0 ? void 0 : info.cardTokenPay) !== 'false') {
+            needDeviceId = true;
+            waitTime = securityConfig === null || securityConfig === void 0 ? void 0 : securityConfig.tokenCollectTime;
+          }
+        }
+
         /**
          * @description easyPay
          */
         if (componentSignEnum.EASY_PAY_WALLET === _this3._componentSign) {
-          var _this3$_renderParams4;
-          var _ref = params.paymentSessionConfig || {},
-            _ref$productSceneVers = _ref.productSceneVersion,
-            productSceneVersion = _ref$productSceneVers === void 0 ? '' : _ref$productSceneVers,
-            _ref$productScene = _ref.productScene,
-            productScene = _ref$productScene === void 0 ? '' : _ref$productScene;
-          var _ref2 = ((_this3$_renderParams4 = _this3._renderParams) === null || _this3$_renderParams4 === void 0 ? void 0 : _this3$_renderParams4.paymentSessionMetaData) || {},
-            _ref2$action = _ref2.action,
-            _ref2$action2 = _ref2$action === void 0 ? {} : _ref2$action,
-            _ref2$action2$autoDeb = _ref2$action2.autoDebitWithToken,
-            autoDebitWithToken = _ref2$action2$autoDeb === void 0 ? false : _ref2$action2$autoDeb;
+          var _this3$_renderParams8;
+          var _ref2 = params.paymentSessionConfig || {},
+            _ref2$productSceneVer = _ref2.productSceneVersion,
+            productSceneVersion = _ref2$productSceneVer === void 0 ? '' : _ref2$productSceneVer,
+            _ref2$productScene = _ref2.productScene,
+            productScene = _ref2$productScene === void 0 ? '' : _ref2$productScene;
+          var _ref3 = ((_this3$_renderParams8 = _this3._renderParams) === null || _this3$_renderParams8 === void 0 ? void 0 : _this3$_renderParams8.paymentSessionMetaData) || {},
+            _ref3$action = _ref3.action,
+            _ref3$action2 = _ref3$action === void 0 ? {} : _ref3$action,
+            _ref3$action2$autoDeb = _ref3$action2.autoDebitWithToken,
+            autoDebitWithToken = _ref3$action2$autoDeb === void 0 ? false : _ref3$action2$autoDeb;
           if (productScene === productSceneEnum.EASY_PAY && productSceneVersion === '2.0' && !autoDebitWithToken) {
             // if EASY_PAY 2.0 , no need to query payment request
             return resolve({
@@ -218,8 +263,8 @@ var ComponentApp = /*#__PURE__*/function () {
          * @description autoDebit
          */
         if (componentSignEnum.AUTO_DEBIT_WALLET === _this3._componentSign) {
-          var _this3$_renderParams5, _this3$_renderParams6, _action$web, _action$wap;
-          var action = ((_this3$_renderParams5 = _this3._renderParams) === null || _this3$_renderParams5 === void 0 ? void 0 : (_this3$_renderParams6 = _this3$_renderParams5.paymentSessionMetaData) === null || _this3$_renderParams6 === void 0 ? void 0 : _this3$_renderParams6.action) || {};
+          var _this3$_renderParams9, _this3$_renderParams10, _action$web, _action$wap;
+          var action = ((_this3$_renderParams9 = _this3._renderParams) === null || _this3$_renderParams9 === void 0 ? void 0 : (_this3$_renderParams10 = _this3$_renderParams9.paymentSessionMetaData) === null || _this3$_renderParams10 === void 0 ? void 0 : _this3$_renderParams10.action) || {};
           var signType = isPC() ? action === null || action === void 0 ? void 0 : (_action$web = action.web) === null || _action$web === void 0 ? void 0 : _action$web.signType : action === null || action === void 0 ? void 0 : (_action$wap = action.wap) === null || _action$wap === void 0 ? void 0 : _action$wap.signType;
           if (signType === 'SMS') {
             return resolve({
@@ -243,7 +288,9 @@ var ComponentApp = /*#__PURE__*/function () {
         }
         queryPaymentInfo(params, {
           env: _this3.AMSSDK.options.env.environment,
-          locale: _this3.AMSSDK.options.locale
+          locale: _this3.AMSSDK.options.locale,
+          needDeviceId: needDeviceId,
+          waitTime: waitTime
         }).then(function (res) {
           _this3._performanceData.push({
             key: 'sdk_action_query_end',
@@ -323,6 +370,7 @@ var ComponentApp = /*#__PURE__*/function () {
         });
         this.app = createIframe(this.AMSSDK.options.mode, this.platform);
         this.app.src = getIframeUrl({
+          renderDisplayType: renderParams.renderDisplayType,
           componentSign: this._componentSign,
           analytics: this.AMSSDK.options.analytics,
           productSceneVersion: productSceneVersion,
@@ -455,7 +503,7 @@ var ComponentApp = /*#__PURE__*/function () {
       }
 
       // The plug-in communicates with the sdk after processing
-      this.dispatchToSDK(data.context.event, data.context.data);
+      this.dispatchToSDK(data.context.event, data.context.data, data.context.eventCallbackId);
     }
   }, {
     key: "handleSizeChanged",
@@ -562,9 +610,9 @@ var ComponentApp = /*#__PURE__*/function () {
     }
   }, {
     key: "handleDeclareInfo",
-    value: function handleDeclareInfo(_ref3) {
-      var _ref3$closeDialogData = _ref3.closeDialogData,
-        closeDialogData = _ref3$closeDialogData === void 0 ? {} : _ref3$closeDialogData;
+    value: function handleDeclareInfo(_ref4) {
+      var _ref4$closeDialogData = _ref4.closeDialogData,
+        closeDialogData = _ref4$closeDialogData === void 0 ? {} : _ref4$closeDialogData;
       _handleDeclareInfo({
         closeDialogData: closeDialogData
       });
@@ -585,8 +633,9 @@ var ComponentApp = /*#__PURE__*/function () {
      */
   }, {
     key: "dispatchToSDK",
-    value: function dispatchToSDK(event, data) {
+    value: function dispatchToSDK(event, data, eventCallbackId) {
       this.AMSSDK._eventCenter.emit(event, data);
+      if (eventCallbackId) this.AMSSDK._eventCenter.emit(eventCallbackId, data);
     }
 
     /**
@@ -630,7 +679,7 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "sendRenderEvent",
     value: function () {
       var _sendRenderEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _this$_renderParams, _this$_renderParams2, _this$_renderParams3, _this$_renderParams4, res;
+        var _this$_renderParams2, _this$_renderParams3, _this$_renderParams4, _this$_renderParams5, res;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -654,11 +703,11 @@ var ComponentApp = /*#__PURE__*/function () {
                   event: 'renderComponent',
                   data: {
                     queryResult: res,
-                    sessionResult: (_this$_renderParams = this._renderParams) === null || _this$_renderParams === void 0 ? void 0 : _this$_renderParams.paymentSessionMetaData,
-                    paymentSessionData: (_this$_renderParams2 = this._renderParams) === null || _this$_renderParams2 === void 0 ? void 0 : _this$_renderParams2.paymentSessionData,
+                    sessionResult: (_this$_renderParams2 = this._renderParams) === null || _this$_renderParams2 === void 0 ? void 0 : _this$_renderParams2.paymentSessionMetaData,
+                    paymentSessionData: (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.sessionData,
                     heightOfVisible: Math.max(innerHeight, window.innerHeight),
-                    renderDisplayType: (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.renderDisplayType,
-                    appearance: (_this$_renderParams4 = this._renderParams) === null || _this$_renderParams4 === void 0 ? void 0 : _this$_renderParams4.appearance,
+                    renderDisplayType: (_this$_renderParams4 = this._renderParams) === null || _this$_renderParams4 === void 0 ? void 0 : _this$_renderParams4.renderDisplayType,
+                    appearance: (_this$_renderParams5 = this._renderParams) === null || _this$_renderParams5 === void 0 ? void 0 : _this$_renderParams5.appearance,
                     envInfo: {
                       screenHeight: screen.height,
                       screenWidth: screen.width