@alipay/ams-checkout 1.33.0 → 1.35.0

package/esm/component/component.inline.style.js

@@ -115,7 +115,7 @@ export var createInlineBaseElement = function createInlineBaseElement(selector)
   var amsComponentContainer = document.createElement('div');
   amsComponentContainer.className = "".concat(containerId, "-inline");
   amsComponentContainer.id = containerId;
-  var selectorDom = document.querySelector("#".concat(selector));
+  var selectorDom = document.querySelector("".concat(selector));
   if (selectorDom) selectorDom.appendChild(amsComponentContainer);
   return amsComponentContainer;
 };

package/esm/component/popupWindow.style.js

@@ -2,7 +2,7 @@ import { AMSPOPUP_PREFIX, ANIMATION_TIME, MOCKUP_ID, POPUPLOADING_ID } from "../
 import { getDesignFontSize } from "../util";
 
 // CSS样式字符串
-var modalStyles = "\n  .".concat(AMSPOPUP_PREFIX, "modal {\n    /* \u6DFB\u52A0\u5F39\u7A97\u6837\u5F0F */\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n    overflow: hidden;\n  }\n  .").concat(AMSPOPUP_PREFIX, "modal-mobile{\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    bottom: 0;\n    left: 0%;\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n    overflow: hidden;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "overlay {\n    /* \u6DFB\u52A0\u8499\u5C42\u6837\u5F0F */\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.4);\n    z-index: 999;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeIn {\n    /* \u6DFB\u52A0\u6DE1\u5165\u52A8\u753B */\n    animation: fadeIn ").concat(ANIMATION_TIME, "ms;\n    animation-fill-mode: forwards;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeOut {\n    /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n    animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n    animation-fill-mode: forwards;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "-drawer-enter {\n    animation: slideIn ").concat(ANIMATION_TIME, "ms forwards;\n  }\n  \n  @keyframes slideIn {\n    from {\n        transform: translateY(100%); /* \u6ED1\u5165\u65F6\u5728\u89C6\u53E3\u5E95\u90E8\u5916 */\n        opacity: 0; /* \u521D\u59CB\u900F\u660E\u5EA6\u4E3A 0 */\n    }\n    to {\n        transform: translateY(0); /* \u6ED1\u5165\u7ED3\u675F\u65F6\u5728\u539F\u4F4D\u7F6E */\n        opacity: 1; /* \u7ED3\u675F\u65F6\u900F\u660E\u5EA6\u4E3A 1 */\n    }\n  }\n\n  /* \u62BD\u5C49\u4ECE\u5E95\u90E8\u6ED1\u51FA */\n  .").concat(AMSPOPUP_PREFIX, "-drawer-exit {\n      animation: slideOut ").concat(ANIMATION_TIME, "ms forwards;\n  }\n\n  @keyframes slideOut {\n      from {\n          transform: translateY(0); /* \u6ED1\u51FA\u65F6\u4ECE\u5F53\u524D\u4F4D\u7F6E\u5F00\u59CB */\n          opacity: 1; /* \u521D\u59CB\u900F\u660E\u5EA6\u4E3A 1 */\n      }\n      to {\n          transform: translateY(100%); /* \u6ED1\u51FA\u7ED3\u675F\u65F6\u5728\u89C6\u53E3\u5E95\u90E8\u5916 */\n          opacity: 0; /* \u7ED3\u675F\u65F6\u900F\u660E\u5EA6\u4E3A 0 */\n      }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u5165\u52A8\u753B */\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u51FA\u52A8\u753B */\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @-webkit-keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n\n.ams-component-popup-loading {\n  width: 0.8em;\n  height:0.8em;\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-popup-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-popup-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-popup-loading .line div:before,\n.ams-component-popup-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: black;\n  border-radius: 5.3px;\n}\n.ams-component-popup-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-popup-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-popup-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-popup-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-popup-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-popup-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n");
+var modalStyles = "\n  .".concat(AMSPOPUP_PREFIX, "modal {\n    /* \u6DFB\u52A0\u5F39\u7A97\u6837\u5F0F */\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n    overflow: hidden;\n  }\n  .").concat(AMSPOPUP_PREFIX, "modal-mobile{\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    bottom: 0;\n    left: 0%;\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n    overflow: hidden;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "overlay {\n    /* \u6DFB\u52A0\u8499\u5C42\u6837\u5F0F */\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.4);\n    z-index: 999;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeIn {\n    /* \u6DFB\u52A0\u6DE1\u5165\u52A8\u753B */\n    animation: fadeIn ").concat(ANIMATION_TIME, "ms;\n    animation-fill-mode: forwards;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeOut {\n    /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n    animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n    animation-fill-mode: forwards;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "-drawer-enter {\n    animation: slideIn ").concat(ANIMATION_TIME, "ms forwards;\n  }\n\n  @keyframes slideIn {\n    from {\n        transform: translateY(100%); /* \u6ED1\u5165\u65F6\u5728\u89C6\u53E3\u5E95\u90E8\u5916 */\n        opacity: 0; /* \u521D\u59CB\u900F\u660E\u5EA6\u4E3A 0 */\n    }\n    to {\n        transform: translateY(0); /* \u6ED1\u5165\u7ED3\u675F\u65F6\u5728\u539F\u4F4D\u7F6E */\n        opacity: 1; /* \u7ED3\u675F\u65F6\u900F\u660E\u5EA6\u4E3A 1 */\n    }\n  }\n\n  /* \u62BD\u5C49\u4ECE\u5E95\u90E8\u6ED1\u51FA */\n  .").concat(AMSPOPUP_PREFIX, "-drawer-exit {\n      animation: slideOut ").concat(ANIMATION_TIME, "ms forwards;\n  }\n\n  @keyframes slideOut {\n      from {\n          transform: translateY(0); /* \u6ED1\u51FA\u65F6\u4ECE\u5F53\u524D\u4F4D\u7F6E\u5F00\u59CB */\n          opacity: 1; /* \u521D\u59CB\u900F\u660E\u5EA6\u4E3A 1 */\n      }\n      to {\n          transform: translateY(100%); /* \u6ED1\u51FA\u7ED3\u675F\u65F6\u5728\u89C6\u53E3\u5E95\u90E8\u5916 */\n          opacity: 0; /* \u7ED3\u675F\u65F6\u900F\u660E\u5EA6\u4E3A 0 */\n      }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u5165\u52A8\u753B */\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u51FA\u52A8\u753B */\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @-webkit-keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  @-moz-keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n\n.ams-component-popup-loading {\n  width: 0.8em;\n  height:0.8em;\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-popup-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-popup-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-popup-loading .line div:before,\n.ams-component-popup-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: black;\n  border-radius: 5.3px;\n}\n.ams-component-popup-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-popup-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-popup-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-popup-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-popup-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-popup-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n");
 var getCurrentTheme = function getCurrentTheme() {
   var curTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
   var theme = {
@@ -104,6 +104,9 @@ export var createModal = function createModal(_ref) {
 // 销毁弹窗
 export var destroyModal = function destroyModal() {
   var overlay = document.querySelector(".".concat(AMSPOPUP_PREFIX, "overlay"));
+  if (!overlay) {
+    return;
+  }
   var modal = modalDevice === 'desktop' ? document.querySelector(".".concat(AMSPOPUP_PREFIX, "modal")) : document.querySelector(".".concat(AMSPOPUP_PREFIX, "modal-mobile"));
   overlay.classList.remove("".concat(AMSPOPUP_PREFIX, "fadeIn"));
   overlay.classList.add("".concat(AMSPOPUP_PREFIX, "fadeOut"));

package/esm/config/index.d.ts

@@ -5,10 +5,10 @@ export declare const sdkVersion: string;
 /**
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  */
-export declare const AMSCheckoutAppVersion = "1.33.0";
-export declare const AMSAutoDebitAppVersion = "1.33.0";
-export declare const AMSEasyPayAppVersion = "1.33.0";
-export declare const AMSCashierPaymentAppVersion = "1.33.0";
-export declare const AMSVaultingAppVersion = "1.33.0";
-export declare const AMSPaymentElementAppVersion = "1.33.0";
-export declare const ADDRESSElementAppVersion = "1.33.0";
+export declare const AMSCheckoutAppVersion = "1.35.0";
+export declare const AMSAutoDebitAppVersion = "1.35.0";
+export declare const AMSEasyPayAppVersion = "1.35.0";
+export declare const AMSCashierPaymentAppVersion = "1.35.0";
+export declare const AMSVaultingAppVersion = "1.35.0";
+export declare const AMSPaymentElementAppVersion = "1.35.0";
+export declare const ADDRESSElementAppVersion = "1.35.0";

package/esm/config/index.js

@@ -35,10 +35,10 @@ export var sdkVersion = json.version;
 /**
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  */
-export var AMSCheckoutAppVersion = '1.33.0'; // 兜底版本号
-export var AMSAutoDebitAppVersion = '1.33.0'; // 代扣
-export var AMSEasyPayAppVersion = '1.33.0'; // easypay
-export var AMSCashierPaymentAppVersion = '1.33.0'; // 收银台（卡、apm）
-export var AMSVaultingAppVersion = '1.33.0'; // 绑卡
-export var AMSPaymentElementAppVersion = '1.33.0'; // payment element
-export var ADDRESSElementAppVersion = '1.33.0'; // address element
+export var AMSCheckoutAppVersion = '1.35.0'; // 兜底版本号
+export var AMSAutoDebitAppVersion = '1.35.0'; // 代扣
+export var AMSEasyPayAppVersion = '1.35.0'; // easypay
+export var AMSCashierPaymentAppVersion = '1.35.0'; // 收银台（卡、apm）
+export var AMSVaultingAppVersion = '1.35.0'; // 绑卡
+export var AMSPaymentElementAppVersion = '1.35.0'; // payment element
+export var ADDRESSElementAppVersion = '1.35.0'; // address element

package/esm/constant/index.d.ts

@@ -210,6 +210,15 @@ export declare const EVENT: {
     getApplePayToken: {
         name: string;
     };
+    updated: {
+        name: string;
+    };
+    webAppReady: {
+        name: string;
+    };
+    showToast: {
+        name: string;
+    };
 };
 export declare const COMPONENT_CONTAINER_ID = "ams-component-container";
 export declare const COMPONENT_SECTION_ID = "ams-component-section";

package/esm/constant/index.js

@@ -212,6 +212,15 @@ export var EVENT = {
   },
   getApplePayToken: {
     name: 'getApplePayToken'
+  },
+  updated: {
+    name: 'updated'
+  },
+  webAppReady: {
+    name: 'webAppReady'
+  },
+  showToast: {
+    name: 'showToast'
   }
 };
 export var COMPONENT_CONTAINER_ID = 'ams-component-container';

package/esm/core/component/element/elementContainerService/containerService.d.ts

@@ -0,0 +1,33 @@
+import BaseElementProcessor from '../elementProcessor/baseElementProcessor';
+import { ContainerService } from './../../../../foundation/service/container';
+import { EventCenter } from './../../../../foundation/service/event-center';
+export declare enum IContainerStatus {
+    UNINIT = "UNINIT",
+    INITING = "INITING",
+    READY = "READY",
+    IN_BIZ_FLOW = "IN_BIZ_FLOW",
+    DESTROYED = "DESTROYED"
+}
+export declare class ContainerController {
+    private containerStatus;
+    private instanceId;
+    private containerService;
+    private eventService;
+    private containerElement;
+    private _globalData?;
+    constructor({ type, instanceId, selector, processor, options, }: {
+        type: string;
+        instanceId: string;
+        selector: string;
+        processor: BaseElementProcessor;
+        options: any;
+    });
+    private addEventListener;
+    getContainerElement(): HTMLDivElement;
+    createWebLaunchPromise(): Promise<unknown>;
+    switchContainerStatus(status: IContainerStatus): void;
+    getContainerStatus(): IContainerStatus;
+    getEventService(): EventCenter;
+    destroy(): void;
+    getContainerService(): ContainerService;
+}

package/esm/core/component/element/elementContainerService/containerService.js

@@ -0,0 +1,123 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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); }
+import { EVENT } from "../../../../constant";
+import { ServiceProvider } from "./../../../../foundation/service";
+import { isElementPC, isElementPad } from "../util";
+import { DisplayTypeEnum, PlatformEnum, ProductSceneEnum } from "./../../../../types";
+export var IContainerStatus = /*#__PURE__*/function (IContainerStatus) {
+  IContainerStatus["UNINIT"] = "UNINIT";
+  IContainerStatus["INITING"] = "INITING";
+  IContainerStatus["READY"] = "READY";
+  IContainerStatus["IN_BIZ_FLOW"] = "IN_BIZ_FLOW";
+  IContainerStatus["DESTROYED"] = "DESTROYED";
+  return IContainerStatus;
+}({});
+export var ContainerController = /*#__PURE__*/function () {
+  function ContainerController(_ref) {
+    var _options$debugProps;
+    var type = _ref.type,
+      instanceId = _ref.instanceId,
+      selector = _ref.selector,
+      processor = _ref.processor,
+      options = _ref.options;
+    _classCallCheck(this, ContainerController);
+    _defineProperty(this, "containerStatus", void 0);
+    _defineProperty(this, "instanceId", void 0);
+    _defineProperty(this, "containerService", void 0);
+    _defineProperty(this, "eventService", void 0);
+    _defineProperty(this, "containerElement", void 0);
+    _defineProperty(this, "_globalData", void 0);
+    this._globalData = new Map();
+    this.switchContainerStatus(IContainerStatus.INITING);
+    this.instanceId = "".concat(instanceId, "-").concat(type);
+    this.containerService = ServiceProvider.getInstance(this.instanceId).getService('Container');
+    ServiceProvider.getInstance(this.instanceId).init({}, {
+      productScene: ProductSceneEnum.ELEMENT_PAYMENT,
+      sdkVersion: '',
+      webAppVersion: ''
+    });
+    this.containerElement = this.containerService.load({
+      type: DisplayTypeEnum.inline,
+      platform: isElementPad() ? PlatformEnum.desktop : isElementPC() ? PlatformEnum.desktop : PlatformEnum.mobile,
+      isRetention: false,
+      selector: selector,
+      appendAliasContainerId: true,
+      iframeStyle: {
+        display: 'block'
+      }
+    }, processor.generateIframeSrc({
+      link: options === null || options === void 0 || (_options$debugProps = options.debugProps) === null || _options$debugProps === void 0 ? void 0 : _options$debugProps.localLink,
+      instanceId: this.instanceId
+    }));
+    this.eventService = ServiceProvider.getInstance(this.instanceId).getService('EventCenter');
+    this.addEventListener();
+  }
+  _createClass(ContainerController, [{
+    key: "addEventListener",
+    value: function addEventListener() {
+      var _this = this;
+      this.eventService.listen(EVENT.setGlobalData.name, function (result) {
+        _this._globalData.set(result === null || result === void 0 ? void 0 : result.dataKey, result === null || result === void 0 ? void 0 : result.data);
+      });
+      this.eventService.listen(EVENT.getGlobalData.name, function (data, result) {
+        var context = result.context;
+        if (context !== null && context !== void 0 && context.eventCallbackId) {
+          var _context$data;
+          var targetData = _this._globalData.get((_context$data = context.data) === null || _context$data === void 0 ? void 0 : _context$data.dataKey);
+          _this.eventService.dispatchToApp({
+            event: 'appEventCallback',
+            eventCallbackId: context === null || context === void 0 ? void 0 : context.eventCallbackId,
+            data: targetData
+          });
+        }
+      });
+    }
+  }, {
+    key: "getContainerElement",
+    value: function getContainerElement() {
+      return this.containerElement;
+    }
+  }, {
+    key: "createWebLaunchPromise",
+    value: function createWebLaunchPromise() {
+      var _this2 = this;
+      return new Promise(function (resolve) {
+        _this2.eventService.listen('onLaunch', function (res) {
+          resolve(res);
+        });
+      });
+    }
+  }, {
+    key: "switchContainerStatus",
+    value: function switchContainerStatus(status) {
+      this.containerStatus = status;
+    }
+  }, {
+    key: "getContainerStatus",
+    value: function getContainerStatus() {
+      return this.containerStatus;
+    }
+  }, {
+    key: "getEventService",
+    value: function getEventService() {
+      return this.eventService;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.eventService.destroy();
+      this.containerElement.remove();
+    }
+  }, {
+    key: "getContainerService",
+    value: function getContainerService() {
+      return this.containerService;
+    }
+  }]);
+  return ContainerController;
+}();

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

@@ -0,0 +1,20 @@
+import { ElementType } from '../type';
+import { ContainerController } from './containerService';
+export declare class ElementContainerService {
+    private containerServices;
+    private instanceId;
+    constructor({ instanceId }: {
+        instanceId: any;
+    });
+    addContainerService(name: ElementType, service: ContainerController): void;
+    getContainerService(name: ElementType): ContainerController | undefined;
+    getContainerServices(): Map<ElementType, ContainerController>;
+    destroy(): void;
+    mount({ type, selector, processor, options }: {
+        type: any;
+        selector: any;
+        processor: any;
+        options: any;
+    }): void;
+    getEventService(name: ElementType): import("../../../../foundation/service/event-center").EventCenter;
+}

package/esm/core/component/element/elementContainerService/index.js

@@ -0,0 +1,63 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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); }
+import { ContainerController } from "./containerService";
+export var ElementContainerService = /*#__PURE__*/function () {
+  function ElementContainerService(_ref) {
+    var instanceId = _ref.instanceId;
+    _classCallCheck(this, ElementContainerService);
+    _defineProperty(this, "containerServices", void 0);
+    _defineProperty(this, "instanceId", void 0);
+    this.containerServices = new Map();
+    this.instanceId = instanceId;
+  }
+  _createClass(ElementContainerService, [{
+    key: "addContainerService",
+    value: function addContainerService(name, service) {
+      this.containerServices.set(name, service);
+    }
+  }, {
+    key: "getContainerService",
+    value: function getContainerService(name) {
+      return this.containerServices.get(name);
+    }
+  }, {
+    key: "getContainerServices",
+    value: function getContainerServices() {
+      return this.containerServices;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.containerServices.forEach(function (value) {
+        value.destroy();
+      });
+      this.containerServices = new Map();
+    }
+  }, {
+    key: "mount",
+    value: function mount(_ref2) {
+      var type = _ref2.type,
+        selector = _ref2.selector,
+        processor = _ref2.processor,
+        options = _ref2.options;
+      this.addContainerService(type, new ContainerController({
+        type: type,
+        instanceId: this.instanceId,
+        selector: selector,
+        processor: processor,
+        options: options
+      }));
+    }
+  }, {
+    key: "getEventService",
+    value: function getEventService(name) {
+      return this.getContainerService(name).getEventService();
+    }
+  }]);
+  return ElementContainerService;
+}();

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

@@ -0,0 +1,27 @@
+import { AddressMountOptions, IElementOptions, LinkAuthMountOptions, PaymentMountOptions } from '../type';
+declare class ElementController {
+    private options;
+    private elementContainer;
+    private serviceMap;
+    private loading;
+    private elementProcessors;
+    private initTimeout;
+    private elementContainerService;
+    private onStatusChangeCallback;
+    constructor(options: IElementOptions);
+    private initService;
+    private initElementProcessors;
+    private onEventCallback;
+    mount(renderOptions: LinkAuthMountOptions | AddressMountOptions | PaymentMountOptions, sdkSelector: string, cashier?: boolean): any;
+    private onValidateFunc;
+    submitPayment(): void;
+    private changeLoading;
+    private addEventListener;
+    private sendRequestAndWaitWebLaunch;
+    private sendReady;
+    updatePayment(paymentSessionData: any): Promise<unknown>;
+    private destroyHandle;
+    destroy(): void;
+    private setControllerStatusOrView;
+}
+export default ElementController;