@alipay/ams-checkout 1.9.0 → 1.10.1

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

@@ -5,14 +5,19 @@ export declare const getComponentSign: (params: IpaymentSessionMetaData) => comp
 export declare const parseSessionData: (sessionData: string) => [IpaymentSessionMetaData, string];
 export declare class AMSComponent extends CoreInstance {
     _componentApp: ComponentApp;
+    channelType: componentSignEnum[];
+    productSceneVersion: string;
     constructor(options: IoptionsParams);
     private parameterInitAndCheck;
     private pluginAppendIframe;
+    private savePreviousChannel;
     /**
      * @description Create component application
      * @param params - The data source created by the component, necessary sessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
      */
     createComponent(params: IcreateComponent): Promise<void>;
+    preloadComponent(channelType: any, productSceneVersion: any): void;
+    clearPreloadIframe(isTimeOut?: boolean): void;
     /**
      * @description Create and render components in the specified element area
      * @param params - The data source created by the component, necessary sessionData, optional appearance configurations, and refer to the documentation for other parameters and detailed information.

package/esm/core/component/index.js

@@ -29,8 +29,8 @@ import { v4 as uuid } from 'uuid';
 import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
 import ComponentApp from "../../plugin/component";
 import { componentSignEnum, modeEnum, networkModeEnum, productSceneEnum, renderDisplayTypeEnum } from "../../types";
-import { getOrSetStorageId, isPC } from "../../util";
-import { createIframeNode } from "../../util/createIframeNode";
+import { getOrSetStorageId, isPC, parseBase64ToString } from "../../util";
+import { createIframeNode, createPreloadIframeNode } from "../../util/createIframeNode";
 import { getSecurityConfigStorageKey } from "../../util/security";
 import CoreInstance from "../instance/index";
 export var getComponentSign = function getComponentSign(params) {
@@ -44,7 +44,7 @@ export var getComponentSign = function getComponentSign(params) {
 };
 export var parseSessionData = function parseSessionData(sessionData) {
   try {
-    return [JSON.parse(atob(sessionData.split('&&')[3])), sessionData.split('&&').slice(0, 3).join('&&')];
+    return [JSON.parse(parseBase64ToString(sessionData.split('&&')[3])), sessionData.split('&&').slice(0, 3).join('&&')];
   } catch (error) {
     console.error('Parsing sessionData is abnormal and may affect the payment link. Please ensure to use the new version of SDK.');
     return [{}, sessionData];
@@ -106,8 +106,11 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     _this = _super.call(this, options);
     // Instantiate the plug-in and set render
     _defineProperty(_assertThisInitialized(_this), "_componentApp", void 0);
+    _defineProperty(_assertThisInitialized(_this), "channelType", void 0);
+    _defineProperty(_assertThisInitialized(_this), "productSceneVersion", void 0);
     var ComponentPlugin = new ComponentApp();
     ComponentPlugin.setRender(createIframeNode);
+    ComponentPlugin.setPreloadRender(createPreloadIframeNode);
     // Register Cashier Application Plug in
     _this._registerPlugin(COMPONENTPLUGINID, ComponentPlugin);
     _this._componentApp = _this._getPlugin(COMPONENTPLUGINID);
@@ -146,6 +149,45 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         return Promise.reject(error);
       }
     }
+  }, {
+    key: "savePreviousChannel",
+    value: function savePreviousChannel(iframeNodesParams) {
+      var _ref2 = iframeNodesParams || {},
+        _ref2$paymentSessionM = _ref2.paymentSessionMetaData.paymentSessionConfig,
+        _ref2$paymentSessionM2 = _ref2$paymentSessionM.productScene,
+        productScene = _ref2$paymentSessionM2 === void 0 ? '' : _ref2$paymentSessionM2,
+        _ref2$paymentSessionM3 = _ref2$paymentSessionM.paymentMethodCategoryType,
+        paymentMethodCategoryType = _ref2$paymentSessionM3 === void 0 ? '' : _ref2$paymentSessionM3,
+        _ref2$paymentSessionM4 = _ref2$paymentSessionM.productSceneVersion,
+        productSceneVersion = _ref2$paymentSessionM4 === void 0 ? '' : _ref2$paymentSessionM4;
+      var channelType = "".concat(productScene, "_").concat(paymentMethodCategoryType);
+      if (productScene && paymentMethodCategoryType && productSceneVersion) {
+        if (Array.isArray(this.channelType) && this.channelType.includes(channelType) && this.productSceneVersion === productSceneVersion) {
+          this.logger.logInfo({
+            title: 'preload_match'
+          }, {
+            preloadChannel: this.channelType,
+            preloadVersion: this.productSceneVersion,
+            sessionDataChannel: channelType,
+            sessionDataVersion: productSceneVersion
+          });
+        } else {
+          this.logger.logInfo({
+            title: 'preload_no_match'
+          }, {
+            preloadChannel: this.channelType,
+            preloadVersion: this.productSceneVersion,
+            sessionDataChannel: channelType,
+            sessionDataVersion: productSceneVersion
+          });
+        }
+        var previousChannel = {
+          channelType: channelType === componentSignEnum.VAULTING_CARD ? componentSignEnum.CASHIER_PAYMENT_CARD : channelType,
+          productSceneVersion: productSceneVersion
+        };
+        localStorage.setItem('antom_checkout_previousChannel', JSON.stringify(previousChannel));
+      }
+    }
     /**
      * @description Create component application
      * @param params - The data source created by the component, necessary sessionData, optional appearance configuration, and refer to the documentation for other parameters and detailed information.
@@ -154,6 +196,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     key: "createComponent",
     value: function createComponent(params) {
       var _this2 = this;
+      this.clearPreloadIframe();
       return this.parameterInitAndCheck({
         params: params,
         renderDisplayType: renderDisplayTypeEnum.popup
@@ -168,9 +211,53 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         _this2._eventCenter.emit(EVENT.error.name, error);
         return Promise.reject(error);
       }).then(function (appendParams) {
+        var iframeNodesParams = appendParams.iframeNodesParams;
+        _this2.savePreviousChannel(iframeNodesParams);
         return _this2.pluginAppendIframe(appendParams);
       });
     }
+  }, {
+    key: "preloadComponent",
+    value: function preloadComponent(channelType, productSceneVersion) {
+      var _this3 = this;
+      this.channelType = channelType;
+      this.productSceneVersion = productSceneVersion;
+      var MAX_CLEAR_TIME = 10000;
+      if (Array.isArray(channelType)) {
+        for (var i = 0; i < channelType.length; i++) {
+          this._componentApp.appendPreloadIframeNodes(channelType[i], productSceneVersion);
+        }
+      } else {
+        this.logger.logError({
+          title: 'performance_optimization_channelType_error'
+        }, {
+          channelType: channelType
+        });
+      }
+      setTimeout(function () {
+        _this3.clearPreloadIframe(true);
+      }, MAX_CLEAR_TIME);
+    }
+  }, {
+    key: "clearPreloadIframe",
+    value: function clearPreloadIframe() {
+      var isTimeOut = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      if (Array.isArray(this.channelType)) {
+        for (var i = 0; i < this.channelType.length; i++) {
+          var iframe = document.getElementById("ams-checkout-component-".concat(this.channelType[i], "-").concat(this.productSceneVersion));
+          iframe && document.body.removeChild(iframe);
+        }
+      }
+      if (!isTimeOut) {
+        this.logger.logInfo({
+          title: 'performance_optimization_clearPreloadIframe'
+        });
+      } else {
+        this.logger.logInfo({
+          title: 'performance_optimization_clearPreloadIframe_timeout'
+        });
+      }
+    }
     /**
      * @description Create and render components in the specified element area
      * @param params - The data source created by the component, necessary sessionData, optional appearance configurations, and refer to the documentation for other parameters and detailed information.
@@ -179,7 +266,8 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
   }, {
     key: "mountComponent",
     value: function mountComponent(params, selector) {
-      var _this3 = this;
+      var _this4 = this;
+      this.clearPreloadIframe();
       return this.parameterInitAndCheck({
         params: params,
         renderDisplayType: renderDisplayTypeEnum.inline,
@@ -187,15 +275,17 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
       }).then(function (_params) {
         return handleParams(_params);
       }).catch(function (error) {
-        _this3.logger.logError({
+        _this4.logger.logError({
           title: 'sdk_error_parameter'
         }, {
           params: JSON.stringify(params)
         }).send();
-        _this3._eventCenter.emit(EVENT.error.name, error);
+        _this4._eventCenter.emit(EVENT.error.name, error);
         return Promise.reject(error);
       }).then(function (appendParams) {
-        return _this3.pluginAppendIframe(appendParams);
+        var iframeNodesParams = appendParams.iframeNodesParams;
+        _this4.savePreviousChannel(iframeNodesParams);
+        return _this4.pluginAppendIframe(appendParams);
       });
     }
     /**
@@ -206,22 +296,22 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
   }, {
     key: "submit",
     value: function submit(data) {
-      var _this4 = this;
+      var _this5 = this;
       return new Promise(function (resolve, reject) {
         try {
           var eventCallbackId = uuid();
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          _this4._eventCenter.once(eventCallbackId, function (_data) {
+          _this5._eventCenter.once(eventCallbackId, function (_data) {
             resolve(_data);
           });
-          _this4._componentApp.dispatchToApp({
+          _this5._componentApp.dispatchToApp({
             context: {
               event: 'submitPay',
               eventCallbackId: eventCallbackId,
               data: data
             }
           });
-          _this4.logger.logInfo({
+          _this5.logger.logInfo({
             title: 'sdk_event_apiSubmit'
           });
         } catch (error) {

package/esm/index.d.ts

@@ -1,8 +1,16 @@
-import { AMSComponent } from './core/component/index';
-import { IoptionsParams } from './types';
+/**
+ * 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 ApplePayComponent from './core/applepay';
+import { AMSComponent } from './core/component/index';
+import { IoptionsParams, componentSignEnum } from './types';
 export * from './types';
 export declare class AMSCheckout extends AMSComponent {
+    constructor(_options: any, channelType?: componentSignEnum[], productSceneVersion?: string);
 }
 export declare class AMSApplePay extends ApplePayComponent {
 }

package/esm/index.js

@@ -18,16 +18,23 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
  * 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 { productSceneEnum } from "./types/index";
-import { AMSComponent } from "./core/component/index";
 import ApplePayComponent from "./core/applepay";
+import { AMSComponent } from "./core/component/index";
+import { componentSignEnum } from "./types";
+import { productSceneEnum } from "./types/index";
+import { Logger, LogConfig } from "./util/logger";
+var logger = new Logger(LogConfig, true);
 export * from "./types";
 export var AMSCheckout = /*#__PURE__*/function (_AMSComponent) {
   _inherits(AMSCheckout, _AMSComponent);
   var _super = _createSuper(AMSCheckout);
-  function AMSCheckout() {
+  function AMSCheckout(_options, channelType) {
+    var _this;
+    var productSceneVersion = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '1.0';
     _classCallCheck(this, AMSCheckout);
-    return _super.apply(this, arguments);
+    _this = _super.call(this, _options);
+    _this.preloadComponent(channelType, productSceneVersion);
+    return _this;
   }
   return _createClass(AMSCheckout);
 }(AMSComponent);
@@ -48,7 +55,7 @@ export var AMSAutoDebit = /*#__PURE__*/function (_AMSCheckout) {
     var _options = Object.assign({}, options, {
       product: productSceneEnum.AUTO_DEBIT
     });
-    return _super3.call(this, _options);
+    return _super3.call(this, _options, [componentSignEnum.AUTO_DEBIT_WALLET]);
   }
   return _createClass(AMSAutoDebit);
 }(AMSCheckout);
@@ -60,7 +67,26 @@ export var AMSEasyPay = /*#__PURE__*/function (_AMSCheckout2) {
     var _options = Object.assign({}, options, {
       product: productSceneEnum.EASY_PAY
     });
-    return _super4.call(this, _options);
+    var currentProductSceneVersion = '1.0';
+    try {
+      var previousChannelStr = localStorage.getItem('antom_checkout_previousChannel');
+      var previousChannel = JSON.parse(previousChannelStr) || {};
+      var _ref = previousChannel || {},
+        _ref$channelType = _ref.channelType,
+        channelType = _ref$channelType === void 0 ? '' : _ref$channelType,
+        _ref$productSceneVers = _ref.productSceneVersion,
+        productSceneVersion = _ref$productSceneVers === void 0 ? '1.0' : _ref$productSceneVers;
+      if (channelType === componentSignEnum.EASY_PAY_WALLET) {
+        currentProductSceneVersion = productSceneVersion;
+      }
+    } catch (error) {
+      logger.logError({
+        title: 'performance_optimization_get_previousChannel_error'
+      }, {
+        error: error
+      });
+    }
+    return _super4.call(this, _options, [componentSignEnum.EASY_PAY_WALLET], currentProductSceneVersion);
   }
   return _createClass(AMSEasyPay);
 }(AMSCheckout);
