FRE-600: Fix code review blockers

- Consolidated duplicate UndoManagers to single instance
- Fixed connection promise to only resolve on 'connected' status
- Fixed WebSocketProvider import (WebsocketProvider)
- Added proper doc.destroy() cleanup
- Renamed isPresenceInitialized property to avoid conflict

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
2026-04-25 00:08:01 -04:00
parent 65b552bb08
commit 7c684a42cc
48450 changed files with 5679671 additions and 383 deletions

View File

@@ -0,0 +1,499 @@
import {
LayoutObject,
Layout,
TermsOption,
StripePaymentElement,
} from './elements/payment';
import {
AddressMode,
ContactOption,
StripeAddressElement,
} from './elements/address';
import {Appearance, CssFontSource, CustomFontSource} from './elements-group';
import {StripeError} from './stripe';
import {
StripeCurrencySelectorElement,
FieldsOption,
StripeElementBase,
StripeExpressCheckoutElement,
StripeExpressCheckoutElementConfirmEvent,
StripeExpressCheckoutElementOptions,
StripeExpressCheckoutElementReadyEvent,
} from './elements';
/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*/
export interface StripeCheckoutElementsOptions {
appearance?: Appearance;
loader?: 'auto' | 'always' | 'never';
fonts?: Array<CssFontSource | CustomFontSource>;
}
export interface StripeCheckoutOptions {
clientSecret: string;
elementsOptions?: StripeCheckoutElementsOptions;
}
/* Elements with CheckoutSessions API types */
export type StripeCheckoutAddress = {
country: string;
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
};
export type StripeCheckoutAdjustableQuantity = {
maximum: number;
minimum: number;
};
export type StripeCheckoutBillingInterval = 'day' | 'month' | 'week' | 'year';
export type StripeCheckoutConfirmationRequirement =
| 'phoneNumber'
| 'shippingAddress'
| 'billingAddress'
| 'paymentDetails'
| 'email';
export type StripeCheckoutContact = {
name?: string | null;
address: StripeCheckoutAddress;
};
export type StripeCheckoutDeliveryEstimate = {
maximum: StripeCheckoutEstimate | null;
minimum: StripeCheckoutEstimate | null;
};
export type StripeCheckoutDiscountAmount = {
amount: number;
displayName: string;
promotionCode: string | null;
recurring:
| {type: 'forever'}
| {type: 'repeating'; durationInMonths: number}
| null;
};
export type StripeCheckoutDueNext = {
amountSubtotal: number;
amountDiscount: number;
amountTaxInclusive: number;
amountTaxExclusive: number;
billingCycleAnchor: number | null;
};
export type StripeCheckoutEstimate = {
unit: 'business_day' | 'day' | 'hour' | 'week' | 'month';
value: number;
};
export type StripeCheckoutLastPaymentError = {
message: string;
};
export type StripeCheckoutRedirectBehavior = 'always' | 'if_required';
export type StripeCheckoutSavedPaymentMethod = {
id: string;
type: 'card';
card: {
brand: string;
expMonth: number;
expYear: number;
last4: string;
};
billingDetails: {
email?: string | null;
name?: string | null;
phone?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
country?: string | null;
} | null;
};
};
export type StripeCheckoutTaxAmount = {
amount: number;
inclusive: boolean;
displayName: string;
};
export type StripeCheckoutLineItem = {
id: string;
name: string;
amountDiscount: number;
amountSubtotal: number;
amountTaxExclusive: number;
amountTaxInclusive: number;
unitAmount: number;
description: string | null;
quantity: number;
discountAmounts: Array<StripeCheckoutDiscountAmount> | null;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
recurring: {
interval: StripeCheckoutBillingInterval;
intervalCount: number;
isProrated: boolean;
usageType: 'metered' | 'licensed';
} | null;
adjustableQuantity: StripeCheckoutAdjustableQuantity | null;
images: string[];
};
export type StripeCheckoutRecurring = {
interval: StripeCheckoutBillingInterval;
intervalCount: number;
dueNext: StripeCheckoutDueNext;
trial: StripeCheckoutTrial | null;
};
export type StripeCheckoutShipping = {
shippingOption: StripeCheckoutShippingOption;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
};
export type StripeCheckoutShippingOption = {
id: string;
amount: number;
currency: string;
displayName: string | null;
deliveryEstimate: StripeCheckoutDeliveryEstimate | null;
};
export type StripeCheckoutStatus =
| {type: 'open'}
| {type: 'expired'}
| {
type: 'complete';
paymentStatus: 'paid' | 'unpaid' | 'no_payment_required';
};
export type StripeCheckoutTaxStatus =
| {status: 'ready'}
| {status: 'requires_shipping_address'}
| {status: 'requires_billing_address'};
export type StripeCheckoutTotalSummary = {
appliedBalance: number;
balanceAppliedToNextInvoice: boolean;
discount: number;
shippingRate: number;
subtotal: number;
taxExclusive: number;
taxInclusive: number;
total: number;
};
export type StripeCheckoutTrial = {
trialEnd: number;
trialPeriodDays: number;
};
export type StripeCheckoutCurrencyOption = {
amount: number;
currency: string;
currencyConversion?: {fxRate: number; sourceCurrency: string};
};
/* Custom Checkout session */
export interface StripeCheckoutSession {
billingAddress: StripeCheckoutContact | null;
businessName: string | null;
canConfirm: boolean;
confirmationRequirements: StripeCheckoutConfirmationRequirement[];
currency: string;
currencyOptions: Array<StripeCheckoutCurrencyOption> | null;
discountAmounts: Array<StripeCheckoutDiscountAmount> | null;
email: string | null;
id: string;
lastPaymentError: StripeCheckoutLastPaymentError | null;
lineItems: Array<StripeCheckoutLineItem>;
livemode: boolean;
phoneNumber: string | null;
recurring: StripeCheckoutRecurring | null;
savedPaymentMethods: Array<StripeCheckoutSavedPaymentMethod> | null;
shipping: StripeCheckoutShipping | null;
shippingAddress: StripeCheckoutContact | null;
shippingOptions: Array<StripeCheckoutShippingOption>;
status: StripeCheckoutStatus;
tax: StripeCheckoutTaxStatus;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
total: StripeCheckoutTotalSummary;
}
export type StripeCheckoutPaymentElementOptions = {
layout?: Layout | LayoutObject;
paymentMethodOrder?: Array<string>;
readonly?: boolean;
terms?: TermsOption;
fields?: FieldsOption;
};
export type StripeCheckoutAddressElementOptions = {
mode: AddressMode;
contacts?: ContactOption[];
display?: {
name?: 'full' | 'split' | 'organization';
};
};
export type StripeCheckoutExpressCheckoutElementOptions = {
buttonHeight: StripeExpressCheckoutElementOptions['buttonHeight'];
buttonTheme: StripeExpressCheckoutElementOptions['buttonTheme'];
buttonType: StripeExpressCheckoutElementOptions['buttonType'];
layout: StripeExpressCheckoutElementOptions['layout'];
paymentMethodOrder: StripeExpressCheckoutElementOptions['paymentMethodOrder'];
paymentMethods: StripeExpressCheckoutElementOptions['paymentMethods'];
};
export type StripeCheckoutUpdateHandler = (
session: StripeCheckoutSession
) => void;
export type StripeCheckoutExpressCheckoutElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered.
*/
on(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'ready',
handler?: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when a buyer authorizes a payment within a supported payment method.
*/
on(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'confirm',
handler?: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Updates the options the `ExpressCheckoutElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update: StripeExpressCheckoutElement['update'];
};
type AnyBuyerError = {message: string; code: null};
type ApplyPromotionCodeError =
| {message: string; code: 'invalidCode'}
| AnyBuyerError;
export type StripeCheckoutApplyPromotionCodeResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: ApplyPromotionCodeError};
export type StripeCheckoutRemovePromotionCodeResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdateAddressResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdatePhoneNumberResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: never};
type UpdateEmailError =
| {message: string; code: 'incompleteEmail'}
| {message: string; code: 'invalidEmail'};
export type StripeCheckoutUpdateEmailResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: UpdateEmailError};
export type StripeCheckoutUpdateLineItemQuantityResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdateShippingOptionResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
type ConfirmError =
| {
message: string;
code: 'paymentFailed';
paymentFailed: {
declineCode: string | null;
};
}
| AnyBuyerError;
export type StripeCheckoutConfirmResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: ConfirmError};
type RunServerUpdateFunction = () => Promise<unknown>;
export type StripeCheckoutRunServerUpdateResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export interface StripeCheckout {
/* Custom Checkout methods */
applyPromotionCode: (
promotionCode: string
) => Promise<StripeCheckoutApplyPromotionCodeResult>;
removePromotionCode: () => Promise<StripeCheckoutRemovePromotionCodeResult>;
updateShippingAddress: (
shippingAddress: StripeCheckoutContact | null
) => Promise<StripeCheckoutUpdateAddressResult>;
updateBillingAddress: (
billingAddress: StripeCheckoutContact | null
) => Promise<StripeCheckoutUpdateAddressResult>;
updatePhoneNumber: (
phoneNumber: string
) => Promise<StripeCheckoutUpdatePhoneNumberResult>;
updateEmail: (email: string) => Promise<StripeCheckoutUpdateEmailResult>;
updateLineItemQuantity: (args: {
lineItem: string;
quantity: number;
}) => Promise<StripeCheckoutUpdateLineItemQuantityResult>;
updateShippingOption: (
shippingOption: string
) => Promise<StripeCheckoutUpdateShippingOptionResult>;
confirm: (args?: {
returnUrl?: string;
redirect?: StripeCheckoutRedirectBehavior;
paymentMethod?: string;
savePaymentMethod?: boolean;
email?: string;
phoneNumber?: string;
billingAddress?: StripeCheckoutContact;
shippingAddress?: StripeCheckoutContact;
expressCheckoutConfirmEvent?: StripeExpressCheckoutElementConfirmEvent;
}) => Promise<StripeCheckoutConfirmResult>;
session: () => StripeCheckoutSession;
on: (event: 'change', handler: StripeCheckoutUpdateHandler) => void;
runServerUpdate: (
userFunction: RunServerUpdateFunction
) => Promise<StripeCheckoutRunServerUpdateResult>;
/* Elements methods */
changeAppearance: (appearance: Appearance) => void;
getElement(elementType: 'payment'): StripePaymentElement | null;
getElement(
elementType: 'address',
mode: AddressMode
): StripeAddressElement | null;
getElement(
elementType: 'expressCheckout'
): StripeCheckoutExpressCheckoutElement | null;
/* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
getElement(
elementType: 'currencySelector'
): StripeCurrencySelectorElement | null;
createElement(
elementType: 'payment',
options?: StripeCheckoutPaymentElementOptions
): StripePaymentElement;
createElement(
elementType: 'address',
options: StripeCheckoutAddressElementOptions
): StripeAddressElement;
createElement(
elementType: 'expressCheckout',
options: StripeCheckoutExpressCheckoutElementOptions
): StripeCheckoutExpressCheckoutElement;
/* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
createElement(elementType: 'currencySelector'): StripeCurrencySelectorElement;
}

View File

@@ -0,0 +1,499 @@
import {
LayoutObject,
Layout,
TermsOption,
StripePaymentElement,
} from './elements/payment';
import {
AddressMode,
ContactOption,
StripeAddressElement,
} from './elements/address';
import {Appearance, CssFontSource, CustomFontSource} from './elements-group';
import {StripeError} from './stripe';
import {
StripeCurrencySelectorElement,
FieldsOption,
StripeElementBase,
StripeExpressCheckoutElement,
StripeExpressCheckoutElementConfirmEvent,
StripeExpressCheckoutElementOptions,
StripeExpressCheckoutElementReadyEvent,
} from './elements';
/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*/
export interface StripeCheckoutElementsOptions {
appearance?: Appearance;
loader?: 'auto' | 'always' | 'never';
fonts?: Array<CssFontSource | CustomFontSource>;
}
export interface StripeCheckoutOptions {
clientSecret: string;
elementsOptions?: StripeCheckoutElementsOptions;
}
/* Elements with CheckoutSessions API types */
export type StripeCheckoutAddress = {
country: string;
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
};
export type StripeCheckoutAdjustableQuantity = {
maximum: number;
minimum: number;
};
export type StripeCheckoutBillingInterval = 'day' | 'month' | 'week' | 'year';
export type StripeCheckoutConfirmationRequirement =
| 'phoneNumber'
| 'shippingAddress'
| 'billingAddress'
| 'paymentDetails'
| 'email';
export type StripeCheckoutContact = {
name?: string | null;
address: StripeCheckoutAddress;
};
export type StripeCheckoutDeliveryEstimate = {
maximum: StripeCheckoutEstimate | null;
minimum: StripeCheckoutEstimate | null;
};
export type StripeCheckoutDiscountAmount = {
amount: number;
displayName: string;
promotionCode: string | null;
recurring:
| {type: 'forever'}
| {type: 'repeating'; durationInMonths: number}
| null;
};
export type StripeCheckoutDueNext = {
amountSubtotal: number;
amountDiscount: number;
amountTaxInclusive: number;
amountTaxExclusive: number;
billingCycleAnchor: number | null;
};
export type StripeCheckoutEstimate = {
unit: 'business_day' | 'day' | 'hour' | 'week' | 'month';
value: number;
};
export type StripeCheckoutLastPaymentError = {
message: string;
};
export type StripeCheckoutRedirectBehavior = 'always' | 'if_required';
export type StripeCheckoutSavedPaymentMethod = {
id: string;
type: 'card';
card: {
brand: string;
expMonth: number;
expYear: number;
last4: string;
};
billingDetails: {
email?: string | null;
name?: string | null;
phone?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
country?: string | null;
} | null;
};
};
export type StripeCheckoutTaxAmount = {
amount: number;
inclusive: boolean;
displayName: string;
};
export type StripeCheckoutLineItem = {
id: string;
name: string;
amountDiscount: number;
amountSubtotal: number;
amountTaxExclusive: number;
amountTaxInclusive: number;
unitAmount: number;
description: string | null;
quantity: number;
discountAmounts: Array<StripeCheckoutDiscountAmount> | null;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
recurring: {
interval: StripeCheckoutBillingInterval;
intervalCount: number;
isProrated: boolean;
usageType: 'metered' | 'licensed';
} | null;
adjustableQuantity: StripeCheckoutAdjustableQuantity | null;
images: string[];
};
export type StripeCheckoutRecurring = {
interval: StripeCheckoutBillingInterval;
intervalCount: number;
dueNext: StripeCheckoutDueNext;
trial: StripeCheckoutTrial | null;
};
export type StripeCheckoutShipping = {
shippingOption: StripeCheckoutShippingOption;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
};
export type StripeCheckoutShippingOption = {
id: string;
amount: number;
currency: string;
displayName: string | null;
deliveryEstimate: StripeCheckoutDeliveryEstimate | null;
};
export type StripeCheckoutStatus =
| {type: 'open'}
| {type: 'expired'}
| {
type: 'complete';
paymentStatus: 'paid' | 'unpaid' | 'no_payment_required';
};
export type StripeCheckoutTaxStatus =
| {status: 'ready'}
| {status: 'requires_shipping_address'}
| {status: 'requires_billing_address'};
export type StripeCheckoutTotalSummary = {
appliedBalance: number;
balanceAppliedToNextInvoice: boolean;
discount: number;
shippingRate: number;
subtotal: number;
taxExclusive: number;
taxInclusive: number;
total: number;
};
export type StripeCheckoutTrial = {
trialEnd: number;
trialPeriodDays: number;
};
export type StripeCheckoutCurrencyOption = {
amount: number;
currency: string;
currencyConversion?: {fxRate: number; sourceCurrency: string};
};
/* Custom Checkout session */
export interface StripeCheckoutSession {
billingAddress: StripeCheckoutContact | null;
businessName: string | null;
canConfirm: boolean;
confirmationRequirements: StripeCheckoutConfirmationRequirement[];
currency: string;
currencyOptions: Array<StripeCheckoutCurrencyOption> | null;
discountAmounts: Array<StripeCheckoutDiscountAmount> | null;
email: string | null;
id: string;
lastPaymentError: StripeCheckoutLastPaymentError | null;
lineItems: Array<StripeCheckoutLineItem>;
livemode: boolean;
phoneNumber: string | null;
recurring: StripeCheckoutRecurring | null;
savedPaymentMethods: Array<StripeCheckoutSavedPaymentMethod> | null;
shipping: StripeCheckoutShipping | null;
shippingAddress: StripeCheckoutContact | null;
shippingOptions: Array<StripeCheckoutShippingOption>;
status: StripeCheckoutStatus;
tax: StripeCheckoutTaxStatus;
taxAmounts: Array<StripeCheckoutTaxAmount> | null;
total: StripeCheckoutTotalSummary;
}
export type StripeCheckoutPaymentElementOptions = {
layout?: Layout | LayoutObject;
paymentMethodOrder?: Array<string>;
readonly?: boolean;
terms?: TermsOption;
fields?: FieldsOption;
};
export type StripeCheckoutAddressElementOptions = {
mode: AddressMode;
contacts?: ContactOption[];
display?: {
name?: 'full' | 'split' | 'organization';
};
};
export type StripeCheckoutExpressCheckoutElementOptions = {
buttonHeight: StripeExpressCheckoutElementOptions['buttonHeight'];
buttonTheme: StripeExpressCheckoutElementOptions['buttonTheme'];
buttonType: StripeExpressCheckoutElementOptions['buttonType'];
layout: StripeExpressCheckoutElementOptions['layout'];
paymentMethodOrder: StripeExpressCheckoutElementOptions['paymentMethodOrder'];
paymentMethods: StripeExpressCheckoutElementOptions['paymentMethods'];
};
export type StripeCheckoutUpdateHandler = (
session: StripeCheckoutSession
) => void;
export type StripeCheckoutExpressCheckoutElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered.
*/
on(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'ready',
handler?: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Triggered when a buyer authorizes a payment within a supported payment method.
*/
on(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
once(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
off(
eventType: 'confirm',
handler?: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeCheckoutExpressCheckoutElement;
/**
* Updates the options the `ExpressCheckoutElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update: StripeExpressCheckoutElement['update'];
};
type AnyBuyerError = {message: string; code: null};
type ApplyPromotionCodeError =
| {message: string; code: 'invalidCode'}
| AnyBuyerError;
export type StripeCheckoutApplyPromotionCodeResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: ApplyPromotionCodeError};
export type StripeCheckoutRemovePromotionCodeResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdateAddressResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdatePhoneNumberResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: never};
type UpdateEmailError =
| {message: string; code: 'incompleteEmail'}
| {message: string; code: 'invalidEmail'};
export type StripeCheckoutUpdateEmailResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: UpdateEmailError};
export type StripeCheckoutUpdateLineItemQuantityResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export type StripeCheckoutUpdateShippingOptionResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
type ConfirmError =
| {
message: string;
code: 'paymentFailed';
paymentFailed: {
declineCode: string | null;
};
}
| AnyBuyerError;
export type StripeCheckoutConfirmResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: ConfirmError};
type RunServerUpdateFunction = () => Promise<unknown>;
export type StripeCheckoutRunServerUpdateResult =
| {type: 'success'; success: StripeCheckoutSession}
| {type: 'error'; error: AnyBuyerError};
export interface StripeCheckout {
/* Custom Checkout methods */
applyPromotionCode: (
promotionCode: string
) => Promise<StripeCheckoutApplyPromotionCodeResult>;
removePromotionCode: () => Promise<StripeCheckoutRemovePromotionCodeResult>;
updateShippingAddress: (
shippingAddress: StripeCheckoutContact | null
) => Promise<StripeCheckoutUpdateAddressResult>;
updateBillingAddress: (
billingAddress: StripeCheckoutContact | null
) => Promise<StripeCheckoutUpdateAddressResult>;
updatePhoneNumber: (
phoneNumber: string
) => Promise<StripeCheckoutUpdatePhoneNumberResult>;
updateEmail: (email: string) => Promise<StripeCheckoutUpdateEmailResult>;
updateLineItemQuantity: (args: {
lineItem: string;
quantity: number;
}) => Promise<StripeCheckoutUpdateLineItemQuantityResult>;
updateShippingOption: (
shippingOption: string
) => Promise<StripeCheckoutUpdateShippingOptionResult>;
confirm: (args?: {
returnUrl?: string;
redirect?: StripeCheckoutRedirectBehavior;
paymentMethod?: string;
savePaymentMethod?: boolean;
email?: string;
phoneNumber?: string;
billingAddress?: StripeCheckoutContact;
shippingAddress?: StripeCheckoutContact;
expressCheckoutConfirmEvent?: StripeExpressCheckoutElementConfirmEvent;
}) => Promise<StripeCheckoutConfirmResult>;
session: () => StripeCheckoutSession;
on: (event: 'change', handler: StripeCheckoutUpdateHandler) => void;
runServerUpdate: (
userFunction: RunServerUpdateFunction
) => Promise<StripeCheckoutRunServerUpdateResult>;
/* Elements methods */
changeAppearance: (appearance: Appearance) => void;
getElement(elementType: 'payment'): StripePaymentElement | null;
getElement(
elementType: 'address',
mode: AddressMode
): StripeAddressElement | null;
getElement(
elementType: 'expressCheckout'
): StripeCheckoutExpressCheckoutElement | null;
/* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
getElement(
elementType: 'currencySelector'
): StripeCurrencySelectorElement | null;
createElement(
elementType: 'payment',
options?: StripeCheckoutPaymentElementOptions
): StripePaymentElement;
createElement(
elementType: 'address',
options: StripeCheckoutAddressElementOptions
): StripeAddressElement;
createElement(
elementType: 'expressCheckout',
options: StripeCheckoutExpressCheckoutElementOptions
): StripeCheckoutExpressCheckoutElement;
/* Requires beta access: Contact [Stripe support](https://support.stripe.com/) for more information. */
createElement(elementType: 'currencySelector'): StripeCurrencySelectorElement;
}

