/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AddressSubmitEvent, AddressSubmitHandler } from "./components/stripe-address-element/stripe-address-element"; import { CurrencySelectorChangeEvent, CurrencySelectorChangeHandler, DefaultFormSubmitResult, FormSubmitEvent, FormSubmitHandler, InitStripeOptions, IntentType, LinkAuthenticationElementChangeEvent, LinkAuthenticationElementChangeHandler, PaymentRequestButtonOption, PaymentRequestPaymentMethodEventHandler, PaymentRequestShippingAddressEventHandler, PaymentRequestShippingOptionEventHandler, ProgressStatus, StripeDidLoadedHandler, StripeLoadedEvent } from "./interfaces"; import { PaymentRequestOptions, PaymentRequestWallet, StripeExpressCheckoutElementClickEvent, StripeExpressCheckoutElementConfirmEvent } from "@stripe/stripe-js"; import { ExpressCheckoutElementOptions } from "./services/interfaces"; import { CheckoutSessionFormSubmitResult, InitCheckoutSessionOptions, PaymentElementSubmitEvent, PaymentElementSubmitHandler } from "./components/stripe-payment-element/stripe-payment-element"; export { AddressSubmitEvent, AddressSubmitHandler } from "./components/stripe-address-element/stripe-address-element"; export { CurrencySelectorChangeEvent, CurrencySelectorChangeHandler, DefaultFormSubmitResult, FormSubmitEvent, FormSubmitHandler, InitStripeOptions, IntentType, LinkAuthenticationElementChangeEvent, LinkAuthenticationElementChangeHandler, PaymentRequestButtonOption, PaymentRequestPaymentMethodEventHandler, PaymentRequestShippingAddressEventHandler, PaymentRequestShippingOptionEventHandler, ProgressStatus, StripeDidLoadedHandler, StripeLoadedEvent } from "./interfaces"; export { PaymentRequestOptions, PaymentRequestWallet, StripeExpressCheckoutElementClickEvent, StripeExpressCheckoutElementConfirmEvent } from "@stripe/stripe-js"; export { ExpressCheckoutElementOptions } from "./services/interfaces"; export { CheckoutSessionFormSubmitResult, InitCheckoutSessionOptions, PaymentElementSubmitEvent, PaymentElementSubmitHandler } from "./components/stripe-payment-element/stripe-payment-element"; export namespace Components { interface StripeAddressElement { /** * Allowed countries (array of country codes) */ "allowedCountries"?: string[]; /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Submit button label By default we recommended to use these string - 'Save' or 'Continue' These strings will translated automatically by this library. * @default 'Save' */ "buttonLabel": string; /** * Default country code (e.g., 'US', 'JP', 'GB') */ "defaultCountry"?: string; /** * Get the current address value * @returns Promise resolving to the address value * @example ``` const stripeElement = document.querySelector('stripe-address-element'); const addressValue = await stripeElement.getValue(); console.log('Address:', addressValue); ``` */ "getValue": () => Promise<{ value: import("@stripe/stripe-js").StripeAddressElementChangeEvent["value"]; complete: boolean; }>; /** * Form submit event handler */ "handleSubmit": AddressSubmitHandler; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options * @example ``` const stripeElement = document.createElement('stripe-address-element'); customElements .whenDefined('stripe-address-element') .then(() => { stripeElement.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * Address mode: 'shipping' or 'billing' * @default 'billing' */ "mode": 'shipping' | 'billing'; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage string * @returns * @example ``` const stripeElement = document.createElement('stripe-address-element'); customElements .whenDefined('stripe-address-element') .then(() => { stripeElement.addEventListener('formSubmit', async props => { try { throw new Error('debug') } catch (e) { stripeElement.setErrorMessage(`Error: ${e.message}`) stripeElement.updateProgress('failure') } }); }) ``` */ "setErrorMessage": (errorMessage: string) => Promise; /** * Form title By default we recommended to use these string - 'Shipping address' for shipping mode - 'Billing address' for billing mode These strings will translated automatically by this library. * @default 'Billing address' */ "sheetTitle": string; /** * Show the form label * @default false */ "showLabel": boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update the form submit progress * @param progress * @returns * @example ``` const stripeElement = document.createElement('stripe-address-element'); customElements .whenDefined('stripe-address-element') .then(() => { stripeElement.addEventListener('formSubmit', async props => { const { detail: { address } } = props; console.log('Address:', address); stripeElement.updateProgress('success') }); }) ``` */ "updateProgress": (progress: ProgressStatus) => Promise; } interface StripeCardElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Pay' */ "buttonLabel": string; /** * Form submit event handler */ "handleSubmit": FormSubmitHandler; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { tripeElement.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * The client secret from paymentIntent.create response * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'dummy') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType": IntentType; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage string * @returns * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { // You must set the attributes to stop running default form submit action when you want to listen the 'formSubmit' event. stripeElement.setAttribute('should-use-default-form-submit-action', false) stripeElement.addEventListener('formSubmit', async props => { try { throw new Error('debug') } catch (e) { stripeElement.setErrorMessage(`Error: ${e.message}`) stripeElement.updateProgress('failure') } }); }) */ "setErrorMessage": (errorMessage: string) => Promise; /** * @param option * @private */ "setPaymentRequestOption": (option: PaymentRequestButtonOption) => Promise; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Add your payment information' */ "sheetTitle": string; /** * The component will provide a function to call the `stripe.confirmCardPayment`API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction": boolean; /** * Show the form label * @default false */ "showLabel": boolean; /** * If show PaymentRequest Button, should put true */ "showPaymentRequestButton": boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update the form submit progress * @param progress * @returns * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { // You must set the attributes to stop running default form submit action when you want to listen the 'formSubmit' event. stripeElement.setAttribute('should-use-default-form-submit-action', false) stripeElement.addEventListener('formSubmit', async props => { const { detail: { stripe, cardNumber, event }, } = props; const result = await stripe.createPaymentMethod({ type: 'card', card: cardNumber, }); console.log(result); stripeElement.updateProgress('success') }); }) */ "updateProgress": (progress: ProgressStatus) => Promise; /** * If true, show zip code field * @default true */ "zip": boolean; } interface StripeCardElementModal { /** * Overwrite the application name that registered For wrapper library (like Capacitor) */ "applicationName": string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. */ "buttonLabel": string; /** * Remove the modal */ "destroy": () => Promise; /** * Get the inner component */ "getStripeCardElementElement": () => Promise; /** * Form submit event handler */ "handleSubmit": FormSubmitHandler; /** * The client secret from paymentIntent.create response * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'dummy') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @example ``` ``` * @default 'payment' */ "intentType": IntentType; /** * Modal state. If true, the modal will open * @default false */ "open": boolean; /** * open modal */ "present": () => Promise; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Add payment request button */ "setPaymentRequestButton": (options: PaymentRequestButtonOption) => Promise; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. */ "sheetTitle": string; /** * The component will provide a function to call the `stripe.confirmCardPayment`API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction": boolean; /** * If true, the modal display close button * @default true */ "showCloseButton": boolean; /** * Show the form label * @default false */ "showLabel": boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update Stripe client loading process */ "updateProgress": (progress: ProgressStatus) => Promise; /** * If true, show zip code field * @default true */ "zip": boolean; } /** * Stripe Currency Selector Element * Allows customers to select their preferred currency for Adaptive Pricing * @info https://docs.stripe.com/elements/currency-selector-element */ interface StripeCurrencySelector { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * The client secret from Checkout Session Required for Currency Selector Element * @info https://docs.stripe.com/elements/currency-selector-element */ "clientSecret"?: string; /** * Get the selected currency * @returns Promise resolving to the selected currency code (e.g., 'USD', 'EUR') * @example ``` const stripeCurrencySelector = document.querySelector('stripe-currency-selector'); const currency = await stripeCurrencySelector.getSelectedCurrency(); console.log('Selected currency:', currency); ``` */ "getSelectedCurrency": () => Promise; /** * Currency change event handler */ "handleCurrencyChange"?: CurrencySelectorChangeHandler; /** * Get Stripe.js, and initialize elements * @param publishableKey - Your Stripe publishable API key * @param options - Optional initialization options (e.g., stripeAccount) * @example ``` const stripeCurrencySelector = document.createElement('stripe-currency-selector'); customElements .whenDefined('stripe-currency-selector') .then(() => { stripeCurrencySelector.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage - The error message to display * @returns Promise resolving to this instance for method chaining * @example ``` const stripeCurrencySelector = document.createElement('stripe-currency-selector'); customElements .whenDefined('stripe-currency-selector') .then(() => { stripeCurrencySelector.setErrorMessage('Invalid currency selected'); }); ``` */ "setErrorMessage": (errorMessage: string) => Promise; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } /** * Express Checkout Element Component * Provides one-click payment methods (Apple Pay, Google Pay, Link, PayPal, etc.) * @example ```html * * ``` */ interface StripeExpressCheckoutElement { /** * Payment amount in cents (e.g., 1099 for $10.99) */ "amount"?: number; /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Button height in pixels (e.g., '48px') */ "buttonHeight"?: string; /** * The client secret from paymentIntent.create or setupIntent.create response * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.setAttribute('client-secret', 'pi_xxx_secret_xxx') }) ``` */ "clientSecret"?: string; /** * Three-letter ISO currency code (e.g., 'usd', 'eur') */ "currency"?: string; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType": IntentType; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage string * @returns * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.setErrorMessage('Payment failed') }) ``` */ "setErrorMessage": (errorMessage: string) => Promise; /** * The component will provide a function to call the confirmation API. If you want to customize the behavior, should set false. And listen the 'confirm' event on the element * @default true */ "shouldUseDefaultConfirmAction": boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update element options dynamically * @param options - Partial options to update * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(async () => { await element.initStripe('pk_test_xxx') element.updateElementOptions({ amount: 2000 }) }) ``` */ "updateElementOptions": (options: Partial) => Promise; /** * Update the progress status * @param progress * @returns * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.updateProgress('success') }) ``` */ "updateProgress": (progress: ProgressStatus) => Promise; } interface StripeLinkAuthenticationElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Default email value to prefill the element */ "defaultEmail"?: string; /** * Get the current email value from the element * @returns The current email value or undefined * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(async () => { const email = await stripeElement.getEmail(); console.log(email); }) ``` */ "getEmail": () => Promise; /** * Link Authentication Element change handler */ "handleChange"?: LinkAuthenticationElementChangeHandler; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(() => { stripeElement.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage string * @returns * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(() => { stripeElement.setErrorMessage('Invalid email address') }) ``` */ "setErrorMessage": (errorMessage: string) => Promise; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update the progress status * @param progress * @returns * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(() => { stripeElement.updateProgress('success') }) ``` */ "updateProgress": (progress: ProgressStatus) => Promise; } interface StripeModal { /** * Close the modal */ "closeModal": () => Promise; /** * Modal state. If true, the modal will open * @default false */ "open": boolean; /** * Open the modal */ "openModal": () => Promise; /** * If true, the modal display close button * @default true */ "showCloseButton": boolean; /** * Toggle modal state */ "toggleModal": () => Promise; } interface StripePaymentElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Pay' */ "buttonLabel": string; /** * The client secret from checkout session response Use this for Checkout Session mode instead of intentClientSecret When this prop is set, the component will use Checkout Session API * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.initStripeWithCheckoutSession('pk_test_xxx', 'cs_xxx_secret_xxx') }) ``` */ "checkoutSessionClientSecret"?: string; /** * Form submit event handler */ "handleSubmit": PaymentElementSubmitHandler; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.initStripe('pk_test_XXXXXXXXX') }) ``` */ "initStripe": (publishableKey: string, options?: InitStripeOptions) => Promise; /** * Get Stripe.js and initialize with Checkout Session mode Use this method when you have a Checkout Session client secret instead of Payment/Setup Intent * @param publishableKey - Your Stripe publishable API key * @param checkoutSessionClientSecret - The client secret from Checkout Session * @param options - Optional configuration * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.initStripeWithCheckoutSession( 'pk_test_XXXXXXXXX', 'cs_xxx_secret_xxx' ) }) ``` */ "initStripeWithCheckoutSession": (publishableKey: string, checkoutSessionClientSecret: string, options?: InitCheckoutSessionOptions) => Promise; /** * The client secret from paymentIntent.create or setupIntent.create response Use this for Payment Intent / Setup Intent mode * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'pi_xxx_secret_xxx') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType": IntentType; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Set error message * @param errorMessage string * @returns * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.setErrorMessage('Payment failed') }) ``` */ "setErrorMessage": (errorMessage: string) => Promise; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Add your payment information' */ "sheetTitle": string; /** * The component will provide a function to call the `stripe.confirmPayment` API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction": boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * Update the form submit progress * @param progress * @returns * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.updateProgress('success') }) ``` */ "updateProgress": (progress: ProgressStatus) => Promise; } interface StripePaymentRequestButton { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName": string; /** * Get Stripe.js, and initialize elements * @param publishableKey * @param options */ "initStripe": (publishableKey: string, options?: { showButton?: boolean; stripeAccount?: string; }) => Promise; /** * Check isAvailable ApplePay or GooglePay. If you run this method, you should run before initStripe. */ "isAvailable": (type: "applePay" | "googlePay") => Promise; /** * Set handler of the `paymentRequest.on('paymentmethod'` event. * @example ``` element.setPaymentMethodEventHandler(async (event, stripe) => { // Confirm the PaymentIntent with the payment method returned from the payment request. const {error} = await stripe.confirmCardPayment( paymentIntent.client_secret, { payment_method: event.paymentMethod.id, shipping: { name: event.shippingAddress.recipient, phone: event.shippingAddress.phone, address: { line1: event.shippingAddress.addressLine[0], city: event.shippingAddress.city, postal_code: event.shippingAddress.postalCode, state: event.shippingAddress.region, country: event.shippingAddress.country, }, }, }, {handleActions: false} ); ``` */ "paymentMethodEventHandler"?: PaymentRequestPaymentMethodEventHandler; /** * Your Stripe publishable API key. */ "publishableKey": string; /** * Register event handler for `paymentRequest.on('paymentmethod'` event. */ "setPaymentMethodEventHandler": (handler: PaymentRequestPaymentMethodEventHandler) => Promise; /** * @param option * @private */ "setPaymentRequestOption": (option: PaymentRequestOptions) => Promise; /** * Register event handler for `paymentRequest.on('shippingaddresschange'` event. */ "setPaymentRequestShippingAddressEventHandler": (handler: PaymentRequestShippingAddressEventHandler) => Promise; /** * Register event handler for `paymentRequest.on('shippingoptionchange'` event. */ "setPaymentRequestShippingOptionEventHandler": (handler: PaymentRequestShippingOptionEventHandler) => Promise; /** * Set handler of the `paymentRequest.on('shippingaddresschange')` event * @example ``` element.setPaymentRequestShippingAddressEventHandler(async (event, stripe) => { const response = await store.updatePaymentIntentWithShippingCost( paymentIntent.id, store.getLineItems(), event.shippingOption ); }) ``` */ "shippingAddressEventHandler"?: PaymentRequestShippingAddressEventHandler; /** * Set handler of the `paymentRequest.on('shippingoptionchange')` event * @example ``` element.setPaymentRequestShippingOptionEventHandler(async (event, stripe) => { event.updateWith({status: 'success'}); }) ``` */ "shippingOptionEventHandler"?: PaymentRequestShippingOptionEventHandler; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount": string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } } export interface StripeAddressElementCustomEvent extends CustomEvent { detail: T; target: HTMLStripeAddressElementElement; } export interface StripeCardElementCustomEvent extends CustomEvent { detail: T; target: HTMLStripeCardElementElement; } export interface StripeCardElementModalCustomEvent extends CustomEvent { detail: T; target: HTMLStripeCardElementModalElement; } export interface StripeCurrencySelectorCustomEvent extends CustomEvent { detail: T; target: HTMLStripeCurrencySelectorElement; } export interface StripeExpressCheckoutElementCustomEvent extends CustomEvent { detail: T; target: HTMLStripeExpressCheckoutElementElement; } export interface StripeLinkAuthenticationElementCustomEvent extends CustomEvent { detail: T; target: HTMLStripeLinkAuthenticationElementElement; } export interface StripeModalCustomEvent extends CustomEvent { detail: T; target: HTMLStripeModalElement; } export interface StripePaymentElementCustomEvent extends CustomEvent { detail: T; target: HTMLStripePaymentElementElement; } export interface StripePaymentRequestButtonCustomEvent extends CustomEvent { detail: T; target: HTMLStripePaymentRequestButtonElement; } declare global { interface HTMLStripeAddressElementElementEventMap { "stripeLoaded": StripeLoadedEvent; "formSubmit": AddressSubmitEvent; } interface HTMLStripeAddressElementElement extends Components.StripeAddressElement, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeAddressElementElement, ev: StripeAddressElementCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeAddressElementElement, ev: StripeAddressElementCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeAddressElementElement: { prototype: HTMLStripeAddressElementElement; new (): HTMLStripeAddressElementElement; }; interface HTMLStripeCardElementElementEventMap { "stripeLoaded": StripeLoadedEvent; "formSubmit": FormSubmitEvent; "defaultFormSubmitResult": DefaultFormSubmitResult; } interface HTMLStripeCardElementElement extends Components.StripeCardElement, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeCardElementElement, ev: StripeCardElementCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeCardElementElement, ev: StripeCardElementCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeCardElementElement: { prototype: HTMLStripeCardElementElement; new (): HTMLStripeCardElementElement; }; interface HTMLStripeCardElementModalElementEventMap { "closed": any; } interface HTMLStripeCardElementModalElement extends Components.StripeCardElementModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeCardElementModalElement, ev: StripeCardElementModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeCardElementModalElement, ev: StripeCardElementModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeCardElementModalElement: { prototype: HTMLStripeCardElementModalElement; new (): HTMLStripeCardElementModalElement; }; interface HTMLStripeCurrencySelectorElementEventMap { "stripeLoaded": StripeLoadedEvent; "currencyChange": CurrencySelectorChangeEvent; } /** * Stripe Currency Selector Element * Allows customers to select their preferred currency for Adaptive Pricing * @info https://docs.stripe.com/elements/currency-selector-element */ interface HTMLStripeCurrencySelectorElement extends Components.StripeCurrencySelector, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeCurrencySelectorElement, ev: StripeCurrencySelectorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeCurrencySelectorElement, ev: StripeCurrencySelectorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeCurrencySelectorElement: { prototype: HTMLStripeCurrencySelectorElement; new (): HTMLStripeCurrencySelectorElement; }; interface HTMLStripeExpressCheckoutElementElementEventMap { "stripeLoaded": StripeLoadedEvent; "confirm": StripeExpressCheckoutElementConfirmEvent; "expressCheckoutClick": StripeExpressCheckoutElementClickEvent; "cancel": void; "defaultConfirmResult": DefaultFormSubmitResult; } /** * Express Checkout Element Component * Provides one-click payment methods (Apple Pay, Google Pay, Link, PayPal, etc.) * @example ```html * * ``` */ interface HTMLStripeExpressCheckoutElementElement extends Components.StripeExpressCheckoutElement, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeExpressCheckoutElementElement, ev: StripeExpressCheckoutElementCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeExpressCheckoutElementElement, ev: StripeExpressCheckoutElementCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeExpressCheckoutElementElement: { prototype: HTMLStripeExpressCheckoutElementElement; new (): HTMLStripeExpressCheckoutElementElement; }; interface HTMLStripeLinkAuthenticationElementElementEventMap { "stripeLoaded": StripeLoadedEvent; "linkAuthenticationChange": LinkAuthenticationElementChangeEvent; } interface HTMLStripeLinkAuthenticationElementElement extends Components.StripeLinkAuthenticationElement, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeLinkAuthenticationElementElement, ev: StripeLinkAuthenticationElementCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeLinkAuthenticationElementElement, ev: StripeLinkAuthenticationElementCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeLinkAuthenticationElementElement: { prototype: HTMLStripeLinkAuthenticationElementElement; new (): HTMLStripeLinkAuthenticationElementElement; }; interface HTMLStripeModalElementEventMap { "close": any; } interface HTMLStripeModalElement extends Components.StripeModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripeModalElement, ev: StripeModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripeModalElement, ev: StripeModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripeModalElement: { prototype: HTMLStripeModalElement; new (): HTMLStripeModalElement; }; interface HTMLStripePaymentElementElementEventMap { "stripeLoaded": StripeLoadedEvent; "formSubmit": PaymentElementSubmitEvent; "defaultFormSubmitResult": DefaultFormSubmitResult; "checkoutSessionConfirmResult": CheckoutSessionFormSubmitResult; } interface HTMLStripePaymentElementElement extends Components.StripePaymentElement, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripePaymentElementElement, ev: StripePaymentElementCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripePaymentElementElement, ev: StripePaymentElementCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripePaymentElementElement: { prototype: HTMLStripePaymentElementElement; new (): HTMLStripePaymentElementElement; }; interface HTMLStripePaymentRequestButtonElementEventMap { "stripeLoaded": StripeLoadedEvent; } interface HTMLStripePaymentRequestButtonElement extends Components.StripePaymentRequestButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLStripePaymentRequestButtonElement, ev: StripePaymentRequestButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLStripePaymentRequestButtonElement, ev: StripePaymentRequestButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLStripePaymentRequestButtonElement: { prototype: HTMLStripePaymentRequestButtonElement; new (): HTMLStripePaymentRequestButtonElement; }; interface HTMLElementTagNameMap { "stripe-address-element": HTMLStripeAddressElementElement; "stripe-card-element": HTMLStripeCardElementElement; "stripe-card-element-modal": HTMLStripeCardElementModalElement; "stripe-currency-selector": HTMLStripeCurrencySelectorElement; "stripe-express-checkout-element": HTMLStripeExpressCheckoutElementElement; "stripe-link-authentication-element": HTMLStripeLinkAuthenticationElementElement; "stripe-modal": HTMLStripeModalElement; "stripe-payment-element": HTMLStripePaymentElementElement; "stripe-payment-request-button": HTMLStripePaymentRequestButtonElement; } } declare namespace LocalJSX { interface StripeAddressElement { /** * Allowed countries (array of country codes) */ "allowedCountries"?: string[]; /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Submit button label By default we recommended to use these string - 'Save' or 'Continue' These strings will translated automatically by this library. * @default 'Save' */ "buttonLabel"?: string; /** * Default country code (e.g., 'US', 'JP', 'GB') */ "defaultCountry"?: string; /** * Form submit event handler */ "handleSubmit"?: AddressSubmitHandler; /** * Address mode: 'shipping' or 'billing' * @default 'billing' */ "mode"?: 'shipping' | 'billing'; /** * Form submit event * @example ``` const stripeElement = document.createElement('stripe-address-element'); customElements .whenDefined('stripe-address-element') .then(() => { stripeElement .addEventListener('formSubmit', async props => { const { detail: { address } } = props; console.log('Address submitted:', address); }) }) ``` */ "onFormSubmit"?: (event: StripeAddressElementCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const stripeElement = document.createElement('stripe-address-element'); customElements .whenDefined('stripe-address-element') .then(() => { stripeElement .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { console.log('Stripe loaded:', stripe); }); }) ``` */ "onStripeLoaded"?: (event: StripeAddressElementCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Form title By default we recommended to use these string - 'Shipping address' for shipping mode - 'Billing address' for billing mode These strings will translated automatically by this library. * @default 'Billing address' */ "sheetTitle"?: string; /** * Show the form label * @default false */ "showLabel"?: boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } interface StripeCardElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Pay' */ "buttonLabel"?: string; /** * Form submit event handler */ "handleSubmit"?: FormSubmitHandler; /** * The client secret from paymentIntent.create response * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'dummy') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType"?: IntentType; /** * Recieve the result of defaultFormSubmit event * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement.addEventListener('defaultFormSubmitResult', async ({detail}) => { if (detail instanceof Error) { console.error(detail) } else { console.log(detail) } }) }) */ "onDefaultFormSubmitResult"?: (event: StripeCardElementCustomEvent) => void; /** * Form submit event * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement .addEventListener('formSubmit', async props => { const { detail: { stripe, cardNumber, event }, } = props; const result = await stripe.createPaymentMethod({ type: 'card', card: cardNumber, }); console.log(result); }) }) */ "onFormSubmit"?: (event: StripeCardElementCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { stripe .createSource({ type: 'ideal', amount: 1099, currency: 'eur', owner: { name: 'Jenny Rosen', }, redirect: { return_url: 'https://shop.example.com/crtA6B28E1', }, }) .then(function(result) { // Handle result.error or result.source }); }); }) ``` */ "onStripeLoaded"?: (event: StripeCardElementCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Add your payment information' */ "sheetTitle"?: string; /** * The component will provide a function to call the `stripe.confirmCardPayment`API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction"?: boolean; /** * Show the form label * @default false */ "showLabel"?: boolean; /** * If show PaymentRequest Button, should put true */ "showPaymentRequestButton"?: boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * If true, show zip code field * @default true */ "zip"?: boolean; } interface StripeCardElementModal { /** * Overwrite the application name that registered For wrapper library (like Capacitor) */ "applicationName"?: string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. */ "buttonLabel"?: string; /** * Form submit event handler */ "handleSubmit"?: FormSubmitHandler; /** * The client secret from paymentIntent.create response * @example ``` const stripeElement = document.createElement('stripe-card-element'); customElements .whenDefined('stripe-card-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'dummy') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @example ``` ``` * @default 'payment' */ "intentType"?: IntentType; "onClosed"?: (event: StripeCardElementModalCustomEvent) => void; /** * Modal state. If true, the modal will open * @default false */ "open"?: boolean; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. */ "sheetTitle"?: string; /** * The component will provide a function to call the `stripe.confirmCardPayment`API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction"?: boolean; /** * If true, the modal display close button * @default true */ "showCloseButton"?: boolean; /** * Show the form label * @default false */ "showLabel"?: boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; /** * If true, show zip code field * @default true */ "zip"?: boolean; } /** * Stripe Currency Selector Element * Allows customers to select their preferred currency for Adaptive Pricing * @info https://docs.stripe.com/elements/currency-selector-element */ interface StripeCurrencySelector { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * The client secret from Checkout Session Required for Currency Selector Element * @info https://docs.stripe.com/elements/currency-selector-element */ "clientSecret"?: string; /** * Currency change event handler */ "handleCurrencyChange"?: CurrencySelectorChangeHandler; /** * Currency change event * @example ``` const stripeCurrencySelector = document.createElement('stripe-currency-selector'); customElements .whenDefined('stripe-currency-selector') .then(() => { stripeCurrencySelector .addEventListener('currencyChange', async props => { const { detail: { currency } } = props; console.log('Currency changed:', currency); }) }) ``` */ "onCurrencyChange"?: (event: StripeCurrencySelectorCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const stripeCurrencySelector = document.createElement('stripe-currency-selector'); customElements .whenDefined('stripe-currency-selector') .then(() => { stripeCurrencySelector .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { console.log('Stripe loaded:', stripe); }); }) ``` */ "onStripeLoaded"?: (event: StripeCurrencySelectorCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } /** * Express Checkout Element Component * Provides one-click payment methods (Apple Pay, Google Pay, Link, PayPal, etc.) * @example ```html * * ``` */ interface StripeExpressCheckoutElement { /** * Payment amount in cents (e.g., 1099 for $10.99) */ "amount"?: number; /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Button height in pixels (e.g., '48px') */ "buttonHeight"?: string; /** * The client secret from paymentIntent.create or setupIntent.create response * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.setAttribute('client-secret', 'pi_xxx_secret_xxx') }) ``` */ "clientSecret"?: string; /** * Three-letter ISO currency code (e.g., 'usd', 'eur') */ "currency"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType"?: IntentType; /** * Express Checkout cancel event Fired when user cancels the express checkout flow */ "onCancel"?: (event: StripeExpressCheckoutElementCustomEvent) => void; /** * Express Checkout confirm event Fired when user completes the express checkout flow * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.addEventListener('confirm', async ({ detail }) => { console.log('Payment confirmed', detail) }) }) ``` */ "onConfirm"?: (event: StripeExpressCheckoutElementCustomEvent) => void; /** * Receive the result of default confirm action * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.addEventListener('defaultConfirmResult', async ({detail}) => { if (detail instanceof Error) { console.error(detail) } else { console.log(detail) } }) }) ``` */ "onDefaultConfirmResult"?: (event: StripeExpressCheckoutElementCustomEvent) => void; /** * Express Checkout click event Fired when user clicks on an express checkout button * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.addEventListener('expressCheckoutClick', async ({ detail }) => { console.log('Button clicked', detail) }) }) ``` */ "onExpressCheckoutClick"?: (event: StripeExpressCheckoutElementCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const element = document.createElement('stripe-express-checkout-element'); customElements .whenDefined('stripe-express-checkout-element') .then(() => { element.addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { console.log('Stripe loaded', stripe) }); }) ``` */ "onStripeLoaded"?: (event: StripeExpressCheckoutElementCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * The component will provide a function to call the confirmation API. If you want to customize the behavior, should set false. And listen the 'confirm' event on the element * @default true */ "shouldUseDefaultConfirmAction"?: boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } interface StripeLinkAuthenticationElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Default email value to prefill the element */ "defaultEmail"?: string; /** * Link Authentication Element change handler */ "handleChange"?: LinkAuthenticationElementChangeHandler; /** * Link Authentication Element change event Emitted when the email value changes * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(() => { stripeElement .addEventListener('linkAuthenticationChange', async ({ detail }) => { console.log('Email changed:', detail.email); }) }) ``` */ "onLinkAuthenticationChange"?: (event: StripeLinkAuthenticationElementCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const stripeElement = document.createElement('stripe-link-authentication-element'); customElements .whenDefined('stripe-link-authentication-element') .then(() => { stripeElement .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { console.log('Stripe loaded:', stripe); }); }) ``` */ "onStripeLoaded"?: (event: StripeLinkAuthenticationElementCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } interface StripeModal { "onClose"?: (event: StripeModalCustomEvent) => void; /** * Modal state. If true, the modal will open * @default false */ "open"?: boolean; /** * If true, the modal display close button * @default true */ "showCloseButton"?: boolean; } interface StripePaymentElement { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Submit button label By default we recommended to use these string - 'Pay' -> PaymentSheet - 'Add' -> PaymentFlow(Android) - 'Add card' -> PaymentFlow(iOS) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Pay' */ "buttonLabel"?: string; /** * The client secret from checkout session response Use this for Checkout Session mode instead of intentClientSecret When this prop is set, the component will use Checkout Session API * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.initStripeWithCheckoutSession('pk_test_xxx', 'cs_xxx_secret_xxx') }) ``` */ "checkoutSessionClientSecret"?: string; /** * Form submit event handler */ "handleSubmit"?: PaymentElementSubmitHandler; /** * The client secret from paymentIntent.create or setupIntent.create response Use this for Payment Intent / Setup Intent mode * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.setAttribute('intent-client-secret', 'pi_xxx_secret_xxx') }) ``` * @example ``` ``` */ "intentClientSecret"?: string; /** * Default submit handle type. If you want to use `setupIntent`, should update this attribute. * @default 'payment' */ "intentType"?: IntentType; /** * Receive the result of checkout session confirm This event is emitted when using Checkout Session mode * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.addEventListener('checkoutSessionConfirmResult', async ({detail}) => { if (detail instanceof Error) { console.error(detail) } else if (detail.type === 'success') { console.log('Payment successful:', detail.session) } else { console.error('Payment failed:', detail.error) } }) }) ``` */ "onCheckoutSessionConfirmResult"?: (event: StripePaymentElementCustomEvent) => void; /** * Receive the result of defaultFormSubmit event This event is emitted when using Payment Intent / Setup Intent mode * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement.addEventListener('defaultFormSubmitResult', async ({detail}) => { if (detail instanceof Error) { console.error(detail) } else { console.log(detail) } }) }) ``` */ "onDefaultFormSubmitResult"?: (event: StripePaymentElementCustomEvent) => void; /** * Form submit event * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement .addEventListener('formSubmit', async props => { const { detail: { stripe, elements } } = props; console.log('Form submitted', stripe, elements); }) }) ``` */ "onFormSubmit"?: (event: StripePaymentElementCustomEvent) => void; /** * Stripe Client loaded event * @example ``` const stripeElement = document.createElement('stripe-payment-element'); customElements .whenDefined('stripe-payment-element') .then(() => { stripeElement .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { console.log('Stripe loaded:', stripe); }); }) ``` */ "onStripeLoaded"?: (event: StripePaymentElementCustomEvent) => void; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Payment sheet title By default we recommended to use these string - 'Add your payment information' -> PaymentSheet / PaymentFlow(Android) - 'Add a card' -> PaymentFlow(iOS) These strings will translated automatically by this library. * @default 'Add your payment information' */ "sheetTitle"?: string; /** * The component will provide a function to call the `stripe.confirmPayment` API. If you want to customize the behavior, should set false. And listen the 'formSubmit' event on the element * @default true */ "shouldUseDefaultFormSubmitAction"?: boolean; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } interface StripePaymentRequestButton { /** * Overwrite the application name that registered For wrapper library (like Capacitor) * @default 'stripe-pwa-elements' */ "applicationName"?: string; /** * Stripe Client loaded event * @example ``` stripeElement .addEventListener('stripeLoaded', async ({ detail: {stripe} }) => { stripe .createSource({ type: 'ideal', amount: 1099, currency: 'eur', owner: { name: 'Jenny Rosen', }, redirect: { return_url: 'https://shop.example.com/crtA6B28E1', }, }) .then(function(result) { // Handle result.error or result.source }); }); ``` */ "onStripeLoaded"?: (event: StripePaymentRequestButtonCustomEvent) => void; /** * Set handler of the `paymentRequest.on('paymentmethod'` event. * @example ``` element.setPaymentMethodEventHandler(async (event, stripe) => { // Confirm the PaymentIntent with the payment method returned from the payment request. const {error} = await stripe.confirmCardPayment( paymentIntent.client_secret, { payment_method: event.paymentMethod.id, shipping: { name: event.shippingAddress.recipient, phone: event.shippingAddress.phone, address: { line1: event.shippingAddress.addressLine[0], city: event.shippingAddress.city, postal_code: event.shippingAddress.postalCode, state: event.shippingAddress.region, country: event.shippingAddress.country, }, }, }, {handleActions: false} ); ``` */ "paymentMethodEventHandler"?: PaymentRequestPaymentMethodEventHandler; /** * Your Stripe publishable API key. */ "publishableKey"?: string; /** * Set handler of the `paymentRequest.on('shippingaddresschange')` event * @example ``` element.setPaymentRequestShippingAddressEventHandler(async (event, stripe) => { const response = await store.updatePaymentIntentWithShippingCost( paymentIntent.id, store.getLineItems(), event.shippingOption ); }) ``` */ "shippingAddressEventHandler"?: PaymentRequestShippingAddressEventHandler; /** * Set handler of the `paymentRequest.on('shippingoptionchange')` event * @example ``` element.setPaymentRequestShippingOptionEventHandler(async (event, stripe) => { event.updateWith({status: 'success'}); }) ``` */ "shippingOptionEventHandler"?: PaymentRequestShippingOptionEventHandler; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ "stripeAccount"?: string; /** * Stripe.js class loaded handler */ "stripeDidLoaded"?: StripeDidLoadedHandler; } interface IntrinsicElements { "stripe-address-element": StripeAddressElement; "stripe-card-element": StripeCardElement; "stripe-card-element-modal": StripeCardElementModal; "stripe-currency-selector": StripeCurrencySelector; "stripe-express-checkout-element": StripeExpressCheckoutElement; "stripe-link-authentication-element": StripeLinkAuthenticationElement; "stripe-modal": StripeModal; "stripe-payment-element": StripePaymentElement; "stripe-payment-request-button": StripePaymentRequestButton; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "stripe-address-element": LocalJSX.StripeAddressElement & JSXBase.HTMLAttributes; "stripe-card-element": LocalJSX.StripeCardElement & JSXBase.HTMLAttributes; "stripe-card-element-modal": LocalJSX.StripeCardElementModal & JSXBase.HTMLAttributes; /** * Stripe Currency Selector Element * Allows customers to select their preferred currency for Adaptive Pricing * @info https://docs.stripe.com/elements/currency-selector-element */ "stripe-currency-selector": LocalJSX.StripeCurrencySelector & JSXBase.HTMLAttributes; /** * Express Checkout Element Component * Provides one-click payment methods (Apple Pay, Google Pay, Link, PayPal, etc.) * @example ```html * * ``` */ "stripe-express-checkout-element": LocalJSX.StripeExpressCheckoutElement & JSXBase.HTMLAttributes; "stripe-link-authentication-element": LocalJSX.StripeLinkAuthenticationElement & JSXBase.HTMLAttributes; "stripe-modal": LocalJSX.StripeModal & JSXBase.HTMLAttributes; "stripe-payment-element": LocalJSX.StripePaymentElement & JSXBase.HTMLAttributes; "stripe-payment-request-button": LocalJSX.StripePaymentRequestButton & JSXBase.HTMLAttributes; } } }