airwallex-payment-elements/types/element.d.ts

[](https://www.npmjs.org/package/airwallex-payment-elements) [](https://git

import { Intent, PaymentMethodBasicInfo } from './cardNumber';
import { PaymentMethodWithQrcode, QrcodeElementOptions } from './qrcodeElement';
import { DropInElementOptions } from './dropInElement';
import { RedirectElementOptions } from './redirectElement';
import {
  Mode,
  InitOptions,
  PaymentMethodRequestData,
  PaymentConsentResponse,
  AuthorizationType,
  Consent,
  RecurringOptions,
  VerifyConsentRequest,
  PaymentConsentRequestData,
  CreatePaymentMethodRequest,
} from './airwallex';

/**
 * All the flows supported by Local Payment Methods.
 */
export type LPMFlows = 'webqr' | 'mweb' | 'jsapi' | 'inapp';

/**
 * `address` will include `country_code`, `postcode`, `state`, `city` and `street`, so provide either `country_code` or `address`.
 */
export type ContactField = 'name' | 'email' | 'country_code' | 'address' | 'phone';

/**
 * Supported integration element types.
 * Airwallex recommends `dropIn` element as it lets you accept multiple payment methods with a single integration.
 * `applePayButton`, `googlePayButton`, `wechat`, `qrcode`, `redirect` and `fullFeaturedCard` elements are not recommended.
 */
export type ElementType =
  | 'applePayButton'
  | 'cardNumber'
  | 'expiry'
  | 'cvc'
  | 'googlePayButton'
  | 'card'
  | 'wechat'
  | 'qrcode'
  | 'redirect'
  | 'dropIn'
  | 'fullFeaturedCard';

/**
 * The payment method options for the redirect element. Integration with the payment method will redirect the shopper from the merchant's checkout site to the specific provider’s authentication page.
 */
export type PaymentMethodWithRedirect =
  | 'alipaycn'
  | 'alipayhk'
  | 'gcash'
  | 'dana'
  | 'kakaopay'
  | 'tng'
  | 'rabbit_line_pay'
  | 'poli'
  | 'fpx'
  | 'online_banking'
  | 'bank_transfer'
  | 'permatanet'
  | 'alfamart'
  | 'indomaret'
  | 'doku_ewallet'
  | 'enets'
  | 'payeasy'
  | 'seven_eleven'
  | 'konbini'
  | 'tesco_lotus'
  | 'grabpay'
  | 'skrill'
  | 'eps'
  | 'giropay'
  | 'ideal'
  | 'multibanco'
  | 'p24'
  | 'sofort'
  | 'trustly'
  | 'bancontact'
  | 'dragonpay'
  | 'blik'
  | 'mybank'
  | 'paybybankapp'
  | 'verkkopankki'
  | 'maxima'
  | 'narvesen'
  | 'paypost'
  | 'perlas_terminals'
  | 'paysafecash'
  | 'paysafecard'
  | 'paysera'
  | 'satispay'
  | 'family_mart'
  | 'hi_life'
  | 'sam_kiosk'
  | 'axs_kiosk'
  | 'bigc'
  | 'esun'
  | 'permata_atm'
  | 'boost'
  | 'shopee_pay'
  | 'paypal'
  | 'payu'
  | 'ovo'
  | 'bitpay'
  | 'truemoney'
  | 'atome'
  | 'duit_now'
  | 'pay_now'
  | 'prompt_pay'
  | 'go_pay'
  | 'linkaja'
  | 'jenius_pay'
  | 'klarna'
  | 'korean_local_card'
  | 'naver_pay'
  | 'payco'
  | 'samsung_pay'
  | 'au_pay'
  | 'bkash'
  | 'd_barai'
  | 'line_pay'
  | 'merpay'
  | 'payeasy_atm'
  | 'paypay'
  | 'rakuten_pay'
  | 'safetypay'
  | 'toss_pay'
  | 'upi'
  | 'zip'
  | 'spei'
  | 'afterpay';

export type DirectDebitPaymentMethod =
  | 'ach_direct_debit'
  | 'bacs_direct_debit'
  | 'becs_direct_debit'
  | 'sepa_direct_debit'
  | 'eft_direct_debit';

/**
 * Supported payment method types for dropin and hostPaymentPage integrations.
 */
export type PaymentMethodType =
  | 'googlepay'
  | 'applepay'
  | 'card'
  | 'airwallex_pay'
  | PaymentMethodWithRedirect
  | PaymentMethodWithQrcode
  | DirectDebitPaymentMethod;

/**
 * List of error codes for input validation and request failure.
 * [Error codes](https://www.airwallex.com/docs/payments__error-codes)
 */
export type ERROR_CODE =
  | 'required'
  | 'invalid'
  | 'un_support'
  | 'expired'
  | 'validation_error'
  | 'duplicate_request'
  | 'resource_not_found'
  | 'resource_already_exists'
  | 'state_invalid_for_operation'
  | 'service_unavailable'
  | 'processor_unavailable'
  | 'processor_busy'
  | 'processor_declined'
  | 'amount_above_limit'
  | 'frequency_above_limit'
  | 'transaction_blocked'
  | 'payment_blocked'
  | 'unsupported_operation_on_payment_method'
  | 'capture_amount_above_limit'
  | 'refund_amount_above_limit'
  | 'insufficient_available_funds'
  | 'insufficient_incoming_funds'
  | 'processor_user_account_abnormal'
  | 'processor_refund_period_expired'
  | 'processor_refund_offline_required';

/**
 * Supported events when shopper interacts with the checkout element.
 *
 * `onReady`: Triggered when a given Element is fully rendered and can accept `element.focus` calls.
 *
 * `onSubmit`: Triggered when confirming the Payment Intent either when the shopper clicks the Pay button or when you call `confirmPaymentIntent()` method.
 *
 * `onSuccess`: Triggered when Airwallex confirms the Payment Intent.
 *
 * `onError`: Triggered for various error events during shopper interaction, refer to Error Codes.
 *
 * `onCancel`: Triggered when the shopper clicks the Cancel button when interacting with the payment form.
 *
 * `onFocus`: Triggered when the shopper sets focus on an input in the Element by clicking or pressing the tab key.
 *
 * `onBlur`: Triggered when an input in the Element loses focus.
 *
 * `onChange`: Triggered when the shopper changes a value in an input in the Element. For example, by clicking outside the input field or using the tab key to switch to a different input field.
 *
 * `onClick`: Triggered when the shopper clicks on an input in the Element.
 *
 * `onDynamicCurrencyConversion`: Triggered when the merchant enables Dynamic Currency Conversion (DCC) feature and the shopper confirms the Payment Intent with DCC.
 *
 * `onPendingVerifyAccount`: Triggered when the shopper checks out with Direct Debit payment methods and the bank account needs to be verified.
 *
 * `onSwitchMethod`: Triggered when the shopper switches payment methods in Hosted Payment Page or dropIn Element.
 */
export type EventCode =
  | 'onReady'
  | 'onSubmit'
  | 'onDynamicCurrencyConversion'
  | 'onSuccess'
  | 'onError'
  | 'onCancel'
  | 'onFocus'
  | 'onBlur'
  | 'onChange'
  | 'onClick'
  | 'onPendingVerifyAccount'
  | 'onPressArrowKey'
  | 'onSwitchMethod';

/**
 * Return error when user input validation or the request fails.
 */
export interface ElementError {
  /**
   * Free text message in English.
   */
  message: string;
  /**
   * String code, will support in the future
   */
  code?: ERROR_CODE;
  /**
   * Error details, only applies to card payment method.
   */
  details?: {
    /**
     * The card brand.
     */
    card_brand?: string;
    /**
     * The card type, CREDIT / DEBIT / PREPAID
     */
    card_type?: string;
    /**
     * Whether the card is commercial.
     */
    is_commercial?: false;
    /**
     * The issuing bank name.
     */
    issuing_bank_name: string;
  };
}

/**
 * Event detail, field defined by CustomEvent, we fully leverage it to communicate the event payload.
 */
export interface EventDetail {
  /**
   * Type of element which triggers the event.
   */
  type: ElementType | 'threeDsFrictionless' | 'threeDsChallenge';
  /**

   * Whether the element input is in a valid format or not.
   */
  complete?: boolean;
  /**
   *  Whether the element input is empty or not.
   */
  empty?: boolean;
  /**
   * Indicate the brand of the card, only applies to card payment methods.
   */
  brand?: string;
  /**
   * Indicate the confirm response when integrated with `card` | `wechat` | `dropIn` Element.
   */
  intent?: Intent & {
    latest_payment_attempt: {
      payment_method: PaymentMethodBasicInfo;
    };
  };
  /**
   * Response error when failure to interact with shopper input.
   */
  error?: ElementError;
  /**
   * Indicate the direct debit information.
   */
  directDebit?: {
    url: string;
  };
  arrowKey?: 'ArrowLeft' | 'ArrowRight' | 'ArrowTop' | 'ArrowDown';
}

/**
 * The `next_action` field returned from the confirm request.
 */
interface NextAction {
  data: {
    jwt: string;
    stage: string;
    version: string;
  };
  type: string;
  url: string;
  stage?: string;
}

export type ExtendEventDetail = EventDetail & {
  code?: string;
  redirectUrl?: string;
  cardBin?: string;
  status?: string;
  auto_capture?: boolean;
  authorization_type?: AuthorizationType;
  paymentMethod?: PaymentMethodBasicInfo;
  next_action?: NextAction;
  testCard?: string;
  width?: number;
  height?: number;
};

/**
 * The event object your checkout page can listen to using the below implementation:
 *
 * Using html [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)
 * @example
 * window.addEventListener(code: EventCode, (event: { detail: ElementEvent }) => /* Your code here *\/ );
 */
export interface ElementEvent {
  /**
   * Event type code
   * https://developer.mozilla.org/en-US/docs/Web/API/Event/type
   */
  type: EventCode;
  /**
   * Event details of the CustomEvent
   * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail
   */
  detail: EventDetail;
}

/**
 * To support customized popup overlay width and height when 3DS V2 challenge flow is triggered.
 */
export interface PopUpStyle {
  /**
   * Customized Popup overlay width like 3DS payment flow.
   */
  popupWidth?: number;
  /**
   * Customized Popup overlay height like 3DS payment flow.
   */
  popupHeight?: number;
}

export type SelectorAllowed =
  | '.Button'
  | '.GooglePayButton'
  | '.ApplePayButton'
  | '.Input'
  | '.Button:hover'
  | '.GooglePayButton:hover'
  | '.ApplePayButton:hover'
  | '.Input:hover'
  | '.Input:active';

export interface CSSProperties {
  [CSSPropertyName: string]: string | number | undefined;
}
export interface Appearance {
  rules?: Partial<Record<SelectorAllowed, CSSProperties>>;
}

/**
 * Supported customized pseudo css style for `cardNumber` | `expiry` | `cvc` Elements.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
 */
type PseudoClasses = ':hover' | ':focus' | ':autofill' | '::placeholder' | '::selection' | ':disabled';

/**
 * Pseudo-classes object.
 */
type PseudoClassStyle = { [K in PseudoClasses]?: CSSProperties };

/**
 * Customize the input element using CSS Properties.
 *
 */
export interface InputStyle extends PopUpStyle {
  /**
   * Base styling applied to the input iframe. All styling extends from this style.
   */
  base?: PseudoClassStyle & CSSProperties;
  /**
   * Styling applied to the input element when a field passes validation.
   */
  valid?: CSSProperties;
  /**
   * Styling applied to the input element when a field fails validation.
   */
  invalid?: CSSProperties;
}

/**
 * Customize `dropIn`, `fullFeaturedCard`,  and hosted payment page integration layout by using CSS CSSProperties.
 */
export interface BoxStyle extends PopUpStyle {
  /**
   * Base styling applied to the integral iframe. All styling extends from this style.
   */
  base?: CSSProperties;
  /**
   * Styling applied to the input element.
   */
  input?: CSSProperties & PseudoClassStyle;
  /**
   * Input variation.
   */
  variant?: 'outlined' | 'filled' | 'standard' | 'bootstrap';
}

/**
 * Applies to `card` element type integration, the interface used when `createElement()` is called with type `card`.
 */
export interface CardElementOptions {
  /**
   *  Whether the Element input is disabled or not.
   * @defaultValue `false`
   */
  disabled?: boolean;
  /**
   *  Whether the amount should be captured automatically upon successful payment authorization.
   *  Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
   * @defaultValue `true`
   */
  autoCapture?: boolean;
  /**
   * The authorization type for the card payment.
   * Set it to `'pre_auth'` if you want to place a hold on your customer’s card for more than 7 days, i.e., extend the authorization time window. Currently it's only available when the card brand is Visa or Mastercard.
   * `autoCapture` will be automatically set to `false` if you enable `'pre_auth'`.
   * @defaultValue `'final_auth'`
   */
  authorizationType?: AuthorizationType;
  /**
   * One or more card networks that you support.
   */
  allowedCardNetworks?: CardNetwork[];
  /**
   * Style for the card element.
   */
  style?: InputStyle;
  /**
   * The container id of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` called with type `cardNumber`
 */
export interface CardNumberElementOptions {
  /**
   *  Whether the `cardNumber` Element input is disabled or not.
   * @defaultValue `false`
   */
  disabled?: boolean;
  /**
   * The Payment Intent you would like to checkout.
   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
   *
   */
  intent?: Intent;
  /**
   * Whether the amount should be captured automatically upon successful payment authorization.
   * Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
   * @defaultValue `true`
   */
  autoCapture?: boolean;
  /**
   * The authorization type for the card payment.
   * Set it to `'pre_auth'` if you want to place a hold on your customer's card for more than 7 days, i.e., extend the authorization time window.
   * Currently it's only available when the card brand is Visa or Mastercard. `autoCapture` will be automatically set to `false` if you enable `'pre_auth'`.
   * @defaultValue `'final_auth'`
   */
  authorizationType?: AuthorizationType;
  /**
   * One or more card networks that you support.
   */
  allowedCardNetworks?: CardNetwork[];
  /**
   * A short hint to suggest the expected value of an input field to the shopper.
   */
  placeholder?: string;
  /**
   * Style for the cardNumber Element.
   */
  style?: InputStyle;
  /**
   * The container id of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` with type `expiry`.
 */
export interface ExpiryDateElementOptions {
  /**
   *  Whether the `expiry` Element input is disabled or not.
   * @defaultValue `false`
   */
  disabled?: boolean;
  /**
   * A short hint to suggest the expected value of an input field to the shopper.
   */
  placeholder?: string;
  /**
   * Style for the expiry Element.
   */
  style?: InputStyle;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` called with type `cvc`.
 */
export interface CvcElementOptions {
  /**
   * Whether the `cvc` Element input is disabled or not.
   * @defaultValue `false`
   */
  disabled?: boolean;
  /**
   * A short hint to suggest the expected value of an input field to the shopper.
   */
  placeholder?: string;
  /**
   * Indicate cvc length.
   */
  cvcLength?: number;
  /**
   * Style for the cvc Element.
   */
  style?: InputStyle;
  /**
   * The container id of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
  /**
   * Whether cvc Element works alone or not.
   * If you want to use the CVC Element for a saved Payment Consent, you could set it `true` to improve the checkout experience.
   */
  isStandalone?: boolean;
}

/**
 * Applies to full featured card element type integration, the interface used when `createElement()` called with type `fullFeaturedCard`.
 */
export interface FullFeaturedCardElementOptions {
  /**
   * The layout of each element stays consistent, but you can modify confirm button, inputs, and more.
   */
  appearance?: Appearance;
  /**
   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
   */
  client_secret: string;
  /**
   * The checkout mode for the shopper.
   */
  mode?: 'payment' | 'recurring';
  /**
   * The ID of the Payment Intent you would like to checkout. Required when `mode` is `'payment'`.
   */
  intent_id?: string;
  /**
   * The Payment Intent you would like to checkout.
   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
   * @deprecated Please use {@link client_secret} and {@link intent_id} directly
   */
  intent?: Intent;
  /**
   * Whether the amount should be captured automatically upon successful payment authorization.
   * Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
   * @defaultValue `true`
   */
  autoCapture?: boolean;
  /**
   * The authorization type for the card payment.
   * Set it to `'pre_auth'` if you want to place a hold on your customer’s card for more than 7 days, i.e., extend the authorization time window. Currently it's only available when the card brand is Visa or Mastercard.
   * `autoCapture` will be automatically set to `false` if you enable `'pre_auth'`.
   * @defaultValue `'final_auth'`
   */
  authorizationType?: AuthorizationType;
  /**
   *  Whether you require the shopper to provide cvc when they checkout with a network tokenized card.
   */
  cvcRequired?: boolean;
  /**
   * Used to increase the likelihood of 3DS frictionless checkout. Set this to `true` if you want the payment form to collect billing information from the shopper. Only applies to card payment method.
   * @deprecated please use {@link requiredBillingContactFields} instead
   */
  withBilling?: boolean;
  /**
   * The billing information that you require from the shopper in order to process the transaction.
   */
  requiredBillingContactFields?: ContactField[];
  /**
   * Box style for the fullFeaturedCard Element.
   */
  style?: BoxStyle;
  /**
   * The container id of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
  /**
   * The ID of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
   * This field is required when `mode` is `'recurring'`.
   */
  customer_id?: string;
  /**
   * The options for the recurring flow. Required when `mode` is `'recurring'`.
   */
  recurringOptions?: RecurringOptions;
  /**
   * Specifies whether the card payment method should be automatically saved for future transactions.
   *
   * This parameter is only effective in payment mode when a `customer_id` is provided.
   *
   * - If set to `true`, the "Save my card for future payments" checkbox will be preselected by default.
   * - If set to `false`, the checkbox will remain unchecked, requiring the shopper to manually opt in.
   *
   * @defaultValue `true`
   */
  autoSaveCardForFuturePayments?: boolean;
}

/**
 * The PaymentShippingOption dictionary has members describing a shipping option.
 */
export interface PaymentShippingOption {
  id: string;
  label: string;
  amount: Amount;
  selected: boolean;
}

export type ApplePayHppOrDropInRequestOptions = ApplePayRequestOptions;

export interface ApplePayRecurringLineItem {
  paymentTiming: 'recurring' | 'deferred';
  recurringPaymentStartDate: Date;
  recurringPaymentIntervalUnit: 'year' | 'month' | 'day' | 'hour' | 'minute';
  recurringPaymentIntervalCount: number;
  recurringPaymentEndDate: Date;
}

export interface ApplePayRequestOriginalOptions {
  /**
   * The merchant's two-letter ISO 3166 country code. For example, 'US'.
   */
  countryCode: string;

  /**
   * A set of line items that explain recurring payments and/or additional charges.
   */
  lineItems?: ApplePayJS.ApplePayLineItem[];

  /**
   * Billing contact information for the shopper.
   */
  billingContact?: ApplePayJS.ApplePayPaymentContact;

  /**
   * The billing information that you require from the shopper in order to process the transaction.
   */
  requiredBillingContactFields?: ApplePayJS.ApplePayContactField[];

  /**
   * The shipping information that you require from the shopper in order to fulfill the order.
   */
  requiredShippingContactFields?: ApplePayJS.ApplePayContactField[];

  /**
   * Shipping contact information for the shopper.
   */
  shippingContact?: ApplePayJS.ApplePayPaymentContact;

  /**
   * A set of shipping method objects that describe the available shipping methods.
   */
  shippingMethods?: ApplePayJS.ApplePayShippingMethod[];

  /**
   * An optional value that indicates how purchased items are to be shipped.
   */
  shippingType?: ApplePayJS.ApplePayShippingType;

  /**
   * A list of ISO 3166 country codes for limiting payments to cards from specific countries.
   */
  supportedCountries?: string[];

  /**
   * Optional user-defined data.
   */
  applicationData?: string;
}
export interface GooglePayHppRequestOptions extends Omit<GooglePayRequestOptions, 'merchantInfo'> {
  /**
   * Detailed information about the merchant.
   */
  merchantInfo?: {
    /**
     * Merchant name encoded as UTF-8.
     */
    merchantName?: string;
    /**
     *The fully qualified domain of the requesting merchant.
     */
    merchantOrigin?: string;
  };
}

export type CardNetwork = 'visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover';

export type GoogleSupportedCardNetWork = 'MASTERCARD' | 'MAESTRO' | 'VISA' | 'AMEX' | 'DISCOVER' | 'JCB';
export interface GooglePayRequestOptions {
  /**
   * The two-letter ISO-3166 country code.
   */
  countryCode: string;
  /**
   * Detailed information about the merchant.
   */

  merchantInfo?: {
    /**
     * Merchant name encoded as UTF-8.
     */
    merchantName?: string;
  };
  /**
   *  Whether the shopper must provide their email.
   *
   * @defaultValue `false`
   */
  emailRequired?: boolean;
  /**
   * Specifies the text to be displayed within the Google Pay button.
   *
   */
  buttonType?: google.payments.api.ButtonType;
  /**
   * Specifies the button color of the Google Pay button.
   *
   * @defaultValue `'default'`
   */
  buttonColor?: google.payments.api.ButtonColor;
  /**
   * Determines how the button's size should change relative to the
   * button's parent element.
   *
   * @defaultValue `'static'`
   */
  buttonSizeMode?: google.payments.api.ButtonSizeMode;
  /**
   * Correlation ID to refer to this transaction.
   *
   * This field is optional. It is generated by the merchant and used to reference this transaction later,
   * such as for debugging issues when communicating with Google.
   */
  transactionId?: string;
  /**
   * Description of a cart item.
   */
  displayItems?: google.payments.api.DisplayItem[];
  /**
   * The status of the total price.
   * If it is a variable subscription, the status should be NOT_CURRENTLY_KNOWN.
   *
   * Options:
   *
   * - `NOT_CURRENTLY_KNOWN`:
   *   The total price is not known currently.
   *
   * - `ESTIMATED`:
   *   The total price provided is an estimated price. The final price may
   *   change depending on the shipping address or billing address,
   *   if requested.
   *
   * - `FINAL`:
   *   The total price is the final total price of the transaction, and will
   *   not change based on selections made by the shopper.
   *   @defaultValue `'FINAL'`
   */
  totalPriceStatus?: 'NOT_CURRENTLY_KNOWN' | 'ESTIMATED' | 'FINAL';
  /**
   * Total price label of this transaction.
   * The string will be shown as the total price label on the cart modal dialog page.
   * This field is optional, but required if developer wants to show cart information. Otherwise the cart modal dialog will not be rendered.
   */
  totalPriceLabel?: string;
  /**
   * The options for checkout.
   */
  checkoutOption?: google.payments.api.CheckoutOption;
  /**
   * Defines callback methods for handling changed payment data and payment
   * authorized events.
   */
  paymentDataCallbacks?: google.payments.api.PaymentDataCallbacks;
  /**
   * Allowed authentication methods.
   * @defaultValue `['PAN_ONLY', 'CRYPTOGRAM_3DS']`
   */
  allowedAuthMethods?: google.payments.api.CardAuthMethod[];
  /**
   * One or more card networks that you support.
   */
  allowedCardNetworks?: GoogleSupportedCardNetWork[];
  /**
   * Whether a prepaid card may be used for this transaction.
   *
   * @defaultValue `true`
   */
  allowPrepaidCards?: boolean;
  /**
   * Whether a credit card may be used for this transaction.
   *
   * @defaultValue `true`
   */
  allowCreditCards?: boolean;
  /**
   * Set to `true` if you need information about the validation performed on the returned payment data.
   *
   * @defaultValue `false`
   */
  assuranceDetailsRequired?: boolean;
  /**
   * Whether a billing address is required from the shopper.
   *
   * @defaultValue `false`
   */
  billingAddressRequired?: boolean;

  /**
   * Optional billing address parameters for the returned billing address.
   */
  billingAddressParameters?: google.payments.api.BillingAddressParameters;
  /**
   * Whether a shipping address is required from the shopper.
   *
   * @defaultValue `false`
   */
  shippingAddressRequired?: false | true | undefined;

  /**
   * Optional shipping address parameters for the returned shipping address.
   */
  shippingAddressParameters?: google.payments.api.ShippingAddressParameters;
  /**
   * Offers available for redemption that can be used with the current
   * order.
   */
  offerInfo?: google.payments.api.OfferInfo;

  /**
   * Whether a shipping option is required from the shopper.
   *
   * Note: This field is currently for web only.
   *
   * @defaultValue `false`
   */
  shippingOptionRequired?: boolean;

  /**
   * Parameters for shipping option that can be used in this request.
   * Note: This field is currently for web only.
   */
  shippingOptionParameters?: google.payments.api.ShippingOptionParameters;

  /**
   * List of callbacks that the developer intents to handle.
   * Upon selection by the shopper, these intents can be used to update the
   * request with new data based on that selection (For exmaple, if a shipping
   * option is selected, the developer could update the `transactionInfo`
   * with new `totalPrice` and `diplayItems`).
   *
   */
  callbackIntents?: google.payments.api.CallbackIntent[];
}

/**
 * Applies to `googlePayButton` element type integration, the interface used when `createElement()` is called with type `googlePayButton`.
 */
export interface GooglePayButtonOptions extends GooglePayRequestOptions {
  /**
   * The layout of each element stays consistent, but you can modify width, height, and more.
   */
  appearance?: Appearance;
  /**
   * Box style and 3ds popUp style for the GooglePayButton Element.
   */
  style?: CSSProperties & PopUpStyle;
  /**
   * The ID of the Payment Intent you would like to checkout.
   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
   *
   */
  intent_id?: string;
  /**
   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
   * Leave it empty if `intent_id` and `customer_id` are not provided.
   */
  client_secret?: string;
  /**
   * The ID of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
   * This field is required when `mode` is `'recurring'`.
   */
  customer_id?: string;
  /**
   * The checkout mode for the shopper.
   */
  mode?: Mode;
  /**
   * Indicate the amount and currency of the Payment Intent.
   * If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
   */
  amount: Amount;

  /**
   * Whether the amount should be captured automatically upon successful payment authorization.
   * Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
   * @defaultValue `true`
   */
  autoCapture?: boolean;
  /**
   * The authorization type for the card payment. Options include: `"pre_auth"`, `"final_auth"`.
   * Set it to `"pre_auth"` if you want to place a hold on your customer’s card for more than 7 days, i.e., extend the authorization time window. Currently it's only available when the card brand is Visa or Mastercard.
   * `autoCapture` will be automatically set to `false` if you enable `pre_auth`.
   *
   * @defaultValue `'final_auth'`
   */
  authorizationType?: AuthorizationType;
  /**
   * The container id of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
  /**
   * Error displayed to the shopper for erroneous payment data.
   * For example, you can update error when user selects the wrong shipping option.
   * Note: This field is currently available for web only.
   */
  error?: google.payments.api.PaymentDataError;
}

type GooglePayNextActionOptions = Pick<
  GooglePayButtonOptions,
  'client_secret' | 'intent_id' | 'customer_id' | 'autoCapture' | 'authorizationType' | 'authFormContainer'
>;
/**
 * Supported methods for presenting the Apple Pay button.
 * Options:
 *
 * - `'add-money'`:
 *   Useful for adding money to a card, account, or payment system.
 *
 * - `'book'`:
 *   Useful for booking trips, flights, or other experiences.
 *
 * - `'buy'`:
 *   Useful for product purchases.
 *
 * - `'check-out'`:
 *   Useful for purchase experiences that include other payment buttons that start with "Check out".
 *
 * - `'continue'`:
 *   Useful for general purchases.
 *
 * - `'contribute'`:
 *   Useful to help people contribute money to projects, causes, organizations, and other entities.
 *
 * - `'donate'`:
 *   Used by approved nonprofit organization that lets people make donations.
 *
 * - `'order'`:
 *   Useful for placing orders for items such as meals or flowers.
 *
 * - `'pay'`:
 *   Useful for paying bills or invoices.
 *
 * - `'plain'`:
 *   Shows Apple Pay logo only, useful when an additional call to action isn't needed.
 *
 * - `'reload'`:
 *   Useful for adding money to a card, account, or payment system.
 *
 * - `'rent'`:
 *   Useful for renting items such as cars or scooters.
 *
 * - `'set-up'`:
 *   Useful for prompting the user to set up a card.
 *
 * - `'subscribe'`:
 *   Useful for purchasing a subscription such as a gym membership or meal-kit delivery service.
 *
 * - `'support'`:
 *   Useful for helping people give money to projects, causes, organizations, and other entities.
 *
 * - `'tip'`:
 *   Useful for letting people tip for goods or services.
 *
 * - `'top-up'`:
 *   Useful for adding money to a card, account, or payment system.
 */
export type ApplePayButtonType =
  | 'add-money'
  | 'book'
  | 'buy'
  | 'check-out'
  | 'continue'
  | 'contribute'
  | 'donate'
  | 'order'
  | 'pay'
  | 'plain'
  | 'reload'
  | 'rent'
  | 'set-up'
  | 'subscribe'
  | 'support'
  | 'tip'
  | 'top-up';
export type ApplePayButtonColor = 'black' | 'white' | 'white-outline';

export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
  /**
   * Supported methods for presenting the Apple Pay button.
   *
   * A translated button label may appear if a language specified in the
   * viewer's browser matches an [available language](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaybuttonlocale).
   */
  buttonType?: ApplePayButtonType;
  /**
   * Indicate the color of the button.
   *
   * @defaultValue `'black'`
   */
  buttonColor?: ApplePayButtonColor;
  /**
   * Provide a business name for the label field. Use the same business name that you want displayed for the charge on the shopper's bank or credit card statement. For example, "COMPANY, INC.".
   *
   */
  totalPriceLabel?: string;
  /**
   * Indicate whether a line item is final or pending.
   *
   * If the mode is `recurring` and if it's a variable subscription, the value should be pending.
   *
   * @defaultValue `'final'`
   */
  totalPriceType?: 'final' | 'pending';
  /**
   * Card networks supported by the merchant.
   *
   * If not configured, `supportedNetworks` will be based on merchant's account settings.
   *
   * For more details, see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916122-supportednetworks
   */
  supportedNetworks?: string[];
  /**
   * Payment capabilities supported by the merchant.
   *
   * If not configured, `merchantCapabilities` will be based on merchant's account settings.
   *
   * - supports3DS: **Required**. This value must be supplied.
   *
   * - supportsCredit: **Optional**. If present, only transactions that are categorized as credit cards are allowed.
   *
   * - supportsDebit: **Optional**. If present, only transactions that are categorized as debit cards are allowed.
   *
   * - supportsEMV: Include this value only if you support China Union Pay transactions. (if `supportedNetworks` does not contain chinaUnionPay, don't include it).
   */
  merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[];
}

interface Amount {
  value: number;
  currency: string;
}

/**
 * Applies to `applePayButton` element type integration, the interface used when `createElement()` is called with type `applePayButton`.
 */
export interface ApplePayButtonOptions extends ApplePayRequestOptions {
  /**
   * The ID of the Payment Intent you would like to checkout.
   *
   * Required when `mode` is set to `'payment'` but optional for `'recurring'`.
   *
   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
   *
   */
  intent_id?: string;
  /**
   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
   *
   * Leave it empty if `intent_id` and `customer_id` are not provided as you can provide it in the update() function later.
   */
  client_secret?: string;
  /**
   * The ID of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
   *
   * This field is required when `mode` is `'recurring'`.
   */
  customer_id?: string;
  /**
   * The checkout mode for the shopper.
   * @defaultValue `'payment'`
   */
  mode?: Mode;
  /**
   * Indicate the amount and currency of the Payment Intent.
   *
   * If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
   */
  amount: Amount;
  /**
   * Whether the amount should be captured automatically upon successful payment authorization.
   *
   * Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
   * @defaultValue `true`
   */
  autoCapture?: boolean;
  /**
   * The authorization type for the card payment.
   *
   * Set it to `'pre_auth'` if you want to place a hold on your customer’s card for more than 7 days, i.e., extend the authorization time window.
   *
   * Currently it's only available when the card brand is Visa or Mastercard. `autoCapture` will be automatically set to `false` if you enable `pre_auth`.
   * @defaultValue `'final_auth'`
   */
  authorizationType?: AuthorizationType;
  /**
   * The layout of each element stays consistent, but you can modify width, height, and more.
   */
  appearance?: Appearance;
  /**
   * Box style for the ApplePayButton Element.
   */
  style?: CSSProperties;
}

export interface ApplePayButtonUpdateOptions extends ApplePayButtonOptions {
  /**
   * A customizable error type that you create to indicate problems with the address or contact information on an Apple Pay sheet.
   */
  errors?: ApplePayJS.ApplePayError[];
}

/**
 * Apply to wechat Element type integration, the interface used when createElemen() is called with type `wechat`.
 */
export interface WechatElementOptions {
  /**
   * The Payment Intent you would like to checkout.
   *
   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
   *
   */
  intent?: Intent;
  /**
   * Box style for the WechatElement Element.
   */
  style?: CSSProperties;
}

/**
 * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
 */
export interface Element {
  /**
   * The Element options when calling createElement().
   */
  options?:
    | GooglePayButtonOptions
    | ApplePayButtonOptions
    | CardElementOptions
    | CardNumberElementOptions
    | ExpiryDateElementOptions
    | CvcElementOptions
    | FullFeaturedCardElementOptions
    | DropInElementOptions
    | WechatElementOptions
    | QrcodeElementOptions
    | RedirectElementOptions;
  /**
   * The iframe element after mounting the Element to the DOM.
   */
  iframe: HTMLIFrameElement | null;
  /**
   * The DOM element you called in the mount() function.
   */
  domElement: null | HTMLElement;
  /**
   * Element integration `step #3`
   *
   * Mounts payment Element to your HTML DOM element for checkout.
   */
  mount(domElement: string | HTMLElement): null | HTMLElement;
  /**
   * Blurs the the HTML Input element.
   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
   */
  blur(): void;
  /**
   * Clears the the HTML Input element.
   */
  clear(): void;
  /**
   * Focuses the the HTML Input element.
   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
   */
  focus(): void;
  /**
   * Unmounts the Element by reversing the mount action.
   */
  unmount(): void;
  /**
   * Updates the Element options after creating the Element.
   */
  update(
    options?:
      | CardElementOptions
      | CardNumberElementOptions
      | ExpiryDateElementOptions
      | CvcElementOptions
      | FullFeaturedCardElementOptions
      | DropInElementOptions
      | WechatElementOptions
      | QrcodeElementOptions
      | RedirectElementOptions
      | ApplePayButtonOptions
      | GooglePayButtonOptions,
    initOptions?: InitOptions,
  ): void;
}

interface ElementBaseType {
  /**
   * @hidden
   * The iframe element after mounting the Element to the DOM.
   */
  iframe: HTMLIFrameElement | null;
  /**
   * @hidden
   * The DOM element you called in the mount() function.
   */
  domElement: null | HTMLElement;
  /**
   * Mounts Element to your HTML DOM.
   * @example
   * ```ts
   * // There are two ways to mount the element:
   * // 1. Call with the container DOM id
   * element.mount('container-dom-id');
   *
   * // 2. Find the created DOM in the existing HTML and call with the container DOM element
   * const containerElement = document.getElementById('container-dom-id');
   * element.mount(containerElement);
   * ```
   */
  mount(domElement: string | HTMLElement): null | HTMLElement;

  /**
   * Unmounts the Element. Note that the Element instance will remain.
   * @example
   * ```ts
   * element.unmount();
   * ```
   */
  unmount(): void;

  /**
   * Destroys the Element instance.
   * @example
   * ```ts
   * element.destroy();
   * ```
   */
  destroy(): void;
}

type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur' | 'change';
/**
 * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
 */
export interface CardElementType extends ElementBaseType {
  /**
   * Using this function to blur the HTML Input element
   * @example
   * ```ts
   * element.blur();
   * ```
   */
  blur(): void;
  /**
   * Using this function to clear the HTML Input element
   * @example
   * ```ts
   * element.clear();
   * ```
   */
  clear(): void;
  /**
   * Using this function to focus the HTML Input element
   * @example
   * ```ts
   * element.focus();
   * ```
   */
  focus(): void;
  /**
   * Creates a Payment Consent, which represents the consent between you and the shopper to use the shopper’s saved card details for future payments.
   * @param data - Payment consent request payload
   * @example
   * ```ts
   * element.createPaymentConsent({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
  /**
   * Using this function to verify consent
   * @param data - Verify consent request payload
   * @example
   * ```ts
   * element.verifyConsent({
   *   client_secret: 'replace-with-your-client-secret',
   *   currency: 'replace-with-your-currency',
   * });
   * ```
   */
  verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
  /**
   * Using this function to confirm payment intent
   *
   * Confirms the Payment Intent. Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
   * @param data - Payment method request payload
   * @example
   * ```ts
   * element.confirm({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  confirm(data: PaymentMethodRequestData): Promise<Intent>;
  /**
   * Using this function to update the element option after create the element
   * @example
   * ```ts
   * element.update({autoCapture: true});
   * ```
   */
  update(options?: Partial<CardElementOptions>, initOptions?: Partial<InitOptions>): void;
  /**
   * Listen to Element events.
   *
   * @param event - The event name
   * @param handler - The event handler
   * @example
   * ```ts
   * element.on('success', () => {
   *   // Handle success event
   * });
   * ```
   */
  on(event: CardElementEvent, handler: EventListener): void;
}

export type CardNumberElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey' | 'submit';

/**
 * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
 */
export interface CardNumberElementType extends ElementBaseType {
  /**
   * Using this function to blur the HTML Input element.
   * @example
   * ```ts
   * element.blur();
   * ```
   */
  blur(): void;
  /**
   * Using this function to clear the HTML Input element.
   * @example
   * ```ts
   * element.clear();
   * ```
   */
  clear(): void;
  /**
   * Using this function to focus the HTML Input element
   * @example
   * ```ts
   * element.focus();
   * ```
   */
  focus(): void;
  /**
   * Creates a Payment Consent, which represents the consent between you and the shopper to use the shopper’s saved card details for future payments.
   * @example
   * ```ts
   * element.createPaymentConsent({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
  /**
   * Using this function to verify payment consent.
   * @example
   * ```ts
   * element.verifyConsent({
   *   client_secret: 'replace-with-your-client-secret',
   *   currency: 'replace-with-your-currency',
   * });
   * ```
   */
  verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
  /**
   * Using this function to confirm payment intent.
   *
   * Confirms the Payment Intent.
   *@example
   * ```ts
   * element.confirm({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  confirm(data: PaymentMethodRequestData): Promise<Intent>;
  /**
   * Using this function to create a payment method for future payments. The created payment method can be saved in your system.
   * @param data - Payment method request payload
   * @example
   * ```ts
   * element.createPaymentMethod({
   *   client_secret: 'replace-with-your-client-secret',
   *   customer_id: 'replace-with-your-customer-id',
   *   payment_method: {
   *     card: {
   *       name: 'John Doe',
   *     },
   *   },
   * });
   * ```
   */
  createPaymentMethod(data: CreatePaymentMethodRequest): Promise<PaymentMethodBasicInfo>;
  /**
   * Using this function to update the element option after create the element.
   * @example
   * ```ts
   * element.update({
   *   autoCapture: false,
   * });
   * ```
   */
  update(options?: Partial<CardNumberElementOptions>, initOptions?: Partial<InitOptions>): void;
  /**
   * Listen to element events.
   *
   * @example
   * ```ts
   * element.on('change', () => {
   *   // Handle change event
   * });
   * ```
   */
  on(event: CardNumberElementEvent, handler: EventListener): void;
}

export type ExpiryElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey';

/**
 * Functions and external fields can be used in your integration flow with Airwallex element
 */
export interface ExpiryDateElementType extends ElementBaseType {
  /**
   * Using this function to blur the HTML Input element.
   * @example
   * ```ts
   * element.blur();
   * ```
   */
  blur(): void;
  /**
   * Using this function to clear the HTML Input element.
   * @example
   * ```ts
   * element.clear();
   * ```
   */
  clear(): void;
  /**
   * Using this function to focus the HTML Input element
   * @example
   * ```ts
   * element.focus();
   * ```
   */
  focus(): void;
  /**
   * Using this function to update the element option after create the element.
   * @example
   * ```ts
   * element.update({
   *   placeholder: 'replace-with-your-placeholder',
   * });
   * ```
   */
  update(options?: Partial<ExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
  /**
   * Listen to element event
   *
   * @example
   * ```ts
   * element.on('change', () => {
   *   // Handle change event
   * });
   * ```
   */
  on(event: ExpiryElementEvent, handler: EventListener): void;
}

export type CvcElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey' | 'submit';

/**
 * Element functions can be used in your integration flow with Airwallex element.
 */
export interface CvcElementType extends ElementBaseType {
  /**
   * Using this function to blur the HTML Input element.
   * @example
   * ```ts
   * element.blur();
   * ```
   */
  blur(): void;
  /**
   * Using this function to clear the HTML Input element.
   * @example
   * ```ts
   * element.clear();
   *  ```
   */
  clear(): void;
  /**
   * Using this function to focus the HTML Input element.
   * @example
   *  ```ts
   * element.focus();
   * ```
   */
  focus(): void;
  /**
   * Using this function to confirm payment intent.
   * @example
   * ```ts
   * element.confirm({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  confirm(data: PaymentMethodRequestData): Promise<Intent>;
  /**
   * Using this function to create payment consent.
   * @example
   * ```ts
   * element.createPaymentConsent({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   * ```
   */
  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
  /**
   * Using this function to update the element option after create the element.
   * @example
   * ```ts
   * element.update({
   *   placeholder: 'replace-with-your-placeholder',
   * });
   * ```
   */
  update(options?: Partial<CvcElementOptions>, initOptions?: Partial<InitOptions>): void;
  /**
   * Listen to element event
   *
   * @example
   * ```ts
   * element.on('change', () => {
   *   // Handle change event
   * });
   * ```
   */
  on(event: CvcElementEvent, handler: EventListener): void;
}

export type ApplePayButtonEvent =
  | 'ready'
  | 'click'
  | 'shippingMethodChange'
  | 'shippingAddressChange'
  | 'validateMerchant'
  | 'authorized'
  | 'cancel'
  | 'success'
  | 'error';

interface ParameterObject {
  /**
   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
   */
  client_secret: string;
}

/**
 * Element functions can be used in your integration flow with Airwallex element.
 */
export interface ApplePayButtonElementType extends ElementBaseType {
  /**
   * Using this function to update the element option after create the element.
   * @example
   * ```ts
   * element.update({
   *   buttonType: 'donate',
   * }, {
   *   locale: 'en',
   * });
   * ```
   */
  update(options?: Partial<ApplePayButtonUpdateOptions>, initOptions?: Partial<InitOptions>): void;

  /**
   * Listen to element event
   *
   * @example
   * ```ts
   * element.on('success', () => {
   *   // Handle success event
   * });
   * ```
   */
  on(event: ApplePayButtonEvent, handler: EventListener): void;
  /**
   * Using this function to confirm payment intent.
   * @example
   * ```ts
   * element.confirmIntent({
   *   client_secret: intent?.client_secret,
   * });
   * ```
   */
  confirmIntent(data: ParameterObject): Promise<Intent>;
  /**
   * Using this function to create payment consent.
   * @example
   * ```ts
   * element.createPaymentConsent({
   *   client_secret: intent?.client_secret,
   * });
   * ```
   */
  createPaymentConsent(data: ParameterObject): Promise<Consent | undefined>;
  /**
   *
   * @param merchantSession - An opaque message session object.
   * @example
   * ```ts
   * element.completeValidation({
   *   epochTimestamp: 1721269728247,
   *   expiresAt: 1721273328247,
   *   merchantSessionIdentifier: 'SSH16075688527B4E',
   *   nonce: '9c283350',
   *   merchantIdentifier: '3409DA66CE0',
   *   domainName: 'your domain name',
   *   displayName: 'Sawayn, Conner and Quigley',
   *   signature: '308006092a86',
   *   operationalAnalyticsIdentifier: 'Carroll, Swaniawski',
   *   retries: 0,
   *   pspId: '803FB3E0FC',
   * });
   * ```
   */
  completeValidation(merchantSession: unknown): void;
}

export type DropInElementEvent =
  | 'ready'
  | 'clickConfirmButton'
  | 'cancel'
  | 'success'
  | 'error'
  | 'switchMethod'
  | 'pendingVerifyAccount';

/**
 * Element functions can be used in your integration flow with Airwallex element.
 */
export interface DropInElementType extends ElementBaseType {
  /**
   * Using this function to update the element option after create the element.
   * @example
   * ```ts
   * element.update({
   *   methods: ['card'],
   * }, {
   *   locale: 'en',
   * });
   * ```
   */
  update(options?: Partial<DropInElementOptions>, initOptions?: Partial<InitOptions>): void;
  /**
   * Listen to element event.
   *
   * @example
   * ```ts
   * element.on('success', () => {
   *   // Handle success event
   * });
   * ```
   */
  on(event: DropInElementEvent, handler: Even