@paypal/checkout-components 5.0.405 → 5.0.407-alpha-63f032e.0
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/__sdk__.js +6 -0
- package/dist/button.js +1 -1
- package/dist/test/button.js +1 -1
- package/globals.js +1 -0
- package/package.json +1 -1
- package/src/declarations.js +1 -0
- package/src/funding/common.jsx +1 -0
- package/src/funding/content.jsx +9 -0
- package/src/funding/paypal/template.jsx +17 -1
- package/src/interface/saved-payment-methods.js +15 -0
- package/src/types.js +2 -0
- package/src/ui/buttons/button.jsx +12 -1
- package/src/ui/buttons/props.bnpl.test.js +297 -0
- package/src/ui/buttons/props.js +121 -0
- package/src/zoid/buttons/component.jsx +1 -0
- package/src/zoid/saved-payment-methods/component.jsx +983 -0
- package/src/zoid/saved-payment-methods/container.jsx +126 -0
- package/src/zoid/saved-payment-methods/index.js +4 -0
- package/src/zoid/saved-payment-methods/prerender.jsx +134 -0
- package/src/zoid/saved-payment-methods/props.js +34 -0
- package/src/zoid/saved-payment-methods/util.js +15 -0
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/* @flow */
|
|
2
|
+
/** @jsx node */
|
|
3
|
+
|
|
4
|
+
import { node, dom } from "@krakenjs/jsx-pragmatic/src";
|
|
5
|
+
import { EVENT, type RenderOptionsType } from "@krakenjs/zoid/src";
|
|
6
|
+
import { getVersion } from "@paypal/sdk-client/src";
|
|
7
|
+
import { destroyElement, toCSS } from "@krakenjs/belter/src";
|
|
8
|
+
import { getNamespace } from "@paypal/sdk-client/src";
|
|
9
|
+
|
|
10
|
+
import { type SavedPaymentMethodsProps, type MessagesOptions } from "./props";
|
|
11
|
+
|
|
12
|
+
const CLASS = {
|
|
13
|
+
VISIBLE: "visible",
|
|
14
|
+
INVISIBLE: "invisible",
|
|
15
|
+
COMPONENT_FRAME: "component-frame",
|
|
16
|
+
PRERENDER_FRAME: "prerender-frame",
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const ATTRIBUTE = {
|
|
20
|
+
VERSION: "data-version",
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export function containerTemplate({
|
|
24
|
+
uid,
|
|
25
|
+
props,
|
|
26
|
+
tag,
|
|
27
|
+
context,
|
|
28
|
+
frame,
|
|
29
|
+
prerenderFrame,
|
|
30
|
+
doc,
|
|
31
|
+
event,
|
|
32
|
+
dimensions,
|
|
33
|
+
}: RenderOptionsType<SavedPaymentMethodsProps>): ?HTMLElement {
|
|
34
|
+
if (!frame || !prerenderFrame) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
frame.classList.add(CLASS.COMPONENT_FRAME);
|
|
39
|
+
prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
|
|
40
|
+
|
|
41
|
+
frame.classList.add(CLASS.INVISIBLE);
|
|
42
|
+
prerenderFrame.classList.add(CLASS.VISIBLE);
|
|
43
|
+
|
|
44
|
+
const { width: initialWidth, height: initialHeight } = dimensions;
|
|
45
|
+
|
|
46
|
+
event.on(EVENT.RENDERED, () => {
|
|
47
|
+
prerenderFrame.classList.remove(CLASS.VISIBLE);
|
|
48
|
+
prerenderFrame.classList.add(CLASS.INVISIBLE);
|
|
49
|
+
|
|
50
|
+
frame.classList.remove(CLASS.INVISIBLE);
|
|
51
|
+
frame.classList.add(CLASS.VISIBLE);
|
|
52
|
+
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
destroyElement(prerenderFrame);
|
|
55
|
+
}, 1000);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
const setupAutoResize = (el) => {
|
|
59
|
+
event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
|
|
60
|
+
if (typeof newWidth === "number") {
|
|
61
|
+
el.style.width = toCSS(newWidth);
|
|
62
|
+
}
|
|
63
|
+
if (typeof newHeight === "number") {
|
|
64
|
+
el.style.height = toCSS(newHeight);
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const { nonce, message } = props;
|
|
70
|
+
|
|
71
|
+
const element = (
|
|
72
|
+
<div
|
|
73
|
+
id={uid}
|
|
74
|
+
class={`${tag} ${tag}-context-${context}`}
|
|
75
|
+
{...{ [ATTRIBUTE.VERSION]: `${getVersion()}` }}
|
|
76
|
+
style={{
|
|
77
|
+
width: initialWidth,
|
|
78
|
+
height: initialHeight,
|
|
79
|
+
}}
|
|
80
|
+
onRender={setupAutoResize}
|
|
81
|
+
>
|
|
82
|
+
<style nonce={nonce}>
|
|
83
|
+
{`
|
|
84
|
+
#${uid} {
|
|
85
|
+
position: relative;
|
|
86
|
+
display: block;
|
|
87
|
+
font-size: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
#${uid} > iframe {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;
|
|
94
|
+
left: 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
height: 100%;
|
|
97
|
+
border: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
#${uid} > iframe.${CLASS.COMPONENT_FRAME} {
|
|
101
|
+
z-index: 100;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
#${uid} > iframe.${CLASS.PRERENDER_FRAME} {
|
|
105
|
+
transition: opacity .2s linear;
|
|
106
|
+
z-index: 200;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
#${uid} > iframe.${CLASS.VISIBLE} {
|
|
110
|
+
opacity: 1;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
#${uid} > iframe.${CLASS.INVISIBLE} {
|
|
114
|
+
opacity: 0;
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
`}
|
|
118
|
+
</style>
|
|
119
|
+
|
|
120
|
+
<node el={frame} />
|
|
121
|
+
<node el={prerenderFrame} />
|
|
122
|
+
</div>
|
|
123
|
+
).render(dom({ doc }));
|
|
124
|
+
|
|
125
|
+
return element;
|
|
126
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/* @flow */
|
|
2
|
+
/** @jsx node */
|
|
3
|
+
|
|
4
|
+
import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
|
|
5
|
+
import type { ZoidProps } from "@krakenjs/zoid/src";
|
|
6
|
+
|
|
7
|
+
import { type SavedPaymentMethodsProps } from "./props";
|
|
8
|
+
|
|
9
|
+
type PrerenderedSavedPaymentMethodsProps = {|
|
|
10
|
+
nonce: ?string,
|
|
11
|
+
props: ZoidProps<SavedPaymentMethodsProps>,
|
|
12
|
+
|};
|
|
13
|
+
|
|
14
|
+
export function PrerenderedSavedPaymentMethods({
|
|
15
|
+
nonce,
|
|
16
|
+
props,
|
|
17
|
+
}: PrerenderedSavedPaymentMethodsProps): ChildType {
|
|
18
|
+
return (
|
|
19
|
+
<html>
|
|
20
|
+
<head>
|
|
21
|
+
<style nonce={nonce}>
|
|
22
|
+
{`
|
|
23
|
+
* {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
}
|
|
26
|
+
body {
|
|
27
|
+
margin: 0;
|
|
28
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
29
|
+
}
|
|
30
|
+
.saved-payment-methods-loading {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
height: 100vh;
|
|
35
|
+
color: #999;
|
|
36
|
+
}
|
|
37
|
+
.loader {
|
|
38
|
+
width: 100%;
|
|
39
|
+
max-height: 50px;
|
|
40
|
+
display: block;
|
|
41
|
+
}
|
|
42
|
+
.loader-wave {
|
|
43
|
+
transform-box: fill-box;
|
|
44
|
+
transform-origin: 0 50%;
|
|
45
|
+
}
|
|
46
|
+
.loader-wave-1 { animation: loader-wave 1.2s linear infinite; }
|
|
47
|
+
.loader-wave-2 { animation: loader-wave 1.6s linear infinite; }
|
|
48
|
+
.loader-wave-3 { animation: loader-wave 2s linear infinite; }
|
|
49
|
+
.loader-wave-4 { animation: loader-wave 0.9s linear infinite; }
|
|
50
|
+
@keyframes loader-wave {
|
|
51
|
+
from { transform: translateX(0); }
|
|
52
|
+
to { transform: translateX(-50px); }
|
|
53
|
+
}
|
|
54
|
+
`}
|
|
55
|
+
</style>
|
|
56
|
+
</head>
|
|
57
|
+
<body>
|
|
58
|
+
<svg
|
|
59
|
+
class="loader"
|
|
60
|
+
viewBox="0 0 400 50"
|
|
61
|
+
preserveAspectRatio="xMidYMid meet"
|
|
62
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
63
|
+
>
|
|
64
|
+
<defs>
|
|
65
|
+
<path
|
|
66
|
+
id="wave-period"
|
|
67
|
+
d="M 0,25 C 12.5,20 37.5,30 50,25 C 62.5,20 87.5,30 100,25"
|
|
68
|
+
/>
|
|
69
|
+
<clipPath id="waves-clip">
|
|
70
|
+
<rect x="0" y="0" width="318" height="50" />
|
|
71
|
+
</clipPath>
|
|
72
|
+
</defs>
|
|
73
|
+
<g
|
|
74
|
+
clip-path="url(#waves-clip)"
|
|
75
|
+
fill="none"
|
|
76
|
+
stroke-width="2"
|
|
77
|
+
stroke-linecap="round"
|
|
78
|
+
>
|
|
79
|
+
<g class="loader-wave loader-wave-1" stroke="#e74c3c">
|
|
80
|
+
<use href="#wave-period" x="0" y="0" />
|
|
81
|
+
<use href="#wave-period" x="50" y="0" />
|
|
82
|
+
<use href="#wave-period" x="100" y="0" />
|
|
83
|
+
<use href="#wave-period" x="150" y="0" />
|
|
84
|
+
<use href="#wave-period" x="200" y="0" />
|
|
85
|
+
<use href="#wave-period" x="250" y="0" />
|
|
86
|
+
<use href="#wave-period" x="300" y="0" />
|
|
87
|
+
<use href="#wave-period" x="350" y="0" />
|
|
88
|
+
</g>
|
|
89
|
+
<g class="loader-wave loader-wave-2" stroke="#f39c12">
|
|
90
|
+
<use href="#wave-period" x="0" y="6" />
|
|
91
|
+
<use href="#wave-period" x="50" y="6" />
|
|
92
|
+
<use href="#wave-period" x="100" y="6" />
|
|
93
|
+
<use href="#wave-period" x="150" y="6" />
|
|
94
|
+
<use href="#wave-period" x="200" y="6" />
|
|
95
|
+
<use href="#wave-period" x="250" y="6" />
|
|
96
|
+
<use href="#wave-period" x="300" y="6" />
|
|
97
|
+
<use href="#wave-period" x="350" y="6" />
|
|
98
|
+
</g>
|
|
99
|
+
<g class="loader-wave loader-wave-3" stroke="#27ae60">
|
|
100
|
+
<use href="#wave-period" x="0" y="12" />
|
|
101
|
+
<use href="#wave-period" x="50" y="12" />
|
|
102
|
+
<use href="#wave-period" x="100" y="12" />
|
|
103
|
+
<use href="#wave-period" x="150" y="12" />
|
|
104
|
+
<use href="#wave-period" x="200" y="12" />
|
|
105
|
+
<use href="#wave-period" x="250" y="12" />
|
|
106
|
+
<use href="#wave-period" x="300" y="12" />
|
|
107
|
+
<use href="#wave-period" x="350" y="12" />
|
|
108
|
+
</g>
|
|
109
|
+
<g class="loader-wave loader-wave-4" stroke="#3498db">
|
|
110
|
+
<use href="#wave-period" x="0" y="18" />
|
|
111
|
+
<use href="#wave-period" x="50" y="18" />
|
|
112
|
+
<use href="#wave-period" x="100" y="18" />
|
|
113
|
+
<use href="#wave-period" x="150" y="18" />
|
|
114
|
+
<use href="#wave-period" x="200" y="18" />
|
|
115
|
+
<use href="#wave-period" x="250" y="18" />
|
|
116
|
+
<use href="#wave-period" x="300" y="18" />
|
|
117
|
+
<use href="#wave-period" x="350" y="18" />
|
|
118
|
+
</g>
|
|
119
|
+
</g>
|
|
120
|
+
<path
|
|
121
|
+
d="M 355 48 C 340 48 331 33 334 26 L 339 12 L 345 20 C 352 18 358 18 365 20 L 370 12 L 375 26 C 379 33 370 48 355 48 Z"
|
|
122
|
+
fill="none"
|
|
123
|
+
stroke="#000"
|
|
124
|
+
stroke-width="2"
|
|
125
|
+
stroke-linejoin="round"
|
|
126
|
+
/>
|
|
127
|
+
</svg>
|
|
128
|
+
<div class="saved-payment-methods-loading">
|
|
129
|
+
Loading Saved Payment Methods...
|
|
130
|
+
</div>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
|
133
|
+
);
|
|
134
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/* @flow */
|
|
2
|
+
|
|
3
|
+
// import type { Wallet, ContentType } from "../../types";
|
|
4
|
+
import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
|
|
5
|
+
|
|
6
|
+
export type MessagesOptions = {|
|
|
7
|
+
amount?: number,
|
|
8
|
+
currency?: string,
|
|
9
|
+
|};
|
|
10
|
+
|
|
11
|
+
export type SavedPaymentMethodsProps = {|
|
|
12
|
+
clientID?: string, // NOTE: Where is it used?
|
|
13
|
+
// merchantID?: $ReadOnlyArray<string>,
|
|
14
|
+
// sessionID?: string,
|
|
15
|
+
buttonSessionID?: string,
|
|
16
|
+
env?: string, // NOTE: Where is it used?
|
|
17
|
+
locale?: {|
|
|
18
|
+
country: string,
|
|
19
|
+
lang: string,
|
|
20
|
+
|},
|
|
21
|
+
message?: MessagesOptions,
|
|
22
|
+
// sdkMeta?: string,
|
|
23
|
+
style?: {||}, // TBD
|
|
24
|
+
nonce?: string,
|
|
25
|
+
// wallet?: ?Wallet,
|
|
26
|
+
// content?: ?ContentType,
|
|
27
|
+
// userIDToken?: string,
|
|
28
|
+
// currency?: string,
|
|
29
|
+
// amount?: string,
|
|
30
|
+
// onReady?: () => void,
|
|
31
|
+
createOrder: () => ZalgoPromise<string> | string,
|
|
32
|
+
onApprove: (Object) => ZalgoPromise<void> | void,
|
|
33
|
+
onCancel?: () => void,
|
|
34
|
+
|};
|