@alipay/ams-checkout 0.0.1720509876-dev.2 → 0.0.1720509876-dev.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/umd/ams-checkout.min.js +1 -1
- package/esm/constant/index.d.ts +2 -1
- package/esm/constant/index.js +1 -0
- package/esm/plugin/component/cashierApp.js +5 -2
- package/esm/plugin/component/component.inline.style.d.ts +8 -9
- package/esm/plugin/component/component.inline.style.js +87 -6
- package/esm/plugin/component/index.js +39 -25
- package/esm/plugin/component/popupWindow.style.d.ts +5 -2
- package/esm/plugin/component/popupWindow.style.js +55 -7
- package/package.json +1 -1
package/esm/constant/index.d.ts
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
* 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
|
5
5
|
* 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.
|
6
6
|
*/
|
7
|
-
import { eventCodeEnum } from
|
7
|
+
import { eventCodeEnum } from '../types';
|
8
8
|
export declare const ERRORMESSAGE: {
|
9
9
|
DOMAIN_NOT_IN_WHITE_LIST: {
|
10
10
|
code: eventCodeEnum;
|
@@ -175,6 +175,7 @@ export declare const COMPONENT_CLOSE_BLOCK_ID = "asm-component-close-block";
|
|
175
175
|
export declare const COMPONENT_RETENTION_ID = "ams-component-retention";
|
176
176
|
export declare const MOCKUP_ID = "ams-component-mockup";
|
177
177
|
export declare const LOADING_ID = "ams-component-loading";
|
178
|
+
export declare const POPUPLOADING_ID = "ams-component-popup-loading";
|
178
179
|
export declare const LISTENER_PREFIX = "_ams_sdk_component_listener";
|
179
180
|
export declare const INLINE_BASE_STYLE_ID = "ams-inline-component-style";
|
180
181
|
export declare const INLINE_IMG_CLASSNAME = "inline-loading";
|
package/esm/constant/index.js
CHANGED
@@ -175,6 +175,7 @@ export var COMPONENT_CLOSE_BLOCK_ID = 'asm-component-close-block';
|
|
175
175
|
export var COMPONENT_RETENTION_ID = 'ams-component-retention';
|
176
176
|
export var MOCKUP_ID = 'ams-component-mockup';
|
177
177
|
export var LOADING_ID = 'ams-component-loading';
|
178
|
+
export var POPUPLOADING_ID = 'ams-component-popup-loading'; // popup弹窗loading
|
178
179
|
export var LISTENER_PREFIX = '_ams_sdk_component_listener';
|
179
180
|
export var INLINE_BASE_STYLE_ID = 'ams-inline-component-style';
|
180
181
|
export var INLINE_IMG_CLASSNAME = 'inline-loading';
|
@@ -15,7 +15,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
15
15
|
* 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
|
16
16
|
* 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.
|
17
17
|
*/
|
18
|
-
import { marmotMap, sdkVersion
|
18
|
+
import { elementAppMarmotMap, marmotMap, sdkVersion } from "../../config/index";
|
19
19
|
import { componentSignEnum, ComponentSignEnumV2 } from "../../types";
|
20
20
|
import { isDebugLog } from "../../util/debug";
|
21
21
|
import { queryParse, serialize } from "../../util/index";
|
@@ -101,7 +101,8 @@ export var getAppPath = function getAppPath() {
|
|
101
101
|
// element又分为express_checkout模式和普通模式, express_checkout 模式在扩展参数是返回expressCheckout=true
|
102
102
|
var isExpressCheckout = false;
|
103
103
|
try {
|
104
|
-
|
104
|
+
// expressCheckout可能出现string(false) JSON.parse再转一次
|
105
|
+
isExpressCheckout = JSON.parse(JSON.parse(extendInfo).expressCheckout);
|
105
106
|
} catch (error) {
|
106
107
|
// 遇到JSON解析错误,默认false
|
107
108
|
}
|
@@ -211,6 +212,8 @@ export var createIframe = function createIframe(mode, platform) {
|
|
211
212
|
iframe.style.border = none;
|
212
213
|
iframe.style.opacity = none;
|
213
214
|
iframe.style.overflow = 'hidden';
|
215
|
+
// iframe设置支持第三方支付
|
216
|
+
iframe.allow = 'payment';
|
214
217
|
return iframe;
|
215
218
|
};
|
216
219
|
export var createPreloadIframe = function createPreloadIframe(channelType, version) {
|
@@ -1,11 +1,10 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
*/
|
8
|
-
import { platformEnum } from '../../types';
|
1
|
+
import { componentSignEnum, platformEnum } from '../../types';
|
2
|
+
interface Options {
|
3
|
+
componentSign?: componentSignEnum;
|
4
|
+
type: 'tabs' | 'Accordion';
|
5
|
+
isExpressCheckout?: boolean;
|
6
|
+
}
|
9
7
|
export declare const inlineComponentAddCss: () => void;
|
10
|
-
export declare const addInlineLoading: (_selector: HTMLDivElement, platform: platformEnum) => void;
|
8
|
+
export declare const addInlineLoading: (_selector: HTMLDivElement, platform: platformEnum, options: Options) => void;
|
11
9
|
export declare const createInlineBaseElement: (selector: string) => HTMLDivElement;
|
10
|
+
export {};
|
@@ -5,10 +5,11 @@
|
|
5
5
|
* 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
|
6
6
|
* 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.
|
7
7
|
*/
|
8
|
-
import {
|
9
|
-
import {
|
8
|
+
import { COMPONENT_CONTAINER_ID, COMPONENT_IFRAME_TAG_ID, INLINE_BASE_STYLE_ID, INLINE_IMG_CLASSNAME, LOADING_ID } from "../../constant";
|
9
|
+
import { componentSignEnum, platformEnum } from "../../types";
|
10
10
|
import { amsSetSize } from "../../util";
|
11
|
-
|
11
|
+
// border-radius: 8px;
|
12
|
+
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");
|
12
13
|
export var inlineComponentAddCss = function inlineComponentAddCss() {
|
13
14
|
var style = document.createElement('style');
|
14
15
|
style.id = 'ams-inline-component-style';
|
@@ -16,11 +17,91 @@ export var inlineComponentAddCss = function inlineComponentAddCss() {
|
|
16
17
|
style.innerHTML = inlineComponentCss;
|
17
18
|
document.head.appendChild(style);
|
18
19
|
};
|
19
|
-
|
20
|
+
/**
|
21
|
+
* @description componentSignEnum.ELEMENT_PAYMENT特殊处理
|
22
|
+
* @param {Options['type']} type
|
23
|
+
*/
|
24
|
+
var renderElementPayment = function renderElementPayment(type) {
|
25
|
+
var spliceStr = function spliceStr() {
|
26
|
+
var arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
27
|
+
return arr.reduce(function (pre, cur) {
|
28
|
+
return pre += cur;
|
29
|
+
}, '');
|
30
|
+
};
|
31
|
+
var commonDom = function commonDom(children) {
|
32
|
+
var viewBox = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0 0 560 256';
|
33
|
+
var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 256;
|
34
|
+
return "<svg id=\"".concat(INLINE_IMG_CLASSNAME, "-").concat(type, "\" width=\"100%\" height=\"").concat(height, "\" viewBox=\"").concat(viewBox, "\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"none\">\n ").concat(spliceStr(children), "\n <animate xlink:href=\"#").concat(INLINE_IMG_CLASSNAME, "-").concat(type, "\" attributeName=\"opacity\" values=\"0.5; 1; 0.5\" begin=\"0s\" dur=\"1s\" repeatCount=\"indefinite\"></animate>\n </svg>");
|
35
|
+
};
|
36
|
+
var creatRect = function creatRect(_ref) {
|
37
|
+
var _ref$x = _ref.x,
|
38
|
+
x = _ref$x === void 0 ? 0 : _ref$x,
|
39
|
+
_ref$y = _ref.y,
|
40
|
+
y = _ref$y === void 0 ? 0 : _ref$y,
|
41
|
+
_ref$fill = _ref.fill,
|
42
|
+
fill = _ref$fill === void 0 ? 'black' : _ref$fill,
|
43
|
+
_ref$width = _ref.width,
|
44
|
+
width = _ref$width === void 0 ? 560 : _ref$width,
|
45
|
+
_ref$height = _ref.height,
|
46
|
+
height = _ref$height === void 0 ? 32 : _ref$height,
|
47
|
+
_ref$rx = _ref.rx,
|
48
|
+
rx = _ref$rx === void 0 ? 4 : _ref$rx;
|
49
|
+
return "<rect fill-opacity=\"0.04\" x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(width, "\" height=\"").concat(height, "\" rx=\"").concat(rx, "\" fill=\"").concat(fill, "\"/>");
|
50
|
+
};
|
51
|
+
var result = [creatRect({
|
52
|
+
fill: 'white'
|
53
|
+
}), creatRect({
|
54
|
+
y: 4
|
55
|
+
}), creatRect({
|
56
|
+
y: 48,
|
57
|
+
height: 64
|
58
|
+
}), creatRect({
|
59
|
+
y: 128
|
60
|
+
}), creatRect({
|
61
|
+
y: 176
|
62
|
+
}), creatRect({
|
63
|
+
y: 224
|
64
|
+
})];
|
65
|
+
if (type === 'tabs') {
|
66
|
+
result = [creatRect({
|
67
|
+
fill: 'white',
|
68
|
+
width: 358,
|
69
|
+
height: 305
|
70
|
+
}), creatRect({
|
71
|
+
y: 4,
|
72
|
+
width: '50%',
|
73
|
+
height: 73
|
74
|
+
}), creatRect({
|
75
|
+
x: '51%',
|
76
|
+
y: 4,
|
77
|
+
height: 73
|
78
|
+
}), creatRect({
|
79
|
+
y: 96,
|
80
|
+
height: 64
|
81
|
+
}), creatRect({
|
82
|
+
y: 178
|
83
|
+
}), creatRect({
|
84
|
+
y: 228
|
85
|
+
}), creatRect({
|
86
|
+
y: 276
|
87
|
+
})];
|
88
|
+
}
|
89
|
+
var viewBox = {
|
90
|
+
view: type === 'tabs' ? '0 0 358 305' : '0 0 560 256',
|
91
|
+
height: type === 'tabs' ? 305 : 256
|
92
|
+
};
|
93
|
+
return commonDom(result, viewBox.view, viewBox.height);
|
94
|
+
};
|
95
|
+
export var addInlineLoading = function addInlineLoading(_selector, platform, options) {
|
20
96
|
var loading = document.createElement('div');
|
21
97
|
loading.id = LOADING_ID;
|
22
|
-
if (
|
23
|
-
|
98
|
+
if (options.componentSign === componentSignEnum.ELEMENT_PAYMENT) {
|
99
|
+
if (options.isExpressCheckout) {
|
100
|
+
loading.innerHTML = '';
|
101
|
+
} else {
|
102
|
+
loading.innerHTML = renderElementPayment(options === null || options === void 0 ? void 0 : options.type);
|
103
|
+
}
|
104
|
+
} else if (platform === platformEnum.desktop) loading.innerHTML = "<svg class=\"".concat(INLINE_IMG_CLASSNAME, " ").concat(INLINE_IMG_CLASSNAME, "-").concat(platform, "\" width=\"740\" height=\"360\" viewBox=\"0 0 740 360\" fill=\"none\" xmlns=\"\">\n <rect width=\"740\" height=\"360\" rx=\"12\" fill=\"#F6F6F6\"/>\n <rect opacity=\"0.7\" x=\"44\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"94\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"144\" y=\"44\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M136 100H48C43.5817 100 40 103.582 40 108C40 112.418 43.5817 116 48 116H136C140.418 116 144 112.418 144 108C144 103.582 140.418 100 136 100Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M682 126H58C48.0589 126 40 134.059 40 144C40 153.941 48.0589 162 58 162H682C691.941 162 700 153.941 700 144C700 134.059 691.941 126 682 126Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M682 182H58C48.0589 182 40 190.059 40 200C40 209.941 48.0589 218 58 218H682C691.941 218 700 209.941 700 200C700 190.059 691.941 182 682 182Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M504 274H64C52.9543 274 44 282.954 44 294C44 305.046 52.9543 314 64 314H504C515.046 314 524 305.046 524 294C524 282.954 515.046 274 504 274Z\" fill=\"#E1E6ED\"/>\n </g>\n </svg>");else if (platform === platformEnum.mobile) loading.innerHTML = "<svg class=\"".concat(INLINE_IMG_CLASSNAME, " ").concat(INLINE_IMG_CLASSNAME, "-").concat(platform, "\" width=\"358\" height=\"186\" viewBox=\"0 0 358 186\" fill=\"none\" xmlns=\"\">\n <g clip-path=\"url(#clip0_2543_91192)\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n <g clip-path=\"url(#clip1_2543_91192)\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n <rect width=\"358\" height=\"40\" fill=\"white\"/>\n <rect opacity=\"0.7\" x=\"4\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"54\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <rect opacity=\"0.7\" x=\"104\" y=\"4\" width=\"32\" height=\"32\" rx=\"4\" fill=\"#E1E6ED\"/>\n <g clip-path=\"url(#clip2_2543_91192)\">\n <rect width=\"358\" height=\"120\" transform=\"translate(0 66)\" fill=\"white\"/>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M95 66H9C4.02944 66 0 70.0294 0 75C0 79.9706 4.02943 84 9 84H95C99.9706 84 104 79.9706 104 75C104 70.0294 99.9706 66 95 66Z\" fill=\"#E1E6ED\"/>\n </g>\n <g clip-path=\"url(#clip3_2543_91192)\">\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M340 94H18C8.05888 94 0 102.059 0 112C0 121.941 8.05887 130 18 130H340C349.941 130 358 121.941 358 112C358 102.059 349.941 94 340 94Z\" fill=\"#E1E6ED\"/>\n </g>\n <g style=\"mix-blend-mode:multiply\" opacity=\"0.336007\">\n <path d=\"M340 150H18C8.05888 150 0 158.059 0 168C0 177.941 8.05887 186 18 186H340C349.941 186 358 177.941 358 168C358 158.059 349.941 150 340 150Z\" fill=\"#E1E6ED\"/>\n </g>\n </g>\n </g>\n </g>\n </g>\n <defs>\n <clipPath id=\"clip0_2543_91192\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n </clipPath>\n <clipPath id=\"clip1_2543_91192\">\n <rect width=\"358\" height=\"186\" fill=\"white\"/>\n </clipPath>\n <clipPath id=\"clip2_2543_91192\">\n <rect width=\"358\" height=\"120\" fill=\"white\" transform=\"translate(0 66)\"/>\n </clipPath>\n <clipPath id=\"clip3_2543_91192\">\n <rect width=\"358\" height=\"92\" fill=\"white\" transform=\"translate(0 94)\"/>\n </clipPath>\n </defs>\n </svg>\n ");
|
24
105
|
if (_selector) _selector.appendChild(loading);
|
25
106
|
var loadingDom = document.getElementById(LOADING_ID);
|
26
107
|
amsSetSize(null, loadingDom);
|
@@ -24,12 +24,12 @@ import { componentSignEnum, eventCodeEnum, messageName, platformEnum, productSce
|
|
24
24
|
import { getType, isJsonString, isPC } from "../../util";
|
25
25
|
import { isLocalMock } from "../../util/mock";
|
26
26
|
import { matchVersion } from "../../util/versionCompare";
|
27
|
+
import { handlePaymentSessionConfig } from "../payment-element/utils";
|
27
28
|
import { createIframe, createPreloadIframe, getAppDomain, getIframeUrl } from "./cashierApp";
|
28
29
|
import { getChannelBehavior } from "./channel";
|
29
30
|
import { addInlineLoading, createInlineBaseElement } from "./component.inline.style";
|
30
31
|
import { addPopupLoading, createBaseElement, createMockup, createRetentionPopup, handleDeclareInfo as _handleDeclareInfo, hideRetentionPopup, removeRetentionPopup as _removeRetentionPopup, slideInAndOutKeyframes } from "./component.popup.style";
|
31
|
-
import {
|
32
|
-
import { createModal, destroyModal, insertStyleSheet } from "./popupWindow.style";
|
32
|
+
import { createModal, destroyModal, insertStyleSheet, removePopupLoading } from "./popupWindow.style";
|
33
33
|
window.changingPageHeight = window.innerHeight;
|
34
34
|
var ComponentApp = /*#__PURE__*/function () {
|
35
35
|
function ComponentApp() {
|
@@ -299,7 +299,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
299
299
|
}).send();
|
300
300
|
if (componentSignEnum.EASY_PAY_WALLET === this._componentSign) {
|
301
301
|
if (productScene === productSceneEnum.EASY_PAY && productSceneVersion === '1.0' && !autoDebitWithToken && requireFastSdk) {
|
302
|
-
// EASY_PAY 1.0首次支付,requireFastSdk为true,不需要接口请求
|
302
|
+
// EASY_PAY 1.0首次支付,requireFastSdk为true,不需要接口请求
|
303
303
|
this.handleAuthUrlInfo(authUrlInfo);
|
304
304
|
return;
|
305
305
|
}
|
@@ -375,10 +375,22 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
375
375
|
}, {
|
376
376
|
key: "renderInlineLoading",
|
377
377
|
value: function renderInlineLoading(renderParams, selector) {
|
378
|
-
var _renderParams$appeara;
|
378
|
+
var _renderParams$appeara, _this$_renderParams11;
|
379
379
|
var showLoading = renderParams === null || renderParams === void 0 || (_renderParams$appeara = renderParams.appearance) === null || _renderParams$appeara === void 0 ? void 0 : _renderParams$appeara.showLoading;
|
380
380
|
showLoading = typeof showLoading === 'boolean' ? showLoading : true;
|
381
|
-
|
381
|
+
var extendInfo = renderParams.paymentSessionMetaData.extendInfo;
|
382
|
+
var isExpressCheckout = false;
|
383
|
+
try {
|
384
|
+
// expressCheckout可能出现string(false) JSON.parse再转一次
|
385
|
+
isExpressCheckout = JSON.parse(JSON.parse(extendInfo).expressCheckout);
|
386
|
+
} catch (error) {
|
387
|
+
// 遇到JSON解析错误,默认false
|
388
|
+
}
|
389
|
+
if (showLoading) addInlineLoading(selector, this.platform, {
|
390
|
+
componentSign: this._componentSign,
|
391
|
+
type: (_this$_renderParams11 = this._renderParams) === null || _this$_renderParams11 === void 0 || (_this$_renderParams11 = _this$_renderParams11.appearance) === null || _this$_renderParams11 === void 0 || (_this$_renderParams11 = _this$_renderParams11.layout) === null || _this$_renderParams11 === void 0 ? void 0 : _this$_renderParams11.type,
|
392
|
+
isExpressCheckout: isExpressCheckout
|
393
|
+
});
|
382
394
|
}
|
383
395
|
}, {
|
384
396
|
key: "renderPopupLoading",
|
@@ -641,19 +653,19 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
641
653
|
}, {
|
642
654
|
key: "createSubmitPromise",
|
643
655
|
value: function createSubmitPromise() {
|
644
|
-
var _this$
|
645
|
-
_this$_renderParams12,
|
656
|
+
var _this$_renderParams12,
|
646
657
|
_this$_renderParams13,
|
658
|
+
_this$_renderParams14,
|
647
659
|
_this6 = this;
|
648
660
|
this._performanceData.push({
|
649
661
|
key: 'sdk_submit_start',
|
650
662
|
value: Date.now()
|
651
663
|
});
|
652
664
|
var params = {
|
653
|
-
paymentSessionData: this._renderParams && ((_this$
|
654
|
-
paymentSessionConfig: (_this$
|
665
|
+
paymentSessionData: this._renderParams && ((_this$_renderParams12 = this._renderParams) === null || _this$_renderParams12 === void 0 ? void 0 : _this$_renderParams12.sessionData) || '',
|
666
|
+
paymentSessionConfig: (_this$_renderParams13 = this._renderParams) === null || _this$_renderParams13 === void 0 || (_this$_renderParams13 = _this$_renderParams13.paymentSessionMetaData) === null || _this$_renderParams13 === void 0 ? void 0 : _this$_renderParams13.paymentSessionConfig
|
655
667
|
};
|
656
|
-
var channelBehavior = getChannelBehavior((_this$
|
668
|
+
var channelBehavior = getChannelBehavior((_this$_renderParams14 = this._renderParams) === null || _this$_renderParams14 === void 0 ? void 0 : _this$_renderParams14.paymentSessionMetaData);
|
657
669
|
// eslint-disable-next-line no-async-promise-executor
|
658
670
|
this._actionSubmitPromise = new Promise( /*#__PURE__*/function () {
|
659
671
|
var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(resolve) {
|
@@ -790,13 +802,14 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
790
802
|
value: function createPreloadApp(componentSign) {
|
791
803
|
var productSceneVersion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1.0';
|
792
804
|
var preloadIframe = createPreloadIframe(componentSign, productSceneVersion);
|
805
|
+
var productScene = componentSign.split(/_(?=[^_]*$)/)[0];
|
793
806
|
var _getIframeUrl = getIframeUrl({
|
794
807
|
renderDisplayType: renderDisplayTypeEnum.popup,
|
795
808
|
componentSign: componentSign,
|
796
809
|
analytics: {
|
797
810
|
enabled: false
|
798
811
|
},
|
799
|
-
productScene:
|
812
|
+
productScene: productScene,
|
800
813
|
productSceneVersion: productSceneVersion,
|
801
814
|
environment: this.AMSSDK.options.env.environment,
|
802
815
|
appVersion: this._appVersion,
|
@@ -922,7 +935,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
922
935
|
key: "createDialog",
|
923
936
|
value: function () {
|
924
937
|
var _createDialog = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(data) {
|
925
|
-
var pageUrl, isLoad, timeout, logTimeout;
|
938
|
+
var pageUrl, _data$device, isLoad, timeout, logTimeout;
|
926
939
|
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
927
940
|
while (1) switch (_context4.prev = _context4.next) {
|
928
941
|
case 0:
|
@@ -932,8 +945,8 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
932
945
|
_context4.next = 5;
|
933
946
|
return createModal({
|
934
947
|
widthPadding: data === null || data === void 0 ? void 0 : data.widthPadding,
|
935
|
-
|
936
|
-
|
948
|
+
device: (_data$device = data === null || data === void 0 ? void 0 : data.device) !== null && _data$device !== void 0 ? _data$device : this.platform,
|
949
|
+
loadingConfig: data === null || data === void 0 ? void 0 : data.loadingConfig,
|
937
950
|
url: pageUrl
|
938
951
|
});
|
939
952
|
case 5:
|
@@ -952,6 +965,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
952
965
|
}, POPUP_LOADTIME_LOG_LIMIT);
|
953
966
|
this.popupApp.onload = function () {
|
954
967
|
isLoad = true;
|
968
|
+
removePopupLoading();
|
955
969
|
clearTimeout(timeout);
|
956
970
|
clearTimeout(logTimeout);
|
957
971
|
};
|
@@ -1517,7 +1531,7 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1517
1531
|
key: "sendRenderEvent",
|
1518
1532
|
value: (function () {
|
1519
1533
|
var _sendRenderEvent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
|
1520
|
-
var _this$
|
1534
|
+
var _this$_renderParams15, _this$_renderParams16, _this$_renderParams17, _this$_renderParams18, _this$_renderParams19, _this$_renderParams20, _this$AMSSDK$logger, _this$_renderParams21, _this$_renderParams22, _this$_renderParams23, _this$AMSSDK, _this$_renderParams24, res, submitRes;
|
1521
1535
|
return _regeneratorRuntime().wrap(function _callee8$(_context8) {
|
1522
1536
|
while (1) switch (_context8.prev = _context8.next) {
|
1523
1537
|
case 0:
|
@@ -1546,12 +1560,12 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1546
1560
|
data: {
|
1547
1561
|
queryResult: res,
|
1548
1562
|
submitResult: submitRes,
|
1549
|
-
sessionResult: (_this$
|
1550
|
-
paymentSessionData: (_this$
|
1563
|
+
sessionResult: (_this$_renderParams15 = this._renderParams) === null || _this$_renderParams15 === void 0 ? void 0 : _this$_renderParams15.paymentSessionMetaData,
|
1564
|
+
paymentSessionData: (_this$_renderParams16 = this._renderParams) === null || _this$_renderParams16 === void 0 ? void 0 : _this$_renderParams16.sessionData,
|
1551
1565
|
heightOfVisible: Math.max(window.changingPageHeight, window.innerHeight),
|
1552
|
-
renderDisplayType: (_this$
|
1553
|
-
appearance: (_this$
|
1554
|
-
notRedirectAfterComplete: ((_this$
|
1566
|
+
renderDisplayType: (_this$_renderParams17 = this._renderParams) === null || _this$_renderParams17 === void 0 ? void 0 : _this$_renderParams17.renderDisplayType,
|
1567
|
+
appearance: (_this$_renderParams18 = this._renderParams) === null || _this$_renderParams18 === void 0 ? void 0 : _this$_renderParams18.appearance,
|
1568
|
+
notRedirectAfterComplete: ((_this$_renderParams19 = this._renderParams) === null || _this$_renderParams19 === void 0 ? void 0 : _this$_renderParams19.notRedirectAfterComplete) === true,
|
1555
1569
|
merchantAppointParam: this._merchantAppointParam,
|
1556
1570
|
allowSubmitPayCallAhead: this._allowSubmitPayCallAhead,
|
1557
1571
|
envInfo: {
|
@@ -1559,16 +1573,16 @@ var ComponentApp = /*#__PURE__*/function () {
|
|
1559
1573
|
screenWidth: screen.width
|
1560
1574
|
},
|
1561
1575
|
logMetaData: _objectSpread(_objectSpread({
|
1562
|
-
trackId: (_this$
|
1576
|
+
trackId: (_this$_renderParams20 = this._renderParams) === null || _this$_renderParams20 === void 0 ? void 0 : _this$_renderParams20.sessionData,
|
1563
1577
|
platform: this.platform,
|
1564
1578
|
firstLogTime: (_this$AMSSDK$logger = this.AMSSDK.logger) === null || _this$AMSSDK$logger === void 0 ? void 0 : _this$AMSSDK$logger.getComponentStartTime()
|
1565
|
-
}, ((_this$
|
1566
|
-
renderDisplayType: (_this$
|
1579
|
+
}, ((_this$_renderParams21 = this._renderParams) === null || _this$_renderParams21 === void 0 || (_this$_renderParams21 = _this$_renderParams21.paymentSessionMetaData) === null || _this$_renderParams21 === void 0 ? void 0 : _this$_renderParams21.paymentSessionConfig) || {}), {}, {
|
1580
|
+
renderDisplayType: (_this$_renderParams22 = this._renderParams) === null || _this$_renderParams22 === void 0 ? void 0 : _this$_renderParams22.renderDisplayType,
|
1567
1581
|
sdkVersion: this._appVersion,
|
1568
|
-
merchantId: (_this$
|
1582
|
+
merchantId: (_this$_renderParams23 = this._renderParams) === null || _this$_renderParams23 === void 0 || (_this$_renderParams23 = _this$_renderParams23.paymentSessionMetaData) === null || _this$_renderParams23 === void 0 ? void 0 : _this$_renderParams23.clientId,
|
1569
1583
|
instanceId: (_this$AMSSDK = this.AMSSDK) === null || _this$AMSSDK === void 0 ? void 0 : _this$AMSSDK._instanceId,
|
1570
1584
|
performanceData: this._performanceData,
|
1571
|
-
paymentMethodType: (_this$
|
1585
|
+
paymentMethodType: (_this$_renderParams24 = this._renderParams) === null || _this$_renderParams24 === void 0 || (_this$_renderParams24 = _this$_renderParams24.paymentSessionMetaData) === null || _this$_renderParams24 === void 0 || (_this$_renderParams24 = _this$_renderParams24.paymentMethodInfoView) === null || _this$_renderParams24 === void 0 ? void 0 : _this$_renderParams24.paymentMethodType
|
1572
1586
|
})
|
1573
1587
|
}
|
1574
1588
|
}
|
@@ -1,8 +1,11 @@
|
|
1
|
+
export declare const createCustomSheet: (curTheme?: 'dark' | 'light') => void;
|
2
|
+
export declare const renderPopupLoading: (container: HTMLDivElement, curTheme: 'dark' | 'light') => void;
|
3
|
+
export declare const removePopupLoading: (isShowMockup?: boolean) => void;
|
1
4
|
export declare const insertStyleSheet: () => void;
|
2
|
-
export declare const createModal: ({ device, url, widthPadding,
|
5
|
+
export declare const createModal: ({ device, url, widthPadding, loadingConfig }: {
|
3
6
|
device: any;
|
4
7
|
url: any;
|
5
8
|
widthPadding: any;
|
6
|
-
|
9
|
+
loadingConfig: any;
|
7
10
|
}) => Promise<HTMLIFrameElement>;
|
8
11
|
export declare const destroyModal: () => void;
|
@@ -1,8 +1,46 @@
|
|
1
|
-
import { AMSPOPUP_PREFIX, ANIMATION_TIME } from "../../constant";
|
1
|
+
import { AMSPOPUP_PREFIX, ANIMATION_TIME, MOCKUP_ID, POPUPLOADING_ID } from "../../constant";
|
2
|
+
import { getDesignFontSize } from "../../util";
|
2
3
|
|
3
4
|
// CSS样式字符串
|
4
|
-
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 overflow: hidden;\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 animation-fill-mode: forwards;\n }\n\n .").concat(AMSPOPUP_PREFIX, "fadeOut {\n /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n animation-fill-mode: forwards;\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 @-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @-moz-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\n @-webkit-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n @-moz-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n");
|
5
|
-
|
5
|
+
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 overflow: hidden;\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 animation-fill-mode: forwards;\n }\n\n .").concat(AMSPOPUP_PREFIX, "fadeOut {\n /* \u6DFB\u52A0\u6DE1\u51FA\u52A8\u753B */\n animation: fadeOut ").concat(ANIMATION_TIME, "ms;\n animation-fill-mode: forwards;\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 @-webkit-keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @-moz-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\n @-webkit-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n @-moz-keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n\n.ams-component-popup-loading {\n width: 0.8em;\n height:0.8em;\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-popup-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-popup-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-popup-loading .line div:before,\n.ams-component-popup-loading .line div:after {\n content: '';\n display: block;\n height: 13.33px;\n background: black;\n border-radius: 5.3px;\n}\n.ams-component-popup-loading .line div:after {\n margin-top: 13.33px;\n}\n\n.ams-component-popup-loading .line div:nth-child(2) {\n -webkit-transform: rotate(45deg);\n}\n\n.ams-component-popup-loading .line div:nth-child(3) {\n -webkit-transform: rotate(90deg);\n}\n\n.ams-component-popup-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-popup-loading .line div:nth-child(1):before {\n -webkit-animation: load 1s linear 0s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):before {\n -webkit-animation: load 1s linear 0.125s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):before {\n -webkit-animation: load 1s linear 0.25s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):before {\n -webkit-animation: load 1s linear 0.375s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(1):after {\n -webkit-animation: load 1s linear 0.5s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(2):after {\n -webkit-animation: load 1s linear 0.675s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(3):after {\n -webkit-animation: load 1s linear 0.75s infinite;\n}\n\n.ams-component-popup-loading .line div:nth-child(4):after {\n -webkit-animation: load 1s linear 0.875s infinite;\n}\n\n.ams-component-popup-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");
|
6
|
+
var getCurrentTheme = function getCurrentTheme() {
|
7
|
+
var curTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
|
8
|
+
var theme = {
|
9
|
+
night: 'dark',
|
10
|
+
gamingPurple: 'dark',
|
11
|
+
agateGreen: 'dark',
|
12
|
+
default: 'light',
|
13
|
+
nostalgicGray: 'light',
|
14
|
+
cherryBlossomPink: 'light'
|
15
|
+
};
|
16
|
+
return theme[curTheme];
|
17
|
+
};
|
18
|
+
export var createCustomSheet = function createCustomSheet() {
|
19
|
+
var curTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
|
20
|
+
var sheet = "\n .ams-component-popup-loading .line div:before,\n .ams-component-popup-loading .line div:after {\n background: ".concat(curTheme === 'light' ? '#000000' : '#ffffff', " !important;\n }");
|
21
|
+
var style = document.createElement('style');
|
22
|
+
style.innerHTML = sheet;
|
23
|
+
document.head.appendChild(style);
|
24
|
+
};
|
25
|
+
export var renderPopupLoading = function renderPopupLoading(container, curTheme) {
|
26
|
+
createCustomSheet(curTheme);
|
27
|
+
var loading = document.createElement('div');
|
28
|
+
loading === null || loading === void 0 || loading.classList.add(POPUPLOADING_ID);
|
29
|
+
loading.id = POPUPLOADING_ID;
|
30
|
+
loading.innerHTML = '<div class="line"><div></div><div></div><div></div><div></div></div>';
|
31
|
+
loading.style.fontSize = "".concat(getDesignFontSize(), "px");
|
32
|
+
container.appendChild(loading);
|
33
|
+
};
|
34
|
+
export var removePopupLoading = function removePopupLoading() {
|
35
|
+
var _document$getElementB;
|
36
|
+
var isShowMockup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
37
|
+
var mockup = document.getElementById(MOCKUP_ID);
|
38
|
+
if (mockup) {
|
39
|
+
mockup.style.background = 'rgb(0, 0, 0, 0.6)';
|
40
|
+
mockup.style.display = isShowMockup ? 'block' : 'none';
|
41
|
+
}
|
42
|
+
(_document$getElementB = document.getElementById(POPUPLOADING_ID)) === null || _document$getElementB === void 0 || _document$getElementB.remove();
|
43
|
+
};
|
6
44
|
// 创建和插入样式表
|
7
45
|
export var insertStyleSheet = function insertStyleSheet() {
|
8
46
|
var style = document.createElement('style');
|
@@ -15,7 +53,7 @@ export var createModal = function createModal(_ref) {
|
|
15
53
|
var device = _ref.device,
|
16
54
|
url = _ref.url,
|
17
55
|
widthPadding = _ref.widthPadding,
|
18
|
-
|
56
|
+
loadingConfig = _ref.loadingConfig;
|
19
57
|
return new Promise(function (resolve, reject) {
|
20
58
|
try {
|
21
59
|
var overlay = document.createElement('div');
|
@@ -23,12 +61,12 @@ export var createModal = function createModal(_ref) {
|
|
23
61
|
var modal = document.createElement('div');
|
24
62
|
modal.classList.add("".concat(AMSPOPUP_PREFIX, "modal"), "".concat(AMSPOPUP_PREFIX, "fadeIn"));
|
25
63
|
if (device === 'desktop') {
|
26
|
-
modal.style.width = '
|
27
|
-
modal.style.height = '
|
64
|
+
modal.style.width = '656px';
|
65
|
+
modal.style.height = '620px';
|
28
66
|
modal.style.borderRadius = '12px';
|
29
67
|
} else {
|
30
68
|
modal.style.width = "calc(100% - ".concat(2 * widthPadding, "px)");
|
31
|
-
modal.style.height = "
|
69
|
+
modal.style.height = "80vh";
|
32
70
|
modal.style.borderRadius = '8px';
|
33
71
|
}
|
34
72
|
var iframe = document.createElement('iframe');
|
@@ -36,6 +74,16 @@ export var createModal = function createModal(_ref) {
|
|
36
74
|
iframe.style.border = 'none';
|
37
75
|
iframe.style.width = '100%';
|
38
76
|
iframe.style.height = '100%';
|
77
|
+
if (loadingConfig && Object.keys(loadingConfig).length) {
|
78
|
+
var _loadingConfig$theme = loadingConfig.theme,
|
79
|
+
theme = _loadingConfig$theme === void 0 ? 'default' : _loadingConfig$theme,
|
80
|
+
_loadingConfig$backgr = loadingConfig.backgroundPrimary,
|
81
|
+
backgroundPrimary = _loadingConfig$backgr === void 0 ? '#ffffff' : _loadingConfig$backgr;
|
82
|
+
var mode = getCurrentTheme(theme);
|
83
|
+
renderPopupLoading(modal, mode);
|
84
|
+
modal.style.backgroundColor = backgroundPrimary;
|
85
|
+
iframe.style.backgroundColor = backgroundPrimary;
|
86
|
+
}
|
39
87
|
modal.appendChild(iframe);
|
40
88
|
var body = document.getElementsByTagName('body')[0];
|
41
89
|
body.appendChild(overlay);
|