@@ -72,7 +98,26 @@ export var AMSCashierPayment = /*#__PURE__*/function (_AMSCheckout3) {
     var _options = Object.assign({}, options, {
       product: productSceneEnum.CASHIER_PAYMENT
     });
-    return _super5.call(this, _options);
+    var currentChannelType;
+    try {
+      var previousChannelStr = localStorage.getItem('antom_checkout_previousChannel');
+      var previousChannel = JSON.parse(previousChannelStr) || {};
+      var _ref2 = previousChannel || {},
+        _ref2$channelType = _ref2.channelType,
+        channelType = _ref2$channelType === void 0 ? '' : _ref2$channelType;
+      if ([componentSignEnum.CASHIER_PAYMENT_CARD, componentSignEnum.CASHIER_PAYMENT_APM, componentSignEnum.CASHIER_PAYMENT_BANK].includes(channelType)) {
+        currentChannelType = [channelType];
+      } else {
+        currentChannelType = [componentSignEnum.CASHIER_PAYMENT_CARD, componentSignEnum.CASHIER_PAYMENT_APM];
+      }
+    } catch (error) {
+      logger.logError({
+        title: 'performance_optimization_get_previousChannel_error'
+      }, {
+        error: error
+      });
+    }
+    return _super5.call(this, _options, currentChannelType);
   }
   return _createClass(AMSCashierPayment);
 }(AMSCheckout);
