@alipay/ams-checkout 0.0.1730107332-dev.4 → 0.0.1730706734-dev.0

package/esm/{component → plugin/component}/component.inline.style.js

@@ -5,9 +5,9 @@
  * 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 { COMPONENT_CONTAINER_ID, COMPONENT_IFRAME_TAG_ID, INLINE_BASE_STYLE_ID, INLINE_IMG_CLASSNAME, LOADING_ID } from "../constant";
-import { ComponentSignEnum, PlatformEnum } from "../types";
-import { amsSetSize } from "../util";
+import { COMPONENT_CONTAINER_ID, COMPONENT_IFRAME_TAG_ID, INLINE_BASE_STYLE_ID, INLINE_IMG_CLASSNAME, LOADING_ID } from "../../constant";
+import { ComponentSignEnum, PlatformEnum } from "../../types";
+import { amsSetSize } from "../../util";
 // border-radius: 8px;
 var inlineComponentCss = "#".concat(COMPONENT_IFRAME_TAG_ID, "-desktop{\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n#").concat(COMPONENT_IFRAME_TAG_ID, "-mobile{\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.").concat(COMPONENT_CONTAINER_ID, "-inline{\n  width: 100%;\n  height: auto;\n  position: relative;\n  line-height: 0;\n  display: flex;\n}\n#").concat(LOADING_ID, "{\n  width: 100%;\n  flex: 1;\n}\n.").concat(INLINE_IMG_CLASSNAME, "{\n  width: 100%;\n  height: auto;\n  object-fit: contain;\n  box-sizing: border-box;\n}\n.").concat(INLINE_IMG_CLASSNAME, "-mobile{\n  padding: 0 0.16em;\n}\n.").concat(INLINE_IMG_CLASSNAME, "-desktop{}\n");
 export var inlineComponentAddCss = function inlineComponentAddCss() {
@@ -109,13 +109,14 @@ export var addInlineLoading = function addInlineLoading(_selector, platform, opt
 };
 export var createInlineBaseElement = function createInlineBaseElement(selector) {
   var containerId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : COMPONENT_CONTAINER_ID;
+  var selectorId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var inlineBaseStyle = document.getElementById(INLINE_BASE_STYLE_ID);
   if (!inlineBaseStyle) inlineComponentAddCss();
-  if (document.getElementById(containerId)) return;
+  if (document.getElementById(selectorId ? selectorId : containerId)) return;
   var amsComponentContainer = document.createElement('div');
   amsComponentContainer.className = "".concat(containerId, "-inline");
-  amsComponentContainer.id = containerId;
-  var selectorDom = document.querySelector("#".concat(selector));
+  amsComponentContainer.id = selectorId ? selectorId : containerId;
+  var selectorDom = document.querySelector("".concat(selector));
   if (selectorDom) selectorDom.appendChild(amsComponentContainer);
   return amsComponentContainer;
 };

package/esm/{component → plugin/component}/component.popup.style.d.ts

@@ -1,4 +1,4 @@
-import { PlatformEnum } from '../types';
+import { PlatformEnum } from '../../types';
 export declare const componentAddCSS: () => void;
 export declare const createBaseElement: (platform: PlatformEnum, closeBtnFunc: () => void) => HTMLDivElement;
 export declare const createCloseBtn: (platform: PlatformEnum, closeBtnFunc: () => void) => void;

package/esm/{component → plugin/component}/component.popup.style.js

@@ -5,9 +5,9 @@
  * 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 { 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";
+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  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  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');
@@ -31,7 +31,7 @@ export var createBaseElement = function createBaseElement(platform, closeBtnFunc
   amsComponentContainer.classList.remove("".concat(COMPONENT_CONTAINER_ID, "-hidden-").concat(platform));
   amsComponentContainer.classList.add("".concat(COMPONENT_CONTAINER_ID, "-").concat(platform));
   createCloseBtn(platform, closeBtnFunc);
-  return amsComponentSection;
+  return amsComponentContainer;
 };
 export var createCloseBtn = function createCloseBtn(platform, closeBtnFunc) {
   var clickEventName = platform === PlatformEnum.mobile ? 'touchend' : 'click';

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

@@ -0,0 +1,126 @@
+import type AMSCheckout from '../../core/instance';
+import type { EventPayload, EventPayloadContext, IappendIframeNodesParams, IMerchantAppointParam, Iselector } from '../../types';
+import { ComponentSignEnum, DeviceIdParameter, DisplayTypeEnum, PlatformEnum } from '../../types';
+type IrenderFuncParams = (context: ComponentApp, selector: Iselector, renderDisplayType: DisplayTypeEnum) => Promise<void>;
+export default class ComponentApp {
+    app: null | HTMLIFrameElement;
+    AMSSDK: AMSCheckout;
+    platform: PlatformEnum;
+    _performanceData: any[];
+    _loadAppPromiseResolve: ((value: boolean) => void) | null;
+    _isInitComponent: boolean;
+    private _globalData?;
+    private popupApp?;
+    private appDomain;
+    private createIframeNode;
+    private createPreloadIframeNode;
+    private _selector;
+    private _appVersion;
+    private _isRetention;
+    private _allowSubmitPayCallAhead;
+    private _actionQueryPromise;
+    private _actionSubmitPromise;
+    private _renderParams;
+    private _componentSign;
+    private _appLocationSearch;
+    private _renderDisplayType;
+    private _multipleCallbackEvents;
+    private _isAppWebview;
+    _merchantAppointParam: IMerchantAppointParam;
+    private _webAppHeartBeatTimeoutFn;
+    constructor(componentOption?: {
+        appVersion?: string;
+    });
+    /**
+     * @description Cancel listening and destroy the dom
+     */
+    logoutPlugin(): void;
+    /**
+     * @description When SDK registers plug-ins, it is a required function to receive SDK instances
+     */
+    applyPlugin(AMSSDK: AMSCheckout): void;
+    private initLoggerMeta;
+    /**
+     * @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;
+    getDeviceIdAndLog(deviceIdParameter?: DeviceIdParameter, isPolling?: boolean): Promise<string>;
+    /**
+     * @description render iframe content
+     */
+    appendIframeNodes(componentSign: ComponentSignEnum, renderParams: IappendIframeNodesParams): Promise<void>;
+    appendPreloadIframeNodes(componentSign: any, productSceneVersion: any): void;
+    private setParameterDefaultValues;
+    private renderInlineLoading;
+    private renderPopupLoading;
+    _createLoadAppPromise(loadTimeLimit?: number): Promise<unknown>;
+    /**
+     * @description Interface request
+     */
+    private createActionQueryPromise;
+    private createSubmitPromise;
+    private cleanElement;
+    private createPreloadApp;
+    /**
+     * @description Create app
+     */
+    private createApp;
+    private listener;
+    private resizeListener;
+    private createDialog;
+    private getDeviceIdAndCallback;
+    private getUserAgentAndCallback;
+    private returnDataAndCallback;
+    /**
+     * @description Initialize subscription iframe message
+     */
+    private addEventListener;
+    private removeEventListener;
+    /**
+     * @description Processing messages from iframe
+     */
+    _handleAppMessage(data: EventPayload): void;
+    private dismissLoadingFunc;
+    private handleSizeChanged;
+    private handleAuthUrlInfo;
+    private handleRedirect;
+    private handleDeclareInfo;
+    private handleDeclarePopWindowCallback;
+    private handleAppHeartBeat;
+    private isAppAttached;
+    private isWindowVisible;
+    private handleCloseBtnShow;
+    /**
+     * @description Send message to SDK
+     */
+    dispatchToSDK(event: string, data: any, eventCallbackId?: string): void;
+    /**
+     * @description Send message to iframe
+     */
+    dispatchToApp(payload: {
+        context: EventPayloadContext;
+    }, targetElement?: any): any;
+    /**
+     * @description Subscribe to messages from SDK
+     */
+    private subscribeFromSDK;
+    /**
+     * @description Send rendering events to iframe
+     */
+    private sendRenderEvent;
+    /**
+     * @description close cashier
+     */
+    private cleanContainer;
+    private hideComponentAnimation;
+    private closeBtnFunc;
+    private retentionPopupLeaveFunc;
+    private removeRetentionPopup;
+    private showRetentionPopup;
+    private hideRetentionPopupFunc;
+    private submitForm;
+}
+export {};