@alipay/ams-checkout 0.0.1692935171-dev.1 → 0.0.1692935171-dev.2

package/esm/plugin/component/index.js

@@ -15,46 +15,38 @@ 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 */
-import { closeImg, COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
+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, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum, eventCodeEnum } from "../../types";
-import { addSetFontSizeEvent, amsSetSize, getDesignFontSize, getType, isJsonString, isPC } from "../../util";
+import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
+import { getType, isJsonString, isPC } from "../../util";
 import { isLocalMock } from "../../util/mock";
 import { createIframe, getAppDomain, getIframeUrl } from "./cashierApp";
-import { componentAddCSS, inlineComponentAddCss, showInlineLoading } from "./component.style";
+import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
+import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, handleDeclareInfo as _handleDeclareInfo, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup } from "./component.popup.style";
 var _window = window,
   innerHeight = _window.innerHeight;
-var componentContainerId = 'ams-component-container';
-var componentSectionId = 'ams-component-section';
-var componentCloseBlockId = 'asm-component-close-block';
-var componentRetentionId = 'ams-component-retention';
-var mockupId = 'ams-component-mockup';
-var loadingId = 'ams-component-loading';
-var listenerPrefix = '_ams_sdk_component_listener';
-var inlineBaseStyleId = 'ams-inline-component-style';
-var loadTimeLimit = 15000;
 var ComponentApp = /*#__PURE__*/function () {
   function ComponentApp() {
     _classCallCheck(this, ComponentApp);
     _defineProperty(this, "app", void 0);
-    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "AMSSDK", void 0);
     _defineProperty(this, "platform", void 0);
+    _defineProperty(this, "_performanceData", []);
+    _defineProperty(this, "_loadAppPromiseResolve", null);
+    _defineProperty(this, "_isInitComponent", void 0);
+    _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "createIframeNode", void 0);
     _defineProperty(this, "_selector", void 0);
     _defineProperty(this, "_appVersion", void 0);
     _defineProperty(this, "_isRetention", void 0);
     _defineProperty(this, "_actionQueryPromise", null);
-    _defineProperty(this, "_loadAppPromiseResolve", null);
     _defineProperty(this, "_renderParams", null);
     _defineProperty(this, "_componentSign", componentSignEnum.NONE);
-    _defineProperty(this, "_performanceData", []);
-    _defineProperty(this, "_isInitComponent", void 0);
     _defineProperty(this, "_clickEventName", void 0);
     _defineProperty(this, "_renderDisplayType", renderDisplayTypeEnum.popup);
     this._appVersion = '1.5.2';
     this._isInitComponent = false;
-    this._selector = "#".concat(componentSectionId);
+    this._selector = "#".concat(COMPONENT_SECTION_ID);
     this.createIframeNode = function () {
       return Promise.resolve();
     };
