@alipay/ams-checkout 0.0.1694400497-dev.1 → 1.3.0

package/{esm → dist/esm}/plugin/component/index.js

@@ -2,6 +2,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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; }
@@ -15,45 +17,62 @@ 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 json from "../../../package.json";
+import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
 import { queryPaymentInfo } from "../../service";
-import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
-import { getType, isJsonString, isPC } from "../../util";
+import { componentNameEnum, messageName, Target } from "../../types";
+import { getDesignFontSize, getOrigin, getType, getViewPort, isJsonString, isPC, queryParse, serialize } 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 { getAppDomain, getAppPath } from "./appPath";
+import { componentAddCSS } from "./component.style";
+var amsSetSize = function amsSetSize(event, dom) {
+  try {
+    var _dom = dom || document.getElementById('ams-component-container');
+    _dom.style.fontSize = "".concat(getDesignFontSize(), "px");
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+};
+var addEvent = function addEvent() {
+  window.removeEventListener('resize', amsSetSize);
+  window.removeEventListener('pageShow', amsSetSize);
+  window.removeEventListener('DOMContentLoaded', amsSetSize);
+  window.addEventListener('resize', amsSetSize);
+  window.addEventListener('pageShow', amsSetSize);
+  window.addEventListener('DOMContentLoaded', amsSetSize);
+};
 var _window = window,
   innerHeight = _window.innerHeight;
+var mockupId = 'ams-component-mockup';
+var loadingId = 'ams-component-loading';
 var ComponentApp = /*#__PURE__*/function () {
   function ComponentApp() {
     _classCallCheck(this, ComponentApp);
     _defineProperty(this, "app", void 0);
+    _defineProperty(this, "paymentMethodsResult", 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, "_renderParams", null);
-    _defineProperty(this, "_componentSign", componentSignEnum.NONE);
+    _defineProperty(this, "_componentName", '');
+    _defineProperty(this, "_performanceData", []);
+    _defineProperty(this, "_isInitComponent", void 0);
     _defineProperty(this, "_clickEventName", void 0);
-    _defineProperty(this, "_renderDisplayType", renderDisplayTypeEnum.popup);
-    this._appVersion = '1.5.4';
+    this._appVersion = '1.3.0';
     this._isInitComponent = false;
-    this._selector = "#".concat(COMPONENT_SECTION_ID);
+    this._selector = '#ams-component-section';
     this.createIframeNode = function () {
       return Promise.resolve();
     };
-    this.platform = isPC() ? platformEnum.desktop : platformEnum.mobile;
-    this._clickEventName = this.platform === platformEnum.mobile ? 'touchend' : 'click';
+    this.platform = isPC() ? 'desktop' : 'mobile';
+    this._clickEventName = this.platform === 'mobile' ? 'touchend' : 'click';
     this._isRetention = true;
+    addEvent();
+    this.createMountElement();
     this._performanceData.push({
       key: 'sdk_init',
       value: Date.now()
@@ -66,7 +85,7 @@ var ComponentApp = /*#__PURE__*/function () {
   _createClass(ComponentApp, [{
     key: "logoutPlugin",
     value: function logoutPlugin() {
-      this.cleanContainer(true);
+      this.closeCashier();
     }
 
     /**
@@ -84,8 +103,8 @@ var ComponentApp = /*#__PURE__*/function () {
      */
   }, {
     key: "setRender",
-    value: function setRender(renderFunc) {
-      this.createIframeNode = renderFunc;
+    value: function setRender(createIframeNode) {
+      this.createIframeNode = createIframeNode;
     }
 
     /**
@@ -93,207 +112,133 @@ var ComponentApp = /*#__PURE__*/function () {
      */
   }, {
     key: "appendIframeNodes",
-    value: function appendIframeNodes(componentSign, renderParams) {
-      var _this = this;
-      if (this._isInitComponent) {
-        this.dispatchToSDK(EVENT.error.name, ERRORMESSAGE.CREATECOMPONENT_ERROR.SINGLETON_COMPONENT_ERROR);
-        return Promise.reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.SINGLETON_COMPONENT_ERROR);
-      }
+    value: function appendIframeNodes(componentName, renderParams) {
+      var _renderParams$appeara,
+        _this = this;
+      if (this._isInitComponent) return Promise.reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.SINGLETON_COMPONENT_ERROR);
       this._isInitComponent = true;
-      this._renderParams = renderParams;
-      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(COMPONENT_CONTAINER_ID) : this._selector;
       this._performanceData.push({
         key: 'sdk_create_component',
         value: Date.now()
       });
-      this.dispatchToSDK(EVENT.eventCallback.name, {
-        code: eventCodeEnum.SDK_START_OF_LOADING
-      });
-      if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        var container = createInlineBaseElement(this._selector);
-        if (container) this.renderInlineLoading(renderParams, container);
-      }
-      if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        createBaseElement(this.platform, this.closeBtnFunc.bind(this));
-        createRetentionPopup(this.platform, this.hideRetentionPopupFunc.bind(this), this.retentionPopupLeaveFunc.bind(this));
-        createMockup();
-        this.renderPopupLoading(renderParams);
+      this.createRetentionPopup();
+      this.createMockup();
+      if ((renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading) !== false) {
+        var mockup = document.getElementById(mockupId);
+        if (mockup) {
+          mockup.style.display = 'block';
+        }
+        this.showLoading();
       }
+      this.showCashier();
+      this._renderParams = renderParams;
+      this._componentName = componentName;
       this.createApp(renderParams);
-      return Promise.all([this.createActionQueryPromise(), this.createIframeNode(this, insertedNode, this._renderDisplayType), this._createLoadAppPromise()]).then(function () {
-        return Promise.resolve();
-      }).catch(function (error) {
+      this.newQueryPromise();
+      return Promise.all([this.createIframeNode(this, _objectSpread(_objectSpread({}, renderParams), {}, {
+        selector: this._selector
+      })), this._actionQueryPromise]).catch(function () {
         _this._isInitComponent = false;
-        _this.cleanContainer();
-        return Promise.reject(error);
       });
     }
   }, {
-    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;
-      var mockup = document.getElementById(MOCKUP_ID);
-      if (mockup) mockup.style.display = 'block';
-      addPopupLoading();
-    }
-  }, {
-    key: "_createLoadAppPromise",
-    value: function _createLoadAppPromise() {
+    key: "newQueryPromise",
+    value: function newQueryPromise() {
       var _this2 = this;
-      return new Promise(function (resolve, reject) {
-        _this2._loadAppPromiseResolve = resolve;
-        setTimeout(function () {
-          reject(ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT);
-        }, LOADTIME_LIMIT);
-      }).catch(function (error) {
-        _this2.dispatchToSDK(EVENT.error.name, {
-          code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code,
-          message: ERRORMESSAGE.CREATECOMPONENT_ERROR.LOAD_APP_TIMEOUT.message
-        });
-        return Promise.reject(error);
-      });
-    }
-
-    /**
-     * @description Interface request
-     */
-  }, {
-    key: "createActionQueryPromise",
-    value: function createActionQueryPromise() {
-      var _this3 = this;
       this._performanceData.push({
         key: 'sdk_action_query_start',
         value: Date.now()
       });
       this._actionQueryPromise = new Promise(function (resolve, reject) {
-        var _this3$_renderParams, _this3$_renderParams2, _this3$_renderParams3;
+        var _this2$_renderParams, _this2$_renderParams2, _this2$_renderParams3;
         var params = {
-          paymentSessionData: _this3._renderParams && ((_this3$_renderParams = _this3._renderParams) === null || _this3$_renderParams === void 0 ? void 0 : _this3$_renderParams.paymentSessionData) || '',
-          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
+          paymentSessionData: _this2._renderParams && ((_this2$_renderParams = _this2._renderParams) === null || _this2$_renderParams === void 0 ? void 0 : _this2$_renderParams.paymentSessionData),
+          paymentSessionConfig: ((_this2$_renderParams2 = _this2._renderParams) === null || _this2$_renderParams2 === void 0 ? void 0 : (_this2$_renderParams3 = _this2$_renderParams2.paymentSessionMetaData) === null || _this2$_renderParams3 === void 0 ? void 0 : _this2$_renderParams3.paymentSessionConfig) || {}
         };
-        /**
-         * @description card
-         */
-        if (componentSignEnum.CASHIER_PAYMENT_CARD === _this3._componentSign) {
+        if (componentNameEnum.card === _this2._componentName) {
+          var _this2$_renderParams4, _this2$_renderParams5;
           params.paymentMethodType = 'CARD';
+          params.paymentSessionConfig = ((_this2$_renderParams4 = _this2._renderParams) === null || _this2$_renderParams4 === void 0 ? void 0 : (_this2$_renderParams5 = _this2$_renderParams4.paymentSessionMetaData) === null || _this2$_renderParams5 === void 0 ? void 0 : _this2$_renderParams5.paymentSessionConfig) || {};
         }
-        /**
-         * @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;
-          if (productScene === productSceneEnum.EASY_PAY && productSceneVersion === '2.0' && !autoDebitWithToken) {
-            // if EASY_PAY 2.0 , no need to query payment request
+        if (componentNameEnum.easyPay === _this2._componentName) {
+          var _this2$_renderParams6, _this2$_renderParams7, _this2$_renderParams8;
+          params.paymentSessionConfig = ((_this2$_renderParams6 = _this2._renderParams) === null || _this2$_renderParams6 === void 0 ? void 0 : (_this2$_renderParams7 = _this2$_renderParams6.paymentSessionMetaData) === null || _this2$_renderParams7 === void 0 ? void 0 : _this2$_renderParams7.paymentSessionConfig) || {};
+          // if EASY_PAY 2.0 , no need to query payment request
+          var _params$paymentSessio = params.paymentSessionConfig,
+            _params$paymentSessio2 = _params$paymentSessio.productSceneVersion,
+            productSceneVersion = _params$paymentSessio2 === void 0 ? '' : _params$paymentSessio2,
+            _params$paymentSessio3 = _params$paymentSessio.productScene,
+            productScene = _params$paymentSessio3 === void 0 ? '' : _params$paymentSessio3;
+          var _ref = ((_this2$_renderParams8 = _this2._renderParams) === null || _this2$_renderParams8 === void 0 ? void 0 : _this2$_renderParams8.paymentSessionMetaData) || {},
+            _ref$action = _ref.action,
+            _ref$action2 = _ref$action === void 0 ? {} : _ref$action,
+            _ref$action2$autoDebi = _ref$action2.autoDebitWithToken,
+            autoDebitWithToken = _ref$action2$autoDebi === void 0 ? false : _ref$action2$autoDebi;
+          if (productScene === 'EASY_PAY' && productSceneVersion === '2.0' && !autoDebitWithToken) {
+            // make queryResult no data  we setAppStateData in antom-web-checkout app,
+            // eslint-disable-next-line no-promise-executor-return
             return resolve({
-              message: 'sdk no need to make query request',
-              success: true
+              message: 'sdk no need to make query request'
             });
           }
         }
         /**
          * @author tianqiang
-         * @description autoDebit
+         * @description 代扣逻辑处理
          */
-        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 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 (componentNameEnum.autoDebit === _this2._componentName) {
+          var _this2$_renderParams9, _this2$_renderParams10, _action$web, _action$wap;
+          var action = ((_this2$_renderParams9 = _this2._renderParams) === null || _this2$_renderParams9 === void 0 ? void 0 : (_this2$_renderParams10 = _this2$_renderParams9.paymentSessionMetaData) === null || _this2$_renderParams10 === void 0 ? void 0 : _this2$_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({
-              message: 'sdk no need to make query request',
-              success: true
+              message: 'sdk no need to make query request'
             });
-          }
-          if (!signType || signType !== 'REDIRECT') {
+          } else if (!signType || signType !== 'REDIRECT') {
             return resolve({
               success: false
             });
           }
         }
 
-        // mock
+        // 本地执行mock
         if (isLocalMock()) {
           return resolve({
-            message: 'sdk no need to make query request',
-            success: true
+            message: 'sdk no need to make query request'
           });
         }
         queryPaymentInfo(params, {
-          env: _this3.AMSSDK.options.env.environment,
-          locale: _this3.AMSSDK.options.locale
+          env: _this2.AMSSDK.options.env.environment,
+          locale: _this2.AMSSDK.options.locale
         }).then(function (res) {
-          _this3._performanceData.push({
+          _this2._performanceData.push({
             key: 'sdk_action_query_end',
             value: Date.now()
           });
-          if (res !== null && res !== void 0 && res.success) {
+          if (res && res.success) {
             resolve(res);
           } else {
             resolve(res);
+            _this2.dispatchToSDK(EVENT.error.name, ERRORMESSAGE.CREATECOMPONENT_ERROR);
           }
         }).catch(function (err) {
-          _this3.dispatchToSDK(EVENT.error.name, {
-            code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code
-          });
           reject(err);
+          _this2.closeCashier();
         });
       });
-      return this._actionQueryPromise;
     }
   }, {
-    key: "cleanElement",
-    value: function cleanElement() {
+    key: "cleanApp",
+    value: function cleanApp() {
       try {
-        var _document$getElementB;
-        // selector and container
+        this.app = null;
+        this._removeEventListener();
         if (getType(this._selector) === 'string') {
-          var selectorDom = document.querySelector(this._selector);
-          if (selectorDom) selectorDom.innerHTML = '';
+          var dorpinDom = document.querySelector(this._selector);
+          if (dorpinDom) dorpinDom.innerHTML = '';
         }
-        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);
-      }
+        // eslint-disable-next-line no-empty
+      } catch (error) {}
     }
 
     /**
@@ -314,28 +259,12 @@ var ComponentApp = /*#__PURE__*/function () {
         var _renderParams$payment, _renderParams$payment2, _renderParams$payment3;
         var productSceneVersion = (renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$payment = renderParams.paymentSessionMetaData) === null || _renderParams$payment === void 0 ? void 0 : (_renderParams$payment2 = _renderParams$payment.paymentSessionConfig) === null || _renderParams$payment2 === void 0 ? void 0 : _renderParams$payment2.productSceneVersion) || '';
         var extendInfo = (renderParams === null || renderParams === void 0 ? void 0 : (_renderParams$payment3 = renderParams.paymentSessionMetaData) === null || _renderParams$payment3 === void 0 ? void 0 : _renderParams$payment3.extendInfo) || '';
-        var environment = this.AMSSDK.options.env.environment;
-        this.appDomain = getAppDomain({
-          environment: environment,
-          appVersion: this._appVersion,
-          componentSign: this._componentSign,
-          productSceneVersion: productSceneVersion,
-          extendInfo: extendInfo
-        });
-        this.app = createIframe(this.AMSSDK.options.mode, this.platform);
-        this.app.src = getIframeUrl({
-          componentSign: this._componentSign,
-          analytics: this.AMSSDK.options.analytics,
-          productSceneVersion: productSceneVersion,
-          environment: environment,
-          appVersion: this._appVersion,
-          extendInfo: extendInfo,
-          locale: this.AMSSDK.options.locale,
-          instanceId: this.AMSSDK._instanceId
-        });
+        this.appDomain = getAppDomain(this.AMSSDK.options.env.environment, this._appVersion, this._componentName, productSceneVersion, extendInfo);
+        this.app = this.createIframe();
+        this.app.src = this.getIframeUrl(this._componentName, (renderParams === null || renderParams === void 0 ? void 0 : renderParams.appearance) || {}, this.AMSSDK.options.analytics, productSceneVersion);
 
         // 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
@@ -343,8 +272,76 @@ var ComponentApp = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "listener",
-    value: function listener(e) {
+    key: "getIframeUrl",
+    value: function getIframeUrl(componentName, appearance) {
+      var _this$_renderParams, _this$_renderParams$p;
+      var analytics = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var productSceneVersion = arguments.length > 3 ? arguments[3] : undefined;
+      var path = getAppPath(this.AMSSDK.options.env.environment, this._appVersion, componentName, productSceneVersion, ((_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.extendInfo) || '');
+      var scale = getViewPort('initial-scale') || 1;
+      var _queryParse = queryParse(),
+        _sandbox = _queryParse._sandbox,
+        _light_sandbox = _queryParse._light_sandbox,
+        _queryParse$requestHo = _queryParse.requestHost,
+        requestHost = _queryParse$requestHo === void 0 ? '' : _queryParse$requestHo,
+        _queryParse$groupId = _queryParse.groupId,
+        groupId = _queryParse$groupId === void 0 ? '' : _queryParse$groupId,
+        LOCAL_MOCK = _queryParse.LOCAL_MOCK;
+      var urlParams = Object.assign({
+        locale: this.AMSSDK.options.locale,
+        scale: scale,
+        merchantDomain: window.btoa(getOrigin()),
+        instanceId: this.AMSSDK._instanceId,
+        sandbox: this.AMSSDK.options.env.environment === 'light_sandbox' || _light_sandbox === 'true' ? 'true' : 'false',
+        analyticsEnabled: (analytics === null || analytics === void 0 ? void 0 : analytics.enabled) === false ? 'false' : 'true',
+        sdkVersion: json.version,
+        refUrl: window.location.href,
+        shadow: this.AMSSDK.options.env.environment === 'sandbox' || _sandbox === 'true' ? 'true' : 'false',
+        requestHost: requestHost,
+        groupId: groupId,
+        LOCAL_MOCK: LOCAL_MOCK
+      }, appearance);
+      var locationSearch = serialize(urlParams);
+      return "".concat(path, "?").concat(locationSearch);
+    }
+
+    /**
+     * @description Create iframe
+     */
+  }, {
+    key: "createIframe",
+    value: function createIframe() {
+      var iframe = document.createElement('iframe');
+      var iframeId = this._getIframeId(this.AMSSDK.options.mode);
+      iframe.id = iframeId;
+      iframe.style.height = '0px';
+      iframe.style.width = '100%';
+      iframe.style.border = '0';
+      iframe.style.overflow = 'hidden';
+      return iframe;
+    }
+
+    /**
+     * @description Get iftame id
+     */
+  }, {
+    key: "_getIframeId",
+    value: function _getIframeId(UIMode) {
+      var id = 'checkout-dropin';
+      // eslint-disable-next-line default-case
+      switch (UIMode) {
+        case 'dropin':
+          id = 'checkout-dropin';
+          break;
+        case 'component':
+          id = 'checkout-component';
+          break;
+      }
+      return id;
+    }
+  }, {
+    key: "_listener",
+    value: function _listener(e) {
       if (e.origin !== this.appDomain) {
         return;
       }
@@ -354,47 +351,27 @@ 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);
         this.dispatchToSDK(EVENT.error.name, ERRORMESSAGE.NOT_JSON_FORMAT);
       }
     }
-  }, {
-    key: "resizeListener",
-    value: function resizeListener() {
-      var cashier = document.getElementById(COMPONENT_CONTAINER_ID);
-      cashier.style.transition = 'none';
-      this.dispatchToApp({
-        context: {
-          event: 'renderResize',
-          data: {
-            heightOfVisible: window.innerHeight,
-            widthOfVisible: window.innerWidth
-          }
-        }
-      });
-    }
 
     /**
      * @description Initialize subscription iframe message
      */
   }, {
-    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: "_addEventListener",
+    value: function _addEventListener() {
+      window["_ams_sdk_component_listener_".concat(this.AMSSDK._instanceId)] = this._listener.bind(this);
+      this._removeEventListener();
+      window.addEventListener('message', window["_ams_sdk_component_listener_".concat(this.AMSSDK._instanceId)]);
     }
   }, {
-    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")]);
+    key: "_removeEventListener",
+    value: function _removeEventListener() {
+      window.removeEventListener('message', window["_ams_sdk_component_listener_".concat(this.AMSSDK._instanceId)]);
     }
 
     /**
@@ -403,10 +380,7 @@ 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;
-      }
+      var eventKeyMap = [EVENT.launch.name, EVENT.redirect.name, EVENT.sizeChanged.name, EVENT.log.name, EVENT.onClose.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 (data.context.event === EVENT.dismissLoading.name) {
         var _data$context$data;
         this.dispatchToSDK(EVENT.eventCallback.name, {
@@ -415,19 +389,21 @@ 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',
           value: Date.now()
         });
-        this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
         this.sendRenderEvent();
         return;
       }
       if (data.context.event === EVENT.sizeChanged.name) {
         this.handleSizeChanged(data);
       }
-      if (data.context.event === EVENT.close.name) {
+      if (data.context.event === EVENT.onClose.name) {
         return this.closeBtnFunc();
       }
       if (data.context.event === EVENT.redirect.name) {
@@ -456,35 +432,35 @@ var ComponentApp = /*#__PURE__*/function () {
       }
 
       // The plug-in communicates with the sdk after processing
-      this.dispatchToSDK(data.context.event, data.context.data, data.context.eventCallbackId);
+      this.dispatchToSDK(data.context.event, data.context.data);
     }
   }, {
     key: "handleSizeChanged",
     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(COMPONENT_CONTAINER_ID);
-      cashier.style.height = "".concat(data.context.data.height, "px");
-      if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
-        var _document$getElementB2;
-        var mockup = document.getElementById(MOCKUP_ID);
+      if (((_data$context$data2 = data.context.data) === null || _data$context$data2 === void 0 ? void 0 : _data$context$data2.height) > 1) {
+        var _document$getElementB;
+        var mockup = document.getElementById(mockupId);
         if (mockup) {
-          mockup.style.background = 'rgb(0, 0, 0, 0.6)';
+          mockup.style.background = '#000000';
+          mockup.style.opacity = '0.6';
           mockup.style.display = 'block';
         }
-        (_document$getElementB2 = document.getElementById(LOADING_ID)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+        (_document$getElementB = document.getElementById(loadingId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+        var cashier = document.getElementById('ams-component-container');
+        cashier.style.height = "".concat(data.context.data.height, "px");
         if (this.platform === 'desktop') {
-          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
+          cashier.classList.add('ams-component-container-desktop-animation');
           if (data.context.data.width) cashier.style.width = "".concat(data.context.data.width, "px");
         }
         if (this.platform === 'mobile') {
-          cashier.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation"));
-          var animationStyleId = "".concat(COMPONENT_CONTAINER_ID, "-").concat(this.platform, "-animation-style");
+          cashier.classList.add('ams-component-container-mobile-animation');
+          var animationStyleId = 'ams-component-container-mobile-animation-style';
           var animationStyle = document.getElementById(animationStyleId);
           if (animationStyle) animationStyle === null || animationStyle === void 0 ? void 0 : animationStyle.remove();
 
           // 弹出和弹入动画
-          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        }");
+          var runkeyframes = " @keyframes ams-component-container-slide-in {\n          0% {\n            height: 1px;\n          }\n          100% {\n            height: ".concat(data.context.data.height, "px;\n          }\n        }\n        @keyframes ams-component-container-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;
@@ -498,20 +474,19 @@ var ComponentApp = /*#__PURE__*/function () {
           // size变动时动画
           setTimeout(function () {
             cashier.style.transition = 'height 0.28s ease-in-out';
-          }, 500);
+          }, 400);
         }
+        this.app.style.height = "".concat(data.context.data.height, "px");
+        this.app.style.width = '100%';
+        this.app.style.border = '0';
+        this.app.style.overflow = 'hidden';
       }
-      if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
-        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';
     }
   }, {
     key: "handleRedirect",
     value: function handleRedirect(data) {
-      var _this4 = this;
+      var _this3 = this;
+      this.closeCashier();
       var _data = typeof data === 'string' ? {
         normalUrl: data
       } : {
@@ -521,38 +496,37 @@ var ComponentApp = /*#__PURE__*/function () {
         target: data === null || data === void 0 ? void 0 : data.target
       };
       var successCallback = function successCallback(type, url) {
-        _this4.dispatchToSDK(EVENT.eventCallback.name, {
-          code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
+        _this3.dispatchToSDK(EVENT.eventCallback.name, {
+          code: 'SDK_CALL_URL_SUCCESS',
           message: "Successfully opened the app,".concat(type, ": ").concat(url)
         });
       };
       var failCallback = function failCallback() {
-        _this4.dispatchToSDK(EVENT.eventCallback.name, {
-          code: eventCodeEnum.SDK_CALL_URL_SUCCESS,
+        _this3.dispatchToSDK(EVENT.eventCallback.name, {
+          code: 'SDK_CALL_URL_ERROR',
           message: "Failed to open app,applinkUrl: ".concat(_data === null || _data === void 0 ? void 0 : _data.applinkUrl, " schemeUrl: ").concat(_data === null || _data === void 0 ? void 0 : _data.schemeUrl, " normalUrl: ").concat(_data === null || _data === void 0 ? void 0 : _data.normalUrl)
         });
       };
 
-      // 支持 target: _blank，新开tab页打开
-      if (_data.target === targetEnum.BLANK) {
-        if (!_data.normalUrl) return failCallback();
+      // pc端支持 target: _blank，新开tab页打开
+      if (_data.target === Target.BLANK) {
         successCallback('normalUrl', _data.normalUrl);
+        if (!_data.normalUrl) return;
         window.open(_data.normalUrl);
         return;
       }
-      this.cleanContainer();
       this.AMSSDK._redirect({
         applinkUrl: _data === null || _data === void 0 ? void 0 : _data.applinkUrl
       }).then(function () {
         successCallback('applinkUrl', _data === null || _data === void 0 ? void 0 : _data.applinkUrl);
       }).catch(function () {
-        return _this4.AMSSDK._redirect({
+        return _this3.AMSSDK._redirect({
           schemeUrl: _data === null || _data === void 0 ? void 0 : _data.schemeUrl
         });
       }).then(function () {
         successCallback('schemeUrl', _data === null || _data === void 0 ? void 0 : _data.schemeUrl);
       }).catch(function () {
-        return _this4.AMSSDK._redirect({
+        return _this3.AMSSDK._redirect({
           normalUrl: _data === null || _data === void 0 ? void 0 : _data.normalUrl
         });
       }).then(function () {
@@ -563,21 +537,62 @@ var ComponentApp = /*#__PURE__*/function () {
     }
   }, {
     key: "handleDeclareInfo",
-    value: function handleDeclareInfo(_ref3) {
-      var _ref3$closeDialogData = _ref3.closeDialogData,
-        closeDialogData = _ref3$closeDialogData === void 0 ? {} : _ref3$closeDialogData;
-      _handleDeclareInfo({
-        closeDialogData: closeDialogData
-      });
+    value: function handleDeclareInfo(_ref2) {
+      var _ref2$closeDialogData = _ref2.closeDialogData,
+        closeDialogData = _ref2$closeDialogData === void 0 ? {} : _ref2$closeDialogData;
+      try {
+        if (closeDialogData) {
+          var retentionTitle = document.getElementById('ams-component-retention-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('ams-component-retention-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('ams-component-retention-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('ams-component-retention-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);
+      }
     }
   }, {
     key: "handleCloseBtnShow",
     value: function handleCloseBtnShow(showClose) {
-      var closeBlock = document.getElementById(COMPONENT_CLOSE_BLOCK_ID);
+      var closeBlock = document.getElementById('asm-component-section-close-block');
       if (showClose) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.remove('asm-component-close-block-hidden');
       } else if (showClose === false) {
-        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add("".concat(COMPONENT_CLOSE_BLOCK_ID, "-hidden"));
+        closeBlock === null || closeBlock === void 0 ? void 0 : closeBlock.classList.add('asm-component-close-block-hidden');
       }
     }
 
@@ -586,9 +601,8 @@ var ComponentApp = /*#__PURE__*/function () {
      */
   }, {
     key: "dispatchToSDK",
-    value: function dispatchToSDK(event, data, eventCallbackId) {
-      this.AMSSDK._eventCenter.emit(event, data);
-      if (eventCallbackId) this.AMSSDK._eventCenter.emit(eventCallbackId, data);
+    value: function dispatchToSDK(event, data) {
+      this.AMSSDK.eventCenter.emit(event, data);
     }
 
     /**
@@ -596,18 +610,10 @@ var ComponentApp = /*#__PURE__*/function () {
      */
   }, {
     key: "dispatchToApp",
-    value: function dispatchToApp(payload) {
-      var data = Object.assign({}, payload, {
-        name: messageName.SDK_TO_APP,
-        mode: this.AMSSDK.options.mode,
-        appId: COMPONENTPLUGINID,
-        instanceId: this.AMSSDK._instanceId
-      });
-      // TODO 如果存在回调函数，则增加callBack标识，并存入map。map可以设置
+    value: function dispatchToApp(data) {
       if (this.app && this.app.contentWindow) {
-        return this.app.contentWindow.postMessage(JSON.stringify(data), this.appDomain);
+        this.app.contentWindow.postMessage(JSON.stringify(data), this.appDomain);
       }
-      throw new Error(ERRORMESSAGE.SDK_SUBMIT_ERROR.message);
     }
 
     /**
@@ -620,7 +626,7 @@ var ComponentApp = /*#__PURE__*/function () {
       for (var key in eventKeyMap) {
         // eslint-disable-next-line no-prototype-builtins
         if (eventKeyMap.hasOwnProperty(key)) {
-          this.AMSSDK._eventCenter.on("".concat(COMPONENTPLUGINID, "-").concat(key), eventKeyMap[key].bind(this));
+          this.AMSSDK.eventCenter.on("".concat(COMPONENTPLUGINID, "-").concat(key), eventKeyMap[key].bind(this));
         }
       }
     }
@@ -632,7 +638,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, res;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -652,15 +658,17 @@ var ComponentApp = /*#__PURE__*/function () {
                 value: Date.now()
               });
               this.dispatchToApp({
+                name: messageName.SDK_TO_APP,
+                mode: this.AMSSDK.options.mode,
+                appId: COMPONENTPLUGINID,
+                instanceId: this.AMSSDK._instanceId,
                 context: {
                   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.paymentSessionData,
                     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,
                     envInfo: {
                       screenHeight: screen.height,
                       screenWidth: screen.width
@@ -669,6 +677,10 @@ var ComponentApp = /*#__PURE__*/function () {
                 }
               });
               this.dispatchToApp({
+                name: messageName.SDK_TO_APP,
+                mode: this.AMSSDK.options.mode,
+                appId: COMPONENTPLUGINID,
+                instanceId: this.AMSSDK._instanceId,
                 context: {
                   event: 'web-sdk-performance',
                   data: {
@@ -693,39 +705,68 @@ var ComponentApp = /*#__PURE__*/function () {
       }
       return sendRenderEvent;
     }()
+  }, {
+    key: "showLoading",
+    value: function showLoading() {
+      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: "showCashier",
+    value: function showCashier() {
+      var cashier = document.getElementById('ams-component-container');
+      cashier === null || cashier === void 0 ? void 0 : cashier.classList.remove("ams-component-container-hidden-".concat(this.platform));
+      cashier === null || cashier === void 0 ? void 0 : cashier.classList.add("ams-component-container-".concat(this.platform));
+    }
+
     /**
      * @description close cashier
      */
   }, {
-    key: "cleanContainer",
-    value: function cleanContainer() {
-      var _document$getElementB4,
-        _this5 = this;
+    key: "closeCashier",
+    value: function closeCashier() {
+      var _document$getElementB2;
       var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      this._loadAppPromiseResolve && this._loadAppPromiseResolve(true);
       this._performanceData = [];
       this._isInitComponent = false;
-      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);
-      }
+      (_document$getElementB2 = document.getElementById(loadingId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.remove();
+      this.hideComponentAndCleanDom(immediately);
     }
   }, {
-    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(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));
+    key: "hideComponentAndCleanDom",
+    value: function hideComponentAndCleanDom() {
+      var _this4 = this;
+      var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var container = document.getElementById('ams-component-container');
+      // size变化动画取消
+      container.style.transition = '';
+      container === null || container === void 0 ? void 0 : container.classList.remove("ams-component-container-".concat(this.platform));
+      container === null || container === void 0 ? void 0 : container.classList.remove("ams-component-container-".concat(this.platform, "-animation"));
+      container === null || container === void 0 ? void 0 : container.classList.add("ams-component-container-hidden-".concat(this.platform));
+      var removeMockupAndApp = function removeMockupAndApp() {
+        var _document$getElementB3;
+        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$getElementB3 = document.getElementById('ams-component-container-mobile-animation-style')) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.remove();
+        _this4.removeRetentionPopup();
+        _this4.cleanApp();
+      };
+      if (immediately) removeMockupAndApp();else {
+        setTimeout(function () {
+          removeMockupAndApp();
+        }, 300);
       }
     }
   }, {
@@ -733,37 +774,129 @@ var ComponentApp = /*#__PURE__*/function () {
     value: function closeBtnFunc() {
       // element && element.removeEventListener()
       if (this._isRetention) this.showRetentionPopup();else {
-        this.cleanContainer();
-        this.dispatchToSDK(EVENT.close.name, {});
+        this.closeCashier();
+        this.dispatchToSDK(EVENT.onClose.name, {});
+      }
+    }
+
+    /**
+     * @description create mount node
+     */
+  }, {
+    key: "createMountElement",
+    value: function createMountElement() {
+      componentAddCSS();
+      var amsComponentContainer = document.createElement('div');
+      amsComponentContainer.className = "ams-component-container-hidden-".concat(this.platform);
+      amsComponentContainer.id = 'ams-component-container';
+      amsSetSize(null, amsComponentContainer);
+      document.body.appendChild(amsComponentContainer);
+      var amsComponentSection = document.createElement('div');
+      amsComponentSection.className = "ams-component-section-".concat(this.platform);
+      amsComponentSection.id = this._selector.slice(1);
+      amsComponentContainer.appendChild(amsComponentSection);
+      this.createCloseBtn();
+    }
+  }, {
+    key: "createCloseBtn",
+    value: function createCloseBtn() {
+      var _this5 = this;
+      var container = document.getElementById('ams-component-container');
+      // close btn
+      var closeBtnHTML = "<img class='asm-component-close-btn-".concat(this.platform, "' src=\"https://cdn.marmot-cloud.com/storage/2023/5/18/1692a487-99b5-4314-9d6f-e9814bc1ca41.svg\"/>");
+      var closeBlock = document.createElement('div');
+      closeBlock.classList.add("asm-component-close-block-".concat(this.platform), 'asm-component-close-block-hidden');
+      closeBlock.id = 'asm-component-section-close-block';
+      closeBlock.innerHTML = closeBtnHTML;
+      closeBlock.addEventListener(this._clickEventName, function () {
+        _this5.closeBtnFunc();
+      });
+      if (container) container.appendChild(closeBlock);
+    }
+  }, {
+    key: "createRetentionPopup",
+    value: function createRetentionPopup() {
+      // retention popup
+      var retentionPopup = document.createElement('div');
+      retentionPopup.id = 'ams-component-retention';
+      retentionPopup.classList.add("ams-component-retention-".concat(this.platform));
+      retentionPopup.innerHTML = "\n    <span id=\"ams-component-retention-title\" class=\"ams-component-retention-title-".concat(this.platform, "\">\n      Are you sure you want to leave?\n    </span>\n    <span\n      id=\"ams-component-retention-sub-title\"\n      class=\"ams-component-retention-sub-title-").concat(this.platform, "\"\n    >\n      If you leave this page, you'll have to start over again.\n    </span>\n    <div class=\"ams-component-retention-btn-block-").concat(this.platform, "\">\n      <div id=\"ams-component-retention-remain\" class=\"ams-component-retention-remain-").concat(this.platform, "\">\n        Continue Payment\n      </div>\n      <div id=\"ams-component-retention-leave\" class=\"ams-component-retention-leave-").concat(this.platform, "\">\n        Leave\n      </div>\n    </div>");
+      document.body.appendChild(retentionPopup);
+      var remainBtn = document.getElementById('ams-component-retention-remain');
+      if (remainBtn) {
+        remainBtn.addEventListener(this._clickEventName, this.hideRetentionPopup.bind(this));
+      }
+      var leaveBtn = document.getElementById('ams-component-retention-leave');
+      if (leaveBtn) {
+        leaveBtn.addEventListener(this._clickEventName, this.retentionPopupLeaveFunc.bind(this));
       }
     }
   }, {
     key: "retentionPopupLeaveFunc",
     value: function retentionPopupLeaveFunc() {
-      this.dispatchToSDK(EVENT.close.name, {});
-      this.hideRetentionPopupFunc();
-      this.cleanContainer();
+      this.dispatchToSDK(EVENT.onClose.name, {});
+      this.hideRetentionPopup();
+      this.closeCashier();
     }
   }, {
     key: "removeRetentionPopup",
-    value: function removeRetentionPopup(platform) {
-      _removeRetentionPopup(platform, this.hideRetentionPopupFunc.bind(this), this.retentionPopupLeaveFunc.bind(this));
+    value: function removeRetentionPopup() {
+      var _document$getElementB4;
+      var remainBtn = document.getElementById('ams-component-retention-remain');
+      if (remainBtn) {
+        remainBtn.removeEventListener(this._clickEventName, this.hideRetentionPopup);
+      }
+      var leaveBtn = document.getElementById('ams-component-retention-leave');
+      if (leaveBtn) {
+        leaveBtn.removeEventListener(this._clickEventName, this.retentionPopupLeaveFunc);
+      }
+      (_document$getElementB4 = document.getElementById('ams-component-retention')) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.remove();
     }
   }, {
     key: "showRetentionPopup",
     value: function showRetentionPopup() {
-      var retentionPopup = document.getElementById(COMPONENT_RETENTION_ID);
-      var container = document.getElementById(COMPONENT_CONTAINER_ID);
+      var retentionPopup = document.getElementById('ams-component-retention');
+      var container = document.getElementById('ams-component-container');
       if (retentionPopup) {
-        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"));
+        container === null || container === void 0 ? void 0 : container.classList.add('ams-component-container-opacity');
+        retentionPopup.classList.remove('ams-component-retention-hidden');
+        retentionPopup.classList.add('ams-component-retention-show');
       }
     }
   }, {
-    key: "hideRetentionPopupFunc",
-    value: function hideRetentionPopupFunc() {
-      hideRetentionPopup();
+    key: "hideRetentionPopup",
+    value: function hideRetentionPopup() {
+      var retentionPopup = document.getElementById('ams-component-retention');
+      var container = document.getElementById('ams-component-container');
+      if (retentionPopup) {
+        retentionPopup.classList.remove('ams-component-retention-show');
+        retentionPopup.classList.add('ams-component-retention-hidden');
+        setTimeout(function () {
+          retentionPopup.classList.remove('ams-component-retention-hidden');
+          container === null || container === void 0 ? void 0 : container.classList.remove('ams-component-container-opacity');
+        }, 250);
+      }
+    }
+    /**
+     * @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: "submitForm",
@@ -784,6 +917,7 @@ var ComponentApp = /*#__PURE__*/function () {
       form.setAttribute('action', attributes.action);
       form.setAttribute('method', 'post');
       body.appendChild(form);
+      this.closeCashier(true);
       setTimeout(function () {
         form.submit();
       }, 0);