@alipay/ams-checkout 1.30.0 → 1.31.0

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

@@ -18,8 +18,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import PackageJson from "../../../../package.json";
 import { AntomSDKCore } from "../../../foundation/core";
+import { ServiceProvider } from "../../../foundation/service";
 import { EVENT as ConstantEvent } from "../../../constant";
-import { ConnectErrorCode, ElementPaymentEvent, ElementPaymentMethod, EventCallbackCode, ProductSceneEnum } from "../../../types";
+import { ProductSceneEnum } from "../../../types";
 import { parseSessionData } from "../index";
 import { ElementAddressComponent } from "./components/address";
 import { ElementAuthComponent } from "./components/auth";
@@ -27,8 +28,9 @@ import { ElementPaymentComponent } from "./components/payment";
 // import { oneAccount, sdkAction, submitResult } from './mock';
 import { ApplePaySdk, isSkipRenderPaymentMethod } from "../../../plugin/component/channel";
 import { v4 as uuid } from 'uuid';
+import { destroyModal } from "../../../plugin/component/popupWindow.style";
 import { LogConfig, Logger } from "../../../util/logger";
-import { addressTheme, ELEMENT_ENVIRONMENT, ThemeType } from "./type";
+import { addressTheme, ElementPaymentEvent, ElementPaymentMethod, ElementType, ELEMENT_ENVIRONMENT, EventCallbackCode, MountElementType, ThemeType } from "./type";
 var logger = new Logger(LogConfig, true);
 var ElementProcessor = /*#__PURE__*/function () {
   function ElementProcessor(options) {
@@ -40,12 +42,8 @@ var ElementProcessor = /*#__PURE__*/function () {
   }
   _createClass(ElementProcessor, [{
     key: "init",
-    value: function init() {
-      var elementContainer = new AntomSDKCore();
-      elementContainer.registerProcessor(ProductSceneEnum.ELEMENT_PAYMENT, '', undefined);
-      elementContainer.init({}, ProductSceneEnum.ELEMENT_PAYMENT);
-      var serviceProvider = elementContainer.getServiceProvider();
-      this.requestService = serviceProvider.getService('Requester');
+    value: function init(config, instanceId) {
+      this.requestService = ServiceProvider.getInstance(instanceId).getService('Requester');
     }
   }, {
     key: "sdkActionQuery",
@@ -156,7 +154,7 @@ export var ElementComponent = /*#__PURE__*/function () {
     _defineProperty(this, "parseData", void 0);
     // sessionData 解析出来的数据
     _defineProperty(this, "loading", void 0);
-    // mount loading
+    // element loading
     _defineProperty(this, "sessionData", void 0);
     // sessionData 解析出来的数据
     _defineProperty(this, "elementContainer", void 0);
@@ -171,14 +169,15 @@ export var ElementComponent = /*#__PURE__*/function () {
     // element 入参
     _defineProperty(this, "eventService", void 0);
     // 消息服务
-    _defineProperty(this, "requestService", void 0);
-    // 接口服务
+    // private requestService: RequesterService; // 接口服务  一期connect功能，目前已都放入到应用层
     _defineProperty(this, "sdkActionRes", void 0);
     // sdk aciton接口返回
     _defineProperty(this, "oneAccountRes", void 0);
     // one account接口返回
     _defineProperty(this, "launchSource", void 0);
     // launch 来源记录
+    _defineProperty(this, "initCompleted", void 0);
+    // init完成
     _defineProperty(this, "isConnect", void 0);
     // 当前sessionData是否connect模式
     _defineProperty(this, "iframeSrc", void 0);
@@ -187,6 +186,8 @@ export var ElementComponent = /*#__PURE__*/function () {
     // 组件mount配置记录
     _defineProperty(this, "iframes", void 0);
     // iframs合集
+    _defineProperty(this, "loadingElement", []);
+    // 当前加载中的element
     _defineProperty(this, "componentsCount", void 0);
     // mount 渲染了多少个element
     _defineProperty(this, "eventCallback", void 0);
@@ -209,9 +210,10 @@ export var ElementComponent = /*#__PURE__*/function () {
         prefillValue: renderOptions.prefillValue
       };
       _this4.mountOptions[ElementPaymentMethod.ADDRESS_ELEMENT] = _mountParams;
-      _this4.addressBase.mount(_this4._options.sessionData, _objectSpread({
+      _this4.addressBase.mount(_objectSpread({
         selector: sdkSelector,
-        elementProps: renderOptions.elementProps
+        elementProps: renderOptions.elementProps,
+        sessionData: renderOptions.sessionData
       }, _mountParams)).then(function (result) {
         if (!result) {
           return _this4.mountErrorHandle();
@@ -235,8 +237,9 @@ export var ElementComponent = /*#__PURE__*/function () {
       };
       _this4.mountOptions[ElementPaymentMethod.PAYMENT_ELEMENT] = _mountParams;
       _this4.initApplePaySdk();
-      _this4.paymentBase.mount(_this4._options.sessionData, _objectSpread({
+      _this4.paymentBase.mount(_objectSpread({
         selector: sdkSelector,
+        sessionData: renderOptions.sessionData,
         elementProps: renderOptions.elementProps
       }, _mountParams)).then(function (result) {
         if (!result) {
@@ -247,7 +250,7 @@ export var ElementComponent = /*#__PURE__*/function () {
       });
       return {};
     });
-    // submit提交非RISK_REJECT错误
+    // submit提交非RISK_REJECT错误 一期connect功能，目前已都放入到应用层
     _defineProperty(this, "onAfterSubmitFunc", function (target, params) {
       _this4.eventService.emitAndListen({
         event: ElementPaymentEvent.AFTER_SUBMIT,
@@ -258,65 +261,76 @@ export var ElementComponent = /*#__PURE__*/function () {
         }
       }, function () {});
     });
-    // submit提交 失败，清空组件数据
-    _defineProperty(this, "onSubmitRiskFunc", function (target) {
-      _this4.eventService.emitAndListen({
-        event: ElementPaymentEvent.SUBMIT_RISK,
-        data: {
-          target: target,
-          source: ElementPaymentMethod.CONTAINER_ELEMENT,
-          params: {}
-        }
-      }, function () {});
-    });
-    // 发起支付
-    _defineProperty(this, "onSubmit", function (params) {
-      return new Promise(function (resolve) {
-        var paymentSessionConfig = _this4.parseData.paymentSessionConfig;
-        console.log('element submit params ------', _objectSpread({
-          paymentSessionConfig: paymentSessionConfig,
-          paymentSessionData: _this4.sessionData
-        }, params));
-        _this4.requestService.request(_objectSpread({
-          paymentSessionConfig: paymentSessionConfig,
-          paymentSessionData: _this4.sessionData
-        }, params), {
-          env: _this4._options.environment,
-          envInfo: {
-            locale: _this4._options.locale
-          },
-          timeout: 300000,
-          // TODO dev环境submit提交接口超时
-          'Operation-Type': 'com.ipay.iexpcashier.cashier.submitPayByPaymentSession'
-        }).then(function (result) {
-          var _result$codeFormViews, _result$actionForm;
-          if (result !== null && result !== void 0 && result.codeFormViews && result !== null && result !== void 0 && (_result$codeFormViews = result.codeFormViews) !== null && _result$codeFormViews !== void 0 && (_result$codeFormViews = _result$codeFormViews[0]) !== null && _result$codeFormViews !== void 0 && _result$codeFormViews.codeExpireTime && result !== null && result !== void 0 && result.actionForm && !(result !== null && result !== void 0 && (_result$actionForm = result.actionForm) !== null && _result$actionForm !== void 0 && _result$actionForm.paymentCodeExpireTime)) {
-            var _result$codeFormViews2;
-            result.actionForm.paymentCodeExpireTime = result === null || result === void 0 || (_result$codeFormViews2 = result.codeFormViews) === null || _result$codeFormViews2 === void 0 || (_result$codeFormViews2 = _result$codeFormViews2[0]) === null || _result$codeFormViews2 === void 0 ? void 0 : _result$codeFormViews2.codeExpireTime;
-          }
-          if (result.errorCode === ConnectErrorCode.RISK_REJECT) {
-            _this4.onSubmitRiskFunc(ElementPaymentMethod.ADDRESS_ELEMENT);
-            _this4.onSubmitRiskFunc(ElementPaymentMethod.AUTH_ELEMENT);
-            _this4.onSubmitRiskFunc(ElementPaymentMethod.PAYMENT_ELEMENT);
-          } else {
-            _this4.onAfterSubmitFunc(ElementPaymentMethod.PAYMENT_ELEMENT, result);
-          }
-          resolve({
-            success: result.success,
-            msg: result.errorMessage
-          });
-        }, function () {
-          resolve({
-            success: false,
-            msg: 'submitPayByPaymentSession api error'
-          });
-          // this?._options?.onEventCallback?.({
-          //   code: EventCallbackCode.Failed,
-          //   message: 'submitPayByPaymentSession api error',
-          // });
-        });
-      });
-    });
+    // submit提交 失败，清空组件数据 一期connect功能，目前已都放入到应用层
+    // private onSubmitRiskFunc = (target: ElementPaymentMethod) => {
+    //   this.eventService.emitAndListen(
+    //     {
+    //       event: ElementPaymentEvent.SUBMIT_RISK,
+    //       data: {
+    //         target,
+    //         source: ElementPaymentMethod.CONTAINER_ELEMENT,
+    //         params: {},
+    //       },
+    //     },
+    //     () => {},
+    //   );
+    // };
+    // 发起支付 一期connect功能，目前已都放入到应用层
+    // private onSubmit = (params: SubmitServiceParams): Promise<SubmitFuncResult> => {
+    //   return new Promise((resolve) => {
+    //     const { paymentSessionConfig } = this.parseData;
+    //     console.log('element submit params ------', {
+    //       paymentSessionConfig,
+    //       paymentSessionData: this.sessionData,
+    //       ...params,
+    //     });
+    //     this.requestService
+    //       .request<SubmitServiceResult>(
+    //         {
+    //           paymentSessionConfig,
+    //           paymentSessionData: this.sessionData,
+    //           ...params,
+    //         },
+    //         {
+    //           env: this._options.environment,
+    //           envInfo: {
+    //             locale: this._options.locale,
+    //           },
+    //           timeout: 300000, // TODO dev环境submit提交接口超时
+    //           'Operation-Type': 'com.ipay.iexpcashier.cashier.submitPayByPaymentSession',
+    //         },
+    //       )
+    //       .then(
+    //         (result) => {
+    //           if (
+    //             result?.codeFormViews &&
+    //             result?.codeFormViews?.[0]?.codeExpireTime &&
+    //             result?.actionForm &&
+    //             !result?.actionForm?.paymentCodeExpireTime
+    //           ) {
+    //             result.actionForm.paymentCodeExpireTime = result?.codeFormViews?.[0]?.codeExpireTime;
+    //           }
+    //           if (result.errorCode === ConnectErrorCode.RISK_REJECT) {
+    //             this.onSubmitRiskFunc(ElementPaymentMethod.ADDRESS_ELEMENT);
+    //             this.onSubmitRiskFunc(ElementPaymentMethod.AUTH_ELEMENT);
+    //             this.onSubmitRiskFunc(ElementPaymentMethod.PAYMENT_ELEMENT);
+    //           } else {
+    //             this.onAfterSubmitFunc(ElementPaymentMethod.PAYMENT_ELEMENT, result);
+    //           }
+    //           resolve({
+    //             success: result.success,
+    //             msg: result.errorMessage,
+    //           });
+    //         },
+    //         () => {
+    //           resolve({
+    //             success: false,
+    //             msg: 'submitPayByPaymentSession api error',
+    //           });
+    //         },
+    //       );
+    //   });
+    // };
     // 发送validate消息
     _defineProperty(this, "onValidateFunc", function (target, params) {
       return new Promise(function (resolve) {
@@ -344,70 +358,65 @@ export var ElementComponent = /*#__PURE__*/function () {
               case 0:
                 params = {};
                 if (!_this4.launchSource.includes(ElementPaymentMethod.AUTH_ELEMENT)) {
-                  _context.next = 9;
+                  _context.next = 8;
                   break;
                 }
                 _context.next = 4;
                 return _this4.onValidateFunc(ElementPaymentMethod.AUTH_ELEMENT);
               case 4:
                 result = _context.sent;
-                console.log('element submit validate auth---------', result);
                 params.accountInfo = (_result$data = result.data) === null || _result$data === void 0 || (_result$data = _result$data.data) === null || _result$data === void 0 ? void 0 : _result$data.accountInfo;
                 if (result !== null && result !== void 0 && (_result$data2 = result.data) !== null && _result$data2 !== void 0 && _result$data2.success) {
-                  _context.next = 9;
+                  _context.next = 8;
                   break;
                 }
                 return _context.abrupt("return", resolve(undefined));
-              case 9:
+              case 8:
                 if (!_this4.launchSource.includes(ElementPaymentMethod.ADDRESS_ELEMENT)) {
-                  _context.next = 17;
+                  _context.next = 15;
                   break;
                 }
-                _context.next = 12;
+                _context.next = 11;
                 return _this4.onValidateFunc(ElementPaymentMethod.ADDRESS_ELEMENT);
-              case 12:
+              case 11:
                 _result = _context.sent;
-                console.log('element submit validate address---------', _result);
                 params.shipping = (_result$data3 = _result.data) === null || _result$data3 === void 0 ? void 0 : _result$data3.data;
                 if (_result !== null && _result !== void 0 && (_result$data4 = _result.data) !== null && _result$data4 !== void 0 && _result$data4.success) {
-                  _context.next = 17;
+                  _context.next = 15;
                   break;
                 }
                 return _context.abrupt("return", resolve(undefined));
-              case 17:
+              case 15:
                 if (!(_this4.launchSource.includes(ElementPaymentMethod.PAYMENT_ELEMENT) || !_this4.isConnect)) {
-                  _context.next = 30;
+                  _context.next = 27;
                   break;
                 }
-                _context.prev = 18;
-                _context.next = 21;
+                _context.prev = 16;
+                _context.next = 19;
                 return _this4.onValidateFunc(ElementPaymentMethod.PAYMENT_ELEMENT, params);
-              case 21:
+              case 19:
                 _result2 = _context.sent;
-                console.log('element submit validate payment---------', _result2, _this4.isConnect);
-                // params.paymentFactors = result.data?.data?.paymentFactors;
-                // params.paymentMethod = result.data?.data?.paymentMethod;
                 if (_result2 !== null && _result2 !== void 0 && (_result2$data = _result2.data) !== null && _result2$data !== void 0 && _result2$data.success) {
-                  _context.next = 25;
+                  _context.next = 22;
                   break;
                 }
                 return _context.abrupt("return", resolve(undefined));
-              case 25:
-                _context.next = 30;
+              case 22:
+                _context.next = 27;
                 break;
-              case 27:
-                _context.prev = 27;
-                _context.t0 = _context["catch"](18);
+              case 24:
+                _context.prev = 24;
+                _context.t0 = _context["catch"](16);
                 return _context.abrupt("return", resolve(undefined));
-              case 30:
+              case 27:
                 // params.paymentFactors = paymentResult.data?.data.paymentFactors;
                 // params.paymentMethod = paymentResult.data?.data.paymentMethod;
                 resolve(params);
-              case 31:
+              case 28:
               case "end":
                 return _context.stop();
             }
-          }, _callee, null, [[18, 27]]);
+          }, _callee, null, [[16, 24]]);
         }));
         return function (_x) {
           return _ref.apply(this, arguments);
@@ -418,14 +427,6 @@ export var ElementComponent = /*#__PURE__*/function () {
     this._options = _objectSpread(_objectSpread({}, options), {}, {
       environment: env.toLocaleLowerCase()
     });
-    this.eventCallback = _defineProperty(_defineProperty(_defineProperty({}, ElementPaymentMethod.ADDRESS_ELEMENT, {}), ElementPaymentMethod.AUTH_ELEMENT, {}), ElementPaymentMethod.PAYMENT_ELEMENT, {});
-    this.launchSource = [];
-    this.componentsCount = 0;
-    this.iframes = {};
-    this.mountOptions = {};
-    logger.logInfo({
-      title: 'a3753.b101271.c386688'
-    });
     this.createElement();
   }
 
@@ -433,17 +434,32 @@ export var ElementComponent = /*#__PURE__*/function () {
   _createClass(ElementComponent, [{
     key: "createElement",
     value: function createElement() {
+      this.eventCallback = _defineProperty(_defineProperty(_defineProperty({}, ElementPaymentMethod.ADDRESS_ELEMENT, {}), ElementPaymentMethod.AUTH_ELEMENT, {}), ElementPaymentMethod.PAYMENT_ELEMENT, {});
+      this.launchSource = [];
+      this.componentsCount = 0;
+      this.iframes = {};
+      this.mountOptions = {};
+      logger.logInfo({
+        title: 'sdk_element_create'
+      });
+      this.elementContainer = new AntomSDKCore();
+      this.iframeSrc = this.createIframeSrc(this._options.environment, this._options.version);
+    }
+  }, {
+    key: "beforeMount",
+    value: function beforeMount(mountSessionData) {
       var _parseData$connectFac,
         _parseData$paymentSes,
         _this5 = this;
-      var _parseSessionData = parseSessionData(this._options.sessionData),
+      if (this.initCompleted) return;
+      this.initCompleted = true;
+      var _parseSessionData = parseSessionData(mountSessionData),
         _parseSessionData2 = _slicedToArray(_parseSessionData, 2),
         parseData = _parseSessionData2[0],
         sessionData = _parseSessionData2[1];
       this.parseData = parseData;
       this.sessionData = sessionData;
       this.isConnect = (parseData === null || parseData === void 0 || (_parseData$connectFac = parseData.connectFactor) === null || _parseData$connectFac === void 0 ? void 0 : _parseData$connectFac.enableConnect) && (parseData === null || parseData === void 0 || (_parseData$paymentSes = parseData.paymentSessionConfig) === null || _parseData$paymentSes === void 0 ? void 0 : _parseData$paymentSes.productScene) === ProductSceneEnum.ELEMENT_PAYMENT;
-      this.elementContainer = new AntomSDKCore();
       this.elementContainer.registerProcessor(ProductSceneEnum.ELEMENT_PAYMENT, '', new ElementProcessor({
         paymentSessionConfig: parseData === null || parseData === void 0 ? void 0 : parseData.paymentSessionConfig,
         sessionData: sessionData,
@@ -452,72 +468,83 @@ export var ElementComponent = /*#__PURE__*/function () {
         isConnect: this.isConnect
       }));
       this.elementContainer.init({}, ProductSceneEnum.ELEMENT_PAYMENT);
-      this.elementContainer.startBizFlow({
-        paymentSession: this._options.sessionData
-      }).then(function () {
-        var _bizFlowBehavior$data;
-        if (!_this5.isConnect) return;
-        var bizFlowBehavior = _this5.elementContainer.getBizFlowBehavior();
-        if (!(bizFlowBehavior !== null && bizFlowBehavior !== void 0 && (_bizFlowBehavior$data = bizFlowBehavior.data) !== null && _bizFlowBehavior$data !== void 0 && _bizFlowBehavior$data.success)) {
-          var _this5$_options, _this5$_options$onEve;
-          console.log('demo event callback----', {
-            code: EventCallbackCode.FAILED,
-            message: 'INTERNAL_FAILED'
-          });
-          _this5 === null || _this5 === void 0 || (_this5$_options = _this5._options) === null || _this5$_options === void 0 || (_this5$_options$onEve = _this5$_options.onEventCallback) === null || _this5$_options$onEve === void 0 || _this5$_options$onEve.call(_this5$_options, {
-            code: EventCallbackCode.FAILED,
-            message: 'INTERNAL_FAILED'
-          });
-        } else {
-          var _bizFlowBehavior$data2, _bizFlowBehavior$data3;
-          _this5.oneAccountRes = bizFlowBehavior === null || bizFlowBehavior === void 0 || (_bizFlowBehavior$data2 = bizFlowBehavior.data) === null || _bizFlowBehavior$data2 === void 0 ? void 0 : _bizFlowBehavior$data2.oneAccountRes;
-          _this5.sdkActionRes = bizFlowBehavior === null || bizFlowBehavior === void 0 || (_bizFlowBehavior$data3 = bizFlowBehavior.data) === null || _bizFlowBehavior$data3 === void 0 ? void 0 : _bizFlowBehavior$data3.sdkActionRes;
-          _this5.afterInit();
-        }
-      });
-      this.iframeSrc = this.createIframeSrc(this._options.environment, this._options.version);
       try {
-        // 注册 auth 邮箱模块
-        this.authBase = new ElementAuthComponent();
-        this.authBase.create({
-          environment: this._options.environment,
-          locale: this._options.locale
+        this.elementContainer.startBizFlow({
+          paymentSession: mountSessionData
+        }).then(function () {
+          var _bizFlowBehavior$data;
+          if (!_this5.isConnect) return;
+          var bizFlowBehavior = _this5.elementContainer.getBizFlowBehavior();
+          if (!(bizFlowBehavior !== null && bizFlowBehavior !== void 0 && (_bizFlowBehavior$data = bizFlowBehavior.data) !== null && _bizFlowBehavior$data !== void 0 && _bizFlowBehavior$data.success)) {
+            var _this5$_options, _this5$_options$onEve;
+            _this5 === null || _this5 === void 0 || (_this5$_options = _this5._options) === null || _this5$_options === void 0 || (_this5$_options$onEve = _this5$_options.onEventCallback) === null || _this5$_options$onEve === void 0 || _this5$_options$onEve.call(_this5$_options, {
+              code: EventCallbackCode.SDK_CREATE_COMPONENT_ERROR,
+              message: 'Component initialization exception.'
+            });
+            _this5.closeLoading();
+          } else {
+            var _bizFlowBehavior$data2, _bizFlowBehavior$data3;
+            _this5.oneAccountRes = bizFlowBehavior === null || bizFlowBehavior === void 0 || (_bizFlowBehavior$data2 = bizFlowBehavior.data) === null || _bizFlowBehavior$data2 === void 0 ? void 0 : _bizFlowBehavior$data2.oneAccountRes;
+            _this5.sdkActionRes = bizFlowBehavior === null || bizFlowBehavior === void 0 || (_bizFlowBehavior$data3 = bizFlowBehavior.data) === null || _bizFlowBehavior$data3 === void 0 ? void 0 : _bizFlowBehavior$data3.sdkActionRes;
+            _this5.afterInit();
+          }
         });
-        var serviceProvider = this.elementContainer.getServiceProvider();
-        this.eventService = serviceProvider.getService('EventCenter');
-        this.requestService = serviceProvider.getService('Requester');
-        // 注册 payment 卡支付模块
-        this.paymentBase = new ElementPaymentComponent();
-        this.paymentBase.create({
-          environment: this._options.environment,
-          locale: this._options.locale,
-          appVersion: this._options.version || ''
-        }, this.isConnect);
-
-        // 注册 address 地址模块
-        this.addressBase = new ElementAddressComponent();
-        this.addressBase.create({
-          environment: this._options.environment,
-          locale: this._options.locale,
-          appVersion: this._options.version || ''
-        }, this.isConnect);
       } catch (error) {
-        var _this$_options$onEven, _this$_options;
-        console.log('demo event callback----', {
-          code: EventCallbackCode.FAILED,
-          message: 'INTERNAL_FAILED'
-        });
-        (_this$_options$onEven = (_this$_options = this._options).onEventCallback) === null || _this$_options$onEven === void 0 || _this$_options$onEven.call(_this$_options, {
-          code: EventCallbackCode.FAILED,
-          message: 'INTERNAL_FAILED'
-          // message: 'create sdk fail',
+        this._options.onEventCallback({
+          code: EventCallbackCode.SDK_CREATEPAYMENT_PARAMETER_ERROR,
+          message: 'Initialization parameter exception.'
         });
+        this.closeLoading();
       }
-
+      var serviceProvider = this.elementContainer.getServiceProvider();
+      // 注册事件服务
+      this.eventService = serviceProvider.getService('EventCenter');
+      // 注册请求服务服务 一期connect功能，目前已都放入到应用层
+      // this.requestService = serviceProvider.getService<RequesterService>('Requester');
       // 注册监听消息
       this.addListener();
     }
 
+    // 创建
+  }, {
+    key: "createComponentSdk",
+    value: function createComponentSdk(type) {
+      try {
+        // 注册 auth 邮箱模块
+        if (type === ElementType.auth) {
+          this.authBase = new ElementAuthComponent();
+          this.authBase.create({
+            environment: this._options.environment,
+            locale: this._options.locale
+          });
+        } else if (type === ElementType.address) {
+          this.addressBase = new ElementAddressComponent();
+          this.addressBase.create({
+            environment: this._options.environment,
+            locale: this._options.locale,
+            appVersion: this._options.version || ''
+          }, this.isConnect);
+        } else if (type === ElementType.payment) {
+          // 注册 payment 卡支付模块
+          this.paymentBase = new ElementPaymentComponent();
+          this.paymentBase.create({
+            environment: this._options.environment,
+            locale: this._options.locale,
+            appVersion: this._options.version || ''
+          }, this.isConnect);
+        } else {
+          throw Error("The provided 'type' value is invalid");
+        }
+      } catch (error) {
+        var _this$_options, _this$_options$onEven;
+        this === null || this === void 0 || (_this$_options = this._options) === null || _this$_options === void 0 || (_this$_options$onEven = _this$_options.onEventCallback) === null || _this$_options$onEven === void 0 || _this$_options$onEven.call(_this$_options, {
+          code: EventCallbackCode.SDK_CREATE_COMPONENT_ERROR,
+          message: 'Component initialization exception.'
+        });
+        this.closeLoading();
+      }
+    }
+
     // iframe src生成方法
   }, {
     key: "createIframeSrc",
@@ -539,6 +566,16 @@ export var ElementComponent = /*#__PURE__*/function () {
         payment: payment
       };
     }
+  }, {
+    key: "closeLoading",
+    value: function closeLoading() {
+      var _this$_options$loadin;
+      if (this.loading && (_this$_options$loadin = this._options.loading) !== null && _this$_options$loadin !== void 0 && _this$_options$loadin.onEndLoading) {
+        var _this$_options$loadin2, _this$_options$loadin3;
+        (_this$_options$loadin2 = this._options.loading) === null || _this$_options$loadin2 === void 0 || (_this$_options$loadin3 = _this$_options$loadin2.onEndLoading) === null || _this$_options$loadin3 === void 0 || _this$_options$loadin3.call(_this$_options$loadin2);
+      }
+      this.loading = false;
+    }
 
     // 循环给所有iframe发同一个消息
     // private postCommonMessage<T>(event: ElementPaymentEvent, params: T) {
@@ -573,12 +610,10 @@ export var ElementComponent = /*#__PURE__*/function () {
       });
       this.eventService.listen(ElementPaymentEvent.SEND_MUITI_APP_EVENT_TO_SDK, function (result) {
         var _this6$_options$onEve, _this6$_options;
-        console.log('demo event callback----', result.data);
         (_this6$_options$onEve = (_this6$_options = _this6._options).onEventCallback) === null || _this6$_options$onEve === void 0 || _this6$_options$onEve.call(_this6$_options, result.data);
       });
       this.eventService.listen(ElementPaymentEvent.CALLBACK, function (result) {
         var _this6$eventCallback;
-        console.log('antom sdk 组件事件回调');
         if ((_this6$eventCallback = _this6.eventCallback) !== null && _this6$eventCallback !== void 0 && (_this6$eventCallback = _this6$eventCallback[result.source]) !== null && _this6$eventCallback !== void 0 && _this6$eventCallback[result.event]) {
           var _this6$eventCallback$, _this6$eventCallback$2;
           (_this6$eventCallback$ = (_this6$eventCallback$2 = _this6.eventCallback[result.source])[result.event]) === null || _this6$eventCallback$ === void 0 || _this6$eventCallback$.call(_this6$eventCallback$2, result.data);
@@ -590,9 +625,14 @@ export var ElementComponent = /*#__PURE__*/function () {
       this.eventService.listen(ConstantEvent.redirect.name, function (data, res) {
         data.isDestroy && _this6.unmount();
       });
-      this.eventService.listen(ElementPaymentEvent.LOG, function (result) {
-        console.log('antom sdk 组件日志回调');
+      this.eventService.listen(ConstantEvent.appHeartBeat.name, function (result) {
+        _this6.closeLoading();
       });
+
+      // this.eventService.listen(ElementPaymentEvent.LOG, (result: EventCallbackData) => {
+      //   console.log('antom sdk 组件日志回调');
+      // });
+
       this.eventService.listen(ElementPaymentEvent.HANDLE_PAYMENT, function (result) {
         if ((result === null || result === void 0 ? void 0 : result.paymentMethodType) === 'APPLEPAY') {
           _this6.ApplePayService.begin().then(function (res) {
@@ -632,15 +672,10 @@ export var ElementComponent = /*#__PURE__*/function () {
   }, {
     key: "showIframe",
     value: function showIframe() {
-      var _this$paymentBase, _this$addressBase, _this$authBase, _this$_options$loadin;
-      this.loading = false;
+      var _this$paymentBase, _this$addressBase, _this$authBase;
       (this === null || this === void 0 ? void 0 : this.paymentBase) && (this === null || this === void 0 || (_this$paymentBase = this.paymentBase) === null || _this$paymentBase === void 0 ? void 0 : _this$paymentBase.update());
       (this === null || this === void 0 ? void 0 : this.addressBase) && (this === null || this === void 0 || (_this$addressBase = this.addressBase) === null || _this$addressBase === void 0 ? void 0 : _this$addressBase.update());
       (this === null || this === void 0 ? void 0 : this.authBase) && (this === null || this === void 0 || (_this$authBase = this.authBase) === null || _this$authBase === void 0 ? void 0 : _this$authBase.update());
-      if ((_this$_options$loadin = this._options.loading) !== null && _this$_options$loadin !== void 0 && _this$_options$loadin.onEndLoading) {
-        var _this$_options$loadin2, _this$_options$loadin3;
-        (_this$_options$loadin2 = this._options.loading) === null || _this$_options$loadin2 === void 0 || (_this$_options$loadin3 = _this$_options$loadin2.onEndLoading) === null || _this$_options$loadin3 === void 0 || _this$_options$loadin3.call(_this$_options$loadin2);
-      }
     }
   }, {
     key: "afterInit",
@@ -659,7 +694,7 @@ export var ElementComponent = /*#__PURE__*/function () {
       var baseData = {
         originActionQueryResult: this.sdkActionRes,
         originOneAccountQueryResult: this.oneAccountRes,
-        paymentSessionData: this._options.sessionData,
+        paymentSessionData: this.sessionData,
         sessionResult: this.parseData || {}
       };
       this.launchSource.forEach(function (target) {
@@ -689,6 +724,10 @@ export var ElementComponent = /*#__PURE__*/function () {
       this.eventService.unlisten(ElementPaymentEvent.CAPTURE_ASSET);
       this.eventService.unlisten(ElementPaymentEvent.LAUNCH);
       this.eventService.unlisten(ElementPaymentEvent.SIZE_CHANGE);
+      this.eventService.unlisten(ElementPaymentEvent.CALLBACK);
+      this.eventService.unlisten(ConstantEvent.close.name);
+      this.eventService.unlisten(ConstantEvent.redirect.name);
+      this.eventService.unlisten(ConstantEvent.appHeartBeat.name);
       this.eventService.unlisten(ElementPaymentEvent.HANDLE_PAYMENT);
     }
 
@@ -718,6 +757,7 @@ export var ElementComponent = /*#__PURE__*/function () {
       var url = link.indexOf('?') === -1 ? "".concat(link, "?").concat(params) : link;
       this.authBase.mount({
         selector: sdkSelector,
+        sessionData: renderOptions.sessionData,
         url: url
       }).then(function (result) {
         if (!result) {
@@ -776,48 +816,55 @@ export var ElementComponent = /*#__PURE__*/function () {
   }, {
     key: "mountErrorHandle",
     value: function mountErrorHandle() {
-      var _this$_options$onEven2, _this$_options3;
-      console.log('demo event callback----', {
-        code: EventCallbackCode.FAILED,
-        message: 'INTERNAL_FAILED'
-      });
-      (_this$_options$onEven2 = (_this$_options3 = this._options).onEventCallback) === null || _this$_options$onEven2 === void 0 || _this$_options$onEven2.call(_this$_options3, {
-        code: EventCallbackCode.FAILED,
-        message: 'INTERNAL_FAILED'
+      var _this$_options3, _this$_options3$onEve;
+      this === null || this === void 0 || (_this$_options3 = this._options) === null || _this$_options3 === void 0 || (_this$_options3$onEve = _this$_options3.onEventCallback) === null || _this$_options3$onEve === void 0 || _this$_options3$onEve.call(_this$_options3, {
+        code: EventCallbackCode.SDK_CREATE_COMPONENT_ERROR,
+        message: 'Component initialization exception.'
       });
+      this.closeLoading();
       logger.logError({
-        title: 'a3753.b101271.c386691'
+        title: 'sdk_element_mount_fail'
       });
+      this.resetState();
     }
   }, {
     key: "mount",
     value: function mount(renderOptions, sdkSelector) {
-      logger.logInfo({
-        title: 'a3753.b101271.c386690'
-      });
+      // 当前type element已加载 / 加载中
+      if (this.iframes[MountElementType[renderOptions === null || renderOptions === void 0 ? void 0 : renderOptions.type]] || this.loadingElement.includes(renderOptions === null || renderOptions === void 0 ? void 0 : renderOptions.type)) {
+        throw Error('The component has been mounted, please do not execute it again.');
+      }
       if (typeof sdkSelector === 'string') {
         var _this$_options$loadin4, _renderOptions$debugP, _renderOptions$debugP2;
         var element = document.querySelector(sdkSelector);
+        // 容器是否存在
         if (!element) {
-          return this.mountErrorHandle();
+          throw Error('Loading failed, you need to check if the element exists.');
         }
-        this.componentsCount = this.componentsCount + 1;
-        if (!this.loading && (_this$_options$loadin4 = this._options.loading) !== null && _this$_options$loadin4 !== void 0 && _this$_options$loadin4.onStartLoading && this.isConnect) {
+        // 生成sdk，同时判断 type 是否合规,不合规会直接报错
+        this.createComponentSdk(renderOptions.type);
+        this.beforeMount(renderOptions.sessionData);
+        this.loadingElement.push(renderOptions === null || renderOptions === void 0 ? void 0 : renderOptions.type);
+        logger.logInfo({
+          title: 'sdk_element_mount_start'
+        });
+        if (!this.loading && (_this$_options$loadin4 = this._options.loading) !== null && _this$_options$loadin4 !== void 0 && _this$_options$loadin4.onStartLoading) {
           var _this$_options$loadin5, _this$_options$loadin6;
           (_this$_options$loadin5 = this._options.loading) === null || _this$_options$loadin5 === void 0 || (_this$_options$loadin6 = _this$_options$loadin5.onStartLoading) === null || _this$_options$loadin6 === void 0 || _this$_options$loadin6.call(_this$_options$loadin5);
         }
+        this.loading = true;
+        this.componentsCount = this.componentsCount + 1;
         var elementLink = renderOptions !== null && renderOptions !== void 0 && (_renderOptions$debugP = renderOptions.debugProps) !== null && _renderOptions$debugP !== void 0 && _renderOptions$debugP.localLink ? renderOptions === null || renderOptions === void 0 || (_renderOptions$debugP2 = renderOptions.debugProps) === null || _renderOptions$debugP2 === void 0 ? void 0 : _renderOptions$debugP2.localLink : this.iframeSrc[renderOptions.type];
         renderOptions.elementProps = {
           elementLink: elementLink
         };
-        this.loading = true;
-        if (renderOptions.type === 'auth') {
+        if (renderOptions.type === ElementType.auth) {
           return this.mountAuth(renderOptions, sdkSelector);
         }
-        if (renderOptions.type === 'address') {
+        if (renderOptions.type === ElementType.address) {
           return this.mountAddress(renderOptions, sdkSelector);
         }
-        if (renderOptions.type === 'payment') {
+        if (renderOptions.type === ElementType.payment) {
           return this.mountPayment(renderOptions, sdkSelector);
         }
       } else {
@@ -826,56 +873,74 @@ export var ElementComponent = /*#__PURE__*/function () {
     }
 
     // 注销单个iframe，暂时没有用到
-  }, {
-    key: "removeIframe",
-    value: function removeIframe(sdk) {
-      if (sdk && this.launchSource.some(function (source) {
-        return source === sdk;
-      })) {
-        this.launchSource = this.launchSource.filter(function (source) {
-          return source !== sdk;
-        });
-        this.componentsCount = this.componentsCount - 1;
-        this.eventService.removeIFrame(this.iframes[sdk]);
-      }
-    }
+    // private removeIframe(sdk: ElementPaymentMethod) {
+    //   if (sdk && this.launchSource.some((source) => source === sdk)) {
+    //     this.launchSource = this.launchSource.filter((source) => source !== sdk);
+    //     this.componentsCount = this.componentsCount - 1;
+    //     this.eventService.removeIFrame(this.iframes[sdk]);
+    //   }
+    // }
 
     // 暴露出去的注销组件方法
   }, {
-    key: "unmount",
-    value: function unmount() {
+    key: "resetState",
+    value: function resetState() {
       var _this$authBase2, _this$authBase2$unmou, _this$addressBase2, _this$addressBase2$un, _this$paymentBase2, _this$paymentBase2$un;
       (_this$authBase2 = this.authBase) === null || _this$authBase2 === void 0 || (_this$authBase2$unmou = _this$authBase2.unmount) === null || _this$authBase2$unmou === void 0 || _this$authBase2$unmou.call(_this$authBase2);
       (_this$addressBase2 = this.addressBase) === null || _this$addressBase2 === void 0 || (_this$addressBase2$un = _this$addressBase2.unmount) === null || _this$addressBase2$un === void 0 || _this$addressBase2$un.call(_this$addressBase2);
       (_this$paymentBase2 = this.paymentBase) === null || _this$paymentBase2 === void 0 || (_this$paymentBase2$un = _this$paymentBase2.unmount) === null || _this$paymentBase2$un === void 0 || _this$paymentBase2$un.call(_this$paymentBase2);
       this.launchSource = [];
+      this.iframes = {};
       this.componentsCount = 0;
       this.eventService.destroy();
       this.removeListener();
+      this.loadingElement = [];
+      this.initCompleted = false;
+    }
+  }, {
+    key: "unmount",
+    value: function unmount() {
+      if (!this.iframes.PAYMENT_ELEMENT) {
+        throw Error('Component is not mounted. You need to check if the mount method has been successfully called to mount the component.');
+      }
+      // popup未注册会报错，但element不需要感知popup是否被注册
+      try {
+        destroyModal(); // 关闭popup弹窗
+      } catch (error) {}
+      this.resetState();
     }
   }, {
     key: "submitPayment",
     value: // 暴露出去的submit方法
     function () {
       var _submitPayment = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var _this$_options$loadin7, _this$_options$loadin10;
-        var _this$_options$loadin8, _this$_options$loadin9, _this$_options$loadin11, _this$_options$loadin12;
+        var _this$_options$loadin7;
+        var _this$_options$loadin8, _this$_options$loadin9;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              // this.onAfterSubmitFunc(ElementPaymentMethod.PAYMENT_ELEMENT, submitResult);
-              // return
+              if (this.iframes.PAYMENT_ELEMENT) {
+                _context3.next = 2;
+                break;
+              }
+              throw Error('Component is not mounted. You need to check if the mount method has been successfully called to mount the component.');
+            case 2:
+              if (!this.loading) {
+                _context3.next = 4;
+                break;
+              }
+              throw Error('The form is submitted repeatedly.  without the need to click submit repeatedly.');
+            case 4:
               if ((_this$_options$loadin7 = this._options.loading) !== null && _this$_options$loadin7 !== void 0 && _this$_options$loadin7.onStartLoading) {
                 (_this$_options$loadin8 = this._options.loading) === null || _this$_options$loadin8 === void 0 || (_this$_options$loadin9 = _this$_options$loadin8.onStartLoading) === null || _this$_options$loadin9 === void 0 || _this$_options$loadin9.call(_this$_options$loadin8);
               }
-              _context3.next = 3;
+              this.loading = true;
+              _context3.next = 8;
               return this.validatePromiseFuncs();
-            case 3:
-              if ((_this$_options$loadin10 = this._options.loading) !== null && _this$_options$loadin10 !== void 0 && _this$_options$loadin10.onEndLoading) {
-                (_this$_options$loadin11 = this._options.loading) === null || _this$_options$loadin11 === void 0 || (_this$_options$loadin12 = _this$_options$loadin11.onEndLoading) === null || _this$_options$loadin12 === void 0 || _this$_options$loadin12.call(_this$_options$loadin11);
-              }
+            case 8:
+              this.closeLoading();
               return _context3.abrupt("return");
-            case 5:
+            case 10:
             case "end":
               return _context3.stop();
           }