@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.
Files changed (185) hide show
  1. package/README.md +8 -0
  2. package/__sdk__.js +72 -76
  3. package/dist/button.js +1 -1
  4. package/globals.js +28 -30
  5. package/package.json +6 -4
  6. package/src/constants/button.js +37 -36
  7. package/src/constants/class.js +32 -30
  8. package/src/constants/index.js +3 -3
  9. package/src/constants/misc.js +14 -12
  10. package/src/declarations.js +19 -19
  11. package/src/funding/applepay/config.jsx +51 -50
  12. package/src/funding/applepay/index.js +1 -1
  13. package/src/funding/applepay/style.scoped.scss +1 -1
  14. package/src/funding/applepay/template.jsx +16 -11
  15. package/src/funding/bancontact/config.jsx +48 -37
  16. package/src/funding/bancontact/index.js +1 -2
  17. package/src/funding/blik/config.jsx +48 -37
  18. package/src/funding/blik/index.js +1 -2
  19. package/src/funding/boleto/config.jsx +50 -39
  20. package/src/funding/boleto/index.js +1 -2
  21. package/src/funding/card/amex/config.js +9 -8
  22. package/src/funding/card/amex/index.js +1 -2
  23. package/src/funding/card/config.jsx +246 -177
  24. package/src/funding/card/discover/config.js +9 -7
  25. package/src/funding/card/discover/index.js +1 -2
  26. package/src/funding/card/elo/config.js +6 -7
  27. package/src/funding/card/elo/index.js +1 -2
  28. package/src/funding/card/hiper/config.js +9 -7
  29. package/src/funding/card/hiper/index.js +1 -2
  30. package/src/funding/card/index.js +1 -1
  31. package/src/funding/card/jcb/config.js +6 -7
  32. package/src/funding/card/jcb/index.js +1 -2
  33. package/src/funding/card/mastercard/config.js +9 -7
  34. package/src/funding/card/mastercard/index.js +1 -2
  35. package/src/funding/card/visa/config.js +9 -7
  36. package/src/funding/card/visa/index.js +1 -2
  37. package/src/funding/common.jsx +242 -216
  38. package/src/funding/config.js +212 -65
  39. package/src/funding/content.jsx +1946 -337
  40. package/src/funding/credit/config.jsx +74 -57
  41. package/src/funding/credit/index.js +1 -2
  42. package/src/funding/eps/config.jsx +45 -37
  43. package/src/funding/eps/index.js +1 -2
  44. package/src/funding/funding.js +193 -100
  45. package/src/funding/giropay/config.jsx +48 -38
  46. package/src/funding/giropay/index.js +1 -2
  47. package/src/funding/ideal/config.jsx +48 -37
  48. package/src/funding/ideal/index.js +1 -2
  49. package/src/funding/index.js +2 -2
  50. package/src/funding/itau/config.jsx +41 -41
  51. package/src/funding/itau/index.js +1 -1
  52. package/src/funding/maxima/config.jsx +25 -19
  53. package/src/funding/maxima/index.js +1 -2
  54. package/src/funding/mercadopago/config.jsx +48 -37
  55. package/src/funding/mercadopago/index.js +1 -2
  56. package/src/funding/multibanco/config.jsx +50 -39
  57. package/src/funding/multibanco/index.js +1 -2
  58. package/src/funding/mybank/config.jsx +48 -37
  59. package/src/funding/mybank/index.js +1 -2
  60. package/src/funding/oxxo/config.jsx +50 -39
  61. package/src/funding/oxxo/index.js +1 -2
  62. package/src/funding/p24/config.jsx +45 -37
  63. package/src/funding/p24/index.js +1 -2
  64. package/src/funding/paidy/config.jsx +50 -39
  65. package/src/funding/paidy/index.js +1 -1
  66. package/src/funding/paylater/config.jsx +118 -111
  67. package/src/funding/paylater/index.js +1 -2
  68. package/src/funding/paypal/config.jsx +44 -46
  69. package/src/funding/paypal/index.js +1 -2
  70. package/src/funding/paypal/style.scoped.scss +80 -74
  71. package/src/funding/paypal/template.jsx +450 -354
  72. package/src/funding/payu/config.jsx +50 -39
  73. package/src/funding/payu/index.js +1 -1
  74. package/src/funding/satispay/config.jsx +50 -39
  75. package/src/funding/satispay/index.js +1 -1
  76. package/src/funding/sepa/config.jsx +19 -13
  77. package/src/funding/sepa/index.js +1 -2
  78. package/src/funding/sofort/config.jsx +48 -37
  79. package/src/funding/sofort/index.js +1 -2
  80. package/src/funding/trustly/config.jsx +50 -39
  81. package/src/funding/trustly/index.js +1 -2
  82. package/src/funding/venmo/config.jsx +80 -75
  83. package/src/funding/venmo/index.js +1 -2
  84. package/src/funding/venmo/style.scoped.scss +30 -32
  85. package/src/funding/venmo/template.jsx +56 -57
  86. package/src/funding/verkkopankki/config.jsx +50 -39
  87. package/src/funding/verkkopankki/index.js +1 -1
  88. package/src/funding/wechatpay/config.jsx +48 -37
  89. package/src/funding/wechatpay/index.js +1 -2
  90. package/src/funding/zimpler/config.jsx +19 -13
  91. package/src/funding/zimpler/index.js +1 -2
  92. package/src/interface/button.js +60 -44
  93. package/src/interface/card-fields.js +11 -8
  94. package/src/interface/fields.js +7 -4
  95. package/src/interface/marks.js +4 -4
  96. package/src/interface/payment-fields.js +7 -4
  97. package/src/interface/wallet.js +4 -4
  98. package/src/lib/errors.js +7 -7
  99. package/src/lib/index.js +5 -5
  100. package/src/lib/isRTLLanguage.js +3 -3
  101. package/src/lib/perceived-latency-instrumentation.js +54 -36
  102. package/src/lib/security.js +21 -17
  103. package/src/lib/session.js +39 -35
  104. package/src/marks/component.jsx +114 -65
  105. package/src/marks/index.js +1 -2
  106. package/src/marks/template.jsx +79 -65
  107. package/src/types.js +48 -48
  108. package/src/ui/buttons/button.jsx +311 -249
  109. package/src/ui/buttons/buttonDesigns/control.jsx +3 -5
  110. package/src/ui/buttons/buttonDesigns/divideLogoAnimation.jsx +127 -99
  111. package/src/ui/buttons/buttonDesigns/index.js +78 -75
  112. package/src/ui/buttons/buttonDesigns/inlineLogoTextDesign.jsx +102 -82
  113. package/src/ui/buttons/buttonDesigns/script.jsx +24 -18
  114. package/src/ui/buttons/buttonDesigns/types.js +6 -7
  115. package/src/ui/buttons/buttons.jsx +318 -212
  116. package/src/ui/buttons/config.js +62 -59
  117. package/src/ui/buttons/content.jsx +304 -119
  118. package/src/ui/buttons/index.js +1 -1
  119. package/src/ui/buttons/menu-button/index.js +1 -1
  120. package/src/ui/buttons/menu-button/menu-button.jsx +29 -22
  121. package/src/ui/buttons/menu-button/menu-button.scoped.scss +16 -17
  122. package/src/ui/buttons/poweredBy.jsx +23 -23
  123. package/src/ui/buttons/props.js +680 -529
  124. package/src/ui/buttons/script.jsx +182 -160
  125. package/src/ui/buttons/spinner.jsx +4 -6
  126. package/src/ui/buttons/style.jsx +15 -14
  127. package/src/ui/buttons/styles/base.js +24 -16
  128. package/src/ui/buttons/styles/button.js +24 -22
  129. package/src/ui/buttons/styles/color.js +118 -118
  130. package/src/ui/buttons/styles/custom.js +30 -24
  131. package/src/ui/buttons/styles/index.js +1 -1
  132. package/src/ui/buttons/styles/labels.js +17 -13
  133. package/src/ui/buttons/styles/page.js +3 -3
  134. package/src/ui/buttons/styles/responsive.js +226 -118
  135. package/src/ui/buttons/tagline.jsx +53 -54
  136. package/src/ui/chevron.jsx +27 -16
  137. package/src/ui/index.js +3 -3
  138. package/src/ui/loading.jsx +25 -18
  139. package/src/ui/text/index.js +1 -1
  140. package/src/ui/text/style.scoped.scss +25 -26
  141. package/src/ui/text/text.jsx +42 -20
  142. package/src/ui/tracking.jsx +18 -11
  143. package/src/zoid/buttons/component.jsx +836 -684
  144. package/src/zoid/buttons/container.jsx +140 -107
  145. package/src/zoid/buttons/index.js +1 -1
  146. package/src/zoid/buttons/prerender.jsx +84 -64
  147. package/src/zoid/buttons/util.js +355 -254
  148. package/src/zoid/card-fields/component.jsx +581 -549
  149. package/src/zoid/card-fields/index.js +1 -1
  150. package/src/zoid/card-fields/prerender.jsx +20 -17
  151. package/src/zoid/card-form/component.js +155 -141
  152. package/src/zoid/card-form/index.js +1 -1
  153. package/src/zoid/checkout/component.jsx +314 -282
  154. package/src/zoid/checkout/config.js +2 -2
  155. package/src/zoid/checkout/content.js +190 -154
  156. package/src/zoid/checkout/hacks.js +31 -28
  157. package/src/zoid/checkout/index.js +2 -2
  158. package/src/zoid/checkout/props.js +27 -33
  159. package/src/zoid/installments/component.jsx +83 -70
  160. package/src/zoid/installments/index.js +1 -1
  161. package/src/zoid/installments/props.js +1 -1
  162. package/src/zoid/menu/component.jsx +53 -48
  163. package/src/zoid/menu/index.js +1 -1
  164. package/src/zoid/menu/props.js +1 -3
  165. package/src/zoid/modal/component.jsx +119 -106
  166. package/src/zoid/modal/index.js +1 -1
  167. package/src/zoid/modal/props.js +1 -3
  168. package/src/zoid/payment-fields/component.jsx +215 -191
  169. package/src/zoid/payment-fields/container.jsx +73 -64
  170. package/src/zoid/payment-fields/index.js +1 -1
  171. package/src/zoid/payment-fields/prerender.jsx +16 -14
  172. package/src/zoid/payment-fields/props.js +6 -6
  173. package/src/zoid/qr-code/component.jsx +131 -115
  174. package/src/zoid/qr-code/container.jsx +74 -68
  175. package/src/zoid/qr-code/index.js +1 -1
  176. package/src/zoid/qr-code/prerender.jsx +17 -12
  177. package/src/zoid/qr-code/types.js +2 -2
  178. package/src/zoid/wallet/component.jsx +298 -260
  179. package/src/zoid/wallet/container.jsx +73 -64
  180. package/src/zoid/wallet/index.js +1 -1
  181. package/src/zoid/wallet/prerender.jsx +14 -14
  182. package/src/zoid/wallet/props.js +4 -4
  183. package/src/actions/save/index.js +0 -40
  184. package/src/interface/actions.js +0 -14
  185. package/src/lib/getLogoCDNExperiment.js +0 -25
@@ -1,3 +1,3 @@
1
1
  /* @flow */
2
2
 
3
- export * from './component';
3
+ export * from "./component";
@@ -1,22 +1,25 @@
1
1
  /* @flow */
2
2
  /** @jsx node */
3
3
 
4
- import { node, type ChildType } from '@krakenjs/jsx-pragmatic/src';
4
+ import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
5
5
 
6
6
  type PrerenderedCardProps = {|
7
- nonce : ?string,
8
- height : ?number
7
+ nonce: ?string,
8
+ height: ?number,
9
9
  |};
10
10
 
11
11
  const DEFAULT_HEIGHT = 78;
12
12
 
13
- export function CardPrerender({ nonce, height } : PrerenderedCardProps) : ChildType {
14
- return (
15
- <html>
16
- <body>
17
- <style
18
- nonce={ nonce }
19
- innerHTML={ `
13
+ export function CardPrerender({
14
+ nonce,
15
+ height,
16
+ }: PrerenderedCardProps): ChildType {
17
+ return (
18
+ <html>
19
+ <body>
20
+ <style
21
+ nonce={nonce}
22
+ innerHTML={`
20
23
  html, body {
21
24
  padding: 0;
22
25
  margin: 0;
@@ -28,7 +31,7 @@ export function CardPrerender({ nonce, height } : PrerenderedCardProps) : ChildT
28
31
  background: #e9ebee;
29
32
  position: relative;
30
33
  overflow: hidden;
31
- height: ${ height ?? DEFAULT_HEIGHT };
34
+ height: ${height ?? DEFAULT_HEIGHT};
32
35
  }
33
36
 
34
37
  body::after {
@@ -39,7 +42,7 @@ export function CardPrerender({ nonce, height } : PrerenderedCardProps) : ChildT
39
42
  top: 0;
40
43
  bottom: 0;
41
44
  width: 100%;
42
- height: ${ height ?? DEFAULT_HEIGHT };
45
+ height: ${height ?? DEFAULT_HEIGHT};
43
46
  transform: translateX(0);
44
47
  box-shadow: 0px 0px 107px 60px #dddfe2;
45
48
  animation: 1.5s loading-placeholder ease-in-out infinite;
@@ -56,9 +59,9 @@ export function CardPrerender({ nonce, height } : PrerenderedCardProps) : ChildT
56
59
  opacity: 0.1;
57
60
  }
58
61
  }
59
- ` }
60
- />
61
- </body>
62
- </html>
63
- );
62
+ `}
63
+ />
64
+ </body>
65
+ </html>
66
+ );
64
67
  }
@@ -2,152 +2,166 @@
2
2
  /* @jsx jsxDom */
3
3
  /* eslint max-lines: 0 */
4
4
 
5
- import { LANG } from '@paypal/sdk-constants/src';
6
- import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
7
- import { create, type ZoidComponent } from '@krakenjs/zoid/src';
8
- import type { CrossDomainWindowType } from '@krakenjs/cross-domain-utils/src';
9
- import { inlineMemoize } from '@krakenjs/belter/src';
10
- import { getLocale, getEnv, getCommit, getSDKMeta, getDisableCard, getPayPalDomain, getClientMetadataID } from '@paypal/sdk-client/src';
11
-
12
- import { getSessionID } from '../../lib';
13
-
5
+ import { LANG } from "@paypal/sdk-constants/src";
6
+ import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
7
+ import { create, type ZoidComponent } from "@krakenjs/zoid/src";
8
+ import type { CrossDomainWindowType } from "@krakenjs/cross-domain-utils/src";
9
+ import { inlineMemoize } from "@krakenjs/belter/src";
10
+ import {
11
+ getLocale,
12
+ getEnv,
13
+ getCommit,
14
+ getSDKMeta,
15
+ getDisableCard,
16
+ getPayPalDomain,
17
+ getClientMetadataID,
18
+ } from "@paypal/sdk-client/src";
19
+
20
+ import { getSessionID } from "../../lib";
14
21
 
15
22
  type CardProps = {|
16
- client : {
17
- [string] : (string | ZalgoPromise<string>)
18
- },
19
- env? : string,
20
- locale? : string,
21
- logLevel : string,
22
- awaitPopupBridge : Function,
23
- onAuthorize : ({| returnUrl : string |}, {| redirect : (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>,
24
- onCancel ? : ({| cancelUrl : string |}, {| redirect : (? CrossDomainWindowType, ? string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>,
25
- onEvent ? : ({| type : string, payload : Object |}) => void,
26
- meta : Object,
27
- commit : boolean,
28
- token : string
23
+ client: {
24
+ [string]: string | ZalgoPromise<string>,
25
+ },
26
+ env?: string,
27
+ locale?: string,
28
+ logLevel: string,
29
+ awaitPopupBridge: Function,
30
+ onAuthorize: (
31
+ {| returnUrl: string |},
32
+ {| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
33
+ ) => ?ZalgoPromise<void>,
34
+ onCancel?: (
35
+ {| cancelUrl: string |},
36
+ {| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
37
+ ) => ?ZalgoPromise<void>,
38
+ onEvent?: ({| type: string, payload: Object |}) => void,
39
+ meta: Object,
40
+ commit: boolean,
41
+ token: string,
29
42
  |};
30
43
 
31
44
  export type CardFormComponent = ZoidComponent<CardProps>;
32
45
 
33
- export function getCardFormComponent() : CardFormComponent {
34
- return inlineMemoize(getCardFormComponent, () => {
35
- return create({
36
- tag: 'paypal-card-form',
37
- url: () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__CARD_FIELDS__ }`,
38
-
39
- dimensions: {
40
- height: '300px',
41
- width: '100%'
42
- },
43
-
44
- attributes: {
45
- iframe: {
46
- allowpaymentrequest: 'allowpaymentrequest',
47
- scrolling: 'no'
48
- }
49
- },
50
-
51
- autoResize: {
52
- height: true,
53
- width: false
54
- },
55
-
56
- props: {
57
- sessionID: {
58
- type: 'string',
59
- required: false,
60
- default: getSessionID,
61
- queryParam: true
62
- },
63
-
64
- createOrder: {
65
- type: 'function',
66
- queryParam: 'token',
67
- alias: 'payment',
68
- // $FlowFixMe
69
- queryValue: ({ value }) => ZalgoPromise.try(value)
70
- },
71
-
72
- buttonSessionID: {
73
- type: 'string',
74
- queryParam: true
75
- },
76
-
77
- clientMetadataID: {
78
- type: 'string',
79
- required: false,
80
- default: getClientMetadataID,
81
- queryParam: 'client-metadata-id',
82
- },
83
-
84
- commit: {
85
- type: 'boolean',
86
- queryParam: true,
87
- value: getCommit
88
- },
89
-
90
- env: {
91
- type: 'string',
92
- queryParam: true,
93
- value: getEnv
94
- },
95
-
96
- locale: {
97
- type: 'object',
98
- queryParam: 'locale.x',
99
- allowDelegate: true,
100
- queryValue({ value }) : string {
101
- let { lang, country } = value;
102
- lang = lang === LANG.ZH_HANT ? LANG.ZH : lang;
103
- return `${ lang }_${ country }`;
104
- },
105
- value: getLocale
106
- },
107
-
108
- onApprove: {
109
- type: 'function',
110
- alias: 'onAuthorize'
111
- },
112
-
113
- onComplete: {
114
- type: 'function',
115
- required: false
116
- },
117
-
118
- onAuth: {
119
- type: 'function',
120
- required: false,
121
- sameDomain: true
122
- },
123
-
124
- onCancel: {
125
- type: 'function',
126
- required: false
127
- },
128
-
129
- sdkMeta: {
130
- type: 'string',
131
- queryParam: true,
132
- value: getSDKMeta
133
- },
134
-
135
- style: {
136
- type: 'object',
137
- required: false,
138
- queryParam: true
139
- },
140
-
141
- disableCard: {
142
- type: 'array',
143
- queryParam: 'disable-card',
144
- allowDelegate: true,
145
- queryValue({ value }) : string {
146
- return value.join(',');
147
- },
148
- value: getDisableCard
149
- }
150
- }
151
- });
46
+ export function getCardFormComponent(): CardFormComponent {
47
+ return inlineMemoize(getCardFormComponent, () => {
48
+ return create({
49
+ tag: "paypal-card-form",
50
+ url: () =>
51
+ `${getPayPalDomain()}${__PAYPAL_CHECKOUT__.__URI__.__CARD_FIELDS__}`,
52
+
53
+ dimensions: {
54
+ height: "300px",
55
+ width: "100%",
56
+ },
57
+
58
+ attributes: {
59
+ iframe: {
60
+ allowpaymentrequest: "allowpaymentrequest",
61
+ scrolling: "no",
62
+ },
63
+ },
64
+
65
+ autoResize: {
66
+ height: true,
67
+ width: false,
68
+ },
69
+
70
+ props: {
71
+ sessionID: {
72
+ type: "string",
73
+ required: false,
74
+ default: getSessionID,
75
+ queryParam: true,
76
+ },
77
+
78
+ createOrder: {
79
+ type: "function",
80
+ queryParam: "token",
81
+ alias: "payment",
82
+ // $FlowFixMe
83
+ queryValue: ({ value }) => ZalgoPromise.try(value),
84
+ },
85
+
86
+ buttonSessionID: {
87
+ type: "string",
88
+ queryParam: true,
89
+ },
90
+
91
+ clientMetadataID: {
92
+ type: "string",
93
+ required: false,
94
+ default: getClientMetadataID,
95
+ queryParam: "client-metadata-id",
96
+ },
97
+
98
+ commit: {
99
+ type: "boolean",
100
+ queryParam: true,
101
+ value: getCommit,
102
+ },
103
+
104
+ env: {
105
+ type: "string",
106
+ queryParam: true,
107
+ value: getEnv,
108
+ },
109
+
110
+ locale: {
111
+ type: "object",
112
+ queryParam: "locale.x",
113
+ allowDelegate: true,
114
+ queryValue({ value }): string {
115
+ let { lang, country } = value;
116
+ lang = lang === LANG.ZH_HANT ? LANG.ZH : lang;
117
+ return `${lang}_${country}`;
118
+ },
119
+ value: getLocale,
120
+ },
121
+
122
+ onApprove: {
123
+ type: "function",
124
+ alias: "onAuthorize",
125
+ },
126
+
127
+ onComplete: {
128
+ type: "function",
129
+ required: false,
130
+ },
131
+
132
+ onAuth: {
133
+ type: "function",
134
+ required: false,
135
+ sameDomain: true,
136
+ },
137
+
138
+ onCancel: {
139
+ type: "function",
140
+ required: false,
141
+ },
142
+
143
+ sdkMeta: {
144
+ type: "string",
145
+ queryParam: true,
146
+ value: getSDKMeta,
147
+ },
148
+
149
+ style: {
150
+ type: "object",
151
+ required: false,
152
+ queryParam: true,
153
+ },
154
+
155
+ disableCard: {
156
+ type: "array",
157
+ queryParam: "disable-card",
158
+ allowDelegate: true,
159
+ queryValue({ value }): string {
160
+ return value.join(",");
161
+ },
162
+ value: getDisableCard,
163
+ },
164
+ },
152
165
  });
166
+ });
153
167
  }
@@ -1,3 +1,3 @@
1
1
  /* @flow */
2
2
 
3
- export * from './component';
3
+ export * from "./component";