@@ -111,7 +103,7 @@ var ComponentApp = /*#__PURE__*/function () {
       this._componentSign = componentSign;
       if (renderParams !== null && renderParams !== void 0 && renderParams.selector) this._selector = renderParams.selector;
       this._renderDisplayType = renderParams.renderDisplayType;
-      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(componentContainerId) : this._selector;
+      var insertedNode = this._renderDisplayType === renderDisplayTypeEnum.inline ? "#".concat(COMPONENT_CONTAINER_ID) : this._selector;
       this._performanceData.push({
         key: 'sdk_create_component',
         value: Date.now()
@@ -120,17 +112,17 @@ var ComponentApp = /*#__PURE__*/function () {
         code: eventCodeEnum.SDK_START_OF_LOADING
       });
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        this.createInlineBaseElement(renderParams);
+        var container = createInlineBaseElement(this._selector);
+        if (container) this.renderInlineLoading(renderParams, container);
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        this.createBaseElement();
-        this.setContainerClass();
-        this.createRetentionPopup();
-        this.createMockup();
+        createBaseElement(this.platform, this.closeBtnFunc.bind(this));
+        createRetentionPopup(this.platform, this.hideRetentionPopupFunc.bind(this), this.retentionPopupLeaveFunc.bind(this));
+        createMockup();
         this.renderPopupLoading(renderParams);
       }
       this.createApp(renderParams);
-      return Promise.all([this.createActionQueryPromise(), this.createIframeNode(this, insertedNode, this._renderDisplayType), this.createLoadAppPromise()]).then(function () {
+      return Promise.all([this.createActionQueryPromise(), this.createIframeNode(this, insertedNode, this._renderDisplayType), this._createLoadAppPromise()]).then(function () {
         return Promise.resolve();
       }).catch(function (error) {
         _this._isInitComponent = false;
@@ -139,27 +131,33 @@ var ComponentApp = /*#__PURE__*/function () {
       });
     }
   }, {
-    key: "renderPopupLoading",
-    value: function renderPopupLoading(renderParams) {
+    key: "renderInlineLoading",
+    value: function renderInlineLoading(renderParams, selector) {
       var _renderParams$appeara;
       var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading;
       showLoading = typeof showLoading === 'boolean' ? showLoading : true;
+      if (showLoading) addInlineLoading(selector, this.platform);
+    }
+  }, {
+    key: "renderPopupLoading",
+    value: function renderPopupLoading(renderParams) {
+      var _renderParams$appeara2;
+      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
+      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
       if (!showLoading) return;
-      if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var mockup = document.getElementById(mockupId);
-        if (mockup) mockup.style.display = 'block';
-        return this.showPopupLoading();
-      }
+      var mockup = document.getElementById(MOCKUP_ID);
+      if (mockup) mockup.style.display = 'block';
+      addPopupLoading();
     }
   }, {
-    key: "createLoadAppPromise",
-    value: function createLoadAppPromise() {
+    key: "_createLoadAppPromise",
+    value: function _createLoadAppPromise() {
       var _this2 = this;
       return new Promise(function (resolve, reject) {
         _this2._loadAppPromiseResolve = resolve;
         setTimeout(function () {
           reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT);
-        }, loadTimeLimit);
+        }, LOADTIME_LIMIT);
       }).catch(function (error) {
         _this2.dispatchToSDK(EVENT.error.name, {
           code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code,
@@ -266,16 +264,32 @@ var ComponentApp = /*#__PURE__*/function () {
       return this._actionQueryPromise;
     }
   }, {
-    key: "cleanApp",
-    value: function cleanApp() {
+    key: "cleanElement",
+    value: function cleanElement() {
       try {
-        this.app = null;
-        this._removeEventListener();
+        var _document$getElementB;
+        // selector and container
         if (getType(this._selector) === 'string') {
           var selectorDom = document.querySelector(this._selector);
           if (selectorDom) selectorDom.innerHTML = '';
         }
-        // eslint-disable-next-line no-empty
+        var container = document.getElementById(COMPONENT_CONTAINER_ID);
+        if (container) container === null || container === void 0 ? void 0 : container.remove();
+
+        // animation
+        (_document$getElementB = document.getElementById("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style"))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+
+        // mockup
+        var body = document.getElementsByTagName('body')[0];
+        body.style.overflow = 'auto';
+        var mockup = document.getElementById(MOCKUP_ID);
+        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
+
+        // retentionPopup
+        this.removeRetentionPopup(this.platform);
+
+        // listener
+        this.removeEventListener();
       } catch (error) {
         console.error(error);
       }
@@ -320,7 +334,7 @@ var ComponentApp = /*#__PURE__*/function () {
         });
 
         // Subscribe to messages from iframe
-        this._addEventListener();
+        this.addEventListener();
       } catch (error) {
         this.dispatchToSDK(EVENT.error.name, Object.assign({}, ERRORMESSAGE.SDK_COMPATIBILITY_ISSUES.FAILED_TO_CREATE_IFRAME, {
           stack: error
@@ -339,6 +353,8 @@ var ComponentApp = /*#__PURE__*/function () {
         if (data.name !== messageName.APP_TO_SDK && data.name !== messageName.APP_TO_APP || data.instanceId !== this.AMSSDK._instanceId) {
           return;
         }
+        // TODO
+        // 如果带有callback标识，则从map结构中取出callbackfunc，执行，执行后在map结构中删除
         this._handleAppMessage(data);
       } else {
         console.warn(ERRORMESSAGE.NOT_JSON_FORMAT);
@@ -348,7 +364,7 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "resizeListener",
     value: function resizeListener() {
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.transition = 'none';
       this.dispatchToApp({
         context: {
@@ -365,19 +381,19 @@ var ComponentApp = /*#__PURE__*/function () {
      * @description Initialize subscription iframe message
      */
   }, {
-    key: "_addEventListener",
-    value: function _addEventListener() {
-      this._removeEventListener();
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
-      window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
-      window.addEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.addEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+    key: "addEventListener",
+    value: function addEventListener() {
+      this.removeEventListener();
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)] = this.listener.bind(this);
+      window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")] = this.resizeListener.bind(this);
+      window.addEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.addEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
   }, {
-    key: "_removeEventListener",
-    value: function _removeEventListener() {
-      window.removeEventListener('message', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId)]);
-      window.removeEventListener('resize', window["".concat(listenerPrefix, "_").concat(this.AMSSDK._instanceId, "_resize")]);
+    key: "removeEventListener",
+    value: function removeEventListener() {
+      window.removeEventListener('message', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId)]);
+      window.removeEventListener('resize', window["".concat(LISTENER_PREFIX, "_").concat(this.AMSSDK._instanceId, "_resize")]);
     }
 
     /**
@@ -387,6 +403,9 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "_handleAppMessage",
     value: function _handleAppMessage(data) {
       var eventKeyMap = [EVENT.launch.name, EVENT.redirect.name, EVENT.sizeChanged.name, EVENT.log.name, EVENT.close.name, EVENT.error.name, EVENT.eventCallback.name, EVENT.submitForm.name, EVENT.showCloseButton.name, EVENT.hideCloseButton.name, EVENT.setAllowRetention.name, EVENT.declareCheckoutInfo.name, EVENT.showPopup.name, EVENT.dismissLoading.name];
+      if (!eventKeyMap.includes(data.context.event)) {
+        return;
+      }
       if (data.context.event === EVENT.dismissLoading.name) {
         var _data$context$data;
         this.dispatchToSDK(EVENT.eventCallback.name, {
@@ -395,9 +414,6 @@ var ComponentApp = /*#__PURE__*/function () {
         });
         return;
       }
-      if (!eventKeyMap.includes(data.context.event)) {
-        return;
-      }
       if (data.context.event === EVENT.launch.name) {
         this._performanceData.push({
           key: 'sdk_onLaunch',
@@ -446,29 +462,28 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function handleSizeChanged(data) {
       var _data$context$data2;
       if (((_data$context$data2 = data.context.data) === null || _data$context$data2 === void 0 ? void 0 : _data$context$data2.height) <= 1) return;
-      var cashier = document.getElementById(componentContainerId);
+      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
       cashier.style.height = "".concat(data.context.data.height, "px");
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var _document$getElementB;
-        var mockup = document.getElementById(mockupId);
+        var _document$getElementB2;
+        var mockup = document.getElementById(MOCKUP_ID);
         if (mockup) {
-          mockup.style.background = '#000000';
-          mockup.style.opacity = '0.6';
+          mockup.style.background = 'rgb(0, 0, 0, 0.6)';
           mockup.style.display = 'block';
         }
-        (_document$getElementB = document.getElementById(loadingId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+        (_document$getElementB2 = document.getElementById(LOADING_ID)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
         if (this.platform === 'desktop') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
           if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
         }
         if (this.platform === 'mobile') {
-          cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-          var animationStyleId = "".concat(componentContainerId, "-").concat(this.platform, "-animation-style");
+          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+          var animationStyleId = "".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style");
           var animationStyle = document.getElementById(animationStyleId);
           if (animationStyle) animationStyle === null || animationStyle === void 0 ? void 0 : animationStyle.remove();
 
           // 弹出和弹入动画
-          var runkeyframes = "@keyframes ".concat(componentContainerId, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(componentContainerId, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
+          var runkeyframes = "@keyframes ".concat(COMPONENT_CONTAINER_ID, "-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ").concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ").concat(COMPONENT_CONTAINER_ID, "-slide-out {\n          0% {\n            height: ").concat(data.context.data.height, "px;\n            opacity: 1;\n          }\n          50% {\n            opacity: 1;\n          }\n          100% {\n            height: 1px;\n            opacity: 0;\n          }\n        }");
           // 创建style标签
           var style = document.createElement('style');
           style.id = animationStyleId;
@@ -486,8 +501,8 @@ var ComponentApp = /*#__PURE__*/function () {
         }
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        var _document$getElementB2;
-        (_document$getElementB2 = document.getElementById(loadingId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+        var _document$getElementB3;
+        (_document$getElementB3 = document.getElementById(LOADING_ID)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
       }
       this.app.style.height = "".concat(data.context.data.height, "px");
       this.app.style.opacity = '1';
@@ -550,59 +565,18 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function handleDeclareInfo(_ref3) {
       var _ref3$closeDialogData = _ref3.closeDialogData,
         closeDialogData = _ref3$closeDialogData === void 0 ? {} : _ref3$closeDialogData;
-      try {
-        if (closeDialogData) {
-          var retentionTitle = document.getElementById("".concat(componentRetentionId, "-title"));
-          if (retentionTitle) {
-            var _closeDialogData$titl, _closeDialogData$titl2, _closeDialogData$titl3;
-            retentionTitle.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl = closeDialogData.title) === null || _closeDialogData$titl === void 0 ? void 0 : _closeDialogData$titl.fontSize, "px");
-            retentionTitle.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl2 = closeDialogData.title) === null || _closeDialogData$titl2 === void 0 ? void 0 : _closeDialogData$titl2.fontColor;
-            retentionTitle.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$titl3 = closeDialogData.title) === null || _closeDialogData$titl3 === void 0 ? void 0 : _closeDialogData$titl3.text;
-          }
-          var retentionMessage = document.getElementById("".concat(componentRetentionId, "-sub-title"));
-          if (retentionMessage) {
-            var _closeDialogData$mess, _closeDialogData$mess2, _closeDialogData$mess3;
-            retentionMessage.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess = closeDialogData.message) === null || _closeDialogData$mess === void 0 ? void 0 : _closeDialogData$mess.fontSize, "px");
-            retentionMessage.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess2 = closeDialogData.message) === null || _closeDialogData$mess2 === void 0 ? void 0 : _closeDialogData$mess2.fontColor;
-            retentionMessage.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$mess3 = closeDialogData.message) === null || _closeDialogData$mess3 === void 0 ? void 0 : _closeDialogData$mess3.text;
-          }
-          var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-          if (remainBtn) {
-            var _closeDialogData$btnO, _closeDialogData$btnO2, _closeDialogData$btnO3, _closeDialogData$btnO4, _closeDialogData$btnO5, _closeDialogData$btnO7;
-            remainBtn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO = closeDialogData.btnOK) === null || _closeDialogData$btnO === void 0 ? void 0 : _closeDialogData$btnO.text;
-            remainBtn.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO2 = closeDialogData.btnOK) === null || _closeDialogData$btnO2 === void 0 ? void 0 : _closeDialogData$btnO2.fontSize, "px");
-            remainBtn.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO3 = closeDialogData.btnOK) === null || _closeDialogData$btnO3 === void 0 ? void 0 : _closeDialogData$btnO3.fontColor;
-            remainBtn.style.borderRadius = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO4 = closeDialogData.btnOK) === null || _closeDialogData$btnO4 === void 0 ? void 0 : _closeDialogData$btnO4.corner, "px");
-            if ((closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO5 = closeDialogData.btnOK) === null || _closeDialogData$btnO5 === void 0 ? void 0 : _closeDialogData$btnO5.type) === 'stroke') {
-              var _closeDialogData$btnO6;
-              remainBtn.style.border = "1px solid ".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO6 = closeDialogData.btnOK) === null || _closeDialogData$btnO6 === void 0 ? void 0 : _closeDialogData$btnO6.bg);
-            } else remainBtn.style.backgroundColor = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnO7 = closeDialogData.btnOK) === null || _closeDialogData$btnO7 === void 0 ? void 0 : _closeDialogData$btnO7.bg;
-          }
-          var leaveBrn = document.getElementById("".concat(componentRetentionId, "-leave"));
-          if (leaveBrn) {
-            var _closeDialogData$btnC, _closeDialogData$btnC2, _closeDialogData$btnC3, _closeDialogData$btnC4, _closeDialogData$btnC5, _closeDialogData$btnC7;
-            leaveBrn.innerHTML = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC = closeDialogData.btnCancel) === null || _closeDialogData$btnC === void 0 ? void 0 : _closeDialogData$btnC.text;
-            leaveBrn.style.fontSize = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC2 = closeDialogData.btnCancel) === null || _closeDialogData$btnC2 === void 0 ? void 0 : _closeDialogData$btnC2.fontSize, "px");
-            leaveBrn.style.color = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC3 = closeDialogData.btnCancel) === null || _closeDialogData$btnC3 === void 0 ? void 0 : _closeDialogData$btnC3.fontColor;
-            leaveBrn.style.borderRadius = "".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC4 = closeDialogData.btnCancel) === null || _closeDialogData$btnC4 === void 0 ? void 0 : _closeDialogData$btnC4.corner, "px");
-            if ((closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC5 = closeDialogData.btnCancel) === null || _closeDialogData$btnC5 === void 0 ? void 0 : _closeDialogData$btnC5.type) === 'stroke') {
-              var _closeDialogData$btnC6;
-              leaveBrn.style.border = "1px solid ".concat(closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC6 = closeDialogData.btnCancel) === null || _closeDialogData$btnC6 === void 0 ? void 0 : _closeDialogData$btnC6.bg);
-            } else leaveBrn.style.backgroundColor = closeDialogData === null || closeDialogData === void 0 ? void 0 : (_closeDialogData$btnC7 = closeDialogData.btnCancel) === null || _closeDialogData$btnC7 === void 0 ? void 0 : _closeDialogData$btnC7.bg;
-          }
-        }
-      } catch (error) {
-        console.error(error);
-      }
+      _handleDeclareInfo({
+        closeDialogData: closeDialogData
+      });
     }
   }, {
     key: "handleCloseBtnShow",
     value: function handleCloseBtnShow(showClose) {
-      var closeBlock = document.getElementById(componentCloseBlockId);
+      var closeBlock = document.getElementById(COMPONENT_CLOSE_BLOCK_ID);
       if (showClose) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       } else if (showClose === false) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(componentCloseBlockId, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
       }
     }
 
