@alipay/ams-checkout 1.7.1 → 1.9.0

package/esm/core/applepay/index.js

@@ -0,0 +1,369 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Copyright (c) 2022 International Business Group, Ant Group. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), the rights to use, copy, modify, merge, and/or distribute the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ * 1. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE; and
+ * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
+ */
+import { componentSignEnum, environmentEnum, eventCodeEnum, productSceneEnum } from "../../types";
+import ApplePayService from "../../common/applepay";
+import { getComponentSign, parseSessionData } from "../component";
+import { getApplePayPaymentSession, submitPayInfo } from "../../service";
+import CoreInstance from "../instance";
+import { EVENT } from "../../constant";
+
+/**
+ * Apple pay Component
+ */
+var ApplePayComponent = /*#__PURE__*/function (_CoreInstance) {
+  _inherits(ApplePayComponent, _CoreInstance);
+  var _super = _createSuper(ApplePayComponent);
+  function ApplePayComponent(options) {
+    var _this;
+    _classCallCheck(this, ApplePayComponent);
+    var _options = Object.assign({
+      environment: environmentEnum.prod
+    }, options, {
+      product: productSceneEnum.CARD_APPLE_PAY
+    });
+    _this = _super.call(this, _options);
+    _defineProperty(_assertThisInitialized(_this), "_applePayService", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_parseData", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_sessionData", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_isFinish", false);
+    _this._applePayService = new ApplePayService();
+    return _this;
+  }
+  _createClass(ApplePayComponent, [{
+    key: "getDeviceIdAndLog",
+    value: function getDeviceIdAndLog() {
+      var _this2 = this;
+      var deviceIdParameter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var isPolling = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      return new Promise(function (resolve) {
+        // To avoid rendering being blocked, move the logic to the next event loop for processing
+        setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var _this2$_parseData;
+          var productScene, getDeviceIdStartTime, securitySDK, deviceId;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                productScene = (_this2$_parseData = _this2._parseData) === null || _this2$_parseData === void 0 || (_this2$_parseData = _this2$_parseData.paymentSessionConfig) === null || _this2$_parseData === void 0 ? void 0 : _this2$_parseData.productScene;
+                getDeviceIdStartTime = Date.now();
+                securitySDK = _this2._getSecuritySDKByProductScene({
+                  product: (deviceIdParameter === null || deviceIdParameter === void 0 ? void 0 : deviceIdParameter.productScene) || productScene
+                });
+                deviceId = '';
+                if (!securitySDK) {
+                  _context.next = 16;
+                  break;
+                }
+                if (!(isPolling && parseInt(deviceIdParameter === null || deviceIdParameter === void 0 ? void 0 : deviceIdParameter.tokenCollectTime) > 0)) {
+                  _context.next = 11;
+                  break;
+                }
+                _context.next = 8;
+                return securitySDK.pollingGetApdidToken(deviceIdParameter);
+              case 8:
+                _context.t0 = _context.sent;
+                _context.next = 14;
+                break;
+              case 11:
+                _context.next = 13;
+                return securitySDK.getApdidToken();
+              case 13:
+                _context.t0 = _context.sent;
+              case 14:
+                deviceId = _context.t0;
+                _this2.logDeviceId(deviceId, getDeviceIdStartTime);
+              case 16:
+                resolve(deviceId);
+              case 17:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        })), 0);
+      });
+    }
+  }, {
+    key: "logDeviceId",
+    value: function logDeviceId(deviceId, getDeviceIdStartTime) {
+      var time = "".concat(Date.now() - getDeviceIdStartTime);
+      if (deviceId) {
+        this.logger.logInfo({
+          title: 'sdk_event_securitySdkGetTokenSuccess'
+        }, {
+          deviceId: deviceId,
+          time: time
+        }).send();
+      } else {
+        this.logger.logInfo({
+          title: 'sdk_error_securitySdkGetTokenFailed'
+        }, {
+          deviceId: deviceId,
+          time: time
+        }).send();
+      }
+    }
+
+    /**
+     * Is Apple Pay Enabled
+     */
+  }, {
+    key: "isAppPayEnabled",
+    value: function isAppPayEnabled() {
+      return this._applePayService.isEnabled();
+    }
+
+    /**
+     * Submit Pay
+     * @param paymentSessionData
+     */
+  }, {
+    key: "submitPay",
+    value: function submitPay(paymentSessionData) {
+      var _this3 = this;
+      this._isFinish = false;
+      // parse session Data
+      var _parseSessionData = parseSessionData(paymentSessionData),
+        _parseSessionData2 = _slicedToArray(_parseSessionData, 2),
+        parseData = _parseSessionData2[0],
+        sessionData = _parseSessionData2[1];
+      this._parseData = parseData;
+      this._sessionData = sessionData;
+      // parse data is null
+      if (Object.keys(parseData).length === 0) {
+        this._eventCenter.emit(EVENT.eventCallback.name, {
+          code: eventCodeEnum.SDK_PAYMENT_FAIL,
+          result: {
+            errorMsg: 'Abnormal response data is null'
+          }
+        });
+        this.logger.logError({
+          name: 'APPLE_PAY',
+          title: 'sessionDataNull',
+          msg: 'Abnormal response data is null'
+        }, {
+          type: 'error',
+          biz: 'sdk'
+        }).send();
+        return;
+      }
+      // validate parse data
+      var componentSign = getComponentSign(parseData);
+      if (componentSign === componentSignEnum.NONE) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        this._eventCenter.emit(EVENT.eventCallback.name, {
+          code: eventCodeEnum.SDK_PAYMENT_FAIL,
+          result: {
+            errorMsg: "Abnormal response data, interface failure, or unsupported payment method"
+          }
+        });
+        this.logger.logError({
+          name: 'APPLE_PAY',
+          title: 'paymentMethodUnknown',
+          msg: 'Abnormal response data, interface failure, or unsupported payment method'
+        }, {
+          type: 'error',
+          biz: 'sdk'
+        }).send();
+        return;
+      }
+      /**
+       * Get MerchantSession spi
+       * @param event
+       */
+      var getMerchantSession = /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
+          var validationUrl, requestParams;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                validationUrl = _ref2.validationUrl;
+                // get validateUrl
+                requestParams = {
+                  validateUrl: validationUrl,
+                  paymentSessionData: _this3._sessionData
+                }; // get deviceId
+                _context2.t0 = getApplePayPaymentSession;
+                _context2.t1 = _this3._sessionData;
+                _context2.t2 = requestParams;
+                _context2.t3 = _this3.options.env.environment;
+                _context2.next = 8;
+                return _this3.getDeviceIdAndLog();
+              case 8:
+                _context2.t4 = _context2.sent;
+                _context2.t5 = {
+                  deviceId: _context2.t4
+                };
+                _context2.t6 = {
+                  env: _context2.t3,
+                  envInfo: _context2.t5
+                };
+                _context2.t7 = _this3.logger;
+                return _context2.abrupt("return", (0, _context2.t0)(_context2.t1, _context2.t2, _context2.t6, _context2.t7).then(function (res) {
+                  if (res !== null && res !== void 0 && res.success && res.merchantSessionObject) {
+                    return Promise.resolve(res.merchantSessionObject);
+                  }
+                  return Promise.reject({
+                    errorCode: res.errorCode,
+                    errorMessage: res.errorMessage
+                  });
+                }).catch(function (error) {
+                  return Promise.reject(error);
+                }));
+              case 13:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function getMerchantSession(_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }();
+
+      /**
+       * Complete Payment Authorized spi
+       * @param tokens
+       */
+      var completePaymentAuthorized = /*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(_ref4) {
+          var paymentToken, params;
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                paymentToken = _ref4.paymentToken;
+                params = {
+                  paymentFactors: {
+                    instPaymentToken: paymentToken
+                  },
+                  paymentSessionData: _this3._sessionData
+                };
+                _context3.t0 = submitPayInfo;
+                _context3.t1 = params;
+                _context3.t2 = _this3.options.env.environment;
+                _context3.next = 7;
+                return _this3.getDeviceIdAndLog();
+              case 7:
+                _context3.t3 = _context3.sent;
+                _context3.t4 = {
+                  deviceId: _context3.t3
+                };
+                _context3.t5 = {
+                  env: _context3.t2,
+                  envInfo: _context3.t4
+                };
+                _context3.t6 = _this3.logger;
+                return _context3.abrupt("return", (0, _context3.t0)(_context3.t1, _context3.t5, _context3.t6).then(function (res) {
+                  _this3.logger.logInfo({
+                    name: 'APPLE_PAY',
+                    title: 'submitPayStatus',
+                    msg: res === null || res === void 0 ? void 0 : res.errorStatus
+                  }, {
+                    biz: 'sdk'
+                  }).send();
+                  if (res !== null && res !== void 0 && res.success || (res === null || res === void 0 ? void 0 : res.errorStatus) === 'U') {
+                    return Promise.resolve(res);
+                  }
+                  return Promise.reject({
+                    errorCode: res.errorCode,
+                    errorMessage: res.errorMessage
+                  });
+                }).catch(function (error) {
+                  return Promise.reject(error);
+                }));
+              case 12:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function completePaymentAuthorized(_x2) {
+          return _ref5.apply(this, arguments);
+        };
+      }();
+      var completeApplePay = function completeApplePay(data) {
+        var _data$actionForm;
+        _this3._isFinish = true;
+        _this3._eventCenter.emit(EVENT.eventCallback.name, {
+          code: eventCodeEnum.SDK_PAYMENT_FINISH,
+          result: {
+            redirectUrl: (data === null || data === void 0 || (_data$actionForm = data.actionForm) === null || _data$actionForm === void 0 ? void 0 : _data$actionForm.redirectUrl) || ''
+          }
+        });
+      };
+      var logError = function logError(msg, error) {
+        // log error
+        _this3.logger.logError({
+          name: 'APPLE_PAY',
+          title: msg,
+          label: msg,
+          msg: error
+        }, {
+          type: 'error',
+          biz: 'sdk'
+        }).send();
+        if (_this3._isFinish) {
+          return;
+        }
+        _this3._isFinish = true;
+        if (msg === 'UserCancel') {
+          _this3._eventCenter.emit(EVENT.eventCallback.name, {
+            code: eventCodeEnum.SDK_PAYMENT_CANCEL
+          });
+        } else {
+          _this3._eventCenter.emit(EVENT.eventCallback.name, {
+            code: eventCodeEnum.SDK_PAYMENT_FAIL,
+            result: {
+              errorMsg: msg
+            }
+          });
+        }
+      };
+      var applePayTrace = function applePayTrace(msg) {
+        // set log funnel
+        _this3.logger.logInfo({
+          name: 'APPLE_PAY',
+          title: msg,
+          label: msg
+        }, {
+          type: 'funnel',
+          biz: 'sdk'
+        }).send();
+      };
+
+      // set Apple Pay params
+      this._applePayService.setApplePayParams(getMerchantSession, completePaymentAuthorized, completeApplePay, logError, applePayTrace);
+
+      // init Apple Pay service
+      this._applePayService.startPay(this._parseData);
+    }
+  }]);
+  return ApplePayComponent;
+}(CoreInstance);
+export default ApplePayComponent;

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

@@ -1,6 +1,8 @@
 import ComponentApp from '../../plugin/component';
-import { IcreateComponent, IoptionsParams, Iselector, Isubmit } from '../../types';
+import { componentSignEnum, IcreateComponent, IoptionsParams, IpaymentSessionMetaData, Iselector, Isubmit } from '../../types';
 import CoreInstance from '../instance/index';
+export declare const getComponentSign: (params: IpaymentSessionMetaData) => componentSignEnum;
+export declare const parseSessionData: (sessionData: string) => [IpaymentSessionMetaData, string];
 export declare class AMSComponent extends CoreInstance {
     _componentApp: ComponentApp;
     constructor(options: IoptionsParams);

package/esm/core/component/index.js

@@ -33,7 +33,7 @@ import { getOrSetStorageId, isPC } from "../../util";
 import { createIframeNode } from "../../util/createIframeNode";
 import { getSecurityConfigStorageKey } from "../../util/security";
 import CoreInstance from "../instance/index";
-var getComponentSign = function getComponentSign(params) {
+export var getComponentSign = function getComponentSign(params) {
   var _params$paymentSessio = params.paymentSessionConfig,
     _params$paymentSessio2 = _params$paymentSessio === void 0 ? {} : _params$paymentSessio,
     _params$paymentSessio3 = _params$paymentSessio2.productScene,
@@ -42,7 +42,7 @@ var getComponentSign = function getComponentSign(params) {
     paymentMethodCategoryType = _params$paymentSessio4 === void 0 ? '' : _params$paymentSessio4;
   return productScene && paymentMethodCategoryType ? "".concat(productScene, "_").concat(paymentMethodCategoryType) : componentSignEnum.NONE;
 };
-var parseSessionData = function parseSessionData(sessionData) {
+export var parseSessionData = function parseSessionData(sessionData) {
   try {
     return [JSON.parse(atob(sessionData.split('&&')[3])), sessionData.split('&&').slice(0, 3).join('&&')];
   } catch (error) {
@@ -221,6 +221,9 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
               data: data
             }
           });
+          _this4.logger.logInfo({
+            title: 'sdk_event_apiSubmit'
+          });
         } catch (error) {
           reject(error);
         }

package/esm/index.d.ts

@@ -1,8 +1,11 @@
 import { AMSComponent } from './core/component/index';
 import { IoptionsParams } from './types';
+import ApplePayComponent from './core/applepay';
 export * from './types';
 export declare class AMSCheckout extends AMSComponent {
 }
+export declare class AMSApplePay extends ApplePayComponent {
+}
 export declare class AMSAutoDebit extends AMSCheckout {
     constructor(options: IoptionsParams);
 }

package/esm/index.js

@@ -20,6 +20,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
  */
 import { productSceneEnum } from "./types/index";
 import { AMSComponent } from "./core/component/index";
+import ApplePayComponent from "./core/applepay";
 export * from "./types";
 export var AMSCheckout = /*#__PURE__*/function (_AMSComponent) {
   _inherits(AMSCheckout, _AMSComponent);
@@ -30,51 +31,60 @@ export var AMSCheckout = /*#__PURE__*/function (_AMSComponent) {
   }
   return _createClass(AMSCheckout);
 }(AMSComponent);
+export var AMSApplePay = /*#__PURE__*/function (_ApplePayComponent) {
+  _inherits(AMSApplePay, _ApplePayComponent);
+  var _super2 = _createSuper(AMSApplePay);
+  function AMSApplePay() {
+    _classCallCheck(this, AMSApplePay);
+    return _super2.apply(this, arguments);
+  }
+  return _createClass(AMSApplePay);
+}(ApplePayComponent);
 export var AMSAutoDebit = /*#__PURE__*/function (_AMSCheckout) {
   _inherits(AMSAutoDebit, _AMSCheckout);
-  var _super2 = _createSuper(AMSAutoDebit);
+  var _super3 = _createSuper(AMSAutoDebit);
   function AMSAutoDebit(options) {
     _classCallCheck(this, AMSAutoDebit);
     var _options = Object.assign({}, options, {
       product: productSceneEnum.AUTO_DEBIT
     });
-    return _super2.call(this, _options);
+    return _super3.call(this, _options);
   }
   return _createClass(AMSAutoDebit);
 }(AMSCheckout);
 export var AMSEasyPay = /*#__PURE__*/function (_AMSCheckout2) {
   _inherits(AMSEasyPay, _AMSCheckout2);
-  var _super3 = _createSuper(AMSEasyPay);
+  var _super4 = _createSuper(AMSEasyPay);
   function AMSEasyPay(options) {
     _classCallCheck(this, AMSEasyPay);
     var _options = Object.assign({}, options, {
       product: productSceneEnum.EASY_PAY
     });
-    return _super3.call(this, _options);
+    return _super4.call(this, _options);
   }
   return _createClass(AMSEasyPay);
 }(AMSCheckout);
 export var AMSCashierPayment = /*#__PURE__*/function (_AMSCheckout3) {
   _inherits(AMSCashierPayment, _AMSCheckout3);
-  var _super4 = _createSuper(AMSCashierPayment);
+  var _super5 = _createSuper(AMSCashierPayment);
   function AMSCashierPayment(options) {
     _classCallCheck(this, AMSCashierPayment);
     var _options = Object.assign({}, options, {
       product: productSceneEnum.CASHIER_PAYMENT
     });
-    return _super4.call(this, _options);
+    return _super5.call(this, _options);
   }
   return _createClass(AMSCashierPayment);
 }(AMSCheckout);
 export var AMSVaulting = /*#__PURE__*/function (_AMSCheckout4) {
   _inherits(AMSVaulting, _AMSCheckout4);
-  var _super5 = _createSuper(AMSVaulting);
+  var _super6 = _createSuper(AMSVaulting);
   function AMSVaulting(options) {
     _classCallCheck(this, AMSVaulting);
     var _options = Object.assign({}, options, {
       product: productSceneEnum.VAULTING
     });
-    return _super5.call(this, _options);
+    return _super6.call(this, _options);
   }
   return _createClass(AMSVaulting);
 }(AMSCheckout);

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

@@ -1,5 +1,4 @@
-import { componentSignEnum, Ianalytics } from '../../types';
-import { renderDisplayTypeEnum } from '../../types/index';
+import { renderDisplayTypeEnum, componentSignEnum, Ianalytics } from '../../types';
 export declare const getAppPath: (environment: string, appVersion: string, componentSign: componentSignEnum, productSceneVersion: string, extendInfo: string) => any;
 export declare const getAppDomain: (domainParams: {
     environment: string;

package/esm/plugin/component/cashierApp.js

@@ -10,8 +10,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * 2. If applicable, the use of the Software is also subject to the terms and conditions of any non-disclosure agreement signed by you and the relevant Ant Group entity.
  */
 import { marmotMap, sdkVersion } from "../../config/index";
-import { componentSignEnum } from "../../types";
 import { getViewPort, queryParse, serialize } from "../../util/index";
+import { componentSignEnum } from "../../types";
 var getAppVersion = function getAppVersion(_extendInfo) {
   try {
     var info = JSON.parse(_extendInfo);
@@ -21,7 +21,7 @@ var getAppVersion = function getAppVersion(_extendInfo) {
   }
 };
 var getFinalProductSceneVersion = function getFinalProductSceneVersion(componentSign, productSceneVersion) {
-  var signSupportMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentSignEnum.NONE, ['']), componentSignEnum.AUTO_DEBIT_WALLET, ['1.0']), componentSignEnum.CASHIER_PAYMENT_BANK, ['1.0']), componentSignEnum.CASHIER_PAYMENT_CARD, ['1.0']), componentSignEnum.EASY_PAY_WALLET, ['1.0', '2.0']), componentSignEnum.VAULTING_CARD, ['1.0']);
+  var signSupportMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentSignEnum.NONE, ['']), componentSignEnum.AUTO_DEBIT_WALLET, ['1.0']), componentSignEnum.CASHIER_PAYMENT_BANK, ['1.0']), componentSignEnum.CASHIER_PAYMENT_CARD, ['1.0']), componentSignEnum.CASHIER_PAYMENT_APM, ['1.0']), componentSignEnum.EASY_PAY_WALLET, ['1.0', '2.0']), componentSignEnum.VAULTING_CARD, ['1.0']);
   var supportProductSceneVersion = signSupportMap[componentSign];
   // 从左到右，从旧到新
   var isSupport = supportProductSceneVersion.find(function (it) {

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

@@ -8,7 +8,7 @@
 import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, LOADING_ID, MOCKUP_ID } from "../../constant";
 import { platformEnum } from "../../types";
 import { addSetFontSizeEvent, amsSetSize, getDesignFontSize } from "../../util";
-var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n  \n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  80% {\n    opacity: 1\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 8px;\n  max-width: 225px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 8px;\n  max-width: 225px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
+var componentCss = ".ams-component-container-mobile {\n  width: 100%;\n  height: 1px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n}\n.ams-component-container-mobile-animation{\n  animation: ams-component-container-slide-in 0.3s ease-in-out;\n}\n\n.ams-component-section-desktop {\n  font-size: 0;\n}\n\n.ams-component-container-hidden-mobile {\n  width: 100%;\n  height: 0px;\n  position: fixed;\n  bottom: -1px;\n  left: 0;\n  z-index: 1001;\n  background-color: transparent;\n  border-radius: 12px 12px 0 0;\n  animation: ams-component-container-slide-out 0.26s ease-in forwards;\n  overflow: hidden;\n}\n\n.ams-component-section-mobile {\n  border-radius: 12px 12px 0 0;\n  overflow: hidden;\n  font-size: 0;\n  height: 100%;\n}\n\n.ams-component-container-desktop {\n  display: block;\n  width: 672px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-origin: 50% 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-container-desktop-animation{\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n@keyframes ams-component-container-zoom-out {\n  0% {\n    transform: translate(-50%, -50%) scale(1);\n    -webkit-transform: translate(-50%, -50%) scale(1);\n    opacity: 1\n  }\n  \n  100% {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.4);\n    -webkit-transform: translate(-50%, -50%) scale(0.4);\n  }\n}\n\n@keyframes ams-component-container-zoom-in {\n  0% {\n    transform: translate(-50%, -50%) scale(0.4);\n    opacity: 0\n  }\n\n  80% {\n    opacity: 1\n  }\n\n  100% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.ams-component-container-hidden-desktop {\n  display: block;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  z-index: 1001;\n  border-radius: 8px;\n  overflow: hidden;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  transform-origin: 50% 50%;\n}\n\n.ams-component-loading {\n  width: 0.8em;\n  height:0.8em;\n  background: rgba(0, 0, 0, 0.5);\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.ams-component-loading .line {\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ams-component-loading .line div {\n  position: absolute;\n  left: 17.67px;\n  top: 0;\n  width: 5.33px;\n  height: 40px;\n}\n\n.ams-component-loading .line div:before,\n.ams-component-loading .line div:after {\n  content: '';\n  display: block;\n  height: 13.33px;\n  background: #fcfcfc;\n  border-radius: 5.3px;\n}\n.ams-component-loading .line div:after {\n  margin-top: 13.33px;\n}\n\n.ams-component-loading .line div:nth-child(2) {\n  -webkit-transform: rotate(45deg);\n}\n\n.ams-component-loading .line div:nth-child(3) {\n  -webkit-transform: rotate(90deg);\n}\n\n.ams-component-loading .line div:nth-child(4) {\n  -webkit-transform: rotate(135deg);\n}\n\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes load {\n  0% {\n      opacity: 0;\n  }\n\n  100% {\n      opacity: 1;\n  }\n}\n\n.ams-component-loading .line div:nth-child(1):before {\n  -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):before {\n  -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):before {\n  -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):before {\n  -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-loading .line div:nth-child(1):after {\n  -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-loading .line div:nth-child(2):after {\n  -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-loading .line div:nth-child(3):after {\n  -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-loading .line div:nth-child(4):after {\n  -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-loading-logo {\n  width: 0.44em;\n  height: 0.44em;\n  -webkit-transform:rotate(360deg);\n  transform:rotate(360deg);\n  -webkit-transition:-webkit-transform 1s linear;\n  transition:transform 1s linear;\n  animation: ams-component-loading-logo 1s linear infinite;\n}\n\n.asm-component-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n}\n.asm-component-close-block-btn-desktop {\n  width: 11px;\n  height: 11px;\n  object-fit: fill;\n  position: absolute;\n  right: 18.7px;\n  top: 26.7px;\n}\n.asm-component-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n.asm-component-close-block-mobile {\n  position: absolute;\n  width: 0.4em;\n  height: 0.4em;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n  z-index: 1009;\n}\n\n.asm-component-close-block-btn-mobile {\n  width: 0.11em;\n  height: 0.11em;\n  object-fit: fill;\n  position: absolute;\n  right: 0.147em;\n  top: 0.167em;\n}\n\n\n.ams-component-container-opacity{\n  opacity: 1;\n}\n\n.ams-component-container-opacity:after{\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  content: \"\";\n  z-index: 1010;\n  background-color: rgba(0, 0, 0, 0.35);\n  border-radius: 12px 12px 0 0;\n}\n\n#ams-component-retention {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: 50%;\n  height: auto;\n  display: none;\n  z-index: 1009;\n}\n\n.ams-component-retention-show {\n  display: flex !important;\n  animation: ams-component-container-zoom-in 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n\n.ams-component-retention-hidden {\n  display: flex !important;\n  animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  -webkit-animation: ams-component-container-zoom-out 0.3s ease-in-out;\n  animation-fill-mode: forwards;\n  -webkit-animation-fill-mode: forwards;\n}\n\n.ams-component-retention-mobile {\n  width: 294px;\n  border-radius: 12px;\n  padding: 24px 0;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-desktop {\n  width: 544px;\n  border-radius: 12px;\n  padding: 32px;\n  background-color: #fff;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 300px) {\n  .ams-component-retention-mobile {\n      transform: translate(-50%, -50%) scale(0.8);\n  }\n}\n\n.ams-component-retention-title-mobile {\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-title-desktop {\n  text-align: left;\n  width: 100%;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  color: #2A3A52;\n}\n\n.ams-component-retention-sub-title-mobile {\n  width: 100%;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 8px;\n  text-align: center;\n  padding: 0 16px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-sub-title-desktop {\n  text-align: left;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  color: #7C8CA3;\n  margin-top: 10px;\n}\n\n.ams-component-retention-btn-block-mobile {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  margin-top: 24px;\n  padding: 0 24px;\n  box-sizing: border-box;\n}\n\n.ams-component-retention-btn-block-desktop {\n  width: 100%;\n  margin-top: 24px;\n}\n\n#ams-component-retention-remain {\n  background: #0079FF;\n  border-radius: 100px;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-remain-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-remain-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 159px;\n}\n\n#ams-component-retention-leave {\n  border-radius: 100px;\n  border: 1px solid #0079FF;\n  font-style: normal;\n  font-weight: 500;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ams-component-retention-leave-mobile {\n  width: 100%;\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  margin-top: 12px;\n  padding: 0 6px;\n}\n\n.ams-component-retention-leave-desktop {\n  height: 44px;\n  font-size: 16px;\n  line-height: 44px;\n  color: #1677FF;\n  display: inline-block;\n  padding: 0 24px;\n  float: right;\n  margin-right: 16px;\n  cursor: pointer;\n  padding: 0 16px;\n  max-width: 225px;\n  min-width: 144px;\n}\n.".concat(MOCKUP_ID, "-hidden{\nanimation: ").concat(MOCKUP_ID, "-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ").concat(MOCKUP_ID, "-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n");
 export var componentAddCSS = function componentAddCSS() {
   var style = document.createElement('style');
   style.type = 'text/css';

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

@@ -1,5 +1,5 @@
 import type AMSCheckout from '../../core/instance';
-import type { eventPayload, eventPayloadContext, IappendIframeNodesParams, Iselector } from '../../types';
+import type { eventPayload, eventPayloadContext, IappendIframeNodesParams, IMerchantAppointParam, Iselector } from '../../types';
 import { componentSignEnum, platformEnum, renderDisplayTypeEnum } from '../../types';
 type IrenderFuncParams = (context: ComponentApp, selector: Iselector, renderDisplayType: renderDisplayTypeEnum) => Promise<void>;
 export default class ComponentApp {
@@ -23,6 +23,9 @@ export default class ComponentApp {
     private _appLocationSearch;
     private _renderDisplayType;
     private _multipleCallbackEvents;
+    _merchantAppointParam: IMerchantAppointParam;
+    private _webAppHeartBeatTimeoutId;
+    private _webAppHeartBeatTimeoutFn;
     constructor();
     /**
      * @description Cancel listening and destroy the dom
@@ -73,10 +76,14 @@ export default class ComponentApp {
      * @description Processing messages from iframe
      */
     _handleAppMessage(data: eventPayload): void;
+    private dismissLoadingFunc;
     private handleSizeChanged;
     private handleRedirect;
     private handleDeclareInfo;
     private handleDeclarePopWindowCallback;
+    private handleAppHeartBeat;
+    private isAppAttached;
+    private isWindowVisible;
     private handleCloseBtnShow;
     /**
      * @description Send message to SDK