@alipay/ams-checkout 0.0.1697942541-dev.1 → 0.0.1697942541-dev.3

package/esm/constant/index.d.ts

@@ -140,6 +140,15 @@ export declare const EVENT: {
     dismissLoading: {
         name: string;
     };
+    popupWindow: {
+        name: string;
+    };
+    closePopup: {
+        name: string;
+    };
+    threedReady: {
+        name: string;
+    };
 };
 export declare const COMPONENT_CONTAINER_ID = "ams-component-container";
 export declare const COMPONENT_SECTION_ID = "ams-component-section";

package/esm/constant/index.js

@@ -139,6 +139,15 @@ export var EVENT = {
   },
   dismissLoading: {
     name: 'dismissLoading'
+  },
+  popupWindow: {
+    name: 'popupWindow'
+  },
+  closePopup: {
+    name: 'closePopup'
+  },
+  threedReady: {
+    name: 'threedReady'
   }
 };
 export var COMPONENT_CONTAINER_ID = 'ams-component-container';

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

@@ -9,6 +9,8 @@ export default class ComponentApp {
     _performanceData: any[];
     _loadAppPromiseResolve: ((value: boolean) => void) | null;
     _isInitComponent: boolean;
+    private _threedData?;
+    private popupWindow?;
     private appDomain;
     private createIframeNode;
     private _selector;
@@ -51,6 +53,7 @@ export default class ComponentApp {
     private createApp;
     private listener;
     private resizeListener;
+    private createPopupWindow;
     /**
      * @description Initialize subscription iframe message
      */
@@ -73,7 +76,7 @@ export default class ComponentApp {
      */
     dispatchToApp(payload: {
         context: eventPayloadContext;
-    }): any;
+    }, element?: any): any;
     /**
      * @description Subscribe to messages from SDK
      */

package/esm/plugin/component/index.js

@@ -16,16 +16,18 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  */
 /* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import APDID from '@alipay/jshield-apdid';
+import { marmptMap } from "../../config/index";
 import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_RETENTION_ID, COMPONENT_SECTION_ID, ERRORMESSAGE, EVENT, LISTENER_PREFIX, LOADING_ID, LOADTIME_LIMIT, MOCKUP_ID } from "../../constant";
 import { queryPaymentInfo } from "../../service";
 import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSceneEnum, renderDisplayTypeEnum, targetEnum } from "../../types";
 import { getType, isJsonString, isPC, queryParse } from "../../util";
 import { isLocalMock } from "../../util/mock";
+import { getAppname, getSecurityHost } from "../../util/security";
 import { createIframe, getAppDomain, getIframeUrl } from "./cashierApp";
 import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
 import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, handleDeclareInfo as _handleDeclareInfo, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup } from "./component.popup.style";
-import APDID from '@alipay/jshield-apdid';
-import { getSecurityHost, getAppname } from "../../util/security";
+import { createModal, insertStyleSheet, destroyModal } from "./popupWindow.style";
 var _ref = queryParse() || {},
   preinit = _ref.preinit,
   rebuild = _ref.rebuild,
@@ -41,6 +43,8 @@ var ComponentApp = /*#__PURE__*/function () {
     _defineProperty(this, "_performanceData", []);
     _defineProperty(this, "_loadAppPromiseResolve", null);
     _defineProperty(this, "_isInitComponent", void 0);
+    _defineProperty(this, "_threedData", void 0);
+    _defineProperty(this, "popupWindow", void 0);
     _defineProperty(this, "appDomain", void 0);
     _defineProperty(this, "createIframeNode", void 0);
     _defineProperty(this, "_selector", void 0);
@@ -113,7 +117,7 @@ var ComponentApp = /*#__PURE__*/function () {
       APDID.initToken(appName, {
         host: h5gateway
       }, function (success, tokenResult, msg) {
-        console.log("initToken result tokenResult", JSON.stringify(tokenResult));
+        console.log('initToken result tokenResult', JSON.stringify(tokenResult));
       });
     }
 
@@ -145,6 +149,7 @@ var ComponentApp = /*#__PURE__*/function () {
       if (this._renderDisplayType === renderDisplayTypeEnum.inline) {
         var container = createInlineBaseElement(this._selector);
         if (container) this.renderInlineLoading(renderParams, container);
+        insertStyleSheet();
       }
       if (this._renderDisplayType === renderDisplayTypeEnum.popup) {
         createBaseElement(this.platform, this.closeBtnFunc.bind(this));
@@ -302,6 +307,11 @@ var ComponentApp = /*#__PURE__*/function () {
             resolve(res);
           }
         }).catch(function (err) {
+          if (componentSignEnum.CASHIER_PAYMENT_CARD === _this3._componentSign) {
+            return resolve({
+              success: false
+            });
+          }
           _this3.dispatchToSDK(EVENT.error.name, {
             code: ERRORMESSAGE.CREATECOMPONENT_ERROR.code
           });
@@ -423,6 +433,19 @@ var ComponentApp = /*#__PURE__*/function () {
         }
       });
     }
+  }, {
+    key: "createPopupWindow",
+    value: function createPopupWindow(data) {
+      var _this$_renderParams2;
+      this._threedData = data;
+      var sessionData = encodeURIComponent((_this$_renderParams2 = this._renderParams) === null || _this$_renderParams2 === void 0 ? void 0 : _this$_renderParams2.sessionData);
+      // const threedPageUrl = `http://192.168.1.5:5173/src/component-app/threedPage/demo.html?scene=threedWrapperPage&sessionData=${sessionData}&instanceId=${this.AMSSDK._instanceId}` 
+      var threedPageUrl = "".concat(marmptMap[this.AMSSDK.options.env.environment], "/threedPage/index.html?scene=threedWrapperPage&sessionData=").concat(sessionData, "&instanceId=").concat(this.AMSSDK._instanceId);
+      this.popupWindow = createModal({
+        device: this.platform,
+        url: threedPageUrl
+      });
+    }
 
     /**
      * @description Initialize subscription iframe message
@@ -449,10 +472,28 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "_handleAppMessage",
     value: function _handleAppMessage(data) {
-      var eventKeyMap = [EVENT.launch.name, EVENT.redirect.name, EVENT.sizeChanged.name, EVENT.log.name, EVENT.close.name, EVENT.error.name, EVENT.eventCallback.name, EVENT.submitForm.name, EVENT.showCloseButton.name, EVENT.hideCloseButton.name, EVENT.setAllowRetention.name, EVENT.declareCheckoutInfo.name, EVENT.showPopup.name, EVENT.dismissLoading.name];
+      var eventKeyMap = [EVENT.launch.name, EVENT.redirect.name, EVENT.sizeChanged.name, EVENT.log.name, EVENT.close.name, EVENT.error.name, EVENT.eventCallback.name, EVENT.submitForm.name, EVENT.showCloseButton.name, EVENT.hideCloseButton.name, EVENT.setAllowRetention.name, EVENT.declareCheckoutInfo.name, EVENT.showPopup.name, EVENT.dismissLoading.name, EVENT.popupWindow.name, EVENT.threedReady.name, EVENT.closePopup.name];
       if (!eventKeyMap.includes(data.context.event)) {
         return;
       }
+      if (data.context.event === EVENT.closePopup.name) {
+        destroyModal();
+        return;
+      }
+      if (data.context.event === EVENT.threedReady.name) {
+        this.dispatchToApp({
+          context: {
+            event: 'renderThreedPage',
+            data: this._threedData
+          }
+        }, this.popupWindow);
+        return;
+      }
+      if (data.context.event === EVENT.popupWindow.name) {
+        var _data$context;
+        this.createPopupWindow((_data$context = data.context) === null || _data$context === void 0 ? void 0 : _data$context.data);
+        return;
+      }
       if (data.context.event === EVENT.dismissLoading.name) {
         var _data$context$data;
         this.dispatchToSDK(EVENT.eventCallback.name, {
@@ -643,12 +684,16 @@ var ComponentApp = /*#__PURE__*/function () {
   }, {
     key: "dispatchToApp",
     value: function dispatchToApp(payload) {
+      var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       var data = Object.assign({}, payload, {
         name: messageName.SDK_TO_APP,
         mode: this.AMSSDK.options.mode,
         appId: COMPONENTPLUGINID,
         instanceId: this.AMSSDK._instanceId
       });
+      if (element && element.contentWindow) {
+        return element.contentWindow.postMessage(JSON.stringify(data), '*');
+      }
       if (this.app && this.app.contentWindow) {
         return this.app.contentWindow.postMessage(JSON.stringify(data), this.appDomain);
       }
@@ -677,7 +722,7 @@ var ComponentApp = /*#__PURE__*/function () {
     key: "sendRenderEvent",
     value: function () {
       var _sendRenderEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _this$_renderParams2, _this$_renderParams3, _this$_renderParams4, _this$_renderParams5, _this$_renderParams6, res;
+        var _this$_renderParams3, _this$_renderParams4, _this$_renderParams5, _this$_renderParams6, _this$_renderParams7, res;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -701,12 +746,12 @@ var ComponentApp = /*#__PURE__*/function () {
                   event: 'renderComponent',
                   data: {
                     queryResult: res,
-                    sessionResult: (_this$_renderParams2 = this._renderParams) === null || _this$_renderParams2 === void 0 ? void 0 : _this$_renderParams2.paymentSessionMetaData,
-                    paymentSessionData: (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.sessionData,
+                    sessionResult: (_this$_renderParams3 = this._renderParams) === null || _this$_renderParams3 === void 0 ? void 0 : _this$_renderParams3.paymentSessionMetaData,
+                    paymentSessionData: (_this$_renderParams4 = this._renderParams) === null || _this$_renderParams4 === void 0 ? void 0 : _this$_renderParams4.sessionData,
                     heightOfVisible: Math.max(window.changingPageHeight, window.innerHeight),
-                    renderDisplayType: (_this$_renderParams4 = this._renderParams) === null || _this$_renderParams4 === void 0 ? void 0 : _this$_renderParams4.renderDisplayType,
-                    appearance: (_this$_renderParams5 = this._renderParams) === null || _this$_renderParams5 === void 0 ? void 0 : _this$_renderParams5.appearance,
-                    notRedirectAfterComplete: ((_this$_renderParams6 = this._renderParams) === null || _this$_renderParams6 === void 0 ? void 0 : _this$_renderParams6.notRedirectAfterComplete) === true,
+                    renderDisplayType: (_this$_renderParams5 = this._renderParams) === null || _this$_renderParams5 === void 0 ? void 0 : _this$_renderParams5.renderDisplayType,
+                    appearance: (_this$_renderParams6 = this._renderParams) === null || _this$_renderParams6 === void 0 ? void 0 : _this$_renderParams6.appearance,
+                    notRedirectAfterComplete: ((_this$_renderParams7 = this._renderParams) === null || _this$_renderParams7 === void 0 ? void 0 : _this$_renderParams7.notRedirectAfterComplete) === true,
                     envInfo: {
                       screenHeight: screen.height,
                       screenWidth: screen.width

package/esm/plugin/component/popupWindow.style.d.ts

@@ -1 +1,6 @@
-export {};
+export declare const insertStyleSheet: () => void;
+export declare const createModal: ({ device, url }: {
+    device: any;
+    url: any;
+}) => HTMLIFrameElement;
+export declare const destroyModal: () => void;

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

@@ -1,33 +1,45 @@
 import { AMSPOPUP_PREFIX, ANIMATION_TIME } from "../../constant";
 
 // CSS样式字符串
-var modalStyles = "\n  .".concat(AMSPOPUP_PREFIX, "modal {\n    /* \u6DFB\u52A0\u5F39\u7A97\u6837\u5F0F */\n    width: 500px;\n    height: 300px;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "overlay {\n    /* \u6DFB\u52A0\u8499\u5C42\u6837\u5F0F */\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.4);\n    z-index: 999;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeIn {\n    /* \u6DFB\u52A0\u6DE1\u5165\u52A8\u753B */\n    animation: fadeIn ").concat(ANIMATION_TIME, "ms;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeOut {\n    /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n    animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u5165\u52A8\u753B */\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u51FA\u52A8\u753B */\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n");
+var modalStyles = "\n  .".concat(AMSPOPUP_PREFIX, "modal {\n    /* \u6DFB\u52A0\u5F39\u7A97\u6837\u5F0F */\n    background-color: #fff;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 9999; /* \u8BBE\u7F6E\u5F39\u7A97\u7684\u5C42\u7EA7\u4E3A 9999 */\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "overlay {\n    /* \u6DFB\u52A0\u8499\u5C42\u6837\u5F0F */\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.4);\n    z-index: 999;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeIn {\n    /* \u6DFB\u52A0\u6DE1\u5165\u52A8\u753B */\n    animation: fadeIn ").concat(ANIMATION_TIME, "ms;\n  }\n\n  .").concat(AMSPOPUP_PREFIX, "fadeOut {\n    /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n    animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u5165\u52A8\u753B */\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  /* \u5B9A\u4E49\u6DE1\u51FA\u52A8\u753B */\n  @keyframes fadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n");
 
 // 创建和插入样式表
-var insertStyleSheet = function insertStyleSheet() {
+export var insertStyleSheet = function insertStyleSheet() {
   var style = document.createElement('style');
   style.innerHTML = modalStyles;
   document.head.appendChild(style);
 };
 
 // 插入弹窗
-var createModal = function createModal() {
+export var createModal = function createModal(_ref) {
+  var device = _ref.device,
+    url = _ref.url;
   var overlay = document.createElement('div');
   overlay.classList.add("".concat(AMSPOPUP_PREFIX, "overlay"), "".concat(AMSPOPUP_PREFIX, "fadeIn"));
   var modal = document.createElement('div');
   modal.classList.add("".concat(AMSPOPUP_PREFIX, "modal"), "".concat(AMSPOPUP_PREFIX, "fadeIn"));
+  if (device === 'desktop') {
+    modal.style.width = '600px';
+    modal.style.height = '464px';
+    modal.style.borderRadius = '12px';
+  } else {
+    modal.style.width = 'calc(100% - 16px)';
+    modal.style.height = '80%';
+    modal.style.borderRadius = '8px';
+  }
   var iframe = document.createElement('iframe');
-  iframe.src = 'your-url'; // 替换为实际的 URL 地址
+  iframe.src = url; // 替换为实际的 URL 地址
   iframe.style.border = 'none';
   iframe.style.width = '100%';
   iframe.style.height = '100%';
   modal.appendChild(iframe);
   document.body.appendChild(overlay);
   document.body.appendChild(modal);
+  return iframe;
 };
 
 // 销毁弹窗
-var destroyModal = function destroyModal() {
+export var destroyModal = function destroyModal() {
   var overlay = document.querySelector(".".concat(AMSPOPUP_PREFIX, "overlay"));
   var modal = document.querySelector(".".concat(AMSPOPUP_PREFIX, "modal"));
   overlay.classList.remove("".concat(AMSPOPUP_PREFIX, "fadeIn"));
@@ -38,7 +50,4 @@ var destroyModal = function destroyModal() {
     overlay.parentNode.removeChild(overlay);
     modal.parentNode.removeChild(modal);
   }, ANIMATION_TIME);
-};
-
-// 在插入弹窗之前先插入样式表
-insertStyleSheet();
+};

package/esm/types/index.d.ts

@@ -286,6 +286,13 @@ export declare enum eventCodeEnum {
     SDK_CALL_URL_ERROR = "SDK_CALL_URL_ERROR",
     SDK_CALL_URL_SUCCESS = "SDK_CALL_URL_SUCCESS"
 }
+export interface ThreedData {
+    data: any;
+    method: string;
+    targetUrl: string;
+    pti?: number;
+    pt?: number;
+}
 declare global {
     interface Window {
         [key: string]: any;

package/package.json

@@ -1 +1 @@
-{"name":"@alipay/ams-checkout","version":"0.0.1697942541-dev.1","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@alipay/jshield-apdid":"^2.0.3","@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","eslint-plugin-prettier":"latest","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}
+{"name":"@alipay/ams-checkout","version":"0.0.1697942541-dev.3","description":"","author":"","main":"esm/index.js","module":"esm/index.js","typings":"esm/index.d.ts","files":["dist","esm","LEGAL.md","LICENSE","README.md"],"scripts":{"build":"father build","ci":"npm run lint","cov":"jest --coverage","format":"prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"","lint":"eslint ./src","test":"jest"},"dependencies":{"axios":"^1.3.4","uuid":"^9.0.0"},"devDependencies":{"@alipay/jshield-apdid":"^2.0.3","@babel/core":"^7.20.7","@babel/preset-env":"^7.20.2","@testing-library/jest-dom":"^5.1.1","@testing-library/react":"^9.5.0","@types/jest":"^29.2.4","@types/uuid":"^9.0.0","@typescript-eslint/eslint-plugin":"latest","@typescript-eslint/parser":"^5.60.0","babel-jest":"^29.3.1","babel-loader":"^9.1.0","babel-plugin-import":"^1.13.0","eslint":"^8.36.0","eslint-plugin-prettier":"latest","father":"^4.2.3","jest":"^29.5.0","jest-environment-jsdom":"^29.3.1","prettier":"^2.8.4","prettier-plugin-organize-imports":"^3.2.3","prettier-plugin-packagejson":"^2.4.5","ts-jest":"^29.0.3","ts-node":"^10.9.1","typescript":"^4.9.5"},"engines":{},"publishConfig":{"access":"public"}}