@@ -627,6 +601,7 @@ var ComponentApp = /*#__PURE__*/function () {
         appId: COMPONENTPLUGINID,
         instanceId: this.AMSSDK._instanceId
       });
+      // TODO 如果存在回调函数，则增加callBack标识，并存入map。map可以设置
       if (this.app && this.app.contentWindow) {
         return this.app.contentWindow.postMessage(JSON.stringify(data), this.appDomain);
       }
@@ -716,71 +691,39 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       return sendRenderEvent;
     }()
-  }, {
-    key: "showPopupLoading",
-    value: function showPopupLoading() {
-      var loading = document.createElement('div');
-      loading === null || loading === void 0 ? void 0 : loading.classList.add(loadingId);
-      loading.id = loadingId;
-      loading.innerHTML = '<div class="line"><div></div><div></div><div></div><div></div></div>';
-      loading.style.fontSize = "".concat(getDesignFontSize(), "px");
-      var body = document.getElementsByTagName('body')[0];
-      body === null || body === void 0 ? void 0 : body.appendChild(loading);
-    }
-
-    /**
-     * @description show cashier
-     */
-  }, {
-    key: "setContainerClass",
-    value: function setContainerClass() {
-      var cashier = document.getElementById(componentContainerId);
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.remove("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      cashier === null || cashier === void 0 ? void 0 : cashier.classList.add("".concat(componentContainerId, "-").concat(this.platform));
-    }
-
     /**
      * @description close cashier
      */
   }, {
     key: "cleanContainer",
     value: function cleanContainer() {
-      var _document$getElementB3;
+      var _document$getElementB4,
+        _this5 = this;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
       this._performanceData = [];
       this._isInitComponent = false;
-      (_document$getElementB3 = document.getElementById(loadingId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
-      this.hideComponentAndCleanDom(immediately);
+      this.app = null;
+      (_document$getElementB4 = document.getElementById(LOADING_ID)) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
+      this.hideComponentAnimation();
+      var mockup = document.getElementById(MOCKUP_ID);
+      mockup === null || mockup === void 0 ? void 0 : mockup.classList.add("".concat(MOCKUP_ID, "-hidden"));
+      if (immediately) this.cleanElement();else {
+        setTimeout(function () {
+          _this5.cleanElement();
+        }, 300);
+      }
     }
   }, {
-    key: "hideComponentAndCleanDom",
-    value: function hideComponentAndCleanDom() {
-      var _this5 = this;
-      var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var container = document.getElementById(componentContainerId);
+    key: "hideComponentAnimation",
+    value: function hideComponentAnimation() {
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (container) {
         // size变化动画取消
         container.style.transition = '';
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform));
-        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-").concat(this.platform, "-animation"));
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-hidden-").concat(this.platform));
-      }
-      var removeMockupAndApp = function removeMockupAndApp() {
-        var _document$getElementB4;
-        var body = document.getElementsByTagName('body')[0];
-        body.style.overflow = 'auto';
-        var mockup = document.getElementById(mockupId);
-        mockup === null || mockup === void 0 ? void 0 : mockup.remove();
-        if (container) container.style.height = '';
-        (_document$getElementB4 = document.getElementById("".concat(componentContainerId, "-").concat(_this5.platform, "-animation-style"))) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
-        _this5.removeRetentionPopup();
-        _this5.cleanApp();
-      };
-      if (immediately) removeMockupAndApp();else {
-        setTimeout(function () {
-          removeMockupAndApp();
-        }, 300);
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform));
+        container === null || container === void 0 ? void 0 : container.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-hidden-").concat(this.platform));
       }
     }
   }, {
@@ -792,143 +735,33 @@ var ComponentApp = /*#__PURE__*/function () {
         this.dispatchToSDK(EVENT.close.name, {});
       }
     }