@@ -84,7 +129,7 @@ export var AMSVaulting = /*#__PURE__*/function (_AMSCheckout4) {
     var _options = Object.assign({}, options, {
       product: productSceneEnum.VAULTING
     });
-    return _super6.call(this, _options);
+    return _super6.call(this, _options, [componentSignEnum.CASHIER_PAYMENT_CARD]);
   }
   return _createClass(AMSVaulting);
 }(AMSCheckout);

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

@@ -17,6 +17,8 @@ export declare const getIframeUrl: (iframeParams: {
     locale: string;
     instanceId: string;
     renderDisplayType: renderDisplayTypeEnum;
+    isPreload?: string;
+    hostSign?: string;
 }) => {
     path: string;
     locationSearch: string;
@@ -25,3 +27,4 @@ export declare const getIframeUrl: (iframeParams: {
  * @description Create iframe
  */
 export declare const createIframe: (mode: string, platform: 'mobile' | 'desktop') => HTMLIFrameElement;
+export declare const createPreloadIframe: (channelType: any, version: any) => HTMLIFrameElement;

package/esm/plugin/component/cashierApp.js

@@ -69,7 +69,11 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     extendInfo = iframeParams.extendInfo,
     locale = iframeParams.locale,
     instanceId = iframeParams.instanceId,
-    renderDisplayType = iframeParams.renderDisplayType;
+    renderDisplayType = iframeParams.renderDisplayType,
+    _iframeParams$isPrelo = iframeParams.isPreload,
+    isPreload = _iframeParams$isPrelo === void 0 ? '' : _iframeParams$isPrelo,
+    _iframeParams$hostSig = iframeParams.hostSign,
+    hostSign = _iframeParams$hostSig === void 0 ? '' : _iframeParams$hostSig;
   var path = getAppPath(environment, appVersion, componentSign, productSceneVersion, extendInfo || '');
   var initialScale = 1;
   var scale = getViewPort('initial-scale') || initialScale;
@@ -90,7 +94,9 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
     analyticsEnabled: (analytics === null || analytics === void 0 ? void 0 : analytics.enabled) === false ? 'false' : 'true',
     sdkVersion: sdkVersion,
     refUrl: window.location.href,
-    _componentStartTime: "".concat(Date.now())
+    _componentStartTime: "".concat(Date.now()),
+    isPreload: isPreload || '',
+    hostSign: hostSign || ''
   });
   if (LOCAL_MOCK) urlParams.LOCAL_MOCK = LOCAL_MOCK;
   if (requestHost) urlParams.requestHost = requestHost;
@@ -98,6 +104,7 @@ export var getIframeUrl = function getIframeUrl(iframeParams) {
   if (environment === 'light_sandbox' || _light_sandbox === 'true') urlParams.sandbox = 'true';
   if (environment === 'sandbox' || _sandbox === 'true') urlParams.shadow = 'true';
   if (_displayType) urlParams.displayType = _displayType;
+  if (isPreload) urlParams.isPreload = isPreload;
   var locationSearch = serialize(urlParams);
   return {
     path: path,
@@ -127,4 +134,18 @@ export var createIframe = function createIframe(mode, platform) {
   iframe.style.opacity = none;
   iframe.style.overflow = 'hidden';
   return iframe;
+};
+export var createPreloadIframe = function createPreloadIframe(channelType, version) {
+  var id = "ams-checkout-component-".concat(channelType, "-").concat(version);
+  var iframe = document.createElement('iframe');
+  var iframeId = id;
+  var none = '1px';
+  var width = '1px';
+  iframe.id = iframeId;
+  iframe.style.height = none;
+  iframe.style.width = width;
+  iframe.style.border = none;
+  iframe.style.opacity = '0';
+  iframe.style.overflow = 'hidden';
+  return iframe;
 };

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

@@ -13,6 +13,7 @@ export default class ComponentApp {
     private popupApp?;
     private appDomain;
     private createIframeNode;
+    private createPreloadIframeNode;
     private _selector;
     private _appVersion;
     private _isRetention;
@@ -40,6 +41,7 @@ export default class ComponentApp {
      * @description Set the rendering capability of the cashier plug-in. Different technology stacks have some differences in the packaging and use of rendering functions
      */
     setRender(renderFunc: IrenderFuncParams): void;
+    setPreloadRender(renderFunc: any): void;
     private initSecurity;
     private logDeviceId;
     private getDeviceIdAndLog;
@@ -47,6 +49,7 @@ export default class ComponentApp {
      * @description render iframe content
      */
     appendIframeNodes(componentSign: componentSignEnum, renderParams: IappendIframeNodesParams): Promise<void>;
+    appendPreloadIframeNodes(componentSign: any, productSceneVersion: any): void;
     private setParameterDefaultValues;
     private renderInlineLoading;
     private renderPopupLoading;
@@ -57,6 +60,7 @@ export default class ComponentApp {
     private createActionQueryPromise;
     private createSubmitPromise;
     private cleanElement;
+    private createPreloadApp;
     /**
      * @description Create app
      */