@paypal/checkout-components 5.0.256 → 5.0.258
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/README.md +8 -0
- package/__sdk__.js +72 -76
- package/dist/button.js +1 -1
- package/globals.js +28 -30
- package/package.json +6 -4
- package/src/constants/button.js +37 -36
- package/src/constants/class.js +32 -30
- package/src/constants/index.js +3 -3
- package/src/constants/misc.js +14 -12
- package/src/declarations.js +19 -19
- package/src/funding/applepay/config.jsx +51 -50
- package/src/funding/applepay/index.js +1 -1
- package/src/funding/applepay/style.scoped.scss +1 -1
- package/src/funding/applepay/template.jsx +16 -11
- package/src/funding/bancontact/config.jsx +48 -37
- package/src/funding/bancontact/index.js +1 -2
- package/src/funding/blik/config.jsx +48 -37
- package/src/funding/blik/index.js +1 -2
- package/src/funding/boleto/config.jsx +50 -39
- package/src/funding/boleto/index.js +1 -2
- package/src/funding/card/amex/config.js +9 -8
- package/src/funding/card/amex/index.js +1 -2
- package/src/funding/card/config.jsx +246 -177
- package/src/funding/card/discover/config.js +9 -7
- package/src/funding/card/discover/index.js +1 -2
- package/src/funding/card/elo/config.js +6 -7
- package/src/funding/card/elo/index.js +1 -2
- package/src/funding/card/hiper/config.js +9 -7
- package/src/funding/card/hiper/index.js +1 -2
- package/src/funding/card/index.js +1 -1
- package/src/funding/card/jcb/config.js +6 -7
- package/src/funding/card/jcb/index.js +1 -2
- package/src/funding/card/mastercard/config.js +9 -7
- package/src/funding/card/mastercard/index.js +1 -2
- package/src/funding/card/visa/config.js +9 -7
- package/src/funding/card/visa/index.js +1 -2
- package/src/funding/common.jsx +242 -216
- package/src/funding/config.js +212 -65
- package/src/funding/content.jsx +1946 -337
- package/src/funding/credit/config.jsx +74 -57
- package/src/funding/credit/index.js +1 -2
- package/src/funding/eps/config.jsx +45 -37
- package/src/funding/eps/index.js +1 -2
- package/src/funding/funding.js +193 -100
- package/src/funding/giropay/config.jsx +48 -38
- package/src/funding/giropay/index.js +1 -2
- package/src/funding/ideal/config.jsx +48 -37
- package/src/funding/ideal/index.js +1 -2
- package/src/funding/index.js +2 -2
- package/src/funding/itau/config.jsx +41 -41
- package/src/funding/itau/index.js +1 -1
- package/src/funding/maxima/config.jsx +25 -19
- package/src/funding/maxima/index.js +1 -2
- package/src/funding/mercadopago/config.jsx +48 -37
- package/src/funding/mercadopago/index.js +1 -2
- package/src/funding/multibanco/config.jsx +50 -39
- package/src/funding/multibanco/index.js +1 -2
- package/src/funding/mybank/config.jsx +48 -37
- package/src/funding/mybank/index.js +1 -2
- package/src/funding/oxxo/config.jsx +50 -39
- package/src/funding/oxxo/index.js +1 -2
- package/src/funding/p24/config.jsx +45 -37
- package/src/funding/p24/index.js +1 -2
- package/src/funding/paidy/config.jsx +50 -39
- package/src/funding/paidy/index.js +1 -1
- package/src/funding/paylater/config.jsx +118 -111
- package/src/funding/paylater/index.js +1 -2
- package/src/funding/paypal/config.jsx +44 -46
- package/src/funding/paypal/index.js +1 -2
- package/src/funding/paypal/style.scoped.scss +80 -74
- package/src/funding/paypal/template.jsx +450 -354
- package/src/funding/payu/config.jsx +50 -39
- package/src/funding/payu/index.js +1 -1
- package/src/funding/satispay/config.jsx +50 -39
- package/src/funding/satispay/index.js +1 -1
- package/src/funding/sepa/config.jsx +19 -13
- package/src/funding/sepa/index.js +1 -2
- package/src/funding/sofort/config.jsx +48 -37
- package/src/funding/sofort/index.js +1 -2
- package/src/funding/trustly/config.jsx +50 -39
- package/src/funding/trustly/index.js +1 -2
- package/src/funding/venmo/config.jsx +80 -75
- package/src/funding/venmo/index.js +1 -2
- package/src/funding/venmo/style.scoped.scss +30 -32
- package/src/funding/venmo/template.jsx +56 -57
- package/src/funding/verkkopankki/config.jsx +50 -39
- package/src/funding/verkkopankki/index.js +1 -1
- package/src/funding/wechatpay/config.jsx +48 -37
- package/src/funding/wechatpay/index.js +1 -2
- package/src/funding/zimpler/config.jsx +19 -13
- package/src/funding/zimpler/index.js +1 -2
- package/src/interface/button.js +60 -44
- package/src/interface/card-fields.js +11 -8
- package/src/interface/fields.js +7 -4
- package/src/interface/marks.js +4 -4
- package/src/interface/payment-fields.js +7 -4
- package/src/interface/wallet.js +4 -4
- package/src/lib/errors.js +7 -7
- package/src/lib/index.js +5 -5
- package/src/lib/isRTLLanguage.js +3 -3
- package/src/lib/perceived-latency-instrumentation.js +54 -36
- package/src/lib/security.js +21 -17
- package/src/lib/session.js +39 -35
- package/src/marks/component.jsx +114 -65
- package/src/marks/index.js +1 -2
- package/src/marks/template.jsx +79 -65
- package/src/types.js +48 -48
- package/src/ui/buttons/button.jsx +311 -249
- package/src/ui/buttons/buttonDesigns/control.jsx +3 -5
- package/src/ui/buttons/buttonDesigns/divideLogoAnimation.jsx +127 -99
- package/src/ui/buttons/buttonDesigns/index.js +78 -75
- package/src/ui/buttons/buttonDesigns/inlineLogoTextDesign.jsx +102 -82
- package/src/ui/buttons/buttonDesigns/script.jsx +24 -18
- package/src/ui/buttons/buttonDesigns/types.js +6 -7
- package/src/ui/buttons/buttons.jsx +318 -212
- package/src/ui/buttons/config.js +62 -59
- package/src/ui/buttons/content.jsx +304 -119
- package/src/ui/buttons/index.js +1 -1
- package/src/ui/buttons/menu-button/index.js +1 -1
- package/src/ui/buttons/menu-button/menu-button.jsx +29 -22
- package/src/ui/buttons/menu-button/menu-button.scoped.scss +16 -17
- package/src/ui/buttons/poweredBy.jsx +23 -23
- package/src/ui/buttons/props.js +680 -529
- package/src/ui/buttons/script.jsx +182 -160
- package/src/ui/buttons/spinner.jsx +4 -6
- package/src/ui/buttons/style.jsx +15 -14
- package/src/ui/buttons/styles/base.js +24 -16
- package/src/ui/buttons/styles/button.js +24 -22
- package/src/ui/buttons/styles/color.js +118 -118
- package/src/ui/buttons/styles/custom.js +30 -24
- package/src/ui/buttons/styles/index.js +1 -1
- package/src/ui/buttons/styles/labels.js +17 -13
- package/src/ui/buttons/styles/page.js +3 -3
- package/src/ui/buttons/styles/responsive.js +226 -118
- package/src/ui/buttons/tagline.jsx +53 -54
- package/src/ui/chevron.jsx +27 -16
- package/src/ui/index.js +3 -3
- package/src/ui/loading.jsx +25 -18
- package/src/ui/text/index.js +1 -1
- package/src/ui/text/style.scoped.scss +25 -26
- package/src/ui/text/text.jsx +42 -20
- package/src/ui/tracking.jsx +18 -11
- package/src/zoid/buttons/component.jsx +836 -684
- package/src/zoid/buttons/container.jsx +140 -107
- package/src/zoid/buttons/index.js +1 -1
- package/src/zoid/buttons/prerender.jsx +84 -64
- package/src/zoid/buttons/util.js +355 -254
- package/src/zoid/card-fields/component.jsx +581 -549
- package/src/zoid/card-fields/index.js +1 -1
- package/src/zoid/card-fields/prerender.jsx +20 -17
- package/src/zoid/card-form/component.js +155 -141
- package/src/zoid/card-form/index.js +1 -1
- package/src/zoid/checkout/component.jsx +314 -282
- package/src/zoid/checkout/config.js +2 -2
- package/src/zoid/checkout/content.js +190 -154
- package/src/zoid/checkout/hacks.js +31 -28
- package/src/zoid/checkout/index.js +2 -2
- package/src/zoid/checkout/props.js +27 -33
- package/src/zoid/installments/component.jsx +83 -70
- package/src/zoid/installments/index.js +1 -1
- package/src/zoid/installments/props.js +1 -1
- package/src/zoid/menu/component.jsx +53 -48
- package/src/zoid/menu/index.js +1 -1
- package/src/zoid/menu/props.js +1 -3
- package/src/zoid/modal/component.jsx +119 -106
- package/src/zoid/modal/index.js +1 -1
- package/src/zoid/modal/props.js +1 -3
- package/src/zoid/payment-fields/component.jsx +215 -191
- package/src/zoid/payment-fields/container.jsx +73 -64
- package/src/zoid/payment-fields/index.js +1 -1
- package/src/zoid/payment-fields/prerender.jsx +16 -14
- package/src/zoid/payment-fields/props.js +6 -6
- package/src/zoid/qr-code/component.jsx +131 -115
- package/src/zoid/qr-code/container.jsx +74 -68
- package/src/zoid/qr-code/index.js +1 -1
- package/src/zoid/qr-code/prerender.jsx +17 -12
- package/src/zoid/qr-code/types.js +2 -2
- package/src/zoid/wallet/component.jsx +298 -260
- package/src/zoid/wallet/container.jsx +73 -64
- package/src/zoid/wallet/index.js +1 -1
- package/src/zoid/wallet/prerender.jsx +14 -14
- package/src/zoid/wallet/props.js +4 -4
- package/src/actions/save/index.js +0 -40
- package/src/interface/actions.js +0 -14
- package/src/lib/getLogoCDNExperiment.js +0 -25
package/src/ui/buttons/props.js
CHANGED
|
@@ -1,614 +1,718 @@
|
|
|
1
1
|
/* eslint-disable eslint-comments/disable-enable-pair */
|
|
2
2
|
/* @flow */
|
|
3
3
|
|
|
4
|
-
import { ZalgoPromise } from
|
|
5
|
-
import { values, uniqueID } from
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
import
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
4
|
+
import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
|
|
5
|
+
import { values, uniqueID } from "@krakenjs/belter/src";
|
|
6
|
+
import {
|
|
7
|
+
type OrderCreateRequest,
|
|
8
|
+
type FundingEligibilityType,
|
|
9
|
+
type OrderGetResponse,
|
|
10
|
+
type OrderCaptureResponse,
|
|
11
|
+
type OrderAuthorizeResponse,
|
|
12
|
+
} from "@paypal/sdk-client/src";
|
|
13
|
+
import {
|
|
14
|
+
CURRENCY,
|
|
15
|
+
FUNDING,
|
|
16
|
+
PLATFORM,
|
|
17
|
+
INTENT,
|
|
18
|
+
COMMIT,
|
|
19
|
+
VAULT,
|
|
20
|
+
ENV,
|
|
21
|
+
COUNTRY,
|
|
22
|
+
LANG,
|
|
23
|
+
COUNTRY_LANGS,
|
|
24
|
+
type LocaleType,
|
|
25
|
+
CARD,
|
|
26
|
+
COMPONENTS,
|
|
27
|
+
} from "@paypal/sdk-constants/src";
|
|
28
|
+
import { type CrossDomainWindowType } from "@krakenjs/cross-domain-utils/src";
|
|
29
|
+
import { LOGO_COLOR } from "@paypal/sdk-logos/src";
|
|
30
|
+
import { SUPPORTED_FUNDING_SOURCES } from "@paypal/funding-components/src";
|
|
31
|
+
import type { ComponentFunctionType } from "@krakenjs/jsx-pragmatic/src";
|
|
32
|
+
|
|
33
|
+
import type { ContentType, CustomStyle, Wallet, Experiment } from "../../types";
|
|
34
|
+
import {
|
|
35
|
+
BUTTON_LABEL,
|
|
36
|
+
BUTTON_COLOR,
|
|
37
|
+
BUTTON_LAYOUT,
|
|
38
|
+
BUTTON_SHAPE,
|
|
39
|
+
BUTTON_SIZE,
|
|
40
|
+
BUTTON_FLOW,
|
|
41
|
+
MENU_PLACEMENT,
|
|
42
|
+
} from "../../constants";
|
|
43
|
+
import { getFundingConfig, isFundingEligible } from "../../funding";
|
|
44
|
+
|
|
45
|
+
import { BUTTON_SIZE_STYLE } from "./config";
|
|
46
|
+
|
|
47
|
+
export type CreateOrderData = {||} | {||};
|
|
24
48
|
|
|
25
49
|
export type CreateOrderActions = {|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
50
|
+
order: {|
|
|
51
|
+
create: (OrderCreateRequest) => ZalgoPromise<string>,
|
|
52
|
+
|},
|
|
29
53
|
|};
|
|
30
54
|
|
|
31
|
-
export type CreateOrder = (
|
|
55
|
+
export type CreateOrder = (
|
|
56
|
+
CreateOrderData,
|
|
57
|
+
CreateOrderActions
|
|
58
|
+
) => ZalgoPromise<string> | string;
|
|
32
59
|
|
|
33
60
|
export type OnApproveData = {|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
61
|
+
orderID: string,
|
|
62
|
+
payerID: string,
|
|
63
|
+
paymentID?: string,
|
|
37
64
|
|};
|
|
38
65
|
|
|
39
66
|
export type OnCompleteData = {||};
|
|
40
67
|
|
|
41
68
|
export type CreateBillingAgreement = () => ZalgoPromise<string> | string;
|
|
42
69
|
|
|
70
|
+
export type CreateVaultSetupToken = () => ZalgoPromise<string>;
|
|
71
|
+
|
|
43
72
|
export type CreateSubscriptionRequest = {||};
|
|
44
73
|
export type SubscriptionResponse = {||} | {||};
|
|
45
|
-
export type CreateSubscriptionData = {|
|
|
46
|
-
|} | {||};
|
|
74
|
+
export type CreateSubscriptionData = {||} | {||};
|
|
47
75
|
|
|
48
76
|
export type CreateSubscriptionActions = {|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
77
|
+
subscription: {|
|
|
78
|
+
create: (CreateSubscriptionRequest) => ZalgoPromise<string>,
|
|
79
|
+
revise: (CreateSubscriptionRequest) => ZalgoPromise<string>,
|
|
80
|
+
|},
|
|
53
81
|
|};
|
|
54
82
|
|
|
55
|
-
export type CreateSubscription = (
|
|
83
|
+
export type CreateSubscription = (
|
|
84
|
+
CreateSubscriptionData,
|
|
85
|
+
CreateSubscriptionActions
|
|
86
|
+
) => ZalgoPromise<string> | string;
|
|
56
87
|
|
|
57
88
|
export type OnApproveActions = {|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
89
|
+
redirect: (string, CrossDomainWindowType) => ZalgoPromise<void>,
|
|
90
|
+
order: {|
|
|
91
|
+
capture: () => ZalgoPromise<OrderCaptureResponse>,
|
|
92
|
+
get: () => ZalgoPromise<OrderGetResponse>,
|
|
93
|
+
authorize: () => ZalgoPromise<OrderAuthorizeResponse>,
|
|
94
|
+
|},
|
|
95
|
+
subscription: {|
|
|
96
|
+
get: () => ZalgoPromise<SubscriptionResponse>,
|
|
97
|
+
activate: () => ZalgoPromise<SubscriptionResponse>,
|
|
98
|
+
|},
|
|
68
99
|
|};
|
|
69
100
|
|
|
70
101
|
export type OnCompleteActions = {|
|
|
71
|
-
|
|
102
|
+
redirect: (string, CrossDomainWindowType) => ZalgoPromise<void>,
|
|
72
103
|
|};
|
|
73
104
|
|
|
74
|
-
export type OnApprove = (
|
|
75
|
-
|
|
105
|
+
export type OnApprove = (
|
|
106
|
+
data: OnApproveData,
|
|
107
|
+
actions: OnApproveActions
|
|
108
|
+
) => ZalgoPromise<void> | void;
|
|
109
|
+
export type OnComplete = (
|
|
110
|
+
data: OnCompleteData,
|
|
111
|
+
actions: OnCompleteActions
|
|
112
|
+
) => ZalgoPromise<void> | void;
|
|
76
113
|
|
|
77
114
|
type OnShippingChangeAddress = {|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
115
|
+
city: string,
|
|
116
|
+
state: string,
|
|
117
|
+
country_code: string,
|
|
118
|
+
postal_code: string,
|
|
82
119
|
|};
|
|
83
120
|
|
|
84
121
|
type OnShippingChangeOption = {|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
122
|
+
id?: string,
|
|
123
|
+
label: string,
|
|
124
|
+
type: string,
|
|
125
|
+
amount: {|
|
|
126
|
+
currency_code: string,
|
|
127
|
+
value: string,
|
|
128
|
+
|},
|
|
92
129
|
|};
|
|
93
130
|
|
|
94
|
-
export type ON_SHIPPING_CHANGE_EVENT =
|
|
131
|
+
export type ON_SHIPPING_CHANGE_EVENT = "add" | "replace";
|
|
95
132
|
|
|
96
133
|
export type ShippingOption = {|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
134
|
+
id?: string,
|
|
135
|
+
label: string,
|
|
136
|
+
selected: boolean,
|
|
137
|
+
type: string,
|
|
138
|
+
amount: {|
|
|
139
|
+
currency_code: string,
|
|
140
|
+
value: string,
|
|
141
|
+
|},
|
|
105
142
|
|};
|
|
106
143
|
|
|
107
144
|
export type Query = {|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
145
|
+
op: ON_SHIPPING_CHANGE_EVENT,
|
|
146
|
+
path: string,
|
|
147
|
+
value: mixed,
|
|
111
148
|
|};
|
|
112
149
|
|
|
113
150
|
export type Breakdown = {|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
151
|
+
item_total?: {|
|
|
152
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
153
|
+
value: string,
|
|
154
|
+
|},
|
|
155
|
+
shipping?: {|
|
|
156
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
157
|
+
value: string,
|
|
158
|
+
|},
|
|
159
|
+
handling?: {|
|
|
160
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
161
|
+
value: string,
|
|
162
|
+
|},
|
|
163
|
+
tax_total?: {|
|
|
164
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
165
|
+
value: string,
|
|
166
|
+
|},
|
|
167
|
+
insurance?: {|
|
|
168
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
169
|
+
value: string,
|
|
170
|
+
|},
|
|
171
|
+
shipping_discount?: {|
|
|
172
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
173
|
+
value: string,
|
|
174
|
+
|},
|
|
175
|
+
discount?: {|
|
|
176
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
177
|
+
value: string,
|
|
178
|
+
|},
|
|
179
|
+
|};
|
|
180
|
+
|
|
181
|
+
export type ShippingAmount = {|
|
|
182
|
+
breakdown?: {|
|
|
183
|
+
item_total?: {|
|
|
184
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
185
|
+
value: string,
|
|
117
186
|
|},
|
|
118
|
-
shipping
|
|
119
|
-
|
|
120
|
-
|
|
187
|
+
shipping?: {|
|
|
188
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
189
|
+
value: string,
|
|
121
190
|
|},
|
|
122
|
-
handling
|
|
123
|
-
|
|
124
|
-
|
|
191
|
+
handling?: {|
|
|
192
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
193
|
+
value: string,
|
|
125
194
|
|},
|
|
126
|
-
tax_total
|
|
127
|
-
|
|
128
|
-
|
|
195
|
+
tax_total?: {|
|
|
196
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
197
|
+
value: string,
|
|
129
198
|
|},
|
|
130
|
-
insurance
|
|
131
|
-
|
|
132
|
-
|
|
199
|
+
insurance?: {|
|
|
200
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
201
|
+
value: string,
|
|
133
202
|
|},
|
|
134
|
-
shipping_discount
|
|
135
|
-
|
|
136
|
-
|
|
203
|
+
shipping_discount?: {|
|
|
204
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
205
|
+
value: string,
|
|
137
206
|
|},
|
|
138
|
-
discount
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|}
|
|
142
|
-
|};
|
|
143
|
-
|
|
144
|
-
export type ShippingAmount = {|
|
|
145
|
-
breakdown? : {|
|
|
146
|
-
item_total? : {|
|
|
147
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
148
|
-
value : string
|
|
149
|
-
|},
|
|
150
|
-
shipping? : {|
|
|
151
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
152
|
-
value : string
|
|
153
|
-
|},
|
|
154
|
-
handling? : {|
|
|
155
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
156
|
-
value : string
|
|
157
|
-
|},
|
|
158
|
-
tax_total? : {|
|
|
159
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
160
|
-
value : string
|
|
161
|
-
|},
|
|
162
|
-
insurance? : {|
|
|
163
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
164
|
-
value : string
|
|
165
|
-
|},
|
|
166
|
-
shipping_discount? : {|
|
|
167
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
168
|
-
value : string
|
|
169
|
-
|},
|
|
170
|
-
discount? : {|
|
|
171
|
-
currency_code : $Values<typeof CURRENCY>,
|
|
172
|
-
value : string
|
|
173
|
-
|}
|
|
207
|
+
discount?: {|
|
|
208
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
209
|
+
value: string,
|
|
174
210
|
|},
|
|
175
|
-
|
|
176
|
-
|
|
211
|
+
|},
|
|
212
|
+
currency_code: $Values<typeof CURRENCY>,
|
|
213
|
+
value: string,
|
|
177
214
|
|};
|
|
178
215
|
|
|
179
216
|
export type OnShippingChangeData = {|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
217
|
+
orderID: string,
|
|
218
|
+
payerID: string,
|
|
219
|
+
paymentID?: string,
|
|
220
|
+
shipping_address: OnShippingChangeAddress,
|
|
221
|
+
selected_shipping_option: OnShippingChangeOption,
|
|
222
|
+
amount?: ShippingAmount,
|
|
186
223
|
|};
|
|
187
224
|
|
|
188
225
|
export type OnShippingChangeActions = {|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
226
|
+
order: {|
|
|
227
|
+
patch: () => ZalgoPromise<OrderGetResponse>,
|
|
228
|
+
|},
|
|
192
229
|
|};
|
|
193
230
|
|
|
194
|
-
export type OnShippingChange = (
|
|
231
|
+
export type OnShippingChange = (
|
|
232
|
+
data: OnShippingChangeData,
|
|
233
|
+
actions: OnShippingChangeActions
|
|
234
|
+
) => ZalgoPromise<void> | void;
|
|
195
235
|
|
|
196
236
|
export type OnShippingAddressChangeData = {|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
237
|
+
orderID: string,
|
|
238
|
+
payerID?: string,
|
|
239
|
+
paymentID?: string,
|
|
240
|
+
amount?: ShippingAmount,
|
|
241
|
+
event?: ON_SHIPPING_CHANGE_EVENT,
|
|
242
|
+
shipping_address: OnShippingChangeAddress,
|
|
203
243
|
|};
|
|
204
244
|
|
|
205
245
|
export type OnShippingAddressChangeActions = {|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
|
212
|
-
|
|
213
|
-
|
|
246
|
+
patch: () => ZalgoPromise<OrderGetResponse>,
|
|
247
|
+
query: () => $ReadOnlyArray<Query>,
|
|
248
|
+
updateShippingDiscount: ({|
|
|
249
|
+
discountAmount: string,
|
|
250
|
+
|}) => ZalgoPromise<void> | void,
|
|
251
|
+
updateShippingOptions: ({|
|
|
252
|
+
shippingOptions: $ReadOnlyArray<ShippingOption>,
|
|
253
|
+
|}) => ZalgoPromise<void> | void,
|
|
254
|
+
updateTax: {| taxAmount: string |},
|
|
255
|
+
|};
|
|
256
|
+
|
|
257
|
+
export type OnShippingAddressChange = (
|
|
258
|
+
data: OnShippingAddressChangeData,
|
|
259
|
+
actions: OnShippingAddressChangeActions
|
|
260
|
+
) => ZalgoPromise<void> | void;
|
|
214
261
|
|
|
215
262
|
export type OnShippingOptionsChangeData = {|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
263
|
+
orderID: string,
|
|
264
|
+
payerID: string,
|
|
265
|
+
paymentID?: string,
|
|
266
|
+
selected_shipping_option: OnShippingChangeOption,
|
|
220
267
|
|};
|
|
221
268
|
export type OnShippingOptionsChangeActions = {|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
|
228
|
-
|
|
229
|
-
|
|
269
|
+
patch: () => ZalgoPromise<OrderGetResponse>,
|
|
270
|
+
query: () => string,
|
|
271
|
+
updateShippingDiscount: ({|
|
|
272
|
+
discountAmount: string,
|
|
273
|
+
|}) => ZalgoPromise<void> | void,
|
|
274
|
+
updateShippingOptions: ({|
|
|
275
|
+
shippingOptions: $ReadOnlyArray<ShippingOption>,
|
|
276
|
+
|}) => ZalgoPromise<void> | void,
|
|
277
|
+
updateTax: {| taxAmount: string |},
|
|
278
|
+
|};
|
|
279
|
+
|
|
280
|
+
export type OnShippingOptionsChange = (
|
|
281
|
+
data: OnShippingOptionsChangeData,
|
|
282
|
+
actions: OnShippingOptionsChangeActions
|
|
283
|
+
) => ZalgoPromise<void> | void;
|
|
230
284
|
|
|
231
285
|
export type OnCancelData = {|
|
|
232
|
-
|
|
233
|
-
|
|
286
|
+
orderID: string,
|
|
287
|
+
paymentID?: string,
|
|
234
288
|
|};
|
|
235
289
|
|
|
236
290
|
export type OnCancelActions = {|
|
|
237
|
-
|
|
291
|
+
redirect: (string, CrossDomainWindowType) => ZalgoPromise<void>,
|
|
238
292
|
|};
|
|
239
293
|
|
|
240
|
-
export type OnCancel = (
|
|
294
|
+
export type OnCancel = (
|
|
295
|
+
OnCancelData,
|
|
296
|
+
OnCancelActions
|
|
297
|
+
) => ZalgoPromise<void> | void;
|
|
241
298
|
|
|
242
299
|
export type OnClickData = {|
|
|
243
|
-
|
|
244
|
-
|
|
300
|
+
fundingSource: $Values<typeof FUNDING>,
|
|
301
|
+
card?: $Values<typeof CARD>,
|
|
245
302
|
|};
|
|
246
303
|
|
|
247
304
|
export type OnClickActions = {|
|
|
248
|
-
|
|
249
|
-
|
|
305
|
+
resolve: () => ZalgoPromise<void>,
|
|
306
|
+
reject: () => ZalgoPromise<void>,
|
|
250
307
|
|};
|
|
251
308
|
|
|
252
309
|
export type OnClick = (OnClickData, OnClickActions) => void;
|
|
253
310
|
|
|
254
311
|
export type ButtonStyle = {|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
312
|
+
label: $Values<typeof BUTTON_LABEL> | void,
|
|
313
|
+
color: $Values<typeof BUTTON_COLOR>,
|
|
314
|
+
shape: $Values<typeof BUTTON_SHAPE>,
|
|
315
|
+
tagline: boolean,
|
|
316
|
+
layout: $Values<typeof BUTTON_LAYOUT>,
|
|
317
|
+
menuPlacement: $Values<typeof MENU_PLACEMENT>,
|
|
318
|
+
period?: number,
|
|
319
|
+
height?: number,
|
|
320
|
+
custom?: ?CustomStyle,
|
|
264
321
|
|};
|
|
265
322
|
|
|
266
323
|
export type ButtonStyleInputs = {|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
324
|
+
label?: $Values<typeof BUTTON_LABEL> | void,
|
|
325
|
+
color?: $Values<typeof BUTTON_COLOR> | void,
|
|
326
|
+
shape?: $Values<typeof BUTTON_SHAPE> | void,
|
|
327
|
+
tagline?: boolean | void,
|
|
328
|
+
layout?: $Values<typeof BUTTON_LAYOUT> | void,
|
|
329
|
+
period?: number | void,
|
|
330
|
+
height?: number | void,
|
|
331
|
+
custom?: ?CustomStyle,
|
|
275
332
|
|};
|
|
276
333
|
|
|
277
334
|
type PersonalizationComponentProps = {|
|
|
278
|
-
|
|
279
|
-
|
|
335
|
+
logoColor: $Values<typeof LOGO_COLOR>,
|
|
336
|
+
period: ?number,
|
|
280
337
|
|};
|
|
281
338
|
|
|
282
339
|
export type Personalization = {|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
340
|
+
buttonText?: {|
|
|
341
|
+
text: string,
|
|
342
|
+
Component: ?ComponentFunctionType<PersonalizationComponentProps>,
|
|
343
|
+
tracking: {|
|
|
344
|
+
impression: string,
|
|
345
|
+
click: string,
|
|
346
|
+
|},
|
|
347
|
+
|},
|
|
348
|
+
tagline?: {|
|
|
349
|
+
text: string,
|
|
350
|
+
Component: ?ComponentFunctionType<PersonalizationComponentProps>,
|
|
351
|
+
tracking: {|
|
|
352
|
+
impression: string,
|
|
353
|
+
click: string,
|
|
290
354
|
|},
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
355
|
+
|},
|
|
356
|
+
buttonDesign?: {|
|
|
357
|
+
id: string,
|
|
358
|
+
text: string,
|
|
359
|
+
tracking: {|
|
|
360
|
+
impression: string,
|
|
361
|
+
click: string,
|
|
298
362
|
|},
|
|
299
|
-
|
|
300
|
-
id : string,
|
|
301
|
-
text : string,
|
|
302
|
-
tracking : {|
|
|
303
|
-
impression : string,
|
|
304
|
-
click : string
|
|
305
|
-
|}
|
|
306
|
-
|}
|
|
363
|
+
|},
|
|
307
364
|
|};
|
|
308
365
|
|
|
309
366
|
// https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerror/2970147-applepayerror
|
|
310
367
|
export type ApplePayError = {|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
368
|
+
code: string, // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerrorcode
|
|
369
|
+
contactField: string, // https://developer.apple.com/documentation/apple_pay_on_the_web/applepayerrorcontactfield
|
|
370
|
+
message: string, // custom error message
|
|
314
371
|
|};
|
|
315
372
|
|
|
316
373
|
export type ApplePayLineItem = {|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
374
|
+
type?: string, // 'final' | 'pending'
|
|
375
|
+
label?: string,
|
|
376
|
+
amount?: string,
|
|
320
377
|
|};
|
|
321
378
|
|
|
322
379
|
export type ApplePayShippingMethod = {|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
380
|
+
label: string,
|
|
381
|
+
detail: string,
|
|
382
|
+
amount: string,
|
|
383
|
+
identifier: string,
|
|
327
384
|
|};
|
|
328
385
|
|
|
329
386
|
export type ApplePayShippingContactUpdate = {|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
387
|
+
errors?: $ReadOnlyArray<ApplePayError>,
|
|
388
|
+
newShippingMethods?: $ReadOnlyArray<ApplePayShippingMethod>,
|
|
389
|
+
newTotal: ApplePayLineItem,
|
|
390
|
+
newLineItems?: $ReadOnlyArray<ApplePayLineItem>,
|
|
334
391
|
|};
|
|
335
392
|
|
|
336
393
|
export type ApplePayPaymentMethodUpdate = {|
|
|
337
|
-
|
|
338
|
-
|
|
394
|
+
newTotal: ApplePayLineItem,
|
|
395
|
+
newLineItems?: $ReadOnlyArray<ApplePayLineItem>,
|
|
339
396
|
|};
|
|
340
397
|
|
|
341
398
|
export type ApplePayShippingMethodUpdate = {|
|
|
342
|
-
|
|
343
|
-
|
|
399
|
+
newTotal: ApplePayLineItem,
|
|
400
|
+
newLineItems?: $ReadOnlyArray<ApplePayLineItem>,
|
|
344
401
|
|};
|
|
345
402
|
|
|
346
403
|
export type ApplePayPaymentAuthorizationResult = {|
|
|
347
|
-
|
|
348
|
-
|
|
404
|
+
status: number,
|
|
405
|
+
errors?: $ReadOnlyArray<ApplePayError>,
|
|
349
406
|
|};
|
|
350
407
|
|
|
351
408
|
export type ApplePaySessionConfig = {|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|}
|
|
362
|
-
|
|
363
|
-
|
|
409
|
+
begin: () => void,
|
|
410
|
+
abort: () => void,
|
|
411
|
+
addEventListener: (string, Function) => void,
|
|
412
|
+
// eslint-disable-next-line flowtype/no-weak-types
|
|
413
|
+
completeMerchantValidation: (validatedSession: any) => void,
|
|
414
|
+
completeShippingMethodSelection: (
|
|
415
|
+
update: ApplePayShippingMethodUpdate | {||}
|
|
416
|
+
) => void,
|
|
417
|
+
completeShippingContactSelection: (
|
|
418
|
+
update: ApplePayShippingContactUpdate | {||}
|
|
419
|
+
) => void,
|
|
420
|
+
completePaymentMethodSelection: (
|
|
421
|
+
update: ApplePayPaymentMethodUpdate | {||}
|
|
422
|
+
) => void,
|
|
423
|
+
completePayment: (result: ApplePayPaymentAuthorizationResult) => void,
|
|
424
|
+
|};
|
|
425
|
+
|
|
426
|
+
export type ApplePaySessionConfigRequest = (
|
|
427
|
+
version: number,
|
|
428
|
+
request: Object
|
|
429
|
+
) => ApplePaySessionConfig;
|
|
364
430
|
|
|
365
431
|
export type RenderButtonProps = {|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
432
|
+
style: ButtonStyle,
|
|
433
|
+
locale: LocaleType,
|
|
434
|
+
commit: boolean,
|
|
435
|
+
fundingSource: ?$Values<typeof FUNDING>,
|
|
436
|
+
env: $Values<typeof ENV>,
|
|
437
|
+
stage?: string,
|
|
438
|
+
stageUrl?: string,
|
|
439
|
+
platform: $Values<typeof PLATFORM>,
|
|
440
|
+
fundingEligibility: FundingEligibilityType,
|
|
441
|
+
wallet: ?Wallet,
|
|
442
|
+
remembered: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
443
|
+
clientID: string,
|
|
444
|
+
sessionID: string,
|
|
445
|
+
buttonSessionID: string,
|
|
446
|
+
nonce: string,
|
|
447
|
+
components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
|
|
448
|
+
onShippingChange: ?OnShippingChange,
|
|
449
|
+
onShippingAddressChange: ?OnShippingAddressChange,
|
|
450
|
+
onShippingOptionsChange: ?OnShippingOptionsChange,
|
|
451
|
+
personalization: ?Personalization,
|
|
452
|
+
clientAccessToken: ?string,
|
|
453
|
+
content?: ContentType,
|
|
454
|
+
flow: $Values<typeof BUTTON_FLOW>,
|
|
455
|
+
experiment: Experiment,
|
|
456
|
+
vault: boolean,
|
|
457
|
+
userIDToken: ?string,
|
|
458
|
+
applePay: ApplePaySessionConfigRequest,
|
|
459
|
+
applePaySupport: boolean,
|
|
460
|
+
supportsPopups: boolean,
|
|
461
|
+
supportedNativeBrowser: boolean,
|
|
462
|
+
experience: string,
|
|
463
|
+
showPayLabel: boolean,
|
|
398
464
|
|};
|
|
399
465
|
|
|
400
466
|
export type PrerenderDetails = {|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
467
|
+
win: ?CrossDomainWindowType,
|
|
468
|
+
fundingSource: $Values<typeof FUNDING>,
|
|
469
|
+
card: ?$Values<typeof CARD>,
|
|
404
470
|
|};
|
|
405
471
|
|
|
406
472
|
export type GetPrerenderDetails = () => PrerenderDetails | void;
|
|
407
473
|
|
|
408
474
|
export type ButtonProps = {|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
475
|
+
fundingSource?: ?$Values<typeof FUNDING>,
|
|
476
|
+
intent: $Values<typeof INTENT>,
|
|
477
|
+
createOrder: CreateOrder,
|
|
478
|
+
createBillingAgreement: CreateBillingAgreement,
|
|
479
|
+
createSubscription: CreateSubscription,
|
|
480
|
+
currency: string,
|
|
481
|
+
disableFunding?: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
482
|
+
oncancel: OnCancel,
|
|
483
|
+
onApprove: OnApprove,
|
|
484
|
+
onComplete: OnComplete,
|
|
485
|
+
onClick: OnClick,
|
|
486
|
+
getPrerenderDetails: GetPrerenderDetails,
|
|
487
|
+
style: ButtonStyle,
|
|
488
|
+
locale: LocaleType,
|
|
489
|
+
commit: boolean,
|
|
490
|
+
env: $Values<typeof ENV>,
|
|
491
|
+
stage?: string,
|
|
492
|
+
stageUrl?: string,
|
|
493
|
+
platform: $Values<typeof PLATFORM>,
|
|
494
|
+
fundingEligibility: FundingEligibilityType,
|
|
495
|
+
remembered: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
496
|
+
remember: ($ReadOnlyArray<$Values<typeof FUNDING>>) => void,
|
|
497
|
+
clientID: string,
|
|
498
|
+
sessionID: string,
|
|
499
|
+
buttonLocation: string,
|
|
500
|
+
buttonSessionID: string,
|
|
501
|
+
onShippingChange: ?OnShippingChange,
|
|
502
|
+
onShippingAddressChange: ?OnShippingAddressChange,
|
|
503
|
+
onShippingOptionsChange: ?OnShippingOptionsChange,
|
|
504
|
+
clientAccessToken?: ?string,
|
|
505
|
+
nonce: string,
|
|
506
|
+
merchantID?: $ReadOnlyArray<string>,
|
|
507
|
+
merchantRequestedPopupsDisabled: ?boolean,
|
|
508
|
+
userIDToken: ?string,
|
|
509
|
+
flow: $Values<typeof BUTTON_FLOW>,
|
|
510
|
+
experiment: Experiment,
|
|
511
|
+
vault: boolean,
|
|
512
|
+
components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
|
|
513
|
+
supportsPopups: boolean,
|
|
514
|
+
supportedNativeBrowser: boolean,
|
|
515
|
+
applePaySupport: boolean,
|
|
516
|
+
applePay: ApplePaySessionConfigRequest,
|
|
517
|
+
meta: {||},
|
|
518
|
+
renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
519
|
+
experience: string,
|
|
520
|
+
createVaultSetupToken: CreateVaultSetupToken,
|
|
454
521
|
|};
|
|
455
522
|
|
|
456
523
|
// eslint-disable-next-line flowtype/require-exact-type
|
|
457
524
|
export type ButtonPropsInputs = {
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
525
|
+
clientID: string,
|
|
526
|
+
fundingSource?: ?$Values<typeof FUNDING>,
|
|
527
|
+
style?: ButtonStyleInputs | void,
|
|
528
|
+
locale?: $PropertyType<ButtonProps, "locale"> | void,
|
|
529
|
+
commit?: $PropertyType<ButtonProps, "commit"> | void,
|
|
530
|
+
env?: $PropertyType<ButtonProps, "env"> | void,
|
|
531
|
+
meta?: $PropertyType<ButtonProps, "meta"> | void,
|
|
532
|
+
stage?: $PropertyType<ButtonProps, "stage"> | void,
|
|
533
|
+
stageUrl?: $PropertyType<ButtonProps, "stageUrl"> | void,
|
|
534
|
+
platform?: $PropertyType<ButtonProps, "platform"> | void,
|
|
535
|
+
fundingEligibility?: $PropertyType<ButtonProps, "fundingEligibility"> | void,
|
|
536
|
+
remembered?: $PropertyType<ButtonProps, "remembered"> | void,
|
|
537
|
+
remember?: $PropertyType<ButtonProps, "remember"> | void,
|
|
538
|
+
sessionID?: $PropertyType<ButtonProps, "sessionID"> | void,
|
|
539
|
+
buttonSessionID?: $PropertyType<ButtonProps, "buttonSessionID"> | void,
|
|
540
|
+
nonce: string,
|
|
541
|
+
components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
|
|
542
|
+
onShippingChange: ?Function,
|
|
543
|
+
onShippingAddressChange: ?Function,
|
|
544
|
+
onShippingOptionsChange: ?Function,
|
|
545
|
+
personalization?: Personalization,
|
|
546
|
+
clientAccessToken?: ?string,
|
|
547
|
+
wallet?: ?Wallet,
|
|
548
|
+
csp: {|
|
|
549
|
+
nonce: string,
|
|
550
|
+
|},
|
|
551
|
+
content?: ContentType,
|
|
552
|
+
flow?: $Values<typeof BUTTON_FLOW>,
|
|
553
|
+
experiment: Experiment,
|
|
554
|
+
vault: boolean,
|
|
555
|
+
userIDToken: ?string,
|
|
556
|
+
applePay: ApplePaySessionConfigRequest,
|
|
557
|
+
applePaySupport: boolean,
|
|
558
|
+
supportsPopups: boolean,
|
|
559
|
+
supportedNativeBrowser: boolean,
|
|
560
|
+
experience: string,
|
|
561
|
+
showPayLabel: boolean,
|
|
495
562
|
};
|
|
496
563
|
|
|
497
564
|
export const DEFAULT_STYLE = {
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
565
|
+
LAYOUT: BUTTON_LAYOUT.VERTICAL,
|
|
566
|
+
COLOR: BUTTON_COLOR.GOLD,
|
|
567
|
+
SHAPE: BUTTON_SHAPE.RECT,
|
|
501
568
|
};
|
|
502
569
|
|
|
503
570
|
export const DEFAULT_PROPS = {
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
571
|
+
LOCALE: {
|
|
572
|
+
country: COUNTRY.US,
|
|
573
|
+
lang: LANG.EN,
|
|
574
|
+
},
|
|
575
|
+
COMMIT: COMMIT.TRUE,
|
|
576
|
+
VAULT: VAULT.FALSE,
|
|
577
|
+
INTENT: INTENT.CAPTURE,
|
|
578
|
+
ENV: ENV.PRODUCTION,
|
|
579
|
+
PLATFORM: PLATFORM.DESKTOP,
|
|
513
580
|
};
|
|
514
581
|
|
|
515
|
-
const getDefaultButtonPropsInput = ()
|
|
516
|
-
|
|
582
|
+
const getDefaultButtonPropsInput = (): ButtonPropsInputs => {
|
|
583
|
+
return {};
|
|
517
584
|
};
|
|
518
585
|
|
|
519
|
-
export function normalizeButtonStyle(
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
586
|
+
export function normalizeButtonStyle(
|
|
587
|
+
props: ?ButtonPropsInputs,
|
|
588
|
+
style: ButtonStyleInputs
|
|
589
|
+
): ButtonStyle {
|
|
590
|
+
if (!style) {
|
|
591
|
+
throw new Error(`Expected props.style to be set`);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
props = props || getDefaultButtonPropsInput();
|
|
595
|
+
const { fundingSource } = props;
|
|
596
|
+
|
|
597
|
+
const FUNDING_CONFIG = getFundingConfig();
|
|
598
|
+
const fundingConfig =
|
|
599
|
+
FUNDING_CONFIG[fundingSource || FUNDING.PAYPAL] ||
|
|
600
|
+
FUNDING_CONFIG[FUNDING.PAYPAL];
|
|
601
|
+
|
|
602
|
+
if (!fundingConfig) {
|
|
603
|
+
throw new Error(
|
|
604
|
+
`Expected ${fundingSource || FUNDING.PAYPAL} to be eligible`
|
|
605
|
+
);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
let {
|
|
609
|
+
label,
|
|
610
|
+
layout = fundingSource
|
|
611
|
+
? BUTTON_LAYOUT.HORIZONTAL
|
|
612
|
+
: fundingConfig.layouts[0],
|
|
613
|
+
shape = fundingConfig.shapes[0],
|
|
614
|
+
tagline = layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource,
|
|
615
|
+
height,
|
|
616
|
+
period,
|
|
617
|
+
menuPlacement = MENU_PLACEMENT.BELOW,
|
|
618
|
+
custom,
|
|
619
|
+
} = style;
|
|
620
|
+
|
|
621
|
+
// $FlowFixMe
|
|
622
|
+
if (tagline === "false") {
|
|
546
623
|
// $FlowFixMe
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
624
|
+
tagline = false;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
// if color is a falsy value, set it to the default color from the funding config
|
|
628
|
+
const color = style.color ? style.color : fundingConfig.colors[0];
|
|
629
|
+
|
|
630
|
+
if (values(BUTTON_LAYOUT).indexOf(layout) === -1) {
|
|
631
|
+
throw new Error(`Invalid layout: ${layout}`);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
if (label && values(BUTTON_LABEL).indexOf(label) === -1) {
|
|
635
|
+
throw new Error(`Invalid label: ${label}`);
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
if (color && fundingConfig.colors.indexOf(color) === -1) {
|
|
639
|
+
throw new Error(
|
|
640
|
+
`Unexpected style.color for ${
|
|
641
|
+
fundingSource || FUNDING.PAYPAL
|
|
642
|
+
} button: ${color}, expected ${fundingConfig.colors.join(", ")}`
|
|
643
|
+
);
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
if (shape && fundingConfig.shapes.indexOf(shape) === -1) {
|
|
647
|
+
throw new Error(
|
|
648
|
+
`Unexpected style.shape for ${
|
|
649
|
+
fundingSource || FUNDING.PAYPAL
|
|
650
|
+
} button: ${shape}, expected ${fundingConfig.shapes.join(", ")}`
|
|
651
|
+
);
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
if (height !== undefined) {
|
|
655
|
+
if (typeof height !== "number") {
|
|
656
|
+
throw new TypeError(
|
|
657
|
+
`Expected style.height to be a number, got: ${height}`
|
|
658
|
+
);
|
|
550
659
|
}
|
|
551
660
|
|
|
552
|
-
|
|
553
|
-
|
|
661
|
+
const [minHeight, maxHeight] = [
|
|
662
|
+
BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL].minHeight,
|
|
663
|
+
BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE].maxHeight,
|
|
664
|
+
];
|
|
554
665
|
|
|
555
|
-
if (
|
|
556
|
-
|
|
666
|
+
if (height < minHeight || height > maxHeight) {
|
|
667
|
+
throw new Error(
|
|
668
|
+
`Expected style.height to be between ${minHeight}px and ${maxHeight}px - got ${height}px`
|
|
669
|
+
);
|
|
557
670
|
}
|
|
671
|
+
}
|
|
558
672
|
|
|
559
|
-
|
|
560
|
-
|
|
673
|
+
if (layout === BUTTON_LAYOUT.VERTICAL) {
|
|
674
|
+
if (tagline) {
|
|
675
|
+
throw new Error(
|
|
676
|
+
`style.tagline is not allowed for ${BUTTON_LAYOUT.VERTICAL} layout`
|
|
677
|
+
);
|
|
561
678
|
}
|
|
679
|
+
}
|
|
562
680
|
|
|
563
|
-
|
|
564
|
-
|
|
681
|
+
if (custom) {
|
|
682
|
+
if (custom.label && typeof custom.label !== "string") {
|
|
683
|
+
throw new Error(`style.custom.label is expected to be a String.`);
|
|
565
684
|
}
|
|
566
685
|
|
|
567
|
-
if (
|
|
568
|
-
|
|
686
|
+
if (custom.css && typeof custom.css !== "object") {
|
|
687
|
+
throw new Error(`style.custom.css is expected to be JSON.`);
|
|
569
688
|
}
|
|
570
689
|
|
|
571
|
-
if (
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
const [ minHeight, maxHeight ] = [ BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL].minHeight, BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE].maxHeight ];
|
|
577
|
-
|
|
578
|
-
if (height < minHeight || height > maxHeight) {
|
|
579
|
-
throw new Error(`Expected style.height to be between ${ minHeight }px and ${ maxHeight }px - got ${ height }px`);
|
|
580
|
-
}
|
|
690
|
+
if (custom.css && custom.label && custom.label.length === 0) {
|
|
691
|
+
throw new Error(
|
|
692
|
+
`Expected style.custom.label to be used with style.custom.css`
|
|
693
|
+
);
|
|
581
694
|
}
|
|
582
695
|
|
|
583
|
-
if (
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
696
|
+
if (custom.label && custom.label.length > 0 && !custom.css) {
|
|
697
|
+
custom.css = {
|
|
698
|
+
"background-color": "black",
|
|
699
|
+
height: "48px",
|
|
700
|
+
"margin-bottom": "15px",
|
|
701
|
+
};
|
|
587
702
|
}
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
if (custom.label && custom.label.length > 0 && !custom.css) {
|
|
603
|
-
custom.css = {
|
|
604
|
-
'background-color': 'black',
|
|
605
|
-
'height': '48px',
|
|
606
|
-
'margin-bottom': '15px'
|
|
607
|
-
}
|
|
608
|
-
}
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
return { custom, label, layout, color, shape, tagline, height, period, menuPlacement };
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
return {
|
|
706
|
+
custom,
|
|
707
|
+
label,
|
|
708
|
+
layout,
|
|
709
|
+
color,
|
|
710
|
+
shape,
|
|
711
|
+
tagline,
|
|
712
|
+
height,
|
|
713
|
+
period,
|
|
714
|
+
menuPlacement,
|
|
715
|
+
};
|
|
612
716
|
}
|
|
613
717
|
|
|
614
718
|
const COUNTRIES = values(COUNTRY);
|
|
@@ -616,94 +720,141 @@ const FUNDING_SOURCES = values(FUNDING);
|
|
|
616
720
|
const ENVS = values(ENV);
|
|
617
721
|
const PLATFORMS = values(PLATFORM);
|
|
618
722
|
|
|
619
|
-
const getDefaultStyle = ()
|
|
620
|
-
|
|
621
|
-
|
|
723
|
+
const getDefaultStyle = (): ButtonStyleInputs => {
|
|
724
|
+
// $FlowFixMe
|
|
725
|
+
return {};
|
|
622
726
|
};
|
|
623
727
|
|
|
624
|
-
const getDefaultExperiment = ()
|
|
625
|
-
|
|
626
|
-
|
|
728
|
+
const getDefaultExperiment = (): Experiment => {
|
|
729
|
+
// $FlowFixMe
|
|
730
|
+
return {};
|
|
627
731
|
};
|
|
628
732
|
|
|
629
|
-
export function normalizeButtonProps(
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
733
|
+
export function normalizeButtonProps(
|
|
734
|
+
props: ?ButtonPropsInputs
|
|
735
|
+
): RenderButtonProps {
|
|
736
|
+
if (!props) {
|
|
737
|
+
throw new Error(`Expected props`);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
let {
|
|
741
|
+
clientID,
|
|
742
|
+
fundingSource,
|
|
743
|
+
style = getDefaultStyle(),
|
|
744
|
+
remembered = [],
|
|
745
|
+
locale = DEFAULT_PROPS.LOCALE,
|
|
746
|
+
env = DEFAULT_PROPS.ENV,
|
|
747
|
+
platform = DEFAULT_PROPS.PLATFORM,
|
|
748
|
+
commit = DEFAULT_PROPS.COMMIT,
|
|
749
|
+
fundingEligibility,
|
|
750
|
+
sessionID = uniqueID(),
|
|
751
|
+
buttonSessionID = uniqueID(),
|
|
752
|
+
components = [COMPONENTS.BUTTONS],
|
|
753
|
+
nonce,
|
|
754
|
+
onShippingChange,
|
|
755
|
+
onShippingAddressChange,
|
|
756
|
+
onShippingOptionsChange,
|
|
757
|
+
personalization,
|
|
758
|
+
clientAccessToken,
|
|
759
|
+
content,
|
|
760
|
+
wallet,
|
|
761
|
+
flow = BUTTON_FLOW.PURCHASE,
|
|
762
|
+
experiment = getDefaultExperiment(),
|
|
763
|
+
vault,
|
|
764
|
+
userIDToken,
|
|
765
|
+
applePay,
|
|
766
|
+
applePaySupport = false,
|
|
767
|
+
supportsPopups = false,
|
|
768
|
+
supportedNativeBrowser = false,
|
|
769
|
+
experience = "",
|
|
770
|
+
showPayLabel = true,
|
|
771
|
+
} = props;
|
|
772
|
+
|
|
773
|
+
const { country, lang } = locale;
|
|
774
|
+
|
|
775
|
+
if (!country || COUNTRIES.indexOf(country) === -1) {
|
|
776
|
+
throw new Error(`Expected valid country, got ${country || "undefined"}`);
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
if (!lang || COUNTRY_LANGS[country].indexOf(lang) === -1) {
|
|
780
|
+
throw new Error(`Expected valid lang, got ${lang || "undefined"}`);
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
if (remembered.some((source) => FUNDING_SOURCES.indexOf(source) === -1)) {
|
|
784
|
+
throw new Error(
|
|
785
|
+
`Expected valid funding sources, got ${JSON.stringify(remembered)}`
|
|
786
|
+
);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
if (ENVS.indexOf(env) === -1) {
|
|
790
|
+
throw new Error(`Expected valid env, got ${env || "undefined"}`);
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
if (!fundingEligibility) {
|
|
794
|
+
throw new Error(`Expected fundingEligibility`);
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
if (PLATFORMS.indexOf(platform) === -1) {
|
|
798
|
+
throw new Error(`Expected valid platform, got ${platform || "undefined"}`);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
if (fundingSource) {
|
|
802
|
+
if (SUPPORTED_FUNDING_SOURCES.indexOf(fundingSource) === -1) {
|
|
803
|
+
throw new Error(`Invalid funding source: ${fundingSource}`);
|
|
633
804
|
}
|
|
634
805
|
|
|
635
|
-
|
|
636
|
-
|
|
806
|
+
if (
|
|
807
|
+
!isFundingEligible(fundingSource, {
|
|
808
|
+
platform,
|
|
637
809
|
fundingSource,
|
|
638
|
-
style = getDefaultStyle(),
|
|
639
|
-
remembered = [],
|
|
640
|
-
locale = DEFAULT_PROPS.LOCALE,
|
|
641
|
-
env = DEFAULT_PROPS.ENV,
|
|
642
|
-
platform = DEFAULT_PROPS.PLATFORM,
|
|
643
|
-
commit = DEFAULT_PROPS.COMMIT,
|
|
644
810
|
fundingEligibility,
|
|
645
|
-
|
|
646
|
-
buttonSessionID = uniqueID(),
|
|
647
|
-
components = [ COMPONENTS.BUTTONS ],
|
|
648
|
-
nonce,
|
|
811
|
+
components,
|
|
649
812
|
onShippingChange,
|
|
650
813
|
onShippingAddressChange,
|
|
651
814
|
onShippingOptionsChange,
|
|
652
|
-
personalization,
|
|
653
|
-
clientAccessToken,
|
|
654
|
-
content,
|
|
655
815
|
wallet,
|
|
656
|
-
flow
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
supportedNativeBrowser = false,
|
|
664
|
-
experience = '',
|
|
665
|
-
showPayLabel = true
|
|
666
|
-
} = props;
|
|
667
|
-
|
|
668
|
-
const { country, lang } = locale;
|
|
669
|
-
|
|
670
|
-
if (!country || COUNTRIES.indexOf(country) === -1) {
|
|
671
|
-
throw new Error(`Expected valid country, got ${ country || 'undefined' }`);
|
|
816
|
+
flow,
|
|
817
|
+
applePaySupport,
|
|
818
|
+
supportsPopups,
|
|
819
|
+
supportedNativeBrowser,
|
|
820
|
+
})
|
|
821
|
+
) {
|
|
822
|
+
throw new Error(`Funding Source not eligible: ${fundingSource}`);
|
|
672
823
|
}
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
style = normalizeButtonStyle(props, style);
|
|
827
|
+
|
|
828
|
+
return {
|
|
829
|
+
clientID,
|
|
830
|
+
fundingSource,
|
|
831
|
+
style,
|
|
832
|
+
locale,
|
|
833
|
+
remembered,
|
|
834
|
+
env,
|
|
835
|
+
fundingEligibility,
|
|
836
|
+
platform,
|
|
837
|
+
clientAccessToken,
|
|
838
|
+
buttonSessionID,
|
|
839
|
+
commit,
|
|
840
|
+
sessionID,
|
|
841
|
+
nonce,
|
|
842
|
+
components,
|
|
843
|
+
onShippingChange,
|
|
844
|
+
onShippingAddressChange,
|
|
845
|
+
onShippingOptionsChange,
|
|
846
|
+
personalization,
|
|
847
|
+
content,
|
|
848
|
+
wallet,
|
|
849
|
+
flow,
|
|
850
|
+
experiment,
|
|
851
|
+
vault,
|
|
852
|
+
userIDToken,
|
|
853
|
+
applePay,
|
|
854
|
+
applePaySupport,
|
|
855
|
+
supportsPopups,
|
|
856
|
+
supportedNativeBrowser,
|
|
857
|
+
experience,
|
|
858
|
+
showPayLabel,
|
|
859
|
+
};
|
|
709
860
|
}
|