-
-    /**
-     * @description create mount node
-     */
-  }, {
-    key: "createBaseElement",
-    value: function createBaseElement() {
-      if (document.getElementById(componentContainerId)) return;
-      componentAddCSS();
-      addSetFontSizeEvent();
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-hidden-").concat(this.platform);
-      amsComponentContainer.id = componentContainerId;
-      amsSetSize(null, amsComponentContainer);
-      document.body.appendChild(amsComponentContainer);
-      var amsComponentSection = document.createElement('div');
-      amsComponentSection.className = "ams-component-section-".concat(this.platform);
-      amsComponentSection.id = componentSectionId;
-      amsComponentContainer.appendChild(amsComponentSection);
-      this.createCloseBtn();
-    }
-  }, {
-    key: "createInlineBaseElement",
-    value: function createInlineBaseElement(renderParams) {
-      var _renderParams$appeara2;
-      var inlineBaseStyle = document.getElementById(inlineBaseStyleId);
-      if (!inlineBaseStyle) inlineComponentAddCss();
-      if (document.getElementById(componentContainerId)) return;
-      var amsComponentContainer = document.createElement('div');
-      amsComponentContainer.className = "".concat(componentContainerId, "-inline");
-      amsComponentContainer.id = componentContainerId;
-      var selectorDom = document.querySelector(this._selector);
-      if (selectorDom) selectorDom.appendChild(amsComponentContainer);
-      var showLoading = renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara2 = renderParams.appearance) === null || _renderParams$appeara2 === void 0 ? void 0 : _renderParams$appeara2.showLoading;
-      showLoading = typeof showLoading === 'boolean' ? showLoading : true;
-      if (showLoading) showInlineLoading(amsComponentContainer, this.platform);
-    }
-  }, {
-    key: "createCloseBtn",
-    value: function createCloseBtn() {
-      var _this6 = this;
-      var container = document.getElementById(componentContainerId);
-      // close btn
-      var closeBtnHTML = "<img class='".concat(componentCloseBlockId, "-btn-").concat(this.platform, "' src=\"").concat(closeImg, "\"/>");
-      var closeBlock = document.createElement('div');
-      closeBlock.classList.add("".concat(componentCloseBlockId, "-").concat(this.platform), "".concat(componentCloseBlockId, "-hidden"));
-      closeBlock.id = componentCloseBlockId;
-      closeBlock.innerHTML = closeBtnHTML;
-      closeBlock.addEventListener(this._clickEventName, function () {
-        _this6.closeBtnFunc();
-      });
-      if (container) container.appendChild(closeBlock);
-    }
-  }, {
-    key: "createRetentionPopup",
-    value: function createRetentionPopup() {
-      // retention popup
-      var retentionPopup = document.createElement('div');
-      retentionPopup.id = componentRetentionId;
-      retentionPopup.classList.add("".concat(componentRetentionId, "-").concat(this.platform));
-      retentionPopup.innerHTML = "\n    <span id=\"".concat(componentRetentionId, "-title\" class=\"").concat(componentRetentionId, "-title-").concat(this.platform, "\">\n      Are you sure you want to leave?\n    </span>\n    <span\n      id=\"").concat(componentRetentionId, "-sub-title\"\n      class=\"").concat(componentRetentionId, "-sub-title-").concat(this.platform, "\"\n    >\n      If you leave this page, you'll have to start over again.\n    </span>\n    <div class=\"").concat(componentRetentionId, "-btn-block-").concat(this.platform, "\">\n      <div id=\"").concat(componentRetentionId, "-remain\" class=\"").concat(componentRetentionId, "-remain-").concat(this.platform, "\">\n        Continue Payment\n      </div>\n      <div id=\"").concat(componentRetentionId, "-leave\" class=\"").concat(componentRetentionId, "-leave-").concat(this.platform, "\">\n        Leave\n      </div>\n    </div>");
-      document.body.appendChild(retentionPopup);
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.addEventListener(this._clickEventName, this.hideRetentionPopup.bind(this));
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.addEventListener(this._clickEventName, this.retentionPopupLeaveFunc.bind(this));
-      }
-    }
   }, {
     key: "retentionPopupLeaveFunc",
     value: function retentionPopupLeaveFunc() {
       this.dispatchToSDK(EVENT.close.name, {});
-      this.hideRetentionPopup();
+      this.hideRetentionPopupFunc();
       this.cleanContainer();
     }
   }, {
     key: "removeRetentionPopup",
-    value: function removeRetentionPopup() {
-      var _document$getElementB5;
-      var remainBtn = document.getElementById("".concat(componentRetentionId, "-remain"));
-      if (remainBtn) {
-        remainBtn.removeEventListener(this._clickEventName, this.hideRetentionPopup);
-      }
-      var leaveBtn = document.getElementById("".concat(componentRetentionId, "-leave"));
-      if (leaveBtn) {
-        leaveBtn.removeEventListener(this._clickEventName, this.retentionPopupLeaveFunc);
-      }
-      (_document$getElementB5 = document.getElementById(componentRetentionId)) === null || _document$getElementB5 === void 0 ? void 0 : _document$getElementB5.remove();
+    value: function removeRetentionPopup(platform) {
+      _removeRetentionPopup(platform, this.hideRetentionPopupFunc.bind(this), this.retentionPopupLeaveFunc.bind(this));
     }
   }, {
     key: "showRetentionPopup",
     value: function showRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
+      var retentionPopup = document.getElementById(COMPONENT_RETENTION_ID);
+      var container = document.getElementById(COMPONENT_CONTAINER_ID);
       if (retentionPopup) {
-        container === null || container === void 0 ? void 0 : container.classList.add("".concat(componentContainerId, "-opacity"));
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-show"));
+        container === null || container === void 0 ? void 0 : container.classList.add("".concat(COMPONENT_CONTAINER_ID, "-opacity"));
+        retentionPopup.classList.remove("".concat(COMPONENT_RETENTION_ID, "-hidden"));
+        retentionPopup.classList.add("".concat(COMPONENT_RETENTION_ID, "-show"));
       }
     }
   }, {
-    key: "hideRetentionPopup",
-    value: function hideRetentionPopup() {
-      var retentionPopup = document.getElementById(componentRetentionId);
-      var container = document.getElementById(componentContainerId);
-      if (retentionPopup) {
-        retentionPopup.classList.remove("".concat(componentRetentionId, "-show"));
-        retentionPopup.classList.add("".concat(componentRetentionId, "-hidden"));
-        setTimeout(function () {
-          retentionPopup.classList.remove("".concat(componentRetentionId, "-hidden"));
-          container === null || container === void 0 ? void 0 : container.classList.remove("".concat(componentContainerId, "-opacity"));
-        }, 300);
-      }
-    }
-    /**
-     * @description create mockup
-     */
-  }, {
-    key: "createMockup",
-    value: function createMockup() {
-      var body = document.getElementsByTagName('body')[0];
-      body.style.overflow = 'hidden';
-      var mockup = document.createElement('div');
-      mockup.style.width = '100vw';
-      mockup.style.height = '100vh';
-      mockup.style.position = 'fixed';
-      mockup.style.top = '0';
-      mockup.style.left = '0';
-      mockup.style.zIndex = '1000';
-      mockup.style.background = '#ffffff';
-      mockup.style.opacity = '0.5';
-      mockup.style.display = 'none';
-      mockup.id = mockupId;
-      body.appendChild(mockup);
+    key: "hideRetentionPopupFunc",
+    value: function hideRetentionPopupFunc() {
+      hideRetentionPopup();
     }
   }, {
     key: "submitForm",

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

@@ -1,5 +1,5 @@
 import type AMSCheckout from '../../core/instance';
-import type { createPaymentParams, eventPlayload } from '../../types';
+import type { IcreatePaymentParams, eventPlayload } from '../../types';
 export default class CheckoutApp {
     app: any;
     paymentMethodsResult: any;
@@ -16,13 +16,11 @@ export default class CheckoutApp {
     /**
      * @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(createIframeNode: (context: CheckoutApp, renderParams: {
-        selector: string | HTMLElement;
-    }) => Promise<void>): void;
+    setRender(createIframeNode: any): void;
     /**
      * @description High order function of rendering capability
      */
-    render(renderParams: createPaymentParams): Promise<void>;
+    render(renderParams: IcreatePaymentParams): Promise<void>;
     /**
      * @description Cancel listening and destroy the dom
      */