View File

@@ -0,0 +1 @@
export {CreateConfirmationToken} from '../api';

View File

@@ -0,0 +1 @@
export {CreateConfirmationToken} from '../api';

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,265 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeAddressElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
once(
eventType: 'change',
handler: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
off(
eventType: 'change',
handler?: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Updates the options the `AddressElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAddressElementOptions>): StripeAddressElement;
/**
* Validates and retrieves form values from the `AddressElement`.
*/
getValue(): Promise<
Pick<StripeAddressElementChangeEvent, 'complete' | 'isNewAddress' | 'value'>
>;
};
export interface ContactOption {
name: string;
phone?: string;
address: {
line1: string;
line2?: string;
city: string;
state: string;
postal_code: string;
country: string;
};
}
export type AddressMode = 'shipping' | 'billing';
export interface StripeAddressElementOptions {
/**
* Control which mode the AddressElement will be used for.
*/
mode: AddressMode;
/**
* An array of two-letter ISO country codes representing which countries
* are displayed in the AddressElement.
*/
allowedCountries?: string[] | null;
/**
* Control autocomplete settings in the AddressElement.
*/
autocomplete?:
| {mode: 'automatic'}
| {mode: 'disabled'}
| {mode: 'google_maps_api'; apiKey: string};
/**
* Whether or not AddressElement accepts PO boxes
*/
blockPoBox?: boolean;
/**
* An array of saved addresses.
*/
contacts?: ContactOption[];
/**
* Default value for AddressElement fields
*/
defaultValues?: {
name?: string | null;
firstName?: string | null;
lastName?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
state?: string | null;
postal_code?: string | null;
country: string;
};
phone?: string | null;
};
/**
* Control which additional fields to display in the AddressElement.
*/
fields?: {
phone?: 'always' | 'never' | 'auto';
};
/**
* Specify validation rules for the above additional fields.
*/
validation?: {
phone?: {
required: 'always' | 'never' | 'auto';
};
};
/**
* Specify display options in the AddressElement
*/
display?: {
name?: 'full' | 'split' | 'organization';
};
}
export interface StripeAddressElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'address';
/**
* The mode of the AddressElement that emitted this event.
*/
elementMode: AddressMode;
/**
* Whether or not the AddressElement is currently empty.
*/
empty: boolean;
/**
* Whether or not the AddressElement is complete.
*/
complete: boolean;
/**
* Whether or not the address is new.
*/
isNewAddress: boolean;
/**
* An object containing the current address.
*/
value: {
name: string;
firstName?: string;
lastName?: string;
address: {
line1: string;
line2: string | null;
city: string;
state: string;
postal_code: string;
country: string;
};
phone?: string;
};
}
export interface StripeAddressElementGetElementOptions {
mode: AddressMode;
}

View File

@@ -0,0 +1,265 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeAddressElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
once(
eventType: 'change',
handler: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
off(
eventType: 'change',
handler?: (event: StripeAddressElementChangeEvent) => any
): StripeAddressElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'address'; error: StripeError}) => any
): StripeAddressElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'address'}) => any
): StripeAddressElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'address'}) => any
): StripeAddressElement;
/**
* Updates the options the `AddressElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAddressElementOptions>): StripeAddressElement;
/**
* Validates and retrieves form values from the `AddressElement`.
*/
getValue(): Promise<
Pick<StripeAddressElementChangeEvent, 'complete' | 'isNewAddress' | 'value'>
>;
};
export interface ContactOption {
name: string;
phone?: string;
address: {
line1: string;
line2?: string;
city: string;
state: string;
postal_code: string;
country: string;
};
}
export type AddressMode = 'shipping' | 'billing';
export interface StripeAddressElementOptions {
/**
* Control which mode the AddressElement will be used for.
*/
mode: AddressMode;
/**
* An array of two-letter ISO country codes representing which countries
* are displayed in the AddressElement.
*/
allowedCountries?: string[] | null;
/**
* Control autocomplete settings in the AddressElement.
*/
autocomplete?:
| {mode: 'automatic'}
| {mode: 'disabled'}
| {mode: 'google_maps_api'; apiKey: string};
/**
* Whether or not AddressElement accepts PO boxes
*/
blockPoBox?: boolean;
/**
* An array of saved addresses.
*/
contacts?: ContactOption[];
/**
* Default value for AddressElement fields
*/
defaultValues?: {
name?: string | null;
firstName?: string | null;
lastName?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
state?: string | null;
postal_code?: string | null;
country: string;
};
phone?: string | null;
};
/**
* Control which additional fields to display in the AddressElement.
*/
fields?: {
phone?: 'always' | 'never' | 'auto';
};
/**
* Specify validation rules for the above additional fields.
*/
validation?: {
phone?: {
required: 'always' | 'never' | 'auto';
};
};
/**
* Specify display options in the AddressElement
*/
display?: {
name?: 'full' | 'split' | 'organization';
};
}
export interface StripeAddressElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'address';
/**
* The mode of the AddressElement that emitted this event.
*/
elementMode: AddressMode;
/**
* Whether or not the AddressElement is currently empty.
*/
empty: boolean;
/**
* Whether or not the AddressElement is complete.
*/
complete: boolean;
/**
* Whether or not the address is new.
*/
isNewAddress: boolean;
/**
* An object containing the current address.
*/
value: {
name: string;
firstName?: string;
lastName?: string;
address: {
line1: string;
line2: string | null;
city: string;
state: string;
postal_code: string;
country: string;
};
phone?: string;
};
}
export interface StripeAddressElementGetElementOptions {
mode: AddressMode;
}

View File

@@ -0,0 +1,65 @@
export type StripeAffirmMessageElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#affirm-message'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `AffirmMessageElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAffirmMessageElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'affirmMessage'}) => any
): StripeAffirmMessageElement;
};
export interface StripeAffirmMessageElementOptions {
/**
* The total amount in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency: 'USD';
/**
* The affirm logo color.
*/
logoColor?: 'primary' | 'black' | 'white';
/**
* The font color of the promotional message.
*/
fontColor?: string;
/**
* The font size of the promotional message.
*/
fontSize?: string;
/**
* The text alignment of the promotional message.
*/
textAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
}

View File

@@ -0,0 +1,65 @@
export type StripeAffirmMessageElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#affirm-message'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `AffirmMessageElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAffirmMessageElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'affirmMessage'}) => any
): StripeAffirmMessageElement;
};
export interface StripeAffirmMessageElementOptions {
/**
* The total amount in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency: 'USD';
/**
* The affirm logo color.
*/
logoColor?: 'primary' | 'black' | 'white';
/**
* The font color of the promotional message.
*/
fontColor?: string;
/**
* The font size of the promotional message.
*/
fontSize?: string;
/**
* The text alignment of the promotional message.
*/
textAlign?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
}

View File

@@ -0,0 +1,119 @@
export type StripeAfterpayClearpayMessageElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#afterpay-clearpay-message'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `AfterpayClearpayMessageElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAfterpayClearpayMessageElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'afterpayClearpayMessage'}) => any
): StripeAfterpayClearpayMessageElement;
};
export interface StripeAfterpayClearpayMessageElementOptions {
/**
* The total amount, divided into 4 installments, in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency: 'USD' | 'AUD' | 'CAD' | 'GBP' | 'NZD' | 'EUR';
/**
* The badge color theme, applied when `logoType` is set to badge.
*/
badgeTheme?:
| 'black-on-mint'
| 'black-on-white'
| 'mint-on-black'
| 'white-on-black';
/**
* The leading text for the mesage.
*/
introText?: 'In' | 'in' | 'Or' | 'or' | 'Pay' | 'pay' | 'Pay in' | 'pay in';
/**
* Indicates whether an item is eligible for purchase with Afterpay Clearpay.
*/
isEligible?: boolean;
/**
* Indicates whether an entire cart is eligible for purchase with Afterpay Clearpay.
*/
isCartEligible?: boolean;
/**
* The lockup color theme, applied when `logoType` is set to lockup.
*/
lockupTheme?: 'black' | 'white' | 'mint';
/**
* The logo style to display.
*/
logoType?: 'badge' | 'lockup';
/**
* The maximum `amount` allowed for a purchase. This should match the limit defined in your Stripe dashboard.
*/
max?: number;
/**
* The minimum `amount` allowed for a purchase. This should match the limit defined in your Stripe dashboard.
*/
min?: number;
/**
* The style of modal link to display.
*/
modalLinkStyle?: 'circled-info-icon' | 'learn-more-text' | 'more-info-text';
/**
* The background color for the info modal.
*/
modalTheme?: 'mint' | 'white';
/**
* Determines whether 'interest-free' is displayed in the message.
*/
showInterestFree?: boolean;
/**
* Determines whether 'with' is displayed before the logo.
*/
showLowerLimit?: boolean;
/**
* Determines whether the lower limit is displayed when `amount` exceeds price limits.
*/
showUpperLimit?: boolean;
/**
* Determines whether the upper limit is displayed when `amount` exceeds price limits.
*/
showWith?: boolean;
}

View File

@@ -0,0 +1,119 @@
export type StripeAfterpayClearpayMessageElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#afterpay-clearpay-message'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `AfterpayClearpayMessageElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripeAfterpayClearpayMessageElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'afterpayClearpayMessage'}) => any
): StripeAfterpayClearpayMessageElement;
};
export interface StripeAfterpayClearpayMessageElementOptions {
/**
* The total amount, divided into 4 installments, in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency: 'USD' | 'AUD' | 'CAD' | 'GBP' | 'NZD' | 'EUR';
/**
* The badge color theme, applied when `logoType` is set to badge.
*/
badgeTheme?:
| 'black-on-mint'
| 'black-on-white'
| 'mint-on-black'
| 'white-on-black';
/**
* The leading text for the mesage.
*/
introText?: 'In' | 'in' | 'Or' | 'or' | 'Pay' | 'pay' | 'Pay in' | 'pay in';
/**
* Indicates whether an item is eligible for purchase with Afterpay Clearpay.
*/
isEligible?: boolean;
/**
* Indicates whether an entire cart is eligible for purchase with Afterpay Clearpay.
*/
isCartEligible?: boolean;
/**
* The lockup color theme, applied when `logoType` is set to lockup.
*/
lockupTheme?: 'black' | 'white' | 'mint';
/**
* The logo style to display.
*/
logoType?: 'badge' | 'lockup';
/**
* The maximum `amount` allowed for a purchase. This should match the limit defined in your Stripe dashboard.
*/
max?: number;
/**
* The minimum `amount` allowed for a purchase. This should match the limit defined in your Stripe dashboard.
*/
min?: number;
/**
* The style of modal link to display.
*/
modalLinkStyle?: 'circled-info-icon' | 'learn-more-text' | 'more-info-text';
/**
* The background color for the info modal.
*/
modalTheme?: 'mint' | 'white';
/**
* Determines whether 'interest-free' is displayed in the message.
*/
showInterestFree?: boolean;
/**
* Determines whether 'with' is displayed before the logo.
*/
showLowerLimit?: boolean;
/**
* Determines whether the lower limit is displayed when `amount` exceeds price limits.
*/
showUpperLimit?: boolean;
/**
* Determines whether the upper limit is displayed when `amount` exceeds price limits.
*/
showWith?: boolean;
}

View File

@@ -0,0 +1,157 @@
export type ApplePayRecurringPaymentRequestIntervalUnit =
| 'year'
| 'month'
| 'day'
| 'hour'
| 'minute';
export interface ApplePayLineItem {
/**
* A short, localized description of the line item.
*/
label: string;
/**
* The amount in the currency's subunit (e.g. cents, yen, etc.)
*/
amount: number;
}
export type ApplePayRegularBilling = ApplePayLineItem & {
/**
* The date of the first payment.
*/
recurringPaymentStartDate?: Date;
/**
* The date of the final payment.
*/
recurringPaymentEndDate?: Date;
/**
* The amount of time — in calendar units, such as day, month, or year — that represents a fraction of the total payment interval.
*/
recurringPaymentIntervalUnit?: ApplePayRecurringPaymentRequestIntervalUnit;
/**
* The number of interval units that make up the total payment interval.
*/
recurringPaymentIntervalCount?: number;
};
export interface ApplePayRecurringPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the recurring payment on your website.
*/
managementURL: string;
regularBilling: ApplePayRegularBilling;
trialBilling?: ApplePayRegularBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
}
export type ApplePayAutomaticReloadBilling = ApplePayLineItem & {
/**
* The balance an account reaches before the merchant applies the automatic reload amount.
*/
automaticReloadPaymentThresholdAmount: number;
};
export interface ApplePayAutomaticReloadPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the automatic reload payment on your website.
*/
managementURL: string;
automaticReloadBilling: ApplePayAutomaticReloadBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
}
export type ApplePayDeferredBilling = ApplePayLineItem & {
/**
* The date, in the future, of the payment.
*/
deferredPaymentDate: Date;
};
export interface ApplePayDeferredPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the deferred payment on your website.
*/
managementURL: string;
deferredBilling: ApplePayDeferredBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
/**
* The future date before which the customer can cancel the deferred payment for free.
*/
freeCancellationDate?: Date;
/**
* The time zone of the free cancellation date.
*
* These are [tz](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) timezones such as `America/Los_Angeles`, `Europe/Dublin`, and `Asia/Singapore`.
*/
freeCancellationDateTimeZone?: string;
}
export type ApplePayOption =
| {
recurringPaymentRequest: ApplePayRecurringPaymentRequest;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest: ApplePayDeferredPaymentRequest;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest: ApplePayAutomaticReloadPaymentRequest;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
};
export type ApplePayUpdateOption =
| {
recurringPaymentRequest: ApplePayRecurringPaymentRequest;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
automaticReloadPaymentRequest: ApplePayAutomaticReloadPaymentRequest;
}
| {
recurringPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
};

View File

@@ -0,0 +1,157 @@
export type ApplePayRecurringPaymentRequestIntervalUnit =
| 'year'
| 'month'
| 'day'
| 'hour'
| 'minute';
export interface ApplePayLineItem {
/**
* A short, localized description of the line item.
*/
label: string;
/**
* The amount in the currency's subunit (e.g. cents, yen, etc.)
*/
amount: number;
}
export type ApplePayRegularBilling = ApplePayLineItem & {
/**
* The date of the first payment.
*/
recurringPaymentStartDate?: Date;
/**
* The date of the final payment.
*/
recurringPaymentEndDate?: Date;
/**
* The amount of time — in calendar units, such as day, month, or year — that represents a fraction of the total payment interval.
*/
recurringPaymentIntervalUnit?: ApplePayRecurringPaymentRequestIntervalUnit;
/**
* The number of interval units that make up the total payment interval.
*/
recurringPaymentIntervalCount?: number;
};
export interface ApplePayRecurringPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the recurring payment on your website.
*/
managementURL: string;
regularBilling: ApplePayRegularBilling;
trialBilling?: ApplePayRegularBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
}
export type ApplePayAutomaticReloadBilling = ApplePayLineItem & {
/**
* The balance an account reaches before the merchant applies the automatic reload amount.
*/
automaticReloadPaymentThresholdAmount: number;
};
export interface ApplePayAutomaticReloadPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the automatic reload payment on your website.
*/
managementURL: string;
automaticReloadBilling: ApplePayAutomaticReloadBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
}
export type ApplePayDeferredBilling = ApplePayLineItem & {
/**
* The date, in the future, of the payment.
*/
deferredPaymentDate: Date;
};
export interface ApplePayDeferredPaymentRequest {
/**
* The description of the payment that the customer will see in their Apple Pay wallet.
*/
paymentDescription: string;
/**
* The URL to manage items related to the deferred payment on your website.
*/
managementURL: string;
deferredBilling: ApplePayDeferredBilling;
/**
* The billing agreement label that is displayed to the customer in the Apple Pay payment interface.
*/
billingAgreement?: string;
/**
* The future date before which the customer can cancel the deferred payment for free.
*/
freeCancellationDate?: Date;
/**
* The time zone of the free cancellation date.
*
* These are [tz](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) timezones such as `America/Los_Angeles`, `Europe/Dublin`, and `Asia/Singapore`.
*/
freeCancellationDateTimeZone?: string;
}
export type ApplePayOption =
| {
recurringPaymentRequest: ApplePayRecurringPaymentRequest;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest: ApplePayDeferredPaymentRequest;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest: ApplePayAutomaticReloadPaymentRequest;
}
| {
recurringPaymentRequest?: null;
deferredPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
};
export type ApplePayUpdateOption =
| {
recurringPaymentRequest: ApplePayRecurringPaymentRequest;
automaticReloadPaymentRequest?: null;
}
| {
recurringPaymentRequest?: null;
automaticReloadPaymentRequest: ApplePayAutomaticReloadPaymentRequest;
}
| {
recurringPaymentRequest?: null;
automaticReloadPaymentRequest?: null;
};

View File

@@ -0,0 +1,138 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeAuBankAccountElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
once(
eventType: 'change',
handler: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
off(
eventType: 'change',
handler?: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Updates the options the `AuBankAccountElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `AuBankAccountElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeAuBankAccountElementOptions>): void;
};
export interface StripeAuBankAccountElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeAuBankAccountElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'auBankAccount';
/**
* The bank name corresponding to the entered BSB.
*/
bankName?: string;
/**
* The branch name corresponding to the entered BSB.
*/
branchName?: string;
}

View File

@@ -0,0 +1,138 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeAuBankAccountElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
once(
eventType: 'change',
handler: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
off(
eventType: 'change',
handler?: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'auBankAccount'}) => any
): StripeAuBankAccountElement;
/**
* Updates the options the `AuBankAccountElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `AuBankAccountElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeAuBankAccountElementOptions>): void;
};
export interface StripeAuBankAccountElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeAuBankAccountElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'auBankAccount';
/**
* The bank name corresponding to the entered BSB.
*/
bankName?: string;
/**
* The branch name corresponding to the entered BSB.
*/
branchName?: string;
}

View File

@@ -0,0 +1,264 @@
import {StripeElementType} from '../elements-group';
export type StripeElementBase = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#card-element'`) or a DOM element.
*
* You need to create a container DOM element to mount an `Element`.
* If the container DOM element has a label, the `Element` is automatically focused when its label is clicked.
* There are two ways to do this:
*
* 1. Mount the instance within a `<label>`.
* 2. Create a `<label>` with a `for` attribute, referencing the ID of your container.
*/
mount(domElement: string | HTMLElement): void;
/**
* Blurs the element.
*/
blur(): void;
/**
* Clears the value(s) of the element.
*/
clear(): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Focuses the element.
*/
focus(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
};
/**
* Customize the appearance of an element using CSS properties passed in a `Style` object, which consists of CSS properties nested under objects for each variant.
*/
export interface StripeElementStyle {
/**
* Base variant—all other variants inherit from these styles.
*/
base?: StripeElementStyleVariant;
/**
* Applied when the element has valid input.
*/
complete?: StripeElementStyleVariant;
/**
* Applied when the element has no customer input.
*/
empty?: StripeElementStyleVariant;
/**
* Applied when the element has invalid input.
*/
invalid?: StripeElementStyleVariant;
}
/**
* An object with `CSSProperties` supported by Stripe.js.
* Pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant.
*/
export interface StripeElementStyleVariant extends StripeElementCSSProperties {
':hover'?: StripeElementCSSProperties;
':focus'?: StripeElementCSSProperties;
'::placeholder'?: StripeElementCSSProperties;
'::selection'?: StripeElementCSSProperties;
':-webkit-autofill'?: StripeElementCSSProperties;
/**
* Available for all elements except the `paymentRequestButton` element
*/
':disabled'?: StripeElementCSSProperties;
/**
* Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.
*/
'::-ms-clear'?: StripeElementCSSProperties & {display: string};
}
/**
* CSS properties supported by Stripe.js.
*/
export interface StripeElementCSSProperties {
/**
* The [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) CSS property.
*
* This property works best with the `::selection` pseudo-class.
* In other cases, consider setting the background color on the element's container instaed.
*/
backgroundColor?: string;
/**
* The [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
*/
color?: string;
/**
* The [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) CSS property.
*/
fontFamily?: string;
/**
* The [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) CSS property.
*/
fontSize?: string;
/**
* The [font-smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smoothing) CSS property.
*/
fontSmoothing?: string;
/**
* The [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) CSS property.
*/
fontStyle?: string;
/**
* The [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) CSS property.
*/
fontVariant?: string;
/**
* The [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) CSS property.
*/
fontWeight?: string | number;
/**
* A custom property, used to set the color of the icons that are rendered in an element.
*/
iconColor?: string;
/**
* The [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) CSS property.
*
* To avoid cursors being rendered inconsistently across browsers, consider using a padding on the element's container instead.
*/
lineHeight?: string;
/**
* The [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) CSS property.
*/
letterSpacing?: string;
/**
* The [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) CSS property.
*
* Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.
*/
textAlign?: string;
/**
* The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) CSS property.
*
* Available for the `idealBank` element.
* Accepts integer length with `px` unit as values.
*/
padding?: string;
/**
* The [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) CSS property.
*/
textDecoration?: string;
/**
* The [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) CSS property.
*/
textShadow?: string;
/**
* The [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) CSS property.
*/
textTransform?: string;
}
/**
* Use `Classes` to set custom class names on the container DOM element when the Stripe element is in a particular state.
*/
export interface StripeElementClasses {
/**
* The base class applied to the container.
* Defaults to `StripeElement`.
*/
base?: string;
/**
* The class name to apply when the `Element` is complete.
* Defaults to `StripeElement--complete`.
*/
complete?: string;
/**
* The class name to apply when the `Element` is empty.
* Defaults to `StripeElement--empty`.
*/
empty?: string;
/**
* The class name to apply when the `Element` is focused.
* Defaults to `StripeElement--focus`.
*/
focus?: string;
/**
* The class name to apply when the `Element` is invalid.
* Defaults to `StripeElement--invalid`.
*/
invalid?: string;
/**
* The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
* Defaults to `StripeElement--webkit-autofill`.
*/
webkitAutofill?: string;
}
export interface StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: StripeElementType;
/**
* `true` if the value is empty.
*/
empty: boolean;
/**
* `true` if the value is well-formed and potentially complete.
* The `complete` value can be used to progressively disclose the next parts of your form or to enable form submission.
*
* It is not an indicator of whether a customer is done with their input—it only indicates that the Element contains a potentially complete, well-formed value.
* In many cases the customer could still add further input.
*
* The `complete` value should not be used to perform an action such as advancing the cursor to a subsequent field or performing a tokenization request.
*/
complete: boolean;
/**
* The current validation error, if any.
*/
error:
| undefined
| {
type: 'validation_error';
code: string;
message: string;
};
}

View File

@@ -0,0 +1,264 @@
import {StripeElementType} from '../elements-group';
export type StripeElementBase = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#card-element'`) or a DOM element.
*
* You need to create a container DOM element to mount an `Element`.
* If the container DOM element has a label, the `Element` is automatically focused when its label is clicked.
* There are two ways to do this:
*
* 1. Mount the instance within a `<label>`.
* 2. Create a `<label>` with a `for` attribute, referencing the ID of your container.
*/
mount(domElement: string | HTMLElement): void;
/**
* Blurs the element.
*/
blur(): void;
/**
* Clears the value(s) of the element.
*/
clear(): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Focuses the element.
*/
focus(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
};
/**
* Customize the appearance of an element using CSS properties passed in a `Style` object, which consists of CSS properties nested under objects for each variant.
*/
export interface StripeElementStyle {
/**
* Base variant—all other variants inherit from these styles.
*/
base?: StripeElementStyleVariant;
/**
* Applied when the element has valid input.
*/
complete?: StripeElementStyleVariant;
/**
* Applied when the element has no customer input.
*/
empty?: StripeElementStyleVariant;
/**
* Applied when the element has invalid input.
*/
invalid?: StripeElementStyleVariant;
}
/**
* An object with `CSSProperties` supported by Stripe.js.
* Pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant.
*/
export interface StripeElementStyleVariant extends StripeElementCSSProperties {
':hover'?: StripeElementCSSProperties;
':focus'?: StripeElementCSSProperties;
'::placeholder'?: StripeElementCSSProperties;
'::selection'?: StripeElementCSSProperties;
':-webkit-autofill'?: StripeElementCSSProperties;
/**
* Available for all elements except the `paymentRequestButton` element
*/
':disabled'?: StripeElementCSSProperties;
/**
* Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.
*/
'::-ms-clear'?: StripeElementCSSProperties & {display: string};
}
/**
* CSS properties supported by Stripe.js.
*/
export interface StripeElementCSSProperties {
/**
* The [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) CSS property.
*
* This property works best with the `::selection` pseudo-class.
* In other cases, consider setting the background color on the element's container instaed.
*/
backgroundColor?: string;
/**
* The [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
*/
color?: string;
/**
* The [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) CSS property.
*/
fontFamily?: string;
/**
* The [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) CSS property.
*/
fontSize?: string;
/**
* The [font-smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smoothing) CSS property.
*/
fontSmoothing?: string;
/**
* The [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) CSS property.
*/
fontStyle?: string;
/**
* The [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) CSS property.
*/
fontVariant?: string;
/**
* The [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) CSS property.
*/
fontWeight?: string | number;
/**
* A custom property, used to set the color of the icons that are rendered in an element.
*/
iconColor?: string;
/**
* The [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) CSS property.
*
* To avoid cursors being rendered inconsistently across browsers, consider using a padding on the element's container instead.
*/
lineHeight?: string;
/**
* The [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) CSS property.
*/
letterSpacing?: string;
/**
* The [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) CSS property.
*
* Available for the `cardNumber`, `cardExpiry`, and `cardCvc` elements.
*/
textAlign?: string;
/**
* The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) CSS property.
*
* Available for the `idealBank` element.
* Accepts integer length with `px` unit as values.
*/
padding?: string;
/**
* The [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) CSS property.
*/
textDecoration?: string;
/**
* The [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) CSS property.
*/
textShadow?: string;
/**
* The [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) CSS property.
*/
textTransform?: string;
}
/**
* Use `Classes` to set custom class names on the container DOM element when the Stripe element is in a particular state.
*/
export interface StripeElementClasses {
/**
* The base class applied to the container.
* Defaults to `StripeElement`.
*/
base?: string;
/**
* The class name to apply when the `Element` is complete.
* Defaults to `StripeElement--complete`.
*/
complete?: string;
/**
* The class name to apply when the `Element` is empty.
* Defaults to `StripeElement--empty`.
*/
empty?: string;
/**
* The class name to apply when the `Element` is focused.
* Defaults to `StripeElement--focus`.
*/
focus?: string;
/**
* The class name to apply when the `Element` is invalid.
* Defaults to `StripeElement--invalid`.
*/
invalid?: string;
/**
* The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
* Defaults to `StripeElement--webkit-autofill`.
*/
webkitAutofill?: string;
}
export interface StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: StripeElementType;
/**
* `true` if the value is empty.
*/
empty: boolean;
/**
* `true` if the value is well-formed and potentially complete.
* The `complete` value can be used to progressively disclose the next parts of your form or to enable form submission.
*
* It is not an indicator of whether a customer is done with their input—it only indicates that the Element contains a potentially complete, well-formed value.
* In many cases the customer could still add further input.
*
* The `complete` value should not be used to perform an action such as advancing the cursor to a subsequent field or performing a tokenization request.
*/
complete: boolean;
/**
* The current validation error, if any.
*/
error:
| undefined
| {
type: 'validation_error';
code: string;
message: string;
};
}

View File

@@ -0,0 +1,119 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeCardCvcElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
once(
eventType: 'change',
handler: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
off(
eventType: 'change',
handler?: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Updates the options the `CardCvcElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardCvcElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardCvcElementOptions>): void;
};
export interface StripeCardCvcElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeCardCvcElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardCvc';
}

View File

@@ -0,0 +1,119 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeCardCvcElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
once(
eventType: 'change',
handler: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
off(
eventType: 'change',
handler?: (event: StripeCardCvcElementChangeEvent) => any
): StripeCardCvcElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardCvc'}) => any
): StripeCardCvcElement;
/**
* Updates the options the `CardCvcElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardCvcElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardCvcElementOptions>): void;
};
export interface StripeCardCvcElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeCardCvcElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardCvc';
}

View File

@@ -0,0 +1,119 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeCardExpiryElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
once(
eventType: 'change',
handler: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
off(
eventType: 'change',
handler?: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Updates the options the `CardExpiryElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardExpiryElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardExpiryElementOptions>): void;
};
export interface StripeCardExpiryElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeCardExpiryElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardExpiry';
}

View File

@@ -0,0 +1,119 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeCardExpiryElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
once(
eventType: 'change',
handler: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
off(
eventType: 'change',
handler?: (event: StripeCardExpiryElementChangeEvent) => any
): StripeCardExpiryElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardExpiry'}) => any
): StripeCardExpiryElement;
/**
* Updates the options the `CardExpiryElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardExpiryElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardExpiryElementOptions>): void;
};
export interface StripeCardExpiryElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeCardExpiryElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardExpiry';
}

View File

@@ -0,0 +1,217 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
import {StripeError} from '../stripe';
import {CardNetworkBrand} from '../elements-group';
export type StripeCardNumberElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
once(
eventType: 'change',
handler: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
off(
eventType: 'change',
handler?: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when there is a change to the available networks the provided card can run on.
*/
on(
eventType: 'networkschange',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'networkschange',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'networkschange',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
/**
* Updates the options the `CardNumberElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `Element` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardNumberElementUpdateOptions>): void;
};
export interface StripeCardNumberElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Show a card brand icon in the Element.
* Default is `false`.
*/
showIcon?: boolean;
/**
* Appearance of the brand icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides and disables the Link Button in the Card Element.
* Default is `false`.
*/
disableLink?: boolean;
/**
* Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
* network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
* entry of a co-branded card.
*
* Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
*/
preferredNetwork?: Array<CardNetworkBrand>;
}
export interface StripeCardNumberElementUpdateOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Show a card brand icon in the Element.
* Default is `false`.
*/
showIcon?: boolean;
/**
* Appearance of the brand icon in the Element.
*/
iconStyle?: 'default' | 'solid';
}
export interface StripeCardNumberElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardNumber';
/*
* The card brand of the card number being entered.
*/
brand:
| 'visa'
| 'mastercard'
| 'amex'
| 'discover'
| 'diners'
| 'jcb'
| 'unionpay'
| 'unknown';
}

View File

@@ -0,0 +1,217 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
import {StripeError} from '../stripe';
import {CardNetworkBrand} from '../elements-group';
export type StripeCardNumberElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
once(
eventType: 'change',
handler: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
off(
eventType: 'change',
handler?: (event: StripeCardNumberElementChangeEvent) => any
): StripeCardNumberElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when there is a change to the available networks the provided card can run on.
*/
on(
eventType: 'networkschange',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
once(
eventType: 'networkschange',
handler: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
off(
eventType: 'networkschange',
handler?: (event: {elementType: 'cardNumber'}) => any
): StripeCardNumberElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'cardNumber'; error: StripeError}) => any
): StripeCardNumberElement;
/**
* Updates the options the `CardNumberElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `Element` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeCardNumberElementUpdateOptions>): void;
};
export interface StripeCardNumberElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Show a card brand icon in the Element.
* Default is `false`.
*/
showIcon?: boolean;
/**
* Appearance of the brand icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides and disables the Link Button in the Card Element.
* Default is `false`.
*/
disableLink?: boolean;
/**
* Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
* network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
* entry of a co-branded card.
*
* Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
*/
preferredNetwork?: Array<CardNetworkBrand>;
}
export interface StripeCardNumberElementUpdateOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
placeholder?: string;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Show a card brand icon in the Element.
* Default is `false`.
*/
showIcon?: boolean;
/**
* Appearance of the brand icon in the Element.
*/
iconStyle?: 'default' | 'solid';
}
export interface StripeCardNumberElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'cardNumber';
/*
* The card brand of the card number being entered.
*/
brand:
| 'visa'
| 'mastercard'
| 'amex'
| 'discover'
| 'diners'
| 'jcb'
| 'unionpay'
| 'unknown';
}

View File

@@ -0,0 +1,243 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
import {StripeError} from '../stripe';
import {CardNetworkBrand} from '../elements-group';
export type StripeCardElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
once(
eventType: 'change',
handler: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
off(
eventType: 'change',
handler?: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when there is a change to the available networks the provided card can run on.
*/
on(
eventType: 'networkschange',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'networkschange',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'networkschange',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
/**
* Updates the options the `CardElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: StripeCardElementUpdateOptions): void;
};
export interface StripeCardElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
* Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
*/
value?: {postalCode?: string};
/**
* Hide the postal code field.
* Default is `false`.
* If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
*/
hidePostalCode?: boolean;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Hides and disables the Link Button in the Card Element.
* Default is `false`.
*/
disableLink?: boolean;
/**
* Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
* network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
* entry of a co-branded card.
*
* Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
*/
preferredNetwork?: Array<CardNetworkBrand>;
}
export interface StripeCardElementUpdateOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
* Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
*/
value?: {postalCode?: string};
/**
* Hide the postal code field.
* Default is `false`.
* If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
*/
hidePostalCode?: boolean;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
}
export interface StripeCardElementChangeEvent extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'card';
/**
* An object containing the currently entered `postalCode`.
*/
value: {postalCode: string};
/*
* The card brand of the card number being entered.
*/
brand:
| 'visa'
| 'mastercard'
| 'amex'
| 'discover'
| 'diners'
| 'jcb'
| 'unionpay'
| 'unknown';
}

View File

@@ -0,0 +1,243 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
import {StripeError} from '../stripe';
import {CardNetworkBrand} from '../elements-group';
export type StripeCardElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
once(
eventType: 'change',
handler: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
off(
eventType: 'change',
handler?: (event: StripeCardElementChangeEvent) => any
): StripeCardElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when there is a change to the available networks the provided card can run on.
*/
on(
eventType: 'networkschange',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
once(
eventType: 'networkschange',
handler: (event: {elementType: 'card'}) => any
): StripeCardElement;
off(
eventType: 'networkschange',
handler?: (event: {elementType: 'card'}) => any
): StripeCardElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'card'; error: StripeError}) => any
): StripeCardElement;
/**
* Updates the options the `CardElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `CardElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: StripeCardElementUpdateOptions): void;
};
export interface StripeCardElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
* Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
*/
value?: {postalCode?: string};
/**
* Hide the postal code field.
* Default is `false`.
* If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
*/
hidePostalCode?: boolean;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
/**
* Hides and disables the Link Button in the Card Element.
* Default is `false`.
*/
disableLink?: boolean;
/**
* Specifies a network preference for Card Brand Choice. The first network in the array which is a valid
* network on the entered card will be selected as the default in the Card Brand Choice dropdown upon
* entry of a co-branded card.
*
* Default is an empty array, meaning no default selection will be made in the Card Brand choice dropdown.
*/
preferredNetwork?: Array<CardNetworkBrand>;
}
export interface StripeCardElementUpdateOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled set of values to include in the input (e.g., `{postalCode: '94110'}`).
* Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
*/
value?: {postalCode?: string};
/**
* Hide the postal code field.
* Default is `false`.
* If you are already collecting a full billing address or postal code elsewhere, set this to `true`.
*/
hidePostalCode?: boolean;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is `false`.
*/
disabled?: boolean;
}
export interface StripeCardElementChangeEvent extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'card';
/**
* An object containing the currently entered `postalCode`.
*/
value: {postalCode: string};
/*
* The card brand of the card number being entered.
*/
brand:
| 'visa'
| 'mastercard'
| 'amex'
| 'discover'
| 'diners'
| 'jcb'
| 'unionpay'
| 'unknown';
}

View File

@@ -0,0 +1,93 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeCurrencySelectorElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
};

View File

@@ -0,0 +1,93 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeCurrencySelectorElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'currencySelector'}) => any
): StripeCurrencySelectorElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'currencySelector';
error: StripeError;
}) => any
): StripeCurrencySelectorElement;
};

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeEpsBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
once(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
off(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Updates the options the `EpsBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `EpsBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeEpsBankElementOptions>): void;
};
export interface StripeEpsBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [EPS guide](https://stripe.com/docs/payments/eps/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeEpsBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'epsBank';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [EPS guide](https://stripe.com/docs/payments/eps/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
}

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeEpsBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
once(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
off(
eventType: 'change',
handler: (event: StripeEpsBankElementChangeEvent) => any
): StripeEpsBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'ready',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'focus',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'blur',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
off(
eventType: 'escape',
handler: (event: {elementType: 'epsBank'}) => any
): StripeEpsBankElement;
/**
* Updates the options the `EpsBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `EpsBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeEpsBankElementOptions>): void;
};
export interface StripeEpsBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [EPS guide](https://stripe.com/docs/payments/eps/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeEpsBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'epsBank';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [EPS guide](https://stripe.com/docs/payments/eps/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
}

View File

@@ -0,0 +1,479 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
import {ApplePayOption, ApplePayUpdateOption} from './apple-pay';
export type StripeExpressCheckoutElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'ready',
handler?: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a button on the element is clicked.
*/
on(
eventType: 'click',
handler: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'click',
handler: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'click',
handler?: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer authorizes a payment within a supported payment method.
*/
on(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'confirm',
handler?: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
*/
on(
eventType: 'cancel',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'cancel',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'cancel',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer selects a different shipping address.
*/
on(
eventType: 'shippingaddresschange',
handler: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
once(
eventType: 'shippingaddresschange',
handler: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
off(
eventType: 'shippingaddresschange',
handler?: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer selects a different shipping rate.
*/
on(
eventType: 'shippingratechange',
handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'shippingratechange',
handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'shippingratechange',
handler?: (
event: StripeExpressCheckoutElementShippingRateChangeEvent
) => any
): StripeExpressCheckoutElement;
/**
* Updates the options the `ExpressCheckoutElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(
options: StripeExpressCheckoutElementUpdateOptions
): StripeExpressCheckoutElement;
};
export type ExpressPaymentType =
| 'google_pay'
| 'apple_pay'
| 'amazon_pay'
| 'link'
| 'paypal';
export type ExpressCheckoutPartialAddress = {
city: string;
state: string;
postal_code: string;
country: string;
};
export type ExpressCheckoutAddress = ExpressCheckoutPartialAddress & {
line1: string;
line2: string | null;
};
export type BillingDetails = {
name: string;
email?: string;
phone?: string;
address: ExpressCheckoutAddress;
};
export type ShippingAddress = {
name: string;
address: ExpressCheckoutAddress;
};
export type LineItem = {
name: string;
amount: number;
};
export type DeliveryUnit = 'hour' | 'day' | 'business_day' | 'week' | 'month';
export type DeliveryEstimate = {
unit: DeliveryUnit;
value: number;
};
export type ShippingRate = {
id: string;
amount: number;
displayName: string;
deliveryEstimate?:
| string
| {
maximum?: DeliveryEstimate;
minimum?: DeliveryEstimate;
};
};
export type LayoutOption = {
maxColumns?: number;
maxRows?: number;
overflow?: 'auto' | 'never';
};
export type ExpressCheckoutPaymentMethodOptionWithAlways =
| 'always'
| ExpressCheckoutPaymentMethodOption;
export type ExpressCheckoutPaymentMethodOption = 'auto' | 'never';
export type ExpressCheckoutPaymentMethodsOption = {
amazonPay?: ExpressCheckoutPaymentMethodOption;
applePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
googlePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
link?: ExpressCheckoutPaymentMethodOption;
paypal?: ExpressCheckoutPaymentMethodOption;
};
export type ExpressCheckoutWalletsOption = {
applePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
googlePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
};
export type ApplePayButtonTheme = 'black' | 'white' | 'white-outline';
export type GooglePayButtonTheme = 'black' | 'white';
export type PayPalButtonTheme = 'gold' | 'blue' | 'silver' | 'white' | 'black';
export type ButtonThemeOption = {
applePay?: ApplePayButtonTheme;
googlePay?: GooglePayButtonTheme;
paypal?: PayPalButtonTheme;
};
export type ApplePayButtonType =
| 'add-money'
| 'book'
| 'buy'
| 'check-out'
| 'contribute'
| 'donate'
| 'order'
| 'plain'
| 'reload'
| 'rent'
| 'subscribe'
| 'support'
| 'tip'
| 'top-up';
export type GooglePayButtonType =
| 'book'
| 'buy'
| 'checkout'
| 'donate'
| 'order'
| 'pay'
| 'plain'
| 'subscribe';
export type PayPalButtonType = 'paypal' | 'buynow' | 'checkout' | 'pay';
export type ButtonTypeOption = {
applePay?: ApplePayButtonType;
googlePay?: GooglePayButtonType;
paypal?: PayPalButtonType;
};
export interface StripeExpressCheckoutElementOptions {
/**
* Manually sets the height of the buttons shown.
*/
buttonHeight?: number;
/**
* Controls the color of each button.
*/
buttonTheme?: ButtonThemeOption;
/**
* Specifies the type of each button.
*/
buttonType?: ButtonTypeOption;
/**
* Specifies how buttons should be laid out in relation to each other.
*/
layout?: LayoutOption;
/**
* Override the order in which payment methods are displayed in the Express Checkout Element.
* By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
/**
* Control payment method display in the Express Checkout Element.
*/
paymentMethods?: ExpressCheckoutPaymentMethodsOption;
/**
* @deprecated
* Use `paymentMethods` instead.
*
* Control wallets display in the Express Checkout Element.
*/
wallets?: ExpressCheckoutWalletsOption;
}
/*
* Updatable options for an `Elements` instance
*/
export interface StripeExpressCheckoutElementUpdateOptions {
/**
* Manually sets the height of the buttons shown.
*/
buttonHeight?: number;
/**
* Specifies how buttons should be laid out in relation to each other.
*/
layout?: LayoutOption;
/**
* Override the order in which payment methods are displayed in the Pay Button Element.
* By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
}
export type AvailablePaymentMethods = {
amazonPay: boolean;
applePay: boolean;
googlePay: boolean;
link: boolean;
paypal: boolean;
};
export interface StripeExpressCheckoutElementReadyEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'expressCheckout';
/**
* The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
*/
availablePaymentMethods: undefined | AvailablePaymentMethods;
}
export type ClickResolveDetails = {
/**
* An array of two-letter ISO country codes representing which countries
* are eligible shipping locations.
*/
allowedShippingCountries?: string[];
billingAddressRequired?: boolean;
/**
* Provide information about your business that will be displayed in the payment interface.
* This information will be retrieved from your Stripe account if not provided.
*/
business?: {name: string};
emailRequired?: boolean;
lineItems?: Array<LineItem>;
phoneNumberRequired?: boolean;
shippingAddressRequired?: boolean;
shippingRates?: Array<ShippingRate>;
applePay?: ApplePayOption;
};
export interface StripeExpressCheckoutElementClickEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'expressCheckout';
/**
* The payment method associated with the button that was clicked.
*/
expressPaymentType: ExpressPaymentType;
/**
* Callback to configure the details shown on a payment interface, including which fields to collect.
* This must be called within 1 second of the 'click' event being emitted.
*/
resolve: (resolveDetails?: ClickResolveDetails) => void;
}
export interface StripeExpressCheckoutElementConfirmEvent {
/**
* Callback when a payment is unsuccessful. Optionally, specifying a reason will show a more detailed error in the payment interface.
*/
paymentFailed: (payload?: {
reason?: 'fail' | 'invalid_shipping_address';
}) => void;
billingDetails?: BillingDetails;
shippingAddress?: ShippingAddress;
shippingRate?: ShippingRate;
expressPaymentType: ExpressPaymentType;
}
export type ChangeResolveDetails = {
lineItems?: Array<LineItem>;
shippingRates?: Array<ShippingRate>;
applePay?: ApplePayUpdateOption;
};
export interface StripeExpressCheckoutElementShippingAddressChangeEvent {
name: string;
address: ExpressCheckoutPartialAddress;
resolve: (resolveDetails?: ChangeResolveDetails) => void;
reject: () => void;
}
export interface StripeExpressCheckoutElementShippingRateChangeEvent {
shippingRate: ShippingRate;
resolve: (resolveDetails?: ChangeResolveDetails) => void;
reject: () => void;
}

View File

@@ -0,0 +1,479 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
import {ApplePayOption, ApplePayUpdateOption} from './apple-pay';
export type StripeExpressCheckoutElement = StripeElementBase & {
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'ready',
handler: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'ready',
handler?: (event: StripeExpressCheckoutElementReadyEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a button on the element is clicked.
*/
on(
eventType: 'click',
handler: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'click',
handler: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'click',
handler?: (event: StripeExpressCheckoutElementClickEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'expressCheckout';
error: StripeError;
}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer authorizes a payment within a supported payment method.
*/
on(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'confirm',
handler: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'confirm',
handler?: (event: StripeExpressCheckoutElementConfirmEvent) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
*/
on(
eventType: 'cancel',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
once(
eventType: 'cancel',
handler: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
off(
eventType: 'cancel',
handler?: (event: {elementType: 'expressCheckout'}) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer selects a different shipping address.
*/
on(
eventType: 'shippingaddresschange',
handler: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
once(
eventType: 'shippingaddresschange',
handler: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
off(
eventType: 'shippingaddresschange',
handler?: (
event: StripeExpressCheckoutElementShippingAddressChangeEvent
) => any
): StripeExpressCheckoutElement;
/**
* Triggered when a buyer selects a different shipping rate.
*/
on(
eventType: 'shippingratechange',
handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any
): StripeExpressCheckoutElement;
once(
eventType: 'shippingratechange',
handler: (event: StripeExpressCheckoutElementShippingRateChangeEvent) => any
): StripeExpressCheckoutElement;
off(
eventType: 'shippingratechange',
handler?: (
event: StripeExpressCheckoutElementShippingRateChangeEvent
) => any
): StripeExpressCheckoutElement;
/**
* Updates the options the `ExpressCheckoutElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(
options: StripeExpressCheckoutElementUpdateOptions
): StripeExpressCheckoutElement;
};
export type ExpressPaymentType =
| 'google_pay'
| 'apple_pay'
| 'amazon_pay'
| 'link'
| 'paypal';
export type ExpressCheckoutPartialAddress = {
city: string;
state: string;
postal_code: string;
country: string;
};
export type ExpressCheckoutAddress = ExpressCheckoutPartialAddress & {
line1: string;
line2: string | null;
};
export type BillingDetails = {
name: string;
email?: string;
phone?: string;
address: ExpressCheckoutAddress;
};
export type ShippingAddress = {
name: string;
address: ExpressCheckoutAddress;
};
export type LineItem = {
name: string;
amount: number;
};
export type DeliveryUnit = 'hour' | 'day' | 'business_day' | 'week' | 'month';
export type DeliveryEstimate = {
unit: DeliveryUnit;
value: number;
};
export type ShippingRate = {
id: string;
amount: number;
displayName: string;
deliveryEstimate?:
| string
| {
maximum?: DeliveryEstimate;
minimum?: DeliveryEstimate;
};
};
export type LayoutOption = {
maxColumns?: number;
maxRows?: number;
overflow?: 'auto' | 'never';
};
export type ExpressCheckoutPaymentMethodOptionWithAlways =
| 'always'
| ExpressCheckoutPaymentMethodOption;
export type ExpressCheckoutPaymentMethodOption = 'auto' | 'never';
export type ExpressCheckoutPaymentMethodsOption = {
amazonPay?: ExpressCheckoutPaymentMethodOption;
applePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
googlePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
link?: ExpressCheckoutPaymentMethodOption;
paypal?: ExpressCheckoutPaymentMethodOption;
};
export type ExpressCheckoutWalletsOption = {
applePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
googlePay?: ExpressCheckoutPaymentMethodOptionWithAlways;
};
export type ApplePayButtonTheme = 'black' | 'white' | 'white-outline';
export type GooglePayButtonTheme = 'black' | 'white';
export type PayPalButtonTheme = 'gold' | 'blue' | 'silver' | 'white' | 'black';
export type ButtonThemeOption = {
applePay?: ApplePayButtonTheme;
googlePay?: GooglePayButtonTheme;
paypal?: PayPalButtonTheme;
};
export type ApplePayButtonType =
| 'add-money'
| 'book'
| 'buy'
| 'check-out'
| 'contribute'
| 'donate'
| 'order'
| 'plain'
| 'reload'
| 'rent'
| 'subscribe'
| 'support'
| 'tip'
| 'top-up';
export type GooglePayButtonType =
| 'book'
| 'buy'
| 'checkout'
| 'donate'
| 'order'
| 'pay'
| 'plain'
| 'subscribe';
export type PayPalButtonType = 'paypal' | 'buynow' | 'checkout' | 'pay';
export type ButtonTypeOption = {
applePay?: ApplePayButtonType;
googlePay?: GooglePayButtonType;
paypal?: PayPalButtonType;
};
export interface StripeExpressCheckoutElementOptions {
/**
* Manually sets the height of the buttons shown.
*/
buttonHeight?: number;
/**
* Controls the color of each button.
*/
buttonTheme?: ButtonThemeOption;
/**
* Specifies the type of each button.
*/
buttonType?: ButtonTypeOption;
/**
* Specifies how buttons should be laid out in relation to each other.
*/
layout?: LayoutOption;
/**
* Override the order in which payment methods are displayed in the Express Checkout Element.
* By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
/**
* Control payment method display in the Express Checkout Element.
*/
paymentMethods?: ExpressCheckoutPaymentMethodsOption;
/**
* @deprecated
* Use `paymentMethods` instead.
*
* Control wallets display in the Express Checkout Element.
*/
wallets?: ExpressCheckoutWalletsOption;
}
/*
* Updatable options for an `Elements` instance
*/
export interface StripeExpressCheckoutElementUpdateOptions {
/**
* Manually sets the height of the buttons shown.
*/
buttonHeight?: number;
/**
* Specifies how buttons should be laid out in relation to each other.
*/
layout?: LayoutOption;
/**
* Override the order in which payment methods are displayed in the Pay Button Element.
* By default, the Express Checkout Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
}
export type AvailablePaymentMethods = {
amazonPay: boolean;
applePay: boolean;
googlePay: boolean;
link: boolean;
paypal: boolean;
};
export interface StripeExpressCheckoutElementReadyEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'expressCheckout';
/**
* The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
*/
availablePaymentMethods: undefined | AvailablePaymentMethods;
}
export type ClickResolveDetails = {
/**
* An array of two-letter ISO country codes representing which countries
* are eligible shipping locations.
*/
allowedShippingCountries?: string[];
billingAddressRequired?: boolean;
/**
* Provide information about your business that will be displayed in the payment interface.
* This information will be retrieved from your Stripe account if not provided.
*/
business?: {name: string};
emailRequired?: boolean;
lineItems?: Array<LineItem>;
phoneNumberRequired?: boolean;
shippingAddressRequired?: boolean;
shippingRates?: Array<ShippingRate>;
applePay?: ApplePayOption;
};
export interface StripeExpressCheckoutElementClickEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'expressCheckout';
/**
* The payment method associated with the button that was clicked.
*/
expressPaymentType: ExpressPaymentType;
/**
* Callback to configure the details shown on a payment interface, including which fields to collect.
* This must be called within 1 second of the 'click' event being emitted.
*/
resolve: (resolveDetails?: ClickResolveDetails) => void;
}
export interface StripeExpressCheckoutElementConfirmEvent {
/**
* Callback when a payment is unsuccessful. Optionally, specifying a reason will show a more detailed error in the payment interface.
*/
paymentFailed: (payload?: {
reason?: 'fail' | 'invalid_shipping_address';
}) => void;
billingDetails?: BillingDetails;
shippingAddress?: ShippingAddress;
shippingRate?: ShippingRate;
expressPaymentType: ExpressPaymentType;
}
export type ChangeResolveDetails = {
lineItems?: Array<LineItem>;
shippingRates?: Array<ShippingRate>;
applePay?: ApplePayUpdateOption;
};
export interface StripeExpressCheckoutElementShippingAddressChangeEvent {
name: string;
address: ExpressCheckoutPartialAddress;
resolve: (resolveDetails?: ChangeResolveDetails) => void;
reject: () => void;
}
export interface StripeExpressCheckoutElementShippingRateChangeEvent {
shippingRate: ShippingRate;
resolve: (resolveDetails?: ChangeResolveDetails) => void;
reject: () => void;
}

View File

@@ -0,0 +1,134 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeFpxBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
once(
eventType: 'change',
handler: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
off(
eventType: 'change',
handler?: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Updates the options the `FpxBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `FpxBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeFpxBankElementOptions>): void;
};
export interface StripeFpxBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference) (e.g., `affin_bank`).
*/
value?: string;
/**
* The type of the FPX accountholder.
*/
accountHolderType: 'individual' | 'company';
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeFpxBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'fpxBank';
/**
* The selected bank.
* Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference).
*/
value: string;
}

View File

@@ -0,0 +1,134 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeFpxBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
once(
eventType: 'change',
handler: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
off(
eventType: 'change',
handler?: (event: StripeFpxBankElementChangeEvent) => any
): StripeFpxBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'fpxBank'}) => any
): StripeFpxBankElement;
/**
* Updates the options the `FpxBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `FpxBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeFpxBankElementOptions>): void;
};
export interface StripeFpxBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference) (e.g., `affin_bank`).
*/
value?: string;
/**
* The type of the FPX accountholder.
*/
accountHolderType: 'individual' | 'company';
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeFpxBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'fpxBank';
/**
* The selected bank.
* Can be one of the banks listed in the [FPX guide](https://stripe.com/docs/payments/fpx#bank-reference).
*/
value: string;
}

View File

@@ -0,0 +1,135 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeIbanElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
once(
eventType: 'change',
handler: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
off(
eventType: 'change',
handler?: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Updates the options the `IbanElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IbanElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIbanElementOptions>): void;
};
export interface StripeIbanElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
supportedCountries?: string[];
placeholderCountry?: string;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeIbanElementChangeEvent extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'iban';
country: string;
bankName: string;
}

View File

@@ -0,0 +1,135 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeIbanElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
once(
eventType: 'change',
handler: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
off(
eventType: 'change',
handler?: (event: StripeIbanElementChangeEvent) => any
): StripeIbanElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'iban'}) => any
): StripeIbanElement;
/**
* Updates the options the `IbanElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IbanElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIbanElementOptions>): void;
};
export interface StripeIbanElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
supportedCountries?: string[];
placeholderCountry?: string;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeIbanElementChangeEvent extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'iban';
country: string;
bankName: string;
}

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeIdealBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
once(
eventType: 'change',
handler: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
off(
eventType: 'change',
handler?: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Updates the options the `IdealBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IdealBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIdealBankElementOptions>): void;
};
export interface StripeIdealBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [iDEAL guide](https://stripe.com/docs/sources/ideal#specifying-customer-bank) (e.g., `abn_amro`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeIdealBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'idealBank';
/**
* The selected bank.
* Can be one of the banks listed in the [iDEAL guide](https://stripe.com/docs/sources/ideal#specifying-customer-bank).
*/
value: string;
}

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeIdealBankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
once(
eventType: 'change',
handler: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
off(
eventType: 'change',
handler?: (event: StripeIdealBankElementChangeEvent) => any
): StripeIdealBankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'idealBank'}) => any
): StripeIdealBankElement;
/**
* Updates the options the `IdealBankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IdealBankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIdealBankElementOptions>): void;
};
export interface StripeIdealBankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [iDEAL guide](https://stripe.com/docs/sources/ideal#specifying-customer-bank) (e.g., `abn_amro`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeIdealBankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'idealBank';
/**
* The selected bank.
* Can be one of the banks listed in the [iDEAL guide](https://stripe.com/docs/sources/ideal#specifying-customer-bank).
*/
value: string;
}

View File

@@ -0,0 +1,22 @@
export * from './address';
export * from './payment-method-messaging';
export * from './affirm-message';
export * from './afterpay-clearpay-message';
export * from './au-bank-account';
export * from './base';
export * from './card-cvc';
export * from './card-expiry';
export * from './card-number';
export * from './card';
export * from './currency-selector';
export * from './eps-bank';
export * from './express-checkout';
export * from './fpx-bank';
export * from './iban';
export * from './ideal-bank';
export * from './link-authentication';
export * from './p24-bank';
export * from './payment-request-button';
export * from './payment';
export * from './shipping-address';
export * from './issuing';

View File

@@ -0,0 +1,22 @@
export * from './address';
export * from './payment-method-messaging';
export * from './affirm-message';
export * from './afterpay-clearpay-message';
export * from './au-bank-account';
export * from './base';
export * from './card-cvc';
export * from './card-expiry';
export * from './card-number';
export * from './card';
export * from './currency-selector';
export * from './eps-bank';
export * from './express-checkout';
export * from './fpx-bank';
export * from './iban';
export * from './ideal-bank';
export * from './link-authentication';
export * from './p24-bank';
export * from './payment-request-button';
export * from './payment';
export * from './shipping-address';
export * from './issuing';

View File

@@ -0,0 +1,5 @@
export * from './issuing-card-number-display';
export * from './issuing-card-cvc-display';
export * from './issuing-card-expiry-display';
export * from './issuing-card-pin-display';
export * from './issuing-card-copy-button';

View File

@@ -0,0 +1,5 @@
export * from './issuing-card-number-display';
export * from './issuing-card-cvc-display';
export * from './issuing-card-expiry-display';
export * from './issuing-card-pin-display';
export * from './issuing-card-copy-button';

View File

@@ -0,0 +1,37 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardCopyButtonElement = StripeElementBase & {
/**
* Triggered when the element is clicked.
*/
on(
eventType: 'click',
handler: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
once(
eventType: 'click',
handler: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
off(
eventType: 'click',
handler?: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
/**
* Updates the options the `IssuingCardCopyButtonElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardCopyButtonElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardCopyButtonElementOptions>): void;
};
export interface StripeIssuingCardCopyButtonElementOptions {
/**
* The issued card data element to copy to the user's clipboard
*/
toCopy: 'expiry' | 'cvc' | 'number' | 'pin';
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,37 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardCopyButtonElement = StripeElementBase & {
/**
* Triggered when the element is clicked.
*/
on(
eventType: 'click',
handler: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
once(
eventType: 'click',
handler: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
off(
eventType: 'click',
handler?: (event: {elementType: 'issuingCardCopyButton'}) => any
): StripeIssuingCardCopyButtonElement;
/**
* Updates the options the `IssuingCardCopyButtonElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardCopyButtonElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardCopyButtonElementOptions>): void;
};
export interface StripeIssuingCardCopyButtonElementOptions {
/**
* The issued card data element to copy to the user's clipboard
*/
toCopy: 'expiry' | 'cvc' | 'number' | 'pin';
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardCvcDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardCvcDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardCvcDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardCvcDisplayElementOptions>): void;
};
export interface StripeIssuingCardCvcDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardCvcDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardCvcDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardCvcDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardCvcDisplayElementOptions>): void;
};
export interface StripeIssuingCardCvcDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardExpiryDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardExpiryDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardExpiryDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardExpiryDisplayElementOptions>): void;
};
export interface StripeIssuingCardExpiryDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardExpiryDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardExpiryDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardExpiryDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardExpiryDisplayElementOptions>): void;
};
export interface StripeIssuingCardExpiryDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,40 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardNumberDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardNumberDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardNumberDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardNumberDisplayElementOptions>): void;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'issuingCardNumberDisplay'}) => any
): StripeIssuingCardNumberDisplayElement;
};
export interface StripeIssuingCardNumberDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,40 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardNumberDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardNumberDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardNumberDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardNumberDisplayElementOptions>): void;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'issuingCardNumberDisplay'}) => any
): StripeIssuingCardNumberDisplayElement;
};
export interface StripeIssuingCardNumberDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardPinDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardPinDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardPinDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardPinDisplayElementOptions>): void;
};
export interface StripeIssuingCardPinDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,32 @@
import {StripeElementBase, StripeElementStyle} from '../base';
export type StripeIssuingCardPinDisplayElement = StripeElementBase & {
/**
* Updates the options the `IssuingCardPinDisplayElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `IssuingCardPinDisplayElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeIssuingCardPinDisplayElementOptions>): void;
};
export interface StripeIssuingCardPinDisplayElementOptions {
/**
* The token (e.g. `ic_abc123`) of the issued card to display in this Element
*/
issuingCard: string;
/**
* The secret component of the ephemeral key with which to authenticate this sensitive
* card details request
*/
ephemeralKeySecret?: string;
/**
* The nonce used to mint the ephemeral key provided in `ephemeralKeySecret`
*/
nonce?: string;
style?: StripeElementStyle;
}

View File

@@ -0,0 +1,158 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeLinkAuthenticationElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'change',
handler: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'change',
handler?: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
};
export interface StripeLinkAuthenticationElementOptions {
/**
* Default value for LinkAuthenticationElement fields
*/
defaultValues?: {
email: string;
};
}
export interface StripeLinkAuthenticationElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'linkAuthentication';
/**
* Whether or not the LinkAuthentication Element is currently empty.
*/
empty: boolean;
/**
* Whether or not the LinkAuthentication Element is complete.
*/
complete: boolean;
/**
* An object containing the current email.
*/
value: {
email: string;
};
}

View File

@@ -0,0 +1,158 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeLinkAuthenticationElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'change',
handler: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'change',
handler?: (event: StripeLinkAuthenticationElementChangeEvent) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'linkAuthentication';
error: StripeError;
}) => any
): StripeLinkAuthenticationElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'linkAuthentication'}) => any
): StripeLinkAuthenticationElement;
};
export interface StripeLinkAuthenticationElementOptions {
/**
* Default value for LinkAuthenticationElement fields
*/
defaultValues?: {
email: string;
};
}
export interface StripeLinkAuthenticationElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'linkAuthentication';
/**
* Whether or not the LinkAuthentication Element is currently empty.
*/
empty: boolean;
/**
* Whether or not the LinkAuthentication Element is complete.
*/
complete: boolean;
/**
* An object containing the current email.
*/
value: {
email: string;
};
}

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeP24BankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
once(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
off(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Updates the options the `P24BankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `P24BankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeP24BankElementOptions>): void;
};
export interface StripeP24BankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [Przelewy24 guide](https://stripe.com/docs/payments/p24/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeP24BankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'p24Bank';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [Przelewy24 guide](https://stripe.com/docs/payments/p24/accept-a-payment#bank-values) (e.g., `ing`).
*/
value?: string;
}

View File

@@ -0,0 +1,140 @@
import {
StripeElementBase,
StripeElementStyle,
StripeElementClasses,
StripeElementChangeEvent,
} from './base';
export type StripeP24BankElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
once(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
off(
eventType: 'change',
handler: (event: StripeP24BankElementChangeEvent) => any
): StripeP24BankElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'ready',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'focus',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'blur',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
off(
eventType: 'escape',
handler: (event: {elementType: 'p24Bank'}) => any
): StripeP24BankElement;
/**
* Updates the options the `P24BankElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `P24BankElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeP24BankElementOptions>): void;
};
export interface StripeP24BankElementOptions {
classes?: StripeElementClasses;
style?: StripeElementStyle;
/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [Przelewy24 guide](https://stripe.com/docs/payments/p24/accept-a-payment#bank-values) (e.g., `bank_austria`).
*/
value?: string;
/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;
/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}
export interface StripeP24BankElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'p24Bank';
/**
* A pre-filled value for the Element.
* Can be one of the banks listed in the [Przelewy24 guide](https://stripe.com/docs/payments/p24/accept-a-payment#bank-values) (e.g., `ing`).
*/
value?: string;
}

View File

@@ -0,0 +1,101 @@
export type StripePaymentMethodMessagingElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#payment-method-messaging'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `PaymentMethodMessagingElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripePaymentMethodMessagingElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'paymentMethodMessaging'}) => any
): StripePaymentMethodMessagingElement;
};
export interface StripePaymentMethodMessagingElementOptions {
/**
* The total amount in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency:
| 'USD'
| 'GBP'
| 'EUR'
| 'DKK'
| 'NOK'
| 'SEK'
| 'AUD'
| 'CAD'
| 'NZD';
/**
* Payment methods to show messaging for.
*/
paymentMethodTypes?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* Override the order in which payment methods are displayed in the Payment Method Messaging Element.
* By default, the Payment Method Messaging Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* @deprecated Use `paymentMethodTypes` instead.
*/
paymentMethods?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* The country the end-buyer is in.
*/
countryCode:
| 'US'
| 'CA'
| 'AU'
| 'NZ'
| 'GB'
| 'IE'
| 'FR'
| 'ES'
| 'DE'
| 'AT'
| 'BE'
| 'DK'
| 'FI'
| 'IT'
| 'NL'
| 'NO'
| 'SE';
/**
* The logo color to display in the message. Defaults to black
*/
logoColor?: 'black' | 'white' | 'color';
metaData?: {
messagingClientReferenceId: string | null;
};
}

View File

@@ -0,0 +1,101 @@
export type StripePaymentMethodMessagingElement = {
/**
* The `element.mount` method attaches your [Element](https://stripe.com/docs/js/element) to the DOM.
* `element.mount` accepts either a CSS Selector (e.g., `'#payment-method-messaging'`) or a DOM element.
*/
mount(domElement: string | HTMLElement): void;
/**
* Removes the element from the DOM and destroys it.
* A destroyed element can not be re-activated or re-mounted to the DOM.
*/
destroy(): void;
/**
* Unmounts the element from the DOM.
* Call `element.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Updates the options the `PaymentMethodMessagingElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripePaymentMethodMessagingElementOptions>): void;
/**
* Triggered when the element is fully loaded and ready to perform method calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'paymentMethodMessaging'}) => any
): StripePaymentMethodMessagingElement;
};
export interface StripePaymentMethodMessagingElementOptions {
/**
* The total amount in the smallest currency unit.
*/
amount: number;
/**
* The currency to display.
*/
currency:
| 'USD'
| 'GBP'
| 'EUR'
| 'DKK'
| 'NOK'
| 'SEK'
| 'AUD'
| 'CAD'
| 'NZD';
/**
* Payment methods to show messaging for.
*/
paymentMethodTypes?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* Override the order in which payment methods are displayed in the Payment Method Messaging Element.
* By default, the Payment Method Messaging Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* @deprecated Use `paymentMethodTypes` instead.
*/
paymentMethods?: Array<'afterpay_clearpay' | 'klarna' | 'affirm'>;
/**
* The country the end-buyer is in.
*/
countryCode:
| 'US'
| 'CA'
| 'AU'
| 'NZ'
| 'GB'
| 'IE'
| 'FR'
| 'ES'
| 'DE'
| 'AT'
| 'BE'
| 'DK'
| 'FI'
| 'IT'
| 'NL'
| 'NO'
| 'SE';
/**
* The logo color to display in the message. Defaults to black
*/
logoColor?: 'black' | 'white' | 'color';
metaData?: {
messagingClientReferenceId: string | null;
};
}

View File

@@ -0,0 +1,151 @@
import {StripeElementBase, StripeElementClasses} from './base';
import {PaymentRequest} from '../payment-request';
import {Omit} from '../../utils';
export type StripePaymentRequestButtonElement = StripeElementBase & {
/**
* Triggered when the payment request button is clicked.
*/
on(
eventType: 'click',
handler: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'click',
handler: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'click',
handler?: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Updates the options the `PaymentRequestButtonElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `PaymentRequestButtonElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(
options: Partial<
Omit<StripePaymentRequestButtonElementOptions, 'paymentRequest'>
>
): void;
};
export interface StripePaymentRequestButtonElementOptions {
classes?: StripeElementClasses;
/**
* An object used to customize the appearance of the Payment Request Button.
* The object must have a single `paymentRequestButton` field, containing any of the following sub-fields
*/
style?: {
paymentRequestButton: {
/**
* Preferred button type to display. Available types, by wallet:
*
* Browser card: default, book, buy, or donate.
*
* Google Pay: default, buy, or donate.
*
* Apple Pay: default, book, buy, donate, check-out, subscribe, reload, add-money, top-up, order, rent, support, contribute, tip
*
* When a wallet does not support the provided value, default is used as a fallback.
*/
type?:
| 'default'
| 'book'
| 'buy'
| 'donate'
| 'check-out'
| 'subscribe'
| 'reload'
| 'add-money'
| 'top-up'
| 'order'
| 'rent'
| 'support'
| 'contribute'
| 'tip';
/**
* One of dark, light, or light-outline. The default is dark.
*/
theme?: 'dark' | 'light' | 'light-outline';
/**
* The height of the Payment Request Button. Accepts px unit values.
*/
height?: string;
/**
* The gap between buttons when multile buttons are shown. Accepts px unit values.
*/
buttonSpacing?: string;
};
};
/**
* A `PaymentRequest` object used to configure the element.
*/
paymentRequest: PaymentRequest;
/**
* Disable showing multiple buttons.
* Default is `false`.
*/
disableMultipleButtons?: boolean;
}
export interface StripePaymentRequestButtonElementClickEvent {
preventDefault: () => void;
}

View File

@@ -0,0 +1,151 @@
import {StripeElementBase, StripeElementClasses} from './base';
import {PaymentRequest} from '../payment-request';
import {Omit} from '../../utils';
export type StripePaymentRequestButtonElement = StripeElementBase & {
/**
* Triggered when the payment request button is clicked.
*/
on(
eventType: 'click',
handler: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'click',
handler: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'click',
handler?: (event: StripePaymentRequestButtonElementClickEvent) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'paymentRequestButton'}) => any
): StripePaymentRequestButtonElement;
/**
* Updates the options the `PaymentRequestButtonElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `PaymentRequestButtonElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(
options: Partial<
Omit<StripePaymentRequestButtonElementOptions, 'paymentRequest'>
>
): void;
};
export interface StripePaymentRequestButtonElementOptions {
classes?: StripeElementClasses;
/**
* An object used to customize the appearance of the Payment Request Button.
* The object must have a single `paymentRequestButton` field, containing any of the following sub-fields
*/
style?: {
paymentRequestButton: {
/**
* Preferred button type to display. Available types, by wallet:
*
* Browser card: default, book, buy, or donate.
*
* Google Pay: default, buy, or donate.
*
* Apple Pay: default, book, buy, donate, check-out, subscribe, reload, add-money, top-up, order, rent, support, contribute, tip
*
* When a wallet does not support the provided value, default is used as a fallback.
*/
type?:
| 'default'
| 'book'
| 'buy'
| 'donate'
| 'check-out'
| 'subscribe'
| 'reload'
| 'add-money'
| 'top-up'
| 'order'
| 'rent'
| 'support'
| 'contribute'
| 'tip';
/**
* One of dark, light, or light-outline. The default is dark.
*/
theme?: 'dark' | 'light' | 'light-outline';
/**
* The height of the Payment Request Button. Accepts px unit values.
*/
height?: string;
/**
* The gap between buttons when multile buttons are shown. Accepts px unit values.
*/
buttonSpacing?: string;
};
};
/**
* A `PaymentRequest` object used to configure the element.
*/
paymentRequest: PaymentRequest;
/**
* Disable showing multiple buttons.
* Default is `false`.
*/
disableMultipleButtons?: boolean;
}
export interface StripePaymentRequestButtonElementClickEvent {
preventDefault: () => void;
}

View File

@@ -0,0 +1,435 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
import {ApplePayOption} from './apple-pay';
import {CardNetworkBrand} from '../elements-group';
export type StripePaymentElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
once(
eventType: 'change',
handler: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
off(
eventType: 'change',
handler?: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* The change event is triggered when the `Element`'s value changes.
* Represents the details of a selected Card payment method.
*/
on(
eventType: 'carddetailschange',
handler: (event: StripePaymentElementCardDetailsChangeEvent) => any
): StripePaymentElement;
/**
* Triggered when a Saved Payment Method is updated.
*/
on(
eventType: 'savedpaymentmethodupdate',
handler: (event: StripePaymentElementSavedPaymentMethodUpdateEvent) => any
): StripePaymentElement;
/**
* Triggered when a Saved Payment Method is removed.
*/
on(
eventType: 'savedpaymentmethodremove',
handler: (event: StripePaymentElementSavedPaymentMethodRemoveEvent) => any
): StripePaymentElement;
/**
* Updates the options the `PaymentElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripePaymentElementOptions>): StripePaymentElement;
/**
* Collapses the Payment Element into a row of payment method tabs.
*/
collapse(): StripePaymentElement;
};
export interface DefaultValuesOption {
billingDetails?: {
name?: string;
email?: string;
phone?: string;
address?: {
country?: string;
postal_code?: string;
state?: string;
city?: string;
line1?: string;
line2?: string;
};
};
card?: {
network?: CardNetworkBrand[];
};
}
export type FieldOption = 'auto' | 'never';
export interface FieldsOption {
billingDetails?:
| FieldOption
| {
name?: FieldOption;
email?: FieldOption;
phone?: FieldOption;
address?:
| FieldOption
| 'if_required'
| {
country?: FieldOption;
postalCode?: FieldOption;
state?: FieldOption;
city?: FieldOption;
line1?: FieldOption;
line2?: FieldOption;
};
};
}
export type TermOption = 'auto' | 'always' | 'never';
export interface TermsOption {
applePay?: TermOption;
auBecsDebit?: TermOption;
bancontact?: TermOption;
card?: TermOption;
cashapp?: TermOption;
googlePay?: TermOption;
ideal?: TermOption;
paypal?: TermOption;
sepaDebit?: TermOption;
sofort?: TermOption;
usBankAccount?: TermOption;
}
export type PaymentWalletOption = 'auto' | 'never';
export interface PaymentWalletsOption {
applePay?: PaymentWalletOption;
googlePay?: PaymentWalletOption;
}
export type Layout = 'tabs' | 'accordion' | 'auto';
export interface LayoutObject {
type: Layout;
defaultCollapsed?: boolean;
radios?: boolean;
spacedAccordionItems?: boolean;
visibleAccordionItemsCount?: number;
}
export interface StripePaymentElementOptions {
/**
* Provide initial customer information that will be displayed in the Payment Element.
*/
defaultValues?: DefaultValuesOption;
/**
* Override the business name displayed in the Payment Element.
* By default the PaymentElement will use your Stripe account or business name.
*/
business?: {name: string};
/**
* Override the order in which payment methods are displayed in the Payment Element.
* By default, the Payment Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
/**
* Control which fields are displayed in the Payment Element.
*/
fields?: FieldsOption;
/**
* Apply a read-only state to the Payment Element so that payment details cant be changed.
* Default is false.
*/
readOnly?: boolean;
/**
* Control terms display in the Payment Element.
*/
terms?: TermsOption;
/**
* Control wallets display in the Payment Element.
*/
wallets?: PaymentWalletsOption;
/**
* Specify a layout to use when rendering a Payment Element.
*/
layout?: Layout | LayoutObject;
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
}
export interface StripePaymentElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` if the all inputs in the Payment Element are empty.
*/
empty: boolean;
/**
* `true` if the every input in the Payment Element is well-formed and potentially complete.
*/
complete: boolean;
/**
* Whether or not the Payment Element is currently collapsed.
*/
collapsed: boolean;
/**
* An object containing the currently selected PaymentMethod type (in snake_case, for example "afterpay_clearpay").
* If a payment method is selected, it will be included in the object.
*/
value: {
type: string;
payment_method?: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
};
}
type CardBrand =
| 'amex'
| 'diners'
| 'discover'
| 'eftpos_au'
| 'jcb'
| 'mastercard'
| 'unionpay'
| 'visa'
| 'unknown';
type CardFunding = 'credit' | 'debit' | 'prepaid' | 'unknown';
export interface StripePaymentElementCardDetailsChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the card details are loading.
*/
loading: boolean;
/**
* The card details for the selected payment method.
* Undefined while loading and for non card payment methods.
*/
details?: {
brands: CardBrand[] | null;
funding: CardFunding | null;
};
}
export interface StripePaymentElementSavedPaymentMethodUpdateEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the saved payment method is successfully updated.
*/
success: boolean;
/**
* Error message if the saved payment method update fails.
*/
error?: string;
/**
* The updated saved payment method.
*/
payment_method: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
}
export interface StripePaymentElementSavedPaymentMethodRemoveEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the saved payment method is successfully removed.
*/
success: boolean;
/**
* Error message if the saved payment method removal fails.
*/
error?: string;
/**
* The removed saved payment method.
*/
payment_method: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
}

View File

@@ -0,0 +1,435 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
import {ApplePayOption} from './apple-pay';
import {CardNetworkBrand} from '../elements-group';
export type StripePaymentElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
once(
eventType: 'change',
handler: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
off(
eventType: 'change',
handler?: (event: StripePaymentElementChangeEvent) => any
): StripePaymentElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
once(
eventType: 'loaderror',
handler: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
off(
eventType: 'loaderror',
handler?: (event: {elementType: 'payment'; error: StripeError}) => any
): StripePaymentElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'payment'}) => any
): StripePaymentElement;
/**
* The change event is triggered when the `Element`'s value changes.
* Represents the details of a selected Card payment method.
*/
on(
eventType: 'carddetailschange',
handler: (event: StripePaymentElementCardDetailsChangeEvent) => any
): StripePaymentElement;
/**
* Triggered when a Saved Payment Method is updated.
*/
on(
eventType: 'savedpaymentmethodupdate',
handler: (event: StripePaymentElementSavedPaymentMethodUpdateEvent) => any
): StripePaymentElement;
/**
* Triggered when a Saved Payment Method is removed.
*/
on(
eventType: 'savedpaymentmethodremove',
handler: (event: StripePaymentElementSavedPaymentMethodRemoveEvent) => any
): StripePaymentElement;
/**
* Updates the options the `PaymentElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(options: Partial<StripePaymentElementOptions>): StripePaymentElement;
/**
* Collapses the Payment Element into a row of payment method tabs.
*/
collapse(): StripePaymentElement;
};
export interface DefaultValuesOption {
billingDetails?: {
name?: string;
email?: string;
phone?: string;
address?: {
country?: string;
postal_code?: string;
state?: string;
city?: string;
line1?: string;
line2?: string;
};
};
card?: {
network?: CardNetworkBrand[];
};
}
export type FieldOption = 'auto' | 'never';
export interface FieldsOption {
billingDetails?:
| FieldOption
| {
name?: FieldOption;
email?: FieldOption;
phone?: FieldOption;
address?:
| FieldOption
| 'if_required'
| {
country?: FieldOption;
postalCode?: FieldOption;
state?: FieldOption;
city?: FieldOption;
line1?: FieldOption;
line2?: FieldOption;
};
};
}
export type TermOption = 'auto' | 'always' | 'never';
export interface TermsOption {
applePay?: TermOption;
auBecsDebit?: TermOption;
bancontact?: TermOption;
card?: TermOption;
cashapp?: TermOption;
googlePay?: TermOption;
ideal?: TermOption;
paypal?: TermOption;
sepaDebit?: TermOption;
sofort?: TermOption;
usBankAccount?: TermOption;
}
export type PaymentWalletOption = 'auto' | 'never';
export interface PaymentWalletsOption {
applePay?: PaymentWalletOption;
googlePay?: PaymentWalletOption;
}
export type Layout = 'tabs' | 'accordion' | 'auto';
export interface LayoutObject {
type: Layout;
defaultCollapsed?: boolean;
radios?: boolean;
spacedAccordionItems?: boolean;
visibleAccordionItemsCount?: number;
}
export interface StripePaymentElementOptions {
/**
* Provide initial customer information that will be displayed in the Payment Element.
*/
defaultValues?: DefaultValuesOption;
/**
* Override the business name displayed in the Payment Element.
* By default the PaymentElement will use your Stripe account or business name.
*/
business?: {name: string};
/**
* Override the order in which payment methods are displayed in the Payment Element.
* By default, the Payment Element will use a dynamic ordering that optimizes payment method display for each user.
*/
paymentMethodOrder?: string[];
/**
* Control which fields are displayed in the Payment Element.
*/
fields?: FieldsOption;
/**
* Apply a read-only state to the Payment Element so that payment details cant be changed.
* Default is false.
*/
readOnly?: boolean;
/**
* Control terms display in the Payment Element.
*/
terms?: TermsOption;
/**
* Control wallets display in the Payment Element.
*/
wallets?: PaymentWalletsOption;
/**
* Specify a layout to use when rendering a Payment Element.
*/
layout?: Layout | LayoutObject;
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
}
export interface StripePaymentElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` if the all inputs in the Payment Element are empty.
*/
empty: boolean;
/**
* `true` if the every input in the Payment Element is well-formed and potentially complete.
*/
complete: boolean;
/**
* Whether or not the Payment Element is currently collapsed.
*/
collapsed: boolean;
/**
* An object containing the currently selected PaymentMethod type (in snake_case, for example "afterpay_clearpay").
* If a payment method is selected, it will be included in the object.
*/
value: {
type: string;
payment_method?: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
};
}
type CardBrand =
| 'amex'
| 'diners'
| 'discover'
| 'eftpos_au'
| 'jcb'
| 'mastercard'
| 'unionpay'
| 'visa'
| 'unknown';
type CardFunding = 'credit' | 'debit' | 'prepaid' | 'unknown';
export interface StripePaymentElementCardDetailsChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the card details are loading.
*/
loading: boolean;
/**
* The card details for the selected payment method.
* Undefined while loading and for non card payment methods.
*/
details?: {
brands: CardBrand[] | null;
funding: CardFunding | null;
};
}
export interface StripePaymentElementSavedPaymentMethodUpdateEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the saved payment method is successfully updated.
*/
success: boolean;
/**
* Error message if the saved payment method update fails.
*/
error?: string;
/**
* The updated saved payment method.
*/
payment_method: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
}
export interface StripePaymentElementSavedPaymentMethodRemoveEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'payment';
/**
* `true` when the saved payment method is successfully removed.
*/
success: boolean;
/**
* Error message if the saved payment method removal fails.
*/
error?: string;
/**
* The removed saved payment method.
*/
payment_method: {
id: string;
type: string;
billing_details: {
address: {
city: null | string;
country: null | string;
line1: null | string;
line2: null | string;
postal_code: null | string;
state: null | string;
};
name: null | string;
email: null | string;
phone: null | string;
};
};
}

View File

@@ -0,0 +1,215 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeShippingAddressElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
once(
eventType: 'change',
handler: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
off(
eventType: 'change',
handler?: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Updates the options the `ShippingAddressElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(
options: Partial<StripeShippingAddressElementOptions>
): StripeShippingAddressElement;
};
export interface StripeShippingAddressElementOptions {
/**
* Control which countries are displayed in the shippingAddress Element.
*/
allowedCountries?: string[] | null;
/**
* Whether or not ShippingAddressElement accepts PO boxes
*/
blockPoBox?: boolean;
/**
* Default value for ShippingAddressElement fields
*/
defaultValues?: {
name?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
state?: string | null;
postal_code?: string | null;
country: string;
};
phone?: string | null;
};
/**
* Control which additional fields to display in the shippingAddress Element.
*/
fields?: {
phone?: 'always' | 'never' | 'auto';
};
/**
* Specify validation rules for the above additional fields.
*/
validation?: {
phone?: {
required: 'always' | 'never' | 'auto';
};
};
}
export interface StripeShippingAddressElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'shippingAddress';
/**
* Whether or not the shippingAddress Element is currently empty.
*/
empty: boolean;
/**
* Whether or not the shippingAddress Element is complete.
*/
complete: boolean;
/**
* Whether or not the shipping address is new.
*/
isNewAddress: boolean;
/**
* An object containing the current address.
*/
value: {
name: string;
address: {
line1: string;
line2: string | null;
city: string;
state: string;
postal_code: string;
country: string;
};
phone?: string;
};
}

View File

@@ -0,0 +1,215 @@
import {StripeElementBase} from './base';
import {StripeError} from '../stripe';
export type StripeShippingAddressElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
once(
eventType: 'change',
handler: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
off(
eventType: 'change',
handler?: (event: StripeShippingAddressElementChangeEvent) => any
): StripeShippingAddressElement;
/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(
eventType: 'ready',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'ready',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'ready',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element gains focus.
*/
on(
eventType: 'focus',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'focus',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'focus',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element loses focus.
*/
on(
eventType: 'blur',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'blur',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'blur',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the escape key is pressed within the element.
*/
on(
eventType: 'escape',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'escape',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'escape',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Triggered when the element fails to load.
*/
on(
eventType: 'loaderror',
handler: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
once(
eventType: 'loaderror',
handler: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
off(
eventType: 'loaderror',
handler?: (event: {
elementType: 'shippingAddress';
error: StripeError;
}) => any
): StripeShippingAddressElement;
/**
* Triggered when the loader UI is mounted to the DOM and ready to be displayed.
*/
on(
eventType: 'loaderstart',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
once(
eventType: 'loaderstart',
handler: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
off(
eventType: 'loaderstart',
handler?: (event: {elementType: 'shippingAddress'}) => any
): StripeShippingAddressElement;
/**
* Updates the options the `ShippingAddressElement` was initialized with.
* Updates are merged into the existing configuration.
*/
update(
options: Partial<StripeShippingAddressElementOptions>
): StripeShippingAddressElement;
};
export interface StripeShippingAddressElementOptions {
/**
* Control which countries are displayed in the shippingAddress Element.
*/
allowedCountries?: string[] | null;
/**
* Whether or not ShippingAddressElement accepts PO boxes
*/
blockPoBox?: boolean;
/**
* Default value for ShippingAddressElement fields
*/
defaultValues?: {
name?: string | null;
address?: {
line1?: string | null;
line2?: string | null;
city?: string | null;
state?: string | null;
postal_code?: string | null;
country: string;
};
phone?: string | null;
};
/**
* Control which additional fields to display in the shippingAddress Element.
*/
fields?: {
phone?: 'always' | 'never' | 'auto';
};
/**
* Specify validation rules for the above additional fields.
*/
validation?: {
phone?: {
required: 'always' | 'never' | 'auto';
};
};
}
export interface StripeShippingAddressElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'shippingAddress';
/**
* Whether or not the shippingAddress Element is currently empty.
*/
empty: boolean;
/**
* Whether or not the shippingAddress Element is complete.
*/
complete: boolean;
/**
* Whether or not the shipping address is new.
*/
isNewAddress: boolean;
/**
* An object containing the current address.
*/
value: {
name: string;
address: {
line1: string;
line2: string | null;
city: string;
state: string;
postal_code: string;
country: string;
};
phone?: string;
};
}

View File

@@ -0,0 +1,97 @@
export type StripeEmbeddedCheckoutAddress = {
country: string;
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
};
export type StripeEmbeddedCheckoutShippingDetails = {
name: string;
address: StripeEmbeddedCheckoutAddress;
};
export type StripeEmbeddedCheckoutShippingDetailsChangeEvent = {
checkoutSessionId: string;
shippingDetails: StripeEmbeddedCheckoutShippingDetails;
};
export type StripeEmbeddedCheckoutLineItem = {
id?: string;
quantity?: number;
price?: string;
display?: {
name?: string;
description?: string;
images?: string[];
};
pricingSpec?: {
unitAmount?: number;
unitAmountDecimal?: string;
currency?: string;
taxBehavior?: 'inclusive' | 'exclusive' | 'unspecified';
taxCode?: string;
};
};
export type StripeEmbeddedCheckoutLineItemsChangeEvent = {
checkoutSessionId: string;
lineItems: StripeEmbeddedCheckoutLineItem[];
};
export type ResultAction =
| {type: 'accept'}
| {type: 'reject'; errorMessage?: string};
export interface StripeEmbeddedCheckoutOptions {
/**
* The client secret of the [Checkout Session](https://stripe.com/docs/api/checkout/sessions).
*/
clientSecret?: string;
/**
* A function that returns a Promise which resolves with the client secret of
* the [Checkout Session](https://stripe.com/docs/api/checkout/sessions).
*/
fetchClientSecret?: () => Promise<string>;
/**
* onComplete is called when the Checkout Session completes successfully.
* You can use it to unmount Embedded Checkout and render a custom success UI.
*/
onComplete?: () => void;
/**
* onShippingDetailsChange is called when the customer completes the shipping details form.
*
* The callback is required when [permissions.update.shipping_details](https://docs.stripe.com/api/checkout/sessions/create#create_checkout_session-permissions-update-shipping_details) is set to `server_only`.
* For a step-by-step guide on using this callback to customize shipping options during checkout, see [Customize Shipping Options](https://docs.stripe.com/payments/checkout/custom-shipping-options).
*/
onShippingDetailsChange?: (
event: StripeEmbeddedCheckoutShippingDetailsChangeEvent
) => Promise<ResultAction>;
/**
* onLineItemsChange is called when the customer adds, removes, or modifies a line item.
* The callback is required when [permissions.update.line_items](https://docs.stripe.com/api/checkout/sessions/create#create_checkout_session-permissions-update-line_items) is set to `server_only`.
*/
onLineItemsChange?: (
event: StripeEmbeddedCheckoutLineItemsChangeEvent
) => Promise<ResultAction>;
}
export interface StripeEmbeddedCheckout {
/**
* The `embeddedCheckout.mount` method attaches your Embedded Checkout to the DOM.
* `mount` accepts either a CSS Selector (e.g., `'#checkout'`) or a DOM element.
*/
mount(location: string | HTMLElement): void;
/**
* Unmounts Embedded Checkout from the DOM.
* Call `embeddedCheckout.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Removes Embedded Checkout from the DOM and destroys it.
* Once destroyed it not be re-mounted to the DOM.
* Use this if you want to create a new Embedded Checkout instance.
*/
destroy(): void;
}

View File

@@ -0,0 +1,97 @@
export type StripeEmbeddedCheckoutAddress = {
country: string;
line1?: string | null;
line2?: string | null;
city?: string | null;
postal_code?: string | null;
state?: string | null;
};
export type StripeEmbeddedCheckoutShippingDetails = {
name: string;
address: StripeEmbeddedCheckoutAddress;
};
export type StripeEmbeddedCheckoutShippingDetailsChangeEvent = {
checkoutSessionId: string;
shippingDetails: StripeEmbeddedCheckoutShippingDetails;
};
export type StripeEmbeddedCheckoutLineItem = {
id?: string;
quantity?: number;
price?: string;
display?: {
name?: string;
description?: string;
images?: string[];
};
pricingSpec?: {
unitAmount?: number;
unitAmountDecimal?: string;
currency?: string;
taxBehavior?: 'inclusive' | 'exclusive' | 'unspecified';
taxCode?: string;
};
};
export type StripeEmbeddedCheckoutLineItemsChangeEvent = {
checkoutSessionId: string;
lineItems: StripeEmbeddedCheckoutLineItem[];
};
export type ResultAction =
| {type: 'accept'}
| {type: 'reject'; errorMessage?: string};
export interface StripeEmbeddedCheckoutOptions {
/**
* The client secret of the [Checkout Session](https://stripe.com/docs/api/checkout/sessions).
*/
clientSecret?: string;
/**
* A function that returns a Promise which resolves with the client secret of
* the [Checkout Session](https://stripe.com/docs/api/checkout/sessions).
*/
fetchClientSecret?: () => Promise<string>;
/**
* onComplete is called when the Checkout Session completes successfully.
* You can use it to unmount Embedded Checkout and render a custom success UI.
*/
onComplete?: () => void;
/**
* onShippingDetailsChange is called when the customer completes the shipping details form.
*
* The callback is required when [permissions.update.shipping_details](https://docs.stripe.com/api/checkout/sessions/create#create_checkout_session-permissions-update-shipping_details) is set to `server_only`.
* For a step-by-step guide on using this callback to customize shipping options during checkout, see [Customize Shipping Options](https://docs.stripe.com/payments/checkout/custom-shipping-options).
*/
onShippingDetailsChange?: (
event: StripeEmbeddedCheckoutShippingDetailsChangeEvent
) => Promise<ResultAction>;
/**
* onLineItemsChange is called when the customer adds, removes, or modifies a line item.
* The callback is required when [permissions.update.line_items](https://docs.stripe.com/api/checkout/sessions/create#create_checkout_session-permissions-update-line_items) is set to `server_only`.
*/
onLineItemsChange?: (
event: StripeEmbeddedCheckoutLineItemsChangeEvent
) => Promise<ResultAction>;
}
export interface StripeEmbeddedCheckout {
/**
* The `embeddedCheckout.mount` method attaches your Embedded Checkout to the DOM.
* `mount` accepts either a CSS Selector (e.g., `'#checkout'`) or a DOM element.
*/
mount(location: string | HTMLElement): void;
/**
* Unmounts Embedded Checkout from the DOM.
* Call `embeddedCheckout.mount` to re-attach it to the DOM.
*/
unmount(): void;
/**
* Removes Embedded Checkout from the DOM and destroys it.
* Once destroyed it not be re-mounted to the DOM.
* Use this if you want to create a new Embedded Checkout instance.
*/
destroy(): void;
}

View File

@@ -0,0 +1,3 @@
export interface EphemeralKeyNonceOptions {
issuingCard: string;
}

View File

@@ -0,0 +1,3 @@
export interface EphemeralKeyNonceOptions {
issuingCard: string;
}

View File

@@ -0,0 +1,19 @@
/**
* Data to be sent with a `stripe.collectFinancialConnectionsAccounts` request.
*/
export interface CollectFinancialConnectionsAccountsOptions {
/**
* The client secret of the [Financial Connections Session](https://stripe.com/docs/api/financial_connections/session).
*/
clientSecret: string;
}
/**
* Data to be sent with a `stripe.collectBankAccountToken` request.
*/
export interface CollectBankAccountTokenOptions {
/**
* The client secret of the [Financial Connections Session](https://stripe.com/docs/api/financial_connections/session).
*/
clientSecret: string;
}

View File

@@ -0,0 +1,19 @@
/**
* Data to be sent with a `stripe.collectFinancialConnectionsAccounts` request.
*/
export interface CollectFinancialConnectionsAccountsOptions {
/**
* The client secret of the [Financial Connections Session](https://stripe.com/docs/api/financial_connections/session).
*/
clientSecret: string;
}
/**
* Data to be sent with a `stripe.collectBankAccountToken` request.
*/
export interface CollectBankAccountTokenOptions {
/**
* The client secret of the [Financial Connections Session](https://stripe.com/docs/api/financial_connections/session).
*/
clientSecret: string;
}

View File

@@ -0,0 +1,153 @@
export interface RedirectToCheckoutServerOptions {
/**
* The ID of the [Checkout Session](https://stripe.com/docs/api/checkout/sessions) that is used in [Checkout's server integration](https://stripe.com/docs/payments/checkout/one-time).
*/
sessionId: string;
}
export interface RedirectToCheckoutClientOptions {
/**
* The URL to which Stripe should send customers when payment is complete.
* If youd like access to the Checkout Session for the successful payment, read more about it in our guide on [fulfilling your payments with webhooks](https://stripe.com/docs/payments/checkout/fulfillment#webhooks).
*/
successUrl: string;
/**
* The URL to which Stripe should send customers when payment is canceled.
*/
cancelUrl: string;
/**
* An array of objects representing the items that your customer would like to purchase.
* These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout.
*/
lineItems?: Array<{
/**
* The ID of the price that the customer would like to purchase. SKU or plan IDs may also be used.
*/
price?: string;
/**
* The quantity of units for the item.
*/
quantity?: number;
}>;
/**
* An array of objects representing the items that your customer would like to purchase.
* These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout.
*
* @deprecated
*/
items?: Array<{
/**
* The ID of the SKU that the customer would like to purchase
*/
sku?: string;
/**
* The ID of the plan that the customer would like to subscribe to.
*/
plan?: string;
/**
* The quantity of units for the item.
*/
quantity?: number;
}>;
/**
* The mode of the Checkout Session. Required if using lineItems.
*/
mode?: 'payment' | 'subscription';
/**
* A unique string to reference the Checkout session.
* This can be a customer ID, a cart ID, or similar.
* It is included in the `checkout.session.completed` webhook and can be used to fulfill the purchase.
*/
clientReferenceId?: string;
/**
* The email address used to create the customer object.
* If you already know your customer's email address, use this attribute to prefill it on Checkout.
*/
customerEmail?: string;
/**
* Specify whether Checkout should collect the customers billing address.
* If set to `required`, Checkout will attempt to collect the customers billing address.
* If not set or set to `auto` Checkout will only attempt to collect the billing address when necessary.
*/
billingAddressCollection?: 'auto' | 'required';
/**
* Provides configuration for Checkout to collect a shipping address from a customer.
*/
shippingAddressCollection?: {
/**
* An array of two-letter ISO country codes representing which countries
* Checkout should provide as options for shipping locations. The codes are
* expected to be uppercase. Unsupported country codes: AS, CX, CC, CU, HM, IR, KP, MH, FM, NF, MP, PW, SD, SY, UM, VI.
*/
allowedCountries: string[];
};
/**
* The [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) of the locale to display Checkout in.
* Default is `auto` (Stripe detects the locale of the browser).
*/
locale?: CheckoutLocale;
/**
* Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the **Submit** button.
* `submitType` can only be specified when using using line items or SKUs, and not subscriptions.
* The default is `auto`.
*/
submitType?: 'auto' | 'book' | 'donate' | 'pay';
}
export type RedirectToCheckoutOptions =
| RedirectToCheckoutServerOptions
| RedirectToCheckoutClientOptions;
export type CheckoutLocale =
| 'auto'
| 'bg'
| 'cs'
| 'da'
| 'de'
| 'el'
| 'en'
| 'en-GB'
| 'es'
| 'es-419'
| 'et'
| 'fi'
| 'fil'
| 'fr'
| 'fr-CA'
| 'hr'
| 'hu'
| 'id'
| 'it'
| 'ja'
| 'lt'
| 'lv'
| 'ms'
| 'mt'
| 'nb'
| 'nl'
| 'pl'
| 'pt'
| 'pt-BR'
| 'ro'
| 'ru'
| 'sk'
| 'sl'
| 'sv'
| 'th'
| 'tr'
| 'zh'
| 'zh-HK'
| 'zh-TW';

View File

@@ -0,0 +1,153 @@
export interface RedirectToCheckoutServerOptions {
/**
* The ID of the [Checkout Session](https://stripe.com/docs/api/checkout/sessions) that is used in [Checkout's server integration](https://stripe.com/docs/payments/checkout/one-time).
*/
sessionId: string;
}
export interface RedirectToCheckoutClientOptions {
/**
* The URL to which Stripe should send customers when payment is complete.
* If youd like access to the Checkout Session for the successful payment, read more about it in our guide on [fulfilling your payments with webhooks](https://stripe.com/docs/payments/checkout/fulfillment#webhooks).
*/
successUrl: string;
/**
* The URL to which Stripe should send customers when payment is canceled.
*/
cancelUrl: string;
/**
* An array of objects representing the items that your customer would like to purchase.
* These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout.
*/
lineItems?: Array<{
/**
* The ID of the price that the customer would like to purchase. SKU or plan IDs may also be used.
*/
price?: string;
/**
* The quantity of units for the item.
*/
quantity?: number;
}>;
/**
* An array of objects representing the items that your customer would like to purchase.
* These items are shown as line items in the Checkout interface and make up the total amount to be collected by Checkout.
*
* @deprecated
*/
items?: Array<{
/**
* The ID of the SKU that the customer would like to purchase
*/
sku?: string;
/**
* The ID of the plan that the customer would like to subscribe to.
*/
plan?: string;
/**
* The quantity of units for the item.
*/
quantity?: number;
}>;
/**
* The mode of the Checkout Session. Required if using lineItems.
*/
mode?: 'payment' | 'subscription';
/**
* A unique string to reference the Checkout session.
* This can be a customer ID, a cart ID, or similar.
* It is included in the `checkout.session.completed` webhook and can be used to fulfill the purchase.
*/
clientReferenceId?: string;
/**
* The email address used to create the customer object.
* If you already know your customer's email address, use this attribute to prefill it on Checkout.
*/
customerEmail?: string;
/**
* Specify whether Checkout should collect the customers billing address.
* If set to `required`, Checkout will attempt to collect the customers billing address.
* If not set or set to `auto` Checkout will only attempt to collect the billing address when necessary.
*/
billingAddressCollection?: 'auto' | 'required';
/**
* Provides configuration for Checkout to collect a shipping address from a customer.
*/
shippingAddressCollection?: {
/**
* An array of two-letter ISO country codes representing which countries
* Checkout should provide as options for shipping locations. The codes are
* expected to be uppercase. Unsupported country codes: AS, CX, CC, CU, HM, IR, KP, MH, FM, NF, MP, PW, SD, SY, UM, VI.
*/
allowedCountries: string[];
};
/**
* The [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) of the locale to display Checkout in.
* Default is `auto` (Stripe detects the locale of the browser).
*/
locale?: CheckoutLocale;
/**
* Describes the type of transaction being performed by Checkout in order to customize relevant text on the page, such as the **Submit** button.
* `submitType` can only be specified when using using line items or SKUs, and not subscriptions.
* The default is `auto`.
*/
submitType?: 'auto' | 'book' | 'donate' | 'pay';
}
export type RedirectToCheckoutOptions =
| RedirectToCheckoutServerOptions
| RedirectToCheckoutClientOptions;
export type CheckoutLocale =
| 'auto'
| 'bg'
| 'cs'
| 'da'
| 'de'
| 'el'
| 'en'
| 'en-GB'
| 'es'
| 'es-419'
| 'et'
| 'fi'
| 'fil'
| 'fr'
| 'fr-CA'
| 'hr'
| 'hu'
| 'id'
| 'it'
| 'ja'
| 'lt'
| 'lv'
| 'ms'
| 'mt'
| 'nb'
| 'nl'
| 'pl'
| 'pt'
| 'pt-BR'
| 'ro'
| 'ru'
| 'sk'
| 'sl'
| 'sv'
| 'th'
| 'tr'
| 'zh'
| 'zh-HK'
| 'zh-TW';

View File

@@ -0,0 +1,13 @@
export * from './hosted-checkout';
export * from './checkout';
export * from './embedded-checkout';
export * from './elements';
export * from './elements-group';
export * from './ephemeral-keys';
export * from './financial-connections';
export * from './orders';
export * from './payment-intents';
export * from './payment-request';
export * from './setup-intents';
export * from './token-and-sources';
export * from './stripe';

View File

@@ -0,0 +1,13 @@
export * from './hosted-checkout';
export * from './checkout';
export * from './embedded-checkout';
export * from './elements';
export * from './elements-group';
export * from './ephemeral-keys';
export * from './financial-connections';
export * from './orders';
export * from './payment-intents';
export * from './payment-request';
export * from './setup-intents';
export * from './token-and-sources';
export * from './stripe';

View File

@@ -0,0 +1,9 @@
/**
* Parameters that will be passed on to the Stripe API to confirm payment for an Order's PaymentIntent.
*/
export interface ProcessOrderParams {
/**
* The url your customer will be directed to after they complete payment.
*/
return_url: string;
}

View File

@@ -0,0 +1,9 @@
/**
* Parameters that will be passed on to the Stripe API to confirm payment for an Order's PaymentIntent.
*/
export interface ProcessOrderParams {
/**
* The url your customer will be directed to after they complete payment.
*/
return_url: string;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,534 @@
import {Token, PaymentMethod, Source} from '../api';
import {ApplePayOption, ApplePayUpdateOption} from './elements/apple-pay';
export interface PaymentRequest {
/**
* Returns a `Promise` that resolves with a truthy value if an enabled wallet is ready to pay.
* If no wallet is available, it resolves with `null`.
*/
canMakePayment(): Promise<CanMakePaymentResult | null>;
/**
* Shows the browsers payment interface.
* When using the `PaymentRequestButtonElement`, this is called for you automatically.
* This method must be called as the result of a user interaction (for example, in a click handler).
*/
show(): void;
/**
* Closes the browsers payment interface.
*/
abort: () => void;
/**
* `true` if the browsers payment interface is showing.
* When using the `PaymentRequestButtonElement`, this is called for you automatically.
*/
isShowing: () => boolean;
/**
* `PaymentRequest` instances can be updated with an options object.
*
* `paymentRequest.update` can only be called when the browser payment interface is not showing.
* Listen to the [click](https://stripe.com/docs/js/element/events) and [cancel](https://stripe.com/docs/js/element/events) events to detect if the payment interface has been initiated.
* To update the `PaymentRequest` right before the payment interface is initiated, call `paymentRequest.update` in your click event handler.
*/
update(options: PaymentRequestUpdateOptions): void;
/**
* Stripe.js automatically creates a `Token` after the customer is done interacting with the browsers payment interface.
* To access the created `Token`, listen for this event.
*/
on(
eventType: 'token',
handler: (event: PaymentRequestTokenEvent) => any
): this;
once(
eventType: 'token',
handler: (event: PaymentRequestTokenEvent) => any
): this;
off(
eventType: 'token',
handler?: (event: PaymentRequestTokenEvent) => any
): this;
/**
* Stripe.js automatically creates a `PaymentMethod` after the customer is done interacting with the browsers payment interface.
* To access the created `PaymentMethod`, listen for this event.
*/
on(
eventType: 'paymentmethod',
handler: (event: PaymentRequestPaymentMethodEvent) => any
): this;
once(
eventType: 'paymentmethod',
handler: (event: PaymentRequestPaymentMethodEvent) => any
): this;
off(
eventType: 'paymentmethod',
handler?: (event: PaymentRequestPaymentMethodEvent) => any
): this;
/**
* Stripe.js automatically creates a `Source` after the customer is done interacting with the browsers payment interface.
* To access the created `Source`, listen for this event.
*/
on(
eventType: 'source',
handler: (event: PaymentRequestSourceEvent) => any
): this;
once(
eventType: 'source',
handler: (event: PaymentRequestSourceEvent) => any
): this;
off(
eventType: 'source',
handler?: (event: PaymentRequestSourceEvent) => any
): this;
/**
* The cancel event is emitted from a `PaymentRequest` when the browser's payment interface is dismissed.
*
* Note that in some browsers, the payment interface may be dismissed by the customer even after they authorize the payment.
* This means that you may receive a cancel event on your `PaymentRequest` object after receiving a `token`, `paymentmethod`, or `source` event.
* If youre using the cancel event as a hook for canceling the customers order, make sure you also refund the payment that you just created.
*/
on(eventType: 'cancel', handler: () => any): this;
once(eventType: 'cancel', handler: () => any): this;
off(eventType: 'cancel', handler?: () => any): this;
/**
* The `shippingaddresschange` event is emitted from a `PaymentRequest` whenever the customer selects a new address in the browser's payment interface.
*/
on(
eventType: 'shippingaddresschange',
handler: (event: PaymentRequestShippingAddressEvent) => any
): this;
once(
eventType: 'shippingaddresschange',
handler: (event: PaymentRequestShippingAddressEvent) => any
): this;
off(
eventType: 'shippingaddresschange',
handler?: (event: PaymentRequestShippingAddressEvent) => any
): this;
/**
* The `shippingoptionchange` event is emitted from a `PaymentRequest` whenever the customer selects a new shipping option in the browser's payment interface.
*/
on(
eventType: 'shippingoptionchange',
handler: (event: PaymentRequestShippingOptionEvent) => any
): this;
once(
eventType: 'shippingoptionchange',
handler: (event: PaymentRequestShippingOptionEvent) => any
): this;
off(
eventType: 'shippingoptionchange',
handler?: (event: PaymentRequestShippingOptionEvent) => any
): this;
}
export type CanMakePaymentResult = Record<string, boolean>;
export interface PaymentRequestUpdateOptions {
/**
* Three character currency code (e.g., `usd`).
*/
currency?: string;
/**
* This `PaymentRequestItem` is shown to the customer in the browsers payment interface.
*/
total?: PaymentRequestItem;
/**
* An array of PaymentRequestItem objects.
* These objects are shown as line items in the browsers payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount above.
*/
displayItems?: PaymentRequestItem[];
/**
* An array of `ShippingOption` objects.
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
}
/**
* An set of options to create this `PaymentRequest` instance with.
* These options can be updated using `paymentRequest.update`.
*/
export interface PaymentRequestOptions {
/**
* The two-letter country code of your Stripe account (e.g., `US`).
*/
country: string;
/**
* Three character currency code (e.g., `usd`).
*/
currency: string;
/**
* This `PaymentRequestItem` is shown to the customer in the browsers payment interface.
*/
total: PaymentRequestItem;
/**
* An array of PaymentRequestItem objects.
* These objects are shown as line items in the browsers payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount above.
*/
displayItems?: PaymentRequestItem[];
/**
* By default, the browser's payment interface only asks the customer for actual payment information.
* A customer name can be collected by setting this option to `true`.
* This collected name will appears in the `PaymentRequestEvent` object.
*
* We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay.
* The billing address can be used to perform address verification and block fraudulent payments.
* For all other payment methods, the billing address is automatically collected when available.
*/
requestPayerName?: boolean;
/**
* See the `requestPayerName` option.
*/
requestPayerPhone?: boolean;
/**
* See the `requestPayerName` option.
*/
requestPayerEmail?: boolean;
/**
* Collect shipping address by setting this option to `true`.
* The address appears in the `PaymentRequestEvent`.
*
* You must also supply a valid `PaymentRequestShippingOption` to the `shippingOptions` property.
* This can be up front at the time `stripe.paymentRequest` is called, or in response to a `shippingaddresschange` event using the `updateWith` callback.
*/
requestShipping?: boolean;
/**
* An array of `ShippingOption` objects.
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* An array of wallet strings.
* Can be one or more of `applePay`, `googlePay`, `link` and `browserCard`.
* Use this option to disable Apple Pay, Google Pay, Link and/or browser-saved cards.
*/
disableWallets?: PaymentRequestWallet[];
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
/**
* The Stripe account ID which is the business of record.
*/
onBehalfOf?: string;
/**
* @deprecated
* Use disableWallets instead.
*/
wallets?: PaymentRequestWallet[];
}
/**
* A `PaymentRequestItem` object is used to configure a `PaymentRequest`.
*/
export interface PaymentRequestItem {
/**
* The amount in the currency's subunit (e.g. cents, yen, etc.)
*/
amount: number;
/**
* A name that the browser shows the customer in the payment interface.
*/
label: string;
/**
* If you might change this amount later (for example, after you have calcluated shipping costs), set this to `true`.
* Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission.
*/
pending?: boolean;
}
/**
* The `ShippingOption` object describes a shipping method used with a `PaymentRequest`.
*/
export interface PaymentRequestShippingOption {
/**
* A unique ID you create to keep track of this shipping option.
* Youll be told the ID of the selected option on changes and on completion.
*/
id: string;
/**
* A short label for this shipping option.
*/
label: string;
/**
* A longer description of this shipping option.
*/
detail: string;
/**
* The amount to show for this shipping option.
* If the cost of this shipping option depends on the shipping address the customer enters, listen for the `shippingaddresschange` event.
*/
amount: number;
}
export type PaymentRequestWallet =
| 'applePay'
| 'googlePay'
| 'link'
| 'browserCard';
export type PaymentRequestCompleteStatus =
/**
* Report to the browser that the payment was successful, and that it can close any active payment interface.
*/
| 'success'
/**
* Report to the browser that you were unable to process the customers payment.
* Browsers may re-show the payment interface, or simply show a message and close.
*/
| 'fail'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_name'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_phone'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_email'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_shipping_address';
export interface PaymentRequestEvent {
/**
* Call this function with a `CompleteStatus` when you have processed the token data provided by the API.
* Note that you must must call complete within 30 seconds.
*/
complete: (status: PaymentRequestCompleteStatus) => void;
/**
* The customer's name.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerName?: string;
/**
* The customer's email.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerEmail?: string;
/**
* The customer's phone.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerPhone?: string;
/**
* The final `ShippingAddress` the customer selected.
* Only present when `requestShipping` is `true` when [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create), and you've supplied at least one `ShippingOption`.
*/
shippingAddress?: PaymentRequestShippingAddress;
/**
* The final `ShippingOption` the customer selected.
* Only present when `requestShipping` is `true` when [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create), and you've supplied at least one `ShippingOption`.
*/
shippingOption?: PaymentRequestShippingOption;
/**
* The unique name of the wallet the customer chose to authorize payment.
* For example, `browserCard`.
*/
walletName: PaymentRequestWallet | string;
/**
* @deprecated
* Use walletName instead.
*/
methodName: string;
}
/**
* Describes a shipping address collected with a `PaymentRequest`.
*/
export interface PaymentRequestShippingAddress {
/**
* Two-letter country code, capitalized.
* Valid two-letter country codes are specified by ISO3166 alpha-2.
*/
country?: string;
/**
* An array of address line items.
* For example, `185 Berry St.`, `Suite 500`, `P.O. Box 12345`, etc.
*/
addressLine?: string[];
/**
* The most coarse subdivision of a country.
* Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines.
*/
region?: string;
/**
* The name of a city, town, village, etc.
*/
city?: string;
/**
* The postal code or ZIP code, also known as PIN code in India.
*/
postalCode?: string;
/**
* The name of the recipient.
* This might be a person, a business name, or contain “care of” (c/o) instructions.
*/
recipient?: string;
/**
* The phone number of the recipient.
* Note that this might be different from any phone number you collect with `requestPayerPhone`.
*/
phone?: string;
/**
* The sorting code as used in, for example, France.
* Not present on Apple platforms.
*/
sortingCode?: string;
/**
* A logical subdivision of a city.
* Can be used for things like neighborhoods, boroughs, districts, or UK dependent localities.
* Not present on Apple platforms.
*/
dependentLocality?: string;
}
export interface PaymentRequestTokenEvent extends PaymentRequestEvent {
token: Token;
}
export interface PaymentRequestPaymentMethodEvent extends PaymentRequestEvent {
paymentMethod: PaymentMethod;
}
export interface PaymentRequestSourceEvent extends PaymentRequestEvent {
source: Source;
}
export interface PaymentRequestShippingAddressEvent {
/**
* Call this with an `UpdateDetails` object to merge updates into the current `PaymentRequest` object.
* Note that if you subscribe to `shippingaddresschange` events, then you must call `updateWith` within 30 seconds.
*/
updateWith: (details: PaymentRequestUpdateDetails) => void;
/**
* The customer's selected `ShippingAddress`.
* To maintain privacy, browsers may anonymize the shipping address by removing sensitive information that is not necessary to calculate shipping costs.
* Depending on the country, some fields can be missing or partially redacted.
* For example, the shipping address in the U.S. may only contain a city, state, and ZIP code.
* The full shipping address appears in the `PaymentRequestEvent` object after the purchase is confirmed in the browsers payment interface
*/
shippingAddress: PaymentRequestShippingAddress;
}
export type PaymentRequestUpdateDetailsStatus =
/**
* Let the customer proceed.
*/
| 'success'
/**
* Prevent the customer from making the change they just made.
*/
| 'fail'
/**
* Equivalent to `fail`, except we show a more specific error message.
* Can only be used in a `shippingaddresschange` handler.
*/
| 'invalid_shipping_address';
/**
* An object to pass to the `updateWith` callback on `shippingaddresschange` and `shippingoptionchange` events.
*/
export interface PaymentRequestUpdateDetails {
/**
* The browser uses this value to show an error message to the customer if they've taken an action that invalidates the payment request.
*/
status?: PaymentRequestUpdateDetailsStatus;
/**
* The new total amount, if applicable.
*/
total?: PaymentRequestItem;
/**
* These `PaymentRequestItem`s are shown as line items in the browser's payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount.
*/
displayItems?: PaymentRequestItem[];
/**
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* Specify new options to refresh the Apple Pay payment interface.
*/
applePay?: ApplePayUpdateOption;
}
export interface PaymentRequestShippingOptionEvent {
/**
* Call this with an `UpdateDetails` object to merge updates into the current `PaymentRequest` object.
* Note that if you subscribe to `shippingaddresschange` events, then you must call `updateWith` within 30 seconds.
*/
updateWith: (details: PaymentRequestUpdateDetails) => void;
/**
* The customer's selected `ShippingOption`.
*/
shippingOption: PaymentRequestShippingOption;
}

View File

@@ -0,0 +1,534 @@
import {Token, PaymentMethod, Source} from '../api';
import {ApplePayOption, ApplePayUpdateOption} from './elements/apple-pay';
export interface PaymentRequest {
/**
* Returns a `Promise` that resolves with a truthy value if an enabled wallet is ready to pay.
* If no wallet is available, it resolves with `null`.
*/
canMakePayment(): Promise<CanMakePaymentResult | null>;
/**
* Shows the browsers payment interface.
* When using the `PaymentRequestButtonElement`, this is called for you automatically.
* This method must be called as the result of a user interaction (for example, in a click handler).
*/
show(): void;
/**
* Closes the browsers payment interface.
*/
abort: () => void;
/**
* `true` if the browsers payment interface is showing.
* When using the `PaymentRequestButtonElement`, this is called for you automatically.
*/
isShowing: () => boolean;
/**
* `PaymentRequest` instances can be updated with an options object.
*
* `paymentRequest.update` can only be called when the browser payment interface is not showing.
* Listen to the [click](https://stripe.com/docs/js/element/events) and [cancel](https://stripe.com/docs/js/element/events) events to detect if the payment interface has been initiated.
* To update the `PaymentRequest` right before the payment interface is initiated, call `paymentRequest.update` in your click event handler.
*/
update(options: PaymentRequestUpdateOptions): void;
/**
* Stripe.js automatically creates a `Token` after the customer is done interacting with the browsers payment interface.
* To access the created `Token`, listen for this event.
*/
on(
eventType: 'token',
handler: (event: PaymentRequestTokenEvent) => any
): this;
once(
eventType: 'token',
handler: (event: PaymentRequestTokenEvent) => any
): this;
off(
eventType: 'token',
handler?: (event: PaymentRequestTokenEvent) => any
): this;
/**
* Stripe.js automatically creates a `PaymentMethod` after the customer is done interacting with the browsers payment interface.
* To access the created `PaymentMethod`, listen for this event.
*/
on(
eventType: 'paymentmethod',
handler: (event: PaymentRequestPaymentMethodEvent) => any
): this;
once(
eventType: 'paymentmethod',
handler: (event: PaymentRequestPaymentMethodEvent) => any
): this;
off(
eventType: 'paymentmethod',
handler?: (event: PaymentRequestPaymentMethodEvent) => any
): this;
/**
* Stripe.js automatically creates a `Source` after the customer is done interacting with the browsers payment interface.
* To access the created `Source`, listen for this event.
*/
on(
eventType: 'source',
handler: (event: PaymentRequestSourceEvent) => any
): this;
once(
eventType: 'source',
handler: (event: PaymentRequestSourceEvent) => any
): this;
off(
eventType: 'source',
handler?: (event: PaymentRequestSourceEvent) => any
): this;
/**
* The cancel event is emitted from a `PaymentRequest` when the browser's payment interface is dismissed.
*
* Note that in some browsers, the payment interface may be dismissed by the customer even after they authorize the payment.
* This means that you may receive a cancel event on your `PaymentRequest` object after receiving a `token`, `paymentmethod`, or `source` event.
* If youre using the cancel event as a hook for canceling the customers order, make sure you also refund the payment that you just created.
*/
on(eventType: 'cancel', handler: () => any): this;
once(eventType: 'cancel', handler: () => any): this;
off(eventType: 'cancel', handler?: () => any): this;
/**
* The `shippingaddresschange` event is emitted from a `PaymentRequest` whenever the customer selects a new address in the browser's payment interface.
*/
on(
eventType: 'shippingaddresschange',
handler: (event: PaymentRequestShippingAddressEvent) => any
): this;
once(
eventType: 'shippingaddresschange',
handler: (event: PaymentRequestShippingAddressEvent) => any
): this;
off(
eventType: 'shippingaddresschange',
handler?: (event: PaymentRequestShippingAddressEvent) => any
): this;
/**
* The `shippingoptionchange` event is emitted from a `PaymentRequest` whenever the customer selects a new shipping option in the browser's payment interface.
*/
on(
eventType: 'shippingoptionchange',
handler: (event: PaymentRequestShippingOptionEvent) => any
): this;
once(
eventType: 'shippingoptionchange',
handler: (event: PaymentRequestShippingOptionEvent) => any
): this;
off(
eventType: 'shippingoptionchange',
handler?: (event: PaymentRequestShippingOptionEvent) => any
): this;
}
export type CanMakePaymentResult = Record<string, boolean>;
export interface PaymentRequestUpdateOptions {
/**
* Three character currency code (e.g., `usd`).
*/
currency?: string;
/**
* This `PaymentRequestItem` is shown to the customer in the browsers payment interface.
*/
total?: PaymentRequestItem;
/**
* An array of PaymentRequestItem objects.
* These objects are shown as line items in the browsers payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount above.
*/
displayItems?: PaymentRequestItem[];
/**
* An array of `ShippingOption` objects.
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
}
/**
* An set of options to create this `PaymentRequest` instance with.
* These options can be updated using `paymentRequest.update`.
*/
export interface PaymentRequestOptions {
/**
* The two-letter country code of your Stripe account (e.g., `US`).
*/
country: string;
/**
* Three character currency code (e.g., `usd`).
*/
currency: string;
/**
* This `PaymentRequestItem` is shown to the customer in the browsers payment interface.
*/
total: PaymentRequestItem;
/**
* An array of PaymentRequestItem objects.
* These objects are shown as line items in the browsers payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount above.
*/
displayItems?: PaymentRequestItem[];
/**
* By default, the browser's payment interface only asks the customer for actual payment information.
* A customer name can be collected by setting this option to `true`.
* This collected name will appears in the `PaymentRequestEvent` object.
*
* We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay.
* The billing address can be used to perform address verification and block fraudulent payments.
* For all other payment methods, the billing address is automatically collected when available.
*/
requestPayerName?: boolean;
/**
* See the `requestPayerName` option.
*/
requestPayerPhone?: boolean;
/**
* See the `requestPayerName` option.
*/
requestPayerEmail?: boolean;
/**
* Collect shipping address by setting this option to `true`.
* The address appears in the `PaymentRequestEvent`.
*
* You must also supply a valid `PaymentRequestShippingOption` to the `shippingOptions` property.
* This can be up front at the time `stripe.paymentRequest` is called, or in response to a `shippingaddresschange` event using the `updateWith` callback.
*/
requestShipping?: boolean;
/**
* An array of `ShippingOption` objects.
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* An array of wallet strings.
* Can be one or more of `applePay`, `googlePay`, `link` and `browserCard`.
* Use this option to disable Apple Pay, Google Pay, Link and/or browser-saved cards.
*/
disableWallets?: PaymentRequestWallet[];
/**
* Specify the options to be used when the Apple Pay payment interface opens.
*/
applePay?: ApplePayOption;
/**
* The Stripe account ID which is the business of record.
*/
onBehalfOf?: string;
/**
* @deprecated
* Use disableWallets instead.
*/
wallets?: PaymentRequestWallet[];
}
/**
* A `PaymentRequestItem` object is used to configure a `PaymentRequest`.
*/
export interface PaymentRequestItem {
/**
* The amount in the currency's subunit (e.g. cents, yen, etc.)
*/
amount: number;
/**
* A name that the browser shows the customer in the payment interface.
*/
label: string;
/**
* If you might change this amount later (for example, after you have calcluated shipping costs), set this to `true`.
* Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission.
*/
pending?: boolean;
}
/**
* The `ShippingOption` object describes a shipping method used with a `PaymentRequest`.
*/
export interface PaymentRequestShippingOption {
/**
* A unique ID you create to keep track of this shipping option.
* Youll be told the ID of the selected option on changes and on completion.
*/
id: string;
/**
* A short label for this shipping option.
*/
label: string;
/**
* A longer description of this shipping option.
*/
detail: string;
/**
* The amount to show for this shipping option.
* If the cost of this shipping option depends on the shipping address the customer enters, listen for the `shippingaddresschange` event.
*/
amount: number;
}
export type PaymentRequestWallet =
| 'applePay'
| 'googlePay'
| 'link'
| 'browserCard';
export type PaymentRequestCompleteStatus =
/**
* Report to the browser that the payment was successful, and that it can close any active payment interface.
*/
| 'success'
/**
* Report to the browser that you were unable to process the customers payment.
* Browsers may re-show the payment interface, or simply show a message and close.
*/
| 'fail'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_name'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_phone'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_payer_email'
/**
* Equivalent to `fail`, except that the browser can choose to show a more-specific error message.
*/
| 'invalid_shipping_address';
export interface PaymentRequestEvent {
/**
* Call this function with a `CompleteStatus` when you have processed the token data provided by the API.
* Note that you must must call complete within 30 seconds.
*/
complete: (status: PaymentRequestCompleteStatus) => void;
/**
* The customer's name.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerName?: string;
/**
* The customer's email.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerEmail?: string;
/**
* The customer's phone.
* Only present if it was explicitly asked for [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create).
*/
payerPhone?: string;
/**
* The final `ShippingAddress` the customer selected.
* Only present when `requestShipping` is `true` when [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create), and you've supplied at least one `ShippingOption`.
*/
shippingAddress?: PaymentRequestShippingAddress;
/**
* The final `ShippingOption` the customer selected.
* Only present when `requestShipping` is `true` when [creating the PaymentRequest object](https://stripe.com/docs/js/payment_request/create), and you've supplied at least one `ShippingOption`.
*/
shippingOption?: PaymentRequestShippingOption;
/**
* The unique name of the wallet the customer chose to authorize payment.
* For example, `browserCard`.
*/
walletName: PaymentRequestWallet | string;
/**
* @deprecated
* Use walletName instead.
*/
methodName: string;
}
/**
* Describes a shipping address collected with a `PaymentRequest`.
*/
export interface PaymentRequestShippingAddress {
/**
* Two-letter country code, capitalized.
* Valid two-letter country codes are specified by ISO3166 alpha-2.
*/
country?: string;
/**
* An array of address line items.
* For example, `185 Berry St.`, `Suite 500`, `P.O. Box 12345`, etc.
*/
addressLine?: string[];
/**
* The most coarse subdivision of a country.
* Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines.
*/
region?: string;
/**
* The name of a city, town, village, etc.
*/
city?: string;
/**
* The postal code or ZIP code, also known as PIN code in India.
*/
postalCode?: string;
/**
* The name of the recipient.
* This might be a person, a business name, or contain “care of” (c/o) instructions.
*/
recipient?: string;
/**
* The phone number of the recipient.
* Note that this might be different from any phone number you collect with `requestPayerPhone`.
*/
phone?: string;
/**
* The sorting code as used in, for example, France.
* Not present on Apple platforms.
*/
sortingCode?: string;
/**
* A logical subdivision of a city.
* Can be used for things like neighborhoods, boroughs, districts, or UK dependent localities.
* Not present on Apple platforms.
*/
dependentLocality?: string;
}
export interface PaymentRequestTokenEvent extends PaymentRequestEvent {
token: Token;
}
export interface PaymentRequestPaymentMethodEvent extends PaymentRequestEvent {
paymentMethod: PaymentMethod;
}
export interface PaymentRequestSourceEvent extends PaymentRequestEvent {
source: Source;
}
export interface PaymentRequestShippingAddressEvent {
/**
* Call this with an `UpdateDetails` object to merge updates into the current `PaymentRequest` object.
* Note that if you subscribe to `shippingaddresschange` events, then you must call `updateWith` within 30 seconds.
*/
updateWith: (details: PaymentRequestUpdateDetails) => void;
/**
* The customer's selected `ShippingAddress`.
* To maintain privacy, browsers may anonymize the shipping address by removing sensitive information that is not necessary to calculate shipping costs.
* Depending on the country, some fields can be missing or partially redacted.
* For example, the shipping address in the U.S. may only contain a city, state, and ZIP code.
* The full shipping address appears in the `PaymentRequestEvent` object after the purchase is confirmed in the browsers payment interface
*/
shippingAddress: PaymentRequestShippingAddress;
}
export type PaymentRequestUpdateDetailsStatus =
/**
* Let the customer proceed.
*/
| 'success'
/**
* Prevent the customer from making the change they just made.
*/
| 'fail'
/**
* Equivalent to `fail`, except we show a more specific error message.
* Can only be used in a `shippingaddresschange` handler.
*/
| 'invalid_shipping_address';
/**
* An object to pass to the `updateWith` callback on `shippingaddresschange` and `shippingoptionchange` events.
*/
export interface PaymentRequestUpdateDetails {
/**
* The browser uses this value to show an error message to the customer if they've taken an action that invalidates the payment request.
*/
status?: PaymentRequestUpdateDetailsStatus;
/**
* The new total amount, if applicable.
*/
total?: PaymentRequestItem;
/**
* These `PaymentRequestItem`s are shown as line items in the browser's payment interface.
* Note that the sum of the line item amounts does not need to add up to the `total` amount.
*/
displayItems?: PaymentRequestItem[];
/**
* The first shipping option listed appears in the browser payment interface as the default option.
*/
shippingOptions?: PaymentRequestShippingOption[];
/**
* Specify new options to refresh the Apple Pay payment interface.
*/
applePay?: ApplePayUpdateOption;
}
export interface PaymentRequestShippingOptionEvent {
/**
* Call this with an `UpdateDetails` object to merge updates into the current `PaymentRequest` object.
* Note that if you subscribe to `shippingaddresschange` events, then you must call `updateWith` within 30 seconds.
*/
updateWith: (details: PaymentRequestUpdateDetails) => void;
/**
* The customer's selected `ShippingOption`.
*/
shippingOption: PaymentRequestShippingOption;
}

View File

@@ -0,0 +1,300 @@
import {PaymentMethodCreateParams, SetupIntentConfirmParams} from '../api';
import {
CreatePaymentMethodAcssDebitData,
CreatePaymentMethodAuBecsDebitData,
CreatePaymentMethodBancontactData,
CreatePaymentMethodCardData,
CreatePaymentMethodCashappData,
CreatePaymentMethodIdealData,
CreatePaymentMethodSepaDebitData,
CreatePaymentMethodSofortData,
CreatePaymentMethodPayPalData,
CreatePaymentMethodBacsDebitData,
CreatePaymentMethodUsBankAccountData,
CollectBankAccountParams,
} from './payment-intents';
import {Omit} from '../utils';
/**
* Data to be sent with a `stripe.confirmSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSetupData extends SetupIntentConfirmParams {
/**
* The url your customer will be directed to after they complete payment.
*/
return_url: string;
/**
* An object to attach additional billing_details to the PaymentMethod created via Elements.
*
* @docs https://stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_data
*/
payment_method_data?: {
/**
* The customer's billing details. Details collected by Elements will override values passed here.
* Billing fields that are omitted in the Payment Element via the `fields` option required.
*
* @docs https://stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_data-billing_details
*/
billing_details?: PaymentMethodCreateParams.BillingDetails;
/**
* Specifies if the PaymentMethod should be redisplayed when using the Saved Payment Method feature
*/
allow_redisplay?: 'always' | 'limited' | 'unspecified';
};
/**
* Optional `id` of an existing [ConfirmationToken](https://stripe.com/docs/api/confirmation_tokens).
*
* @docs https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-confirmation_token
*/
confirmation_token?: string;
/**
* Optional `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods).
*
* @docs https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method
*/
payment_method?: string;
/**
* Specifies which fields in the response should be expanded.
*/
expand?: Array<string>;
}
/**
* Data to be sent with a `stripe.confirmCardSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmCardSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodCardData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmCardSetup`.
*/
export interface ConfirmCardSetupOptions {
/*
* Set this to `false` if you want to [handle next actions yourself](https://stripe.com/docs/payments/payment-intents/verifying-status#next-actions), or if you want to defer next action handling until later (e.g. for use in the [PaymentRequest API](https://stripe.com/docs/stripe-js/elements/payment-request-button#complete-payment-intents)).
* Default is `true`.
*/
handleActions?: boolean;
}
export interface ConfirmCashappSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodCashappData, 'type'>;
/**
* The url your customer will be directed to after they complete authentication.
*/
return_url?: string;
}
/**
* An options object to control the behavior of `stripe.confirmCashappSetup`.
*/
export interface ConfirmCashappSetupOptions {
/*
* Set this to `false` if you want to [manually handle the authorization QR code or redirect](https://stripe.com/docs/payments/cash-app-pay/set-up-payment?platform=web&ui=API#web-create-setup-intent).
* Default is `true`.
*/
handleActions?: boolean;
}
/**
* Data to be sent with a `stripe.confirmIdealSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmIdealSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodIdealData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmIdealSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmPayPalSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodPayPalData, 'type'>;
/**
* The required url your customer will be directed to after they complete authentication.
*/
return_url: string;
}
/**
* Data to be sent with a `stripe.confirmSepaDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSepaDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodSepaDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmSofortSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSofortSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodSofortData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmSofortSetup`.
*/
export interface ConfirmSofortSetupOptions {
/**
* Set this to `false` if you want to [manually handle the authorization redirect](https://stripe.com/docs/payments/sofort/accept-a-payment?platform=web#handle-redirect).
* Default is `true`.
*/
handleActions?: boolean;
}
/**
* Data to be sent with a `stripe.confirmAuBecsDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmAuBecsDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodAuBecsDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmBacsDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmBacsDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodBacsDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmBancontactSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmBancontactSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodBancontactData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmAcssDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmAcssDebitSetupData extends SetupIntentConfirmParams {
/**
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodAcssDebitData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmAcssDebitSetup`.
*/
export interface ConfirmAcssDebitSetupOptions {
/**
* Set this to true if you want to skip displaying the mandate confirmation.
*/
skipMandate?: boolean;
}
/**
* Data to be sent with a `stripe.verifyMicrodepositsForSetup` request.
*/
export interface VerifyMicrodepositsForSetupData {
/**
* An array of two positive integers, in cents, equal to the values of the microdeposits sent to the bank account.
*/
amounts?: Array<number>;
/**
* A six-character code starting with SM present in the microdeposit sent to the bank account.
*/
descriptor_code?: string;
}
export interface ConfirmUsBankAccountSetupData
extends SetupIntentConfirmParams {
/**
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodUsBankAccountData, 'type'>;
}
/**
* Data to be sent with a `stripe.collectBankAccountForSetup` request.
*/
export interface CollectBankAccountForSetupOptions {
/**
* The client secret of the SetupIntent.
*/
clientSecret: string;
params: CollectBankAccountParams;
/**
* Specifies which fields in the response should be expanded.
*/
expand?: Array<string>;
}

View File

@@ -0,0 +1,300 @@
import {PaymentMethodCreateParams, SetupIntentConfirmParams} from '../api';
import {
CreatePaymentMethodAcssDebitData,
CreatePaymentMethodAuBecsDebitData,
CreatePaymentMethodBancontactData,
CreatePaymentMethodCardData,
CreatePaymentMethodCashappData,
CreatePaymentMethodIdealData,
CreatePaymentMethodSepaDebitData,
CreatePaymentMethodSofortData,
CreatePaymentMethodPayPalData,
CreatePaymentMethodBacsDebitData,
CreatePaymentMethodUsBankAccountData,
CollectBankAccountParams,
} from './payment-intents';
import {Omit} from '../utils';
/**
* Data to be sent with a `stripe.confirmSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSetupData extends SetupIntentConfirmParams {
/**
* The url your customer will be directed to after they complete payment.
*/
return_url: string;
/**
* An object to attach additional billing_details to the PaymentMethod created via Elements.
*
* @docs https://stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_data
*/
payment_method_data?: {
/**
* The customer's billing details. Details collected by Elements will override values passed here.
* Billing fields that are omitted in the Payment Element via the `fields` option required.
*
* @docs https://stripe.com/docs/api/payment_intents/create#create_payment_intent-payment_method_data-billing_details
*/
billing_details?: PaymentMethodCreateParams.BillingDetails;
/**
* Specifies if the PaymentMethod should be redisplayed when using the Saved Payment Method feature
*/
allow_redisplay?: 'always' | 'limited' | 'unspecified';
};
/**
* Optional `id` of an existing [ConfirmationToken](https://stripe.com/docs/api/confirmation_tokens).
*
* @docs https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-confirmation_token
*/
confirmation_token?: string;
/**
* Optional `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods).
*
* @docs https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method
*/
payment_method?: string;
/**
* Specifies which fields in the response should be expanded.
*/
expand?: Array<string>;
}
/**
* Data to be sent with a `stripe.confirmCardSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmCardSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodCardData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmCardSetup`.
*/
export interface ConfirmCardSetupOptions {
/*
* Set this to `false` if you want to [handle next actions yourself](https://stripe.com/docs/payments/payment-intents/verifying-status#next-actions), or if you want to defer next action handling until later (e.g. for use in the [PaymentRequest API](https://stripe.com/docs/stripe-js/elements/payment-request-button#complete-payment-intents)).
* Default is `true`.
*/
handleActions?: boolean;
}
export interface ConfirmCashappSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodCashappData, 'type'>;
/**
* The url your customer will be directed to after they complete authentication.
*/
return_url?: string;
}
/**
* An options object to control the behavior of `stripe.confirmCashappSetup`.
*/
export interface ConfirmCashappSetupOptions {
/*
* Set this to `false` if you want to [manually handle the authorization QR code or redirect](https://stripe.com/docs/payments/cash-app-pay/set-up-payment?platform=web&ui=API#web-create-setup-intent).
* Default is `true`.
*/
handleActions?: boolean;
}
/**
* Data to be sent with a `stripe.confirmIdealSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmIdealSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodIdealData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmIdealSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmPayPalSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodPayPalData, 'type'>;
/**
* The required url your customer will be directed to after they complete authentication.
*/
return_url: string;
}
/**
* Data to be sent with a `stripe.confirmSepaDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSepaDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodSepaDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmSofortSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmSofortSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodSofortData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmSofortSetup`.
*/
export interface ConfirmSofortSetupOptions {
/**
* Set this to `false` if you want to [manually handle the authorization redirect](https://stripe.com/docs/payments/sofort/accept-a-payment?platform=web#handle-redirect).
* Default is `true`.
*/
handleActions?: boolean;
}
/**
* Data to be sent with a `stripe.confirmAuBecsDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmAuBecsDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodAuBecsDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmBacsDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmBacsDebitSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodBacsDebitData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmBancontactSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmBancontactSetupData extends SetupIntentConfirmParams {
/*
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodBancontactData, 'type'>;
}
/**
* Data to be sent with a `stripe.confirmAcssDebitSetup` request.
* Refer to the [Setup Intents API](https://stripe.com/docs/api/setup_intents/confirm) for a full list of parameters.
*/
export interface ConfirmAcssDebitSetupData extends SetupIntentConfirmParams {
/**
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodAcssDebitData, 'type'>;
}
/**
* An options object to control the behavior of `stripe.confirmAcssDebitSetup`.
*/
export interface ConfirmAcssDebitSetupOptions {
/**
* Set this to true if you want to skip displaying the mandate confirmation.
*/
skipMandate?: boolean;
}
/**
* Data to be sent with a `stripe.verifyMicrodepositsForSetup` request.
*/
export interface VerifyMicrodepositsForSetupData {
/**
* An array of two positive integers, in cents, equal to the values of the microdeposits sent to the bank account.
*/
amounts?: Array<number>;
/**
* A six-character code starting with SM present in the microdeposit sent to the bank account.
*/
descriptor_code?: string;
}
export interface ConfirmUsBankAccountSetupData
extends SetupIntentConfirmParams {
/**
* Either the `id` of an existing [PaymentMethod](https://stripe.com/docs/api/payment_methods), or an object containing data to create a `PaymentMethod` with.
* This field is optional if a `PaymentMethod` has already been attached to this `SetupIntent`.
*
* @recommended
*/
payment_method?: string | Omit<CreatePaymentMethodUsBankAccountData, 'type'>;
}
/**
* Data to be sent with a `stripe.collectBankAccountForSetup` request.
*/
export interface CollectBankAccountForSetupOptions {
/**
* The client secret of the SetupIntent.
*/
clientSecret: string;
params: CollectBankAccountParams;
/**
* Specifies which fields in the response should be expanded.
*/
expand?: Array<string>;
}

File diff suppressed because it is too large Load Diff

1538
node_modules/@stripe/stripe-js/dist/stripe-js/stripe.d.ts generated vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,110 @@
import {SourceCreateParams} from '../api';
/**
* An object containing the unique ID and client secret for a `Source`.
*
* You can use a `Source` object created with `stripe.createSource` as the argument to `stripe.retrieveSource`, as every `Source` object has both `id` and `client_secret` keys.
*/
export interface RetrieveSourceParam {
/**
* Unique identifier of the `Source`.
*/
id: string;
/**
* A secret available to the web client that created the `Source`, for purposes of retrieving the `Source` later from that same client.
*/
client_secret: string;
}
/**
* An object containing additional payment information you might have collected.
*
* Although these fields are optional, we highly recommend collecting name and address.
* This information can be used to perform a number of verifications, such as CVC, ZIP, and address verification.
* Radar includes built-in rules that can block payments where the ZIP or CVC verifications with the cardholders bank failed.
*/
export interface CreateTokenCardData {
/**
* @recommended
*/
name?: string;
address_line1?: string;
address_line2?: string;
address_city?: string;
address_state?: string;
address_zip?: string;
/**
* A two character country code (for example, `US`).
*
* @recommended
*/
address_country?: string;
/**
* Required in order to [add the card to a Connect account](https://stripe.com/docs/connect/payouts#bank-accounts) (in all other cases, this parameter is not used).
* Currently, the only supported currency for debit card payouts is `usd`.
*/
currency?: string;
}
export interface CreateTokenIbanData {
/**
* Three character currency code (e.g., `eur`).
*/
currency: string;
account_holder_name: string;
account_holder_type: string;
}
export interface CreateTokenPiiData {
personal_id_number: string;
}
export interface CreateTokenBankAccountData {
country: string;
currency: string;
routing_number?: string;
account_number: string;
account_holder_name?: string;
account_holder_type: string;
account_type?: string;
}
/**
* A required object containing the `type` of `Source` you want to create, and any additional payment information that you have collected.
* See the [Sources API](https://stripe.com/docs/api#create_source) reference for details.
*
* You cannot pass raw card information to `stripe.createSource(sourceData)`.
* Instead, you must gather card information in an `Element` and use `stripe.createSource(element, sourceData)`.
* You can also pass an existing card token to convert it into a `Source` object.
*/
export interface CreateSourceData extends SourceCreateParams {
bancontact?: CreateSourceData.DeprecatedMethodData;
ideal?: CreateSourceData.DeprecatedMethodData;
klarna?: CreateSourceData.DeprecatedMethodData;
sepa_debit?: CreateSourceData.DeprecatedMethodData;
sofort?: CreateSourceData.DeprecatedMethodData;
}
export namespace CreateSourceData {
export type DeprecatedMethodData = Record<string, unknown>;
}

View File

@@ -0,0 +1,110 @@
import {SourceCreateParams} from '../api';
/**
* An object containing the unique ID and client secret for a `Source`.
*
* You can use a `Source` object created with `stripe.createSource` as the argument to `stripe.retrieveSource`, as every `Source` object has both `id` and `client_secret` keys.
*/
export interface RetrieveSourceParam {
/**
* Unique identifier of the `Source`.
*/
id: string;
/**
* A secret available to the web client that created the `Source`, for purposes of retrieving the `Source` later from that same client.
*/
client_secret: string;
}
/**
* An object containing additional payment information you might have collected.
*
* Although these fields are optional, we highly recommend collecting name and address.
* This information can be used to perform a number of verifications, such as CVC, ZIP, and address verification.
* Radar includes built-in rules that can block payments where the ZIP or CVC verifications with the cardholders bank failed.
*/
export interface CreateTokenCardData {
/**
* @recommended
*/
name?: string;
address_line1?: string;
address_line2?: string;
address_city?: string;
address_state?: string;
address_zip?: string;
/**
* A two character country code (for example, `US`).
*
* @recommended
*/
address_country?: string;
/**
* Required in order to [add the card to a Connect account](https://stripe.com/docs/connect/payouts#bank-accounts) (in all other cases, this parameter is not used).
* Currently, the only supported currency for debit card payouts is `usd`.
*/
currency?: string;
}
export interface CreateTokenIbanData {
/**
* Three character currency code (e.g., `eur`).
*/
currency: string;
account_holder_name: string;
account_holder_type: string;
}
export interface CreateTokenPiiData {
personal_id_number: string;
}
export interface CreateTokenBankAccountData {
country: string;
currency: string;
routing_number?: string;
account_number: string;
account_holder_name?: string;
account_holder_type: string;
account_type?: string;
}
/**
* A required object containing the `type` of `Source` you want to create, and any additional payment information that you have collected.
* See the [Sources API](https://stripe.com/docs/api#create_source) reference for details.
*
* You cannot pass raw card information to `stripe.createSource(sourceData)`.
* Instead, you must gather card information in an `Element` and use `stripe.createSource(element, sourceData)`.
* You can also pass an existing card token to convert it into a `Source` object.
*/
export interface CreateSourceData extends SourceCreateParams {
bancontact?: CreateSourceData.DeprecatedMethodData;
ideal?: CreateSourceData.DeprecatedMethodData;
klarna?: CreateSourceData.DeprecatedMethodData;
sepa_debit?: CreateSourceData.DeprecatedMethodData;
sofort?: CreateSourceData.DeprecatedMethodData;
}
export namespace CreateSourceData {
export type DeprecatedMethodData = Record<string, unknown>;
}