import { EventEmitter } from '../../stencil-public-runtime'; import { StripeDidLoadedHandler, StripeLoadedEvent, ProgressStatus, InitStripeOptions } from '../../interfaces'; /** * Address form submit event data */ export type AddressSubmitEvent = { address: { value: import('@stripe/stripe-js').StripeAddressElementChangeEvent['value']; complete: boolean; }; }; /** * Address form submit handler */ export type AddressSubmitHandler = (event: Event, props: AddressSubmitEvent) => Promise; export declare class StripeAddressElement { el: HTMLStripeAddressElementElement; private stripeService; private addressElementManager; private formSubmitListener?; /** * Address mode: 'shipping' or 'billing' * @default 'billing' */ mode: 'shipping' | 'billing'; /** * 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. */ sheetTitle: string; /** * Submit button label * By default we recommended to use these string * - 'Save' or 'Continue' * These strings will translated automatically by this library. */ buttonLabel: string; /** * 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; /** * The progress status of the submission process */ progress: ProgressStatus; /** * 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; /** * 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; /** * 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; }>; /** * Your Stripe publishable API key. */ publishableKey: string; updatePublishableKey(publishableKey: string): void; /** * Optional. Making API calls for connected accounts * @info https://stripe.com/docs/connect/authentication */ stripeAccount: string; updateStripeAccountId(stripeAccount: string): void; /** * Overwrite the application name that registered * For wrapper library (like Capacitor) */ applicationName: string; /** * Show the form label */ showLabel: boolean; /** * Default country code (e.g., 'US', 'JP', 'GB') */ defaultCountry?: string; /** * Allowed countries (array of country codes) */ allowedCountries?: string[]; /** * Form submit event handler */ handleSubmit: AddressSubmitHandler; /** * Stripe.js class loaded handler */ stripeDidLoaded?: StripeDidLoadedHandler; /** * 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); * }); * }) * ``` */ stripeLoaded: EventEmitter; private stripeLoadedEventHandler; /** * 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); * }) * }) * ``` */ formSubmit: EventEmitter; private formSubmitEventHandler; componentWillRender(): void; constructor(); /** * Initialize Component using Stripe Address Element */ private initElement; componentDidLoad(): void; disconnectedCallback(): void; render(): any; }