@alipay/ams-checkout 1.42.2 → 1.43.1

package/esm/component/component.popup.style.d.ts

@@ -1,4 +1,5 @@
 import { PlatformEnum } from '../types';
+export declare const 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.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\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.ams-component-mockup-hidden{\nanimation: ams-component-mockup-opacity 0.3s ease-in-out;\n  animation-fill-mode: forwards\n}\n/** \u52A0\u8F7D\u52A8\u753B **/\n@-webkit-keyframes ams-component-mockup-opacity {\n  0% {\n      opacity: 1;\n  }\n\n  100% {\n      opacity: 0;\n  }\n}\n";
 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/component.popup.style.js

@@ -8,7 +8,7 @@
 import { ANIMATION_TIME, closeImg, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CONTAINER_ID, COMPONENT_CLOSE_MASK_BLOCK_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.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\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 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.ams-component-mask-close-block-desktop {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  top: 10px;\n  cursor: pointer;\n  z-index: 1013;\n}\n  \n.ams-component-mask-close-block-mobile {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  right: 18px;\n  cursor: pointer;\n  z-index: 1012;\n}\n\n.ams-component-mask-close-block-hidden {\n  width: 0px !important;\n  height: 0px !important;\n  visibility: hidden;\n}\n\n.ams-component-mask-close-block-btn {\n  width: 24px;\n  height: 24px;\n  object-fit: fill;\n  position: absolute;\n  right: 8px;\n  top: 8px;\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/config/index.d.ts

@@ -6,10 +6,10 @@ export declare const sdkVersion: string;
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  * TODO 这里考虑直接换成packagejson.version
  */
-export declare const AMSCheckoutAppVersion = "1.42.2";
-export declare const AMSAutoDebitAppVersion = "1.42.2";
-export declare const AMSEasyPayAppVersion = "1.42.2";
-export declare const AMSCashierPaymentAppVersion = "1.42.2";
-export declare const AMSVaultingAppVersion = "1.42.2";
-export declare const AMSPaymentElementAppVersion = "1.42.2";
-export declare const ADDRESSElementAppVersion = "1.42.2";
+export declare const AMSCheckoutAppVersion = "1.43.1";
+export declare const AMSAutoDebitAppVersion = "1.43.1";
+export declare const AMSEasyPayAppVersion = "1.43.1";
+export declare const AMSCashierPaymentAppVersion = "1.43.1";
+export declare const AMSVaultingAppVersion = "1.43.1";
+export declare const AMSPaymentElementAppVersion = "1.43.1";
+export declare const ADDRESSElementAppVersion = "1.43.1";

package/esm/config/index.js

@@ -36,10 +36,10 @@ export var sdkVersion = json.version;
  * @description: 目前应用层分为v1和v2，会存在两个应用版本号不是同步发布的情况。所以需要把默认的应用版本号配置抽离出来。
  * TODO 这里考虑直接换成packagejson.version
  */
-export var AMSCheckoutAppVersion = '1.42.2'; // 兜底版本号
-export var AMSAutoDebitAppVersion = '1.42.2'; // 代扣
-export var AMSEasyPayAppVersion = '1.42.2'; // easypay
-export var AMSCashierPaymentAppVersion = '1.42.2'; // 收银台（卡、apm）
-export var AMSVaultingAppVersion = '1.42.2'; // 绑卡
-export var AMSPaymentElementAppVersion = '1.42.2'; // payment element
-export var ADDRESSElementAppVersion = '1.42.2'; // address element
+export var AMSCheckoutAppVersion = '1.43.1'; // 兜底版本号
+export var AMSAutoDebitAppVersion = '1.43.1'; // 代扣
+export var AMSEasyPayAppVersion = '1.43.1'; // easypay
+export var AMSCashierPaymentAppVersion = '1.43.1'; // 收银台（卡、apm）
+export var AMSVaultingAppVersion = '1.43.1'; // 绑卡
+export var AMSPaymentElementAppVersion = '1.43.1'; // payment element
+export var ADDRESSElementAppVersion = '1.43.1'; // address element

package/esm/constant/index.d.ts

@@ -249,6 +249,16 @@ export declare const EVENT: {
     messageForward: {
         name: string;
     };
+    validateFieldsResult: {
+        name: string;
+        forwardName: string;
+        uniqueKey: string;
+    };
+};
+export declare const SENDEVENT: {
+    validateFields: {
+        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

@@ -250,6 +250,18 @@ export var EVENT = {
    */
   messageForward: {
     name: 'onMessageForward'
+  },
+  validateFieldsResult: {
+    name: 'validateFieldsResult',
+    forwardName: 'validateFieldsResultForward',
+    uniqueKey: 'uservalidateFieldsResult'
+  }
+};
+
+// 2025.09新增，非全量SDK发送事件码
+export var SENDEVENT = {
+  validateFields: {
+    name: 'validateFields'
   }
 };
 export var COMPONENT_CONTAINER_ID = 'ams-component-container';

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

@@ -1,5 +1,5 @@
 import ComponentApp from '../../plugin/component';
-import { ComponentSignEnum, IappendIframeNodesParams, IcreateComponent, IoptionsParams, IPaymentSessionMetaData, Iselector, Isubmit, PaymentMethodTypeEnum, SubPaymentMethodTypeEnum } from '../../types';
+import { ComponentSignEnum, EventPayloadContext, IappendIframeNodesParams, IcreateComponent, IoptionsParams, IPaymentSessionMetaData, Iselector, Isubmit, PaymentMethodTypeEnum, SubPaymentMethodTypeEnum, ValidationResult } from '../../types';
 import CoreInstance from '../instance/index';
 export declare const getComponentSign: (params: IPaymentSessionMetaData) => ComponentSignEnum;
 export declare const parseSessionData: (sessionData: string) => [IPaymentSessionMetaData, string];
@@ -15,6 +15,7 @@ export declare class AMSComponent extends CoreInstance {
     channelType: ComponentSignEnum[];
     productSceneVersion: string;
     timer: any;
+    private _validateResolveMap;
     constructor(options: IAMSComponentOptions);
     private parameterInitAndCheck;
     private pluginAppendIframe;
@@ -52,4 +53,6 @@ export declare class AMSComponent extends CoreInstance {
      * @param data - Transfer information in the submission interface according to your requirements (optional)
      */
     submit(data?: Isubmit): Promise<unknown>;
+    protected _validateFields(): Promise<ValidationResult>;
+    protected _sendMessageToAPP(eventContext: EventPayloadContext): void;
 }

package/esm/core/component/index.js

@@ -35,7 +35,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 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 { v4 as uuid } from 'uuid';
-import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT } from "../../constant";
+import { COMPONENTPLUGINID, ERRORMESSAGE, EVENT, SENDEVENT } from "../../constant";
+import PreloadHelper from "../../foundation/utils/preload_helper";
 import { ApplePayBusSubscriber } from "../../plugin/applepay";
 import ComponentApp from "../../plugin/component";
 import { ExtendPlugin } from "../../plugin/const";
@@ -50,7 +51,6 @@ import { SecurityBusSubscriber } from "../bus/ability/security";
 import { TrackerBusSubscriber } from "../bus/ability/tracker";
 import CoreInstance from "../instance/index";
 import { loadChannelPneumaticControl } from "./appPreloadProcessing";
-import PreloadHelper from "../../foundation/utils/preload_helper";
 export var getComponentSign = function getComponentSign(params) {
   var _params$paymentSessio = params.paymentSessionConfig,
     _params$paymentSessio2 = _params$paymentSessio === void 0 ? {} : _params$paymentSessio,
@@ -140,6 +140,7 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
     _defineProperty(_assertThisInitialized(_this2), "channelType", void 0);
     _defineProperty(_assertThisInitialized(_this2), "productSceneVersion", void 0);
     _defineProperty(_assertThisInitialized(_this2), "timer", void 0);
+    _defineProperty(_assertThisInitialized(_this2), "_validateResolveMap", new Map());
     var ComponentPlugin = new ComponentApp({
       appVersion: options.appVersion
     });
@@ -526,6 +527,108 @@ export var AMSComponent = /*#__PURE__*/function (_CoreInstance) {
         }
       });
     }
+
+    // 预留给AMSVaulting复用
+  }, {
+    key: "_validateFields",
+    value: function _validateFields() {
+      var _this9 = this;
+      return new Promise(function (resolve) {
+        // 收银台应用渲染表单后，才允许发送校验消息，三端约定一致
+        if (!_this9._componentApp.shouldValidateFields()) {
+          resolve({
+            isValid: false
+          });
+          _this9.logger.logInfo({
+            title: 'sdk_event_validateFields'
+          }, {
+            processResult: 'notRenderComponent'
+          });
+          return;
+        }
+        var timeoutId;
+        var validationPromise = new Promise(function (validationResolve) {
+          var eventCallbackId = uuid();
+          _this9._validateResolveMap.set(eventCallbackId, validationResolve);
+          // 发送validateFields消息
+          _this9._sendMessageToAPP({
+            event: SENDEVENT.validateFields.name,
+            data: {},
+            eventCallbackId: eventCallbackId
+          });
+          var isValidationResult = function isValidationResult(data) {
+            return _typeof(data) === 'object' && data !== null && typeof data.isValid === 'boolean';
+          };
+          var callback = /*#__PURE__*/function () {
+            var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(payload) {
+              var currentEventCallbackId, currentResolve, result;
+              return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    currentEventCallbackId = (payload === null || payload === void 0 ? void 0 : payload.eventCallbackId) || ''; // 事件一一对应，处理异步商户调用多次可能导致乱序的问题
+                    currentResolve = _this9._validateResolveMap.get(currentEventCallbackId);
+                    result = {
+                      isValid: false
+                    };
+                    if (isValidationResult(payload === null || payload === void 0 ? void 0 : payload.data)) {
+                      result = payload === null || payload === void 0 ? void 0 : payload.data;
+                    }
+                    _this9.logger.logInfo({
+                      title: 'sdk_event_validateFields'
+                    }, {
+                      processResult: result.isValid ? 'true' : 'false'
+                    });
+                    // 收银台应用保证数据格式，三端SDK负责透传
+                    if (!!currentResolve) {
+                      currentResolve(result);
+                      _this9._validateResolveMap.delete(currentEventCallbackId);
+                    }
+                  case 6:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2);
+            }));
+            return function callback(_x2) {
+              return _ref5.apply(this, arguments);
+            };
+          }();
+          // 接收收银台应用的返回validateFieldsResult消息
+          // validateFieldsResultForward处理订阅eventCallbackId为空的问题
+          _this9._overrideSubscription(EVENT.validateFieldsResult.forwardName, callback, EVENT.validateFieldsResult.uniqueKey);
+        });
+
+        // 兜底场景，三端约定超时时间15秒，兼容cpf网络校验超时场景
+        var timeoutPromise = new Promise(function (timeoutResolve) {
+          timeoutId = setTimeout(function () {
+            _this9.logger.logInfo({
+              title: 'sdk_event_validateFields'
+            }, {
+              processResult: 'timeout'
+            });
+            timeoutResolve({
+              isValid: false
+            });
+          }, 15000);
+        });
+        Promise.race([validationPromise, timeoutPromise]).then(function (result) {
+          clearTimeout(timeoutId);
+          resolve(result);
+        }).catch(function () {
+          clearTimeout(timeoutId);
+          resolve({
+            isValid: false
+          });
+        });
+      });
+    }
+  }, {
+    key: "_sendMessageToAPP",
+    value: function _sendMessageToAPP(eventContext) {
+      this._componentApp.dispatchToApp({
+        context: eventContext
+      });
+    }
   }]);
   return AMSComponent;
 }(CoreInstance);

package/esm/index.d.ts

@@ -1,7 +1,7 @@
 import { AddressComponent } from './core/component/address';
 import { ElementComponent } from './core/component/element';
 import { AMSComponent } from './core/component/index';
-import { ComponentSignEnum, IcreateComponent, IElementOptions, IoptionsAddressParams, IoptionsParams, IPreloadOptions } from './types';
+import { ComponentSignEnum, IcreateComponent, IElementOptions, IoptionsAddressParams, IoptionsParams, IPreloadOptions, ValidationResult } from './types';
 export { AMSCheckoutPage } from './core/component/ckp';
 export * from './types';
 export declare class AMSCheckout extends AMSComponent {
@@ -14,6 +14,15 @@ export declare class AMSAutoDebitPay extends AMSCheckout {
 export declare class AMSCashierPayment extends AMSCheckout {
     constructor(options: IoptionsParams);
     static preload(options?: IPreloadOptions): void;
+    /**
+   * Form validation function
+   * If the form is currently displayed:
+   *   - Successful validation: isValid is true
+   *   - Failed validation: isValid is false, and error messages are displayed on the form page
+   * If not on the form display page, isValid returns false
+   * @returns {Promise<ValidationResult>} Returns a Promise containing the validation result
+   */
+    validateFields(): Promise<ValidationResult>;
 }
 export declare class AMSVaulting extends AMSCheckout {
     constructor(options: IoptionsParams);

package/esm/index.js

@@ -111,7 +111,21 @@ export var AMSCashierPayment = /*#__PURE__*/function (_AMSCheckout2) {
     }
     return _super3.call(this, _options, currentChannelType);
   }
-  _createClass(AMSCashierPayment, null, [{
+  _createClass(AMSCashierPayment, [{
+    key: "validateFields",
+    value:
+    /**
+    * Form validation function
+    * If the form is currently displayed:
+    *   - Successful validation: isValid is true
+    *   - Failed validation: isValid is false, and error messages are displayed on the form page
+    * If not on the form display page, isValid returns false
+    * @returns {Promise<ValidationResult>} Returns a Promise containing the validation result
+    */
+    function validateFields() {
+      return this._validateFields();
+    }
+  }], [{
     key: "preload",
     value: function preload() {
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {

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

@@ -28,6 +28,7 @@ export default class ComponentApp {
     private _isAppWebview;
     _merchantAppointParam: IMerchantAppointParam;
     private _webAppHeartBeatTimeoutFn;
+    private _hasRenderComponent;
     constructor(componentOption?: {
         appVersion?: string;
     });
@@ -126,5 +127,6 @@ export default class ComponentApp {
     private showRetentionPopup;
     private hideRetentionPopupFunc;
     private submitForm;
+    shouldValidateFields(): boolean;
 }
 export {};

package/esm/plugin/component/index.js

@@ -23,7 +23,7 @@ import { COMPONENTPLUGINID, COMPONENT_CLOSE_BLOCK_ID, COMPONENT_CLOSE_MASK_BLOCK
 import { ElementPaymentMethod } from "../../core/component/oldElement/type";
 import { queryPaymentInfo, submitPayInfo } from "../../service";
 import { ComponentSignEnum, DisplayTypeEnum, eventCodeEnum, MessageName, PlatformEnum, ProductSceneEnum, RedirectType, TargetEnum } from "../../types";
-import { getType, isJsonString, isPC } from "../../util";
+import { getType, isJsonString, isPC, device } from "../../util";
 import { getBackScheme } from "../../util/getBackScheme";
 import { isLocalMock } from "../../util/mock";
 import { matchVersion } from "../../util/versionCompare";
@@ -62,6 +62,7 @@ var ComponentApp = /*#__PURE__*/function () {
     _defineProperty(this, "_isAppWebview", void 0);
     _defineProperty(this, "_merchantAppointParam", void 0);
     _defineProperty(this, "_webAppHeartBeatTimeoutFn", void 0);
+    _defineProperty(this, "_hasRenderComponent", false);
     this._appVersion = componentOption.appVersion;
     this._isInitComponent = false;
     this._selector = "#".concat(COMPONENT_SECTION_ID);
@@ -71,7 +72,7 @@ var ComponentApp = /*#__PURE__*/function () {
     this.createPreloadIframeNode = function () {
       return Promise.resolve();
     };
-    this.platform = isPC() ? PlatformEnum.desktop : PlatformEnum.mobile;
+    this.platform = device.isMobile ? PlatformEnum.mobile : PlatformEnum.desktop;
     this._isRetention = true;
     this._appLocationSearch = '';
     this._performanceData.push({
@@ -1409,6 +1410,12 @@ var ComponentApp = /*#__PURE__*/function () {
         });
         return;
       }
+      if (data.context.event === EVENT.validateFieldsResult.name) {
+        // 将validateFieldsResult事件转发到subsribe处理，解决subsribe拿不到eventCallbackId的问题
+        this.AMSSDK._eventCenter.emit(EVENT.validateFieldsResult.forwardName, data.context);
+        return;
+      }
+
       // log event before sending the callback
       this.logEventCallback(data, 'sdk_event_event_callback');
       try {
@@ -1844,6 +1851,7 @@ var ComponentApp = /*#__PURE__*/function () {
               return this._actionSubmitPromise;
             case 9:
               submitRes = _context8.sent;
+              this._hasRenderComponent = true;
               this._performanceData.push({
                 key: 'sdk_render_component',
                 value: Date.now()
@@ -1899,16 +1907,16 @@ var ComponentApp = /*#__PURE__*/function () {
                 }
               });
               // eslint-disable-next-line no-empty
-              _context8.next = 18;
+              _context8.next = 19;
               break;
-            case 16:
-              _context8.prev = 16;
+            case 17:
+              _context8.prev = 17;
               _context8.t0 = _context8["catch"](0);
-            case 18:
+            case 19:
             case "end":
               return _context8.stop();
           }
-        }, _callee8, this, [[0, 16]]);
+        }, _callee8, this, [[0, 17]]);
       }));
       function sendRenderEvent() {
         return _sendRenderEvent.apply(this, arguments);
@@ -1935,6 +1943,7 @@ var ComponentApp = /*#__PURE__*/function () {
       this._performanceData = [];
       this._isInitComponent = false;
       this.app = null;
+      this._hasRenderComponent = false;
       if (immediately) this.cleanElement();else {
         setTimeout(function () {
           _this10.cleanElement();
@@ -2021,6 +2030,11 @@ var ComponentApp = /*#__PURE__*/function () {
         form.submit();
       }, 0);
     }
+  }, {
+    key: "shouldValidateFields",
+    value: function shouldValidateFields() {
+      return this._hasRenderComponent;
+    }
   }]);
   return ComponentApp;
 }();

package/esm/plugin/paypal/index.js

@@ -82,7 +82,7 @@ export var PaypalBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
       }
       return Promise.resolve(paypalPluginProps);
     });
-    // 加载paypal资源
+    // 加载paypal资源 TODO
     _defineProperty(_assertThisInitialized(_this), "loadPaypalResource", function (paypalPluginProps) {
       return new Promise(function (resolve, reject) {
         var _paypalPluginProps$ap;
@@ -265,6 +265,7 @@ export var PaypalBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
         return _ref6.apply(this, arguments);
       };
     }());
+    // TODO
     _defineProperty(_assertThisInitialized(_this), "destroyComponent", /*#__PURE__*/function () {
       var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(context, message) {
         var data;
@@ -373,7 +374,9 @@ export var PaypalBusSubscriber = /*#__PURE__*/function (_BusSubscriber) {
     }
   }, {
     key: "onMessage",
-    value: function onMessage(context, message) {
+    value:
+    // TODO
+    function onMessage(context, message) {
       switch (message.getAction()) {
         case PaypalActionEnum.mountComponent:
           this.renderPaypalButton(context, message);

package/esm/types/index.d.ts

@@ -40,6 +40,9 @@ export interface IoptionsParams {
     mode?: string;
     securityRegion?: 'US' | 'SG' | 'DE';
 }
+export interface ValidationResult {
+    isValid: boolean;
+}
 export interface IPreloadOptions {
     environment?: string;
     securityRegion?: 'US' | 'SG' | 'DE';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alipay/ams-checkout",
-  "version": "1.42.2",
+  "version": "1.43.1",
   "description": "",
   "author": "",
   "main": "esm/index.js",
@@ -21,7 +21,7 @@
     "dev": "father dev",
     "format": "prettier --write --no-error-on-unmatched-pattern \"**/*.{js,jsx,ts,tsx,md,json,css,less}\"",
     "lint": "eslint ./src",
-    "test": "jest --silent",
+    "test": "jest --coverage --silent",
     "tsc": "tsc --noEmit"
   },
   "commitlint": {