1 | import {
|
2 | StripeShippingAddressElement,
|
3 | StripeShippingAddressElementOptions,
|
4 | StripePaymentRequestButtonElement,
|
5 | StripePaymentRequestButtonElementOptions,
|
6 | StripePaymentElement,
|
7 | StripePaymentElementOptions,
|
8 | StripeLinkAuthenticationElement,
|
9 | StripeLinkAuthenticationElementOptions,
|
10 | StripeIdealBankElement,
|
11 | StripeIdealBankElementOptions,
|
12 | StripeIbanElement,
|
13 | StripeIbanElementOptions,
|
14 | StripeP24BankElement,
|
15 | StripeP24BankElementOptions,
|
16 | StripeEpsBankElement,
|
17 | StripeEpsBankElementOptions,
|
18 | StripeFpxBankElement,
|
19 | StripeFpxBankElementOptions,
|
20 | StripeCardCvcElement,
|
21 | StripeCardCvcElementOptions,
|
22 | StripeCardExpiryElement,
|
23 | StripeCardExpiryElementOptions,
|
24 | StripeCardNumberElement,
|
25 | StripeCardNumberElementOptions,
|
26 | StripeCardElement,
|
27 | StripeCardElementOptions,
|
28 | StripeAuBankAccountElement,
|
29 | StripeAfterpayClearpayMessageElementOptions,
|
30 | StripeAffirmMessageElement,
|
31 | StripeAffirmMessageElementOptions,
|
32 | StripeAfterpayClearpayMessageElement,
|
33 | StripeAuBankAccountElementOptions,
|
34 | } from './elements';
|
35 |
|
36 | export interface StripeElements {
|
37 | /**
|
38 | * Updates the options that `Elements` was initialized with.
|
39 | * Updates are shallowly merged into the existing configuration.
|
40 | */
|
41 | update(options: StripeElementsUpdateOptions): void;
|
42 |
|
43 | /**
|
44 | * Fetches updates from the associated PaymentIntent or SetupIntent on an existing
|
45 | * instance of Elements, and reflects these updates in the Payment Element.
|
46 | */
|
47 | fetchUpdates(): Promise<{error?: {message: string; status?: string}}>;
|
48 |
|
49 | /////////////////////////////
|
50 | /// affirmMessage
|
51 | /////////////////////////////
|
52 |
|
53 | /**
|
54 | * Creates an `AffirmMessageElement`.
|
55 | */
|
56 | create(
|
57 | elementType: 'affirmMessage',
|
58 | options: StripeAffirmMessageElementOptions
|
59 | ): StripeAffirmMessageElement;
|
60 |
|
61 | /**
|
62 | * Looks up a previously created `Element` by its type.
|
63 | */
|
64 | getElement(elementType: 'affirmMessage'): StripeAffirmMessageElement | null;
|
65 |
|
66 | /////////////////////////////
|
67 | /// afterpayClearpayMessage
|
68 | /////////////////////////////
|
69 |
|
70 | /**
|
71 | * Creates an `AfterpayClearpayMessageElement`.
|
72 | */
|
73 | create(
|
74 | elementType: 'afterpayClearpayMessage',
|
75 | options: StripeAfterpayClearpayMessageElementOptions
|
76 | ): StripeAfterpayClearpayMessageElement;
|
77 |
|
78 | /**
|
79 | * Looks up a previously created `Element` by its type.
|
80 | */
|
81 | getElement(
|
82 | elementType: 'afterpayClearpayMessage'
|
83 | ): StripeAfterpayClearpayMessageElement | null;
|
84 |
|
85 | /////////////////////////////
|
86 | /// auBankAccount
|
87 | /////////////////////////////
|
88 |
|
89 | /**
|
90 | * Requires beta access:
|
91 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
92 | *
|
93 | * Creates an `AuBankAccountElement`.
|
94 | */
|
95 | create(
|
96 | elementType: 'auBankAccount',
|
97 | options?: StripeAuBankAccountElementOptions
|
98 | ): StripeAuBankAccountElement;
|
99 |
|
100 | /**
|
101 | * Requires beta access:
|
102 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
103 | *
|
104 | * Looks up a previously created `Element` by its type.
|
105 | */
|
106 | getElement(elementType: 'auBankAccount'): StripeAuBankAccountElement | null;
|
107 |
|
108 | /////////////////////////////
|
109 | /// card
|
110 | /////////////////////////////
|
111 |
|
112 | /**
|
113 | * Creates a `CardElement`.
|
114 | */
|
115 | create(
|
116 | elementType: 'card',
|
117 | options?: StripeCardElementOptions
|
118 | ): StripeCardElement;
|
119 |
|
120 | /**
|
121 | * Looks up a previously created `Element` by its type.
|
122 | */
|
123 | getElement(elementType: 'card'): StripeCardElement | null;
|
124 |
|
125 | /////////////////////////////
|
126 | /// cardNumber
|
127 | /////////////////////////////
|
128 |
|
129 | /**
|
130 | * Creates a `CardNumberElement`.
|
131 | */
|
132 | create(
|
133 | elementType: 'cardNumber',
|
134 | options?: StripeCardNumberElementOptions
|
135 | ): StripeCardNumberElement;
|
136 |
|
137 | /**
|
138 | * Looks up a previously created `Element` by its type.
|
139 | */
|
140 | getElement(elementType: 'cardNumber'): StripeCardNumberElement | null;
|
141 |
|
142 | /////////////////////////////
|
143 | /// cardExpiry
|
144 | /////////////////////////////
|
145 |
|
146 | /**
|
147 | * Creates a `CardExpiryElement`.
|
148 | */
|
149 | create(
|
150 | elementType: 'cardExpiry',
|
151 | options?: StripeCardExpiryElementOptions
|
152 | ): StripeCardExpiryElement;
|
153 |
|
154 | /**
|
155 | * Looks up a previously created `Element` by its type.
|
156 | */
|
157 | getElement(elementType: 'cardExpiry'): StripeCardExpiryElement | null;
|
158 |
|
159 | /////////////////////////////
|
160 | /// cardCvc
|
161 | /////////////////////////////
|
162 |
|
163 | /**
|
164 | * Creates a `CardCvcElement`.
|
165 | */
|
166 | create(
|
167 | elementType: 'cardCvc',
|
168 | options?: StripeCardCvcElementOptions
|
169 | ): StripeCardCvcElement;
|
170 |
|
171 | /**
|
172 | * Looks up a previously created `Element` by its type.
|
173 | */
|
174 | getElement(elementType: 'cardCvc'): StripeCardCvcElement | null;
|
175 |
|
176 | /////////////////////////////
|
177 | /// fpxBank
|
178 | /////////////////////////////
|
179 |
|
180 | /**
|
181 | * Creates an `FpxBankElement`.
|
182 | */
|
183 | create(
|
184 | elementType: 'fpxBank',
|
185 | options: StripeFpxBankElementOptions
|
186 | ): StripeFpxBankElement;
|
187 |
|
188 | /**
|
189 | * Looks up a previously created `Element` by its type.
|
190 | */
|
191 | getElement(elementType: 'fpxBank'): StripeFpxBankElement | null;
|
192 |
|
193 | /////////////////////////////
|
194 | /// epsBank
|
195 | /////////////////////////////
|
196 |
|
197 | /**
|
198 | *
|
199 | * Creates an `EpsBankElement`.
|
200 | */
|
201 | create(
|
202 | elementType: 'epsBank',
|
203 | options: StripeEpsBankElementOptions
|
204 | ): StripeEpsBankElement;
|
205 |
|
206 | /**
|
207 | * Requires beta access:
|
208 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
209 | *
|
210 | * Looks up a previously created `Element` by its type.
|
211 | */
|
212 | getElement(elementType: 'epsBank'): StripeEpsBankElement | null;
|
213 |
|
214 | /////////////////////////////
|
215 | /// p24Bank
|
216 | /////////////////////////////
|
217 |
|
218 | /**
|
219 | *
|
220 | * Creates an `P24BankElement`.
|
221 | */
|
222 | create(
|
223 | elementType: 'p24Bank',
|
224 | options: StripeP24BankElementOptions
|
225 | ): StripeP24BankElement;
|
226 |
|
227 | /**
|
228 | *
|
229 | * Looks up a previously created `Element` by its type.
|
230 | */
|
231 | getElement(elementType: 'p24Bank'): StripeP24BankElement | null;
|
232 |
|
233 | /////////////////////////////
|
234 | /// iban
|
235 | /////////////////////////////
|
236 |
|
237 | /**
|
238 | * Creates an `IbanElement`.
|
239 | */
|
240 | create(
|
241 | elementType: 'iban',
|
242 | options?: StripeIbanElementOptions
|
243 | ): StripeIbanElement;
|
244 |
|
245 | /**
|
246 | * Looks up a previously created `Element` by its type.
|
247 | */
|
248 | getElement(elementType: 'iban'): StripeIbanElement | null;
|
249 |
|
250 | /////////////////////////////
|
251 | /// idealBank
|
252 | /////////////////////////////
|
253 |
|
254 | /**
|
255 | * Creates an `IdealBankElement`.
|
256 | */
|
257 | create(
|
258 | elementType: 'idealBank',
|
259 | options?: StripeIdealBankElementOptions
|
260 | ): StripeIdealBankElement;
|
261 |
|
262 | /**
|
263 | * Looks up a previously created `Element` by its type.
|
264 | */
|
265 | getElement(elementType: 'idealBank'): StripeIdealBankElement | null;
|
266 |
|
267 | /////////////////////////////
|
268 | /// linkAuthentication
|
269 | /////////////////////////////
|
270 |
|
271 | /**
|
272 | * Requires beta access:
|
273 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
274 | *
|
275 | * Creates a `LinkAuthenticationElement`.
|
276 | */
|
277 | create(
|
278 | elementType: 'linkAuthentication',
|
279 | options?: StripeLinkAuthenticationElementOptions
|
280 | ): StripeLinkAuthenticationElement;
|
281 |
|
282 | /**
|
283 | * Requires beta access:
|
284 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
285 | *
|
286 | * Looks up a previously created `Element` by its type.
|
287 | */
|
288 | getElement(
|
289 | elementType: 'linkAuthentication'
|
290 | ): StripeLinkAuthenticationElement | null;
|
291 |
|
292 | /////////////////////////////
|
293 | /// payment
|
294 | /////////////////////////////
|
295 |
|
296 | /**
|
297 | * Creates a `PaymentElement`.
|
298 | *
|
299 | * @docs https://stripe.com/docs/payments/payment-element
|
300 | */
|
301 | create(
|
302 | elementType: 'payment',
|
303 | options?: StripePaymentElementOptions
|
304 | ): StripePaymentElement;
|
305 |
|
306 | /**
|
307 | * Looks up a previously created `Element` by its type.
|
308 | */
|
309 | getElement(elementType: 'payment'): StripePaymentElement | null;
|
310 |
|
311 | /////////////////////////////
|
312 | /// paymentRequestButton
|
313 | /////////////////////////////
|
314 |
|
315 | /**
|
316 | * Creates a `PaymentRequestButtonElement`.
|
317 | *
|
318 | * @docs https://stripe.com/docs/stripe-js/elements/payment-request-button
|
319 | */
|
320 | create(
|
321 | elementType: 'paymentRequestButton',
|
322 | options: StripePaymentRequestButtonElementOptions
|
323 | ): StripePaymentRequestButtonElement;
|
324 |
|
325 | /**
|
326 | * Looks up a previously created `Element` by its type.
|
327 | */
|
328 | getElement(
|
329 | elementType: 'paymentRequestButton'
|
330 | ): StripePaymentRequestButtonElement | null;
|
331 |
|
332 | /**
|
333 | * Requires beta access:
|
334 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
335 | *
|
336 | * Creates a `ShippingAddressElement`.
|
337 | */
|
338 | create(
|
339 | elementType: 'shippingAddress',
|
340 | options?: StripeShippingAddressElementOptions
|
341 | ): StripeShippingAddressElement;
|
342 |
|
343 | /**
|
344 | * Requires beta access:
|
345 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
346 | *
|
347 | * Looks up a previously created `Element` by its type.
|
348 | */
|
349 | getElement(
|
350 | elementType: 'shippingAddress'
|
351 | ): StripeShippingAddressElement | null;
|
352 | }
|
353 |
|
354 | export type StripeElementType =
|
355 | | 'affirmMessage'
|
356 | | 'afterpayClearpayMessage'
|
357 | | 'auBankAccount'
|
358 | | 'card'
|
359 | | 'cardNumber'
|
360 | | 'cardExpiry'
|
361 | | 'cardCvc'
|
362 | | 'epsBank'
|
363 | | 'fpxBank'
|
364 | | 'iban'
|
365 | | 'idealBank'
|
366 | | 'p24Bank'
|
367 | | 'payment'
|
368 | | 'paymentRequestButton'
|
369 | | 'linkAuthentication'
|
370 | | 'shippingAddress';
|
371 |
|
372 | export type StripeElement =
|
373 | | StripeAffirmMessageElement
|
374 | | StripeAfterpayClearpayMessageElement
|
375 | | StripeAuBankAccountElement
|
376 | | StripeCardElement
|
377 | | StripeCardNumberElement
|
378 | | StripeCardExpiryElement
|
379 | | StripeCardCvcElement
|
380 | | StripeEpsBankElement
|
381 | | StripeFpxBankElement
|
382 | | StripeIbanElement
|
383 | | StripeIdealBankElement
|
384 | | StripeP24BankElement
|
385 | | StripePaymentElement
|
386 | | StripePaymentRequestButtonElement;
|
387 |
|
388 | export type StripeElementLocale =
|
389 | | 'auto'
|
390 | | 'ar'
|
391 | | 'bg'
|
392 | | 'cs'
|
393 | | 'da'
|
394 | | 'de'
|
395 | | 'el'
|
396 | | 'en'
|
397 | | 'en-AU'
|
398 | | 'en-CA'
|
399 | | 'en-NZ'
|
400 | | 'en-GB'
|
401 | | 'es'
|
402 | | 'es-ES'
|
403 | | 'es-419'
|
404 | | 'et'
|
405 | | 'fi'
|
406 | | 'fr'
|
407 | | 'fr-FR'
|
408 | | 'he'
|
409 | | 'hu'
|
410 | | 'id'
|
411 | | 'it'
|
412 | | 'it-IT'
|
413 | | 'ja'
|
414 | | 'ko'
|
415 | | 'lt'
|
416 | | 'lv'
|
417 | | 'ms'
|
418 | | 'mt'
|
419 | | 'nb'
|
420 | | 'nl'
|
421 | | 'no'
|
422 | | 'pl'
|
423 | | 'pt'
|
424 | | 'pt-BR'
|
425 | | 'ro'
|
426 | | 'ru'
|
427 | | 'sk'
|
428 | | 'sl'
|
429 | | 'sv'
|
430 | | 'th'
|
431 | | 'tr'
|
432 | | 'vi'
|
433 | | 'zh'
|
434 | | 'zh-HK'
|
435 | | 'zh-TW';
|
436 |
|
437 | /**
|
438 | * Options to create an `Elements` instance with.
|
439 | */
|
440 | export interface StripeElementsOptions {
|
441 | /**
|
442 | * An array of custom fonts, which elements created from the `Elements` object can use.
|
443 | */
|
444 | fonts?: Array<CssFontSource | CustomFontSource>;
|
445 |
|
446 | /**
|
447 | * The [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) of the locale to display placeholders and error strings in.
|
448 | * Default is `auto` (Stripe detects the locale of the browser).
|
449 | * Setting the locale does not affect the behavior of postal code validation—a valid postal code for the billing country of the card is still required.
|
450 | */
|
451 | locale?: StripeElementLocale;
|
452 |
|
453 | /**
|
454 | * Match the Payment Element with the design of your site with the appearance option.
|
455 | * The layout of the Payment Element stays consistent, but you can modify colors, fonts, borders, padding, and more.
|
456 | *
|
457 | * @docs https://stripe.com/docs/stripe-js/appearance-api
|
458 | */
|
459 | appearance?: Appearance;
|
460 |
|
461 | /**
|
462 | * The client secret for a PaymentIntent or SetupIntent used by the Payment Element.
|
463 | *
|
464 | * @docs https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret
|
465 | */
|
466 | clientSecret?: string;
|
467 |
|
468 | /**
|
469 | * Display skeleton loader UI while waiting for Elements to be fully loaded, after they are mounted.
|
470 | * Supported for the `payment`, `shippingAddress`, and `linkAuthentication` Elements.
|
471 | * Default is `'auto'` (Stripe determines if a loader UI should be shown).
|
472 | */
|
473 | loader?: 'auto' | 'always' | 'never';
|
474 |
|
475 | /**
|
476 | * Requires beta access:
|
477 | * Contact [Stripe support](https://support.stripe.com/) for more information.
|
478 | *
|
479 | * Display saved PaymentMethods and Customer information.
|
480 | * Supported for the `payment`, `shippingAddress`, and `linkAuthentication` Elements.
|
481 | */
|
482 | customerOptions?: CustomerOptions;
|
483 | }
|
484 |
|
485 | /*
|
486 | * Updatable options for an `Elements` instance
|
487 | */
|
488 | export interface StripeElementsUpdateOptions {
|
489 | /**
|
490 | * The [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) of the locale to display placeholders and error strings in.
|
491 | * Default is `auto` (Stripe detects the locale of the browser).
|
492 | * Setting the locale does not affect the behavior of postal code validation—a valid postal code for the billing country of the card is still required.
|
493 | */
|
494 | locale?: StripeElementLocale;
|
495 |
|
496 | /**
|
497 | * Match the design of your site with the appearance option.
|
498 | * The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.
|
499 | *
|
500 | * @docs https://stripe.com/docs/stripe-js/appearance-api
|
501 | */
|
502 | appearance?: Appearance;
|
503 | }
|
504 |
|
505 | /*
|
506 | * Use a `CssFontSource` to pass custom fonts via a stylesheet URL when creating an `Elements` object.
|
507 | */
|
508 | export interface CssFontSource {
|
509 | /**
|
510 | * A relative or absolute URL pointing to a CSS file with [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face) definitions, for example:
|
511 | *
|
512 | * https://fonts.googleapis.com/css?family=Open+Sans
|
513 | *
|
514 | * Note that if you are using a [content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) (CSP), [additional directives](https://stripe.com/docs/security#content-security-policy) may be necessary.
|
515 | */
|
516 | cssSrc: string;
|
517 | }
|
518 |
|
519 | /*
|
520 | * Use a `CustomFontSource` to pass custom fonts when creating an `Elements` object.
|
521 | */
|
522 | export interface CustomFontSource {
|
523 | /**
|
524 | * The name to give the font
|
525 | */
|
526 | family: string;
|
527 |
|
528 | /**
|
529 | * A valid [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) value pointing to your custom font file.
|
530 | * This is usually (though not always) a link to a file with a `.woff` , `.otf`, or `.svg` suffix.
|
531 | */
|
532 | src: string;
|
533 |
|
534 | /**
|
535 | * A valid [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) value.
|
536 | */
|
537 | display?: string;
|
538 |
|
539 | /**
|
540 | * Defaults to `normal`.
|
541 | */
|
542 | style?: 'normal' | 'italic' | 'oblique';
|
543 |
|
544 | /**
|
545 | * A valid [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) value.
|
546 | */
|
547 | unicodeRange?: string;
|
548 |
|
549 | /**
|
550 | * A valid [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight), as a string.
|
551 | */
|
552 | weight?: string;
|
553 | }
|
554 |
|
555 | /*
|
556 | * @docs https://stripe.com/docs/stripe-js/appearance-api
|
557 | */
|
558 | export interface Appearance {
|
559 | disableAnimations?: boolean;
|
560 |
|
561 | theme?: 'stripe' | 'night' | 'flat' | 'none';
|
562 |
|
563 | variables?: {
|
564 | // General font styles
|
565 | fontFamily?: string;
|
566 | fontSmooth?: string;
|
567 | fontVariantLigatures?: string;
|
568 | fontVariationSettings?: string;
|
569 | fontLineHeight?: string;
|
570 |
|
571 | // Font sizes
|
572 | fontSizeBase?: string;
|
573 | fontSizeSm?: string;
|
574 | fontSizeXs?: string;
|
575 | fontSize2Xs?: string;
|
576 | fontSize3Xs?: string;
|
577 | fontSizeLg?: string;
|
578 | fontSizeXl?: string;
|
579 |
|
580 | // Font weights
|
581 | fontWeightLight?: string;
|
582 | fontWeightNormal?: string;
|
583 | fontWeightMedium?: string;
|
584 | fontWeightBold?: string;
|
585 |
|
586 | // Spacing
|
587 | spacingUnit?: string;
|
588 | spacingGridRow?: string;
|
589 | spacingGridColumn?: string;
|
590 | spacingTab?: string;
|
591 |
|
592 | // Colors
|
593 | colorPrimary?: string;
|
594 | colorPrimaryText?: string;
|
595 | colorBackground?: string;
|
596 | colorBackgroundText?: string;
|
597 | colorText?: string;
|
598 | colorSuccess?: string;
|
599 | colorSuccessText?: string;
|
600 | colorDanger?: string;
|
601 | colorDangerText?: string;
|
602 | colorWarning?: string;
|
603 | colorWarningText?: string;
|
604 |
|
605 | // Text variations
|
606 | colorTextSecondary?: string;
|
607 | colorTextPlaceholder?: string;
|
608 |
|
609 | // Icons
|
610 | colorIcon?: string;
|
611 | colorIconHover?: string;
|
612 | colorIconCardError?: string;
|
613 | colorIconCardCvc?: string;
|
614 | colorIconCardCvcError?: string;
|
615 | colorIconCheckmark?: string;
|
616 | colorIconChevronDown?: string;
|
617 | colorIconChevronDownHover?: string;
|
618 | colorIconRedirect?: string;
|
619 | colorIconTab?: string;
|
620 | colorIconTabHover?: string;
|
621 | colorIconTabSelected?: string;
|
622 | colorIconTabMore?: string;
|
623 | colorIconTabMoreHover?: string;
|
624 |
|
625 | // Logos
|
626 | colorLogo?: string;
|
627 | colorLogoTab?: string;
|
628 | colorLogoTabSelected?: string;
|
629 | colorLogoBlock?: string;
|
630 |
|
631 | // Focus
|
632 | focusBoxShadow?: string;
|
633 | focusOutline?: string;
|
634 |
|
635 | // Radius
|
636 | borderRadius?: string;
|
637 | };
|
638 |
|
639 | rules?: {
|
640 | [selector: string]: {
|
641 | [cssPropertyName: string]: string;
|
642 | };
|
643 | };
|
644 |
|
645 | labels?: 'above' | 'floating';
|
646 | }
|
647 |
|
648 | export interface CustomerOptions {
|
649 | /**
|
650 | * The Customer id.
|
651 | */
|
652 | customer: string;
|
653 |
|
654 | /**
|
655 | * The ephemeral key for a Customer that grants temporary access to Customer data.
|
656 | */
|
657 | ephemeralKey: string;
|
658 | }
|