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

> **IMPORTANT NOTICE**: This package is being superseded by [Airwallex.js](https://www.airwallex.com/docs/developer-tools__sdks__airwallex.js__upgrade-to-airwallex.js__upgrade-from-payment-elements-sdk). We strongly recommend upgrading to Airwallex.js for

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,
  PaymentConsentOptions,
} from './airwallex';
import {
  ApplePayButtonEventCode,
  ApplePayButtonEventHandler,
  CardElementEventCode,
  CardElementEventHandler,
  DropInElementEventCode,
  DropInElementEventHandler,
  DropInElementTriggerEventParams,
  DropInTriggerEventCode,
  GooglePayButtonEventCode,
  GooglePayButtonEventHandler,
  SplitElementEventCode,
  SplitElementEventHandler,
} from './events';
/**
 * 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'
  | 'krCardExpiry'
  | 'krCardPswFirstTwo'
  | 'krCardIdentifier'
  | 'krCardNumber';

/**
 * 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'
  | 'wero'
  | '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'
  | 'cash_app_pay'
  | 'twint'
  | 'laybuy'
  | 'venmo'
  | 'payme'
  | 'tabby'
  | 'octopus'
  | 'spaylater';

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.
 *
 * `onSurchargeFeeChange`: Triggered when the surcharge fee changes.
 */
export type EventCode =
  | 'onReady'
  | 'onSubmit'
  | 'onDynamicCurrencyConversion'
  | 'onSuccess'
  | 'onError'
  | 'onCancel'
  | 'onFocus'
  | 'onBlur'
  | 'onChange'
  | 'onClick'
  | 'onPendingVerifyAccount'
  | 'onPressArrowKey'
  | 'onSwitchMethod'
  | 'onSurchargeFeeChange';

export type TriggerEventCode = 'intentRefetch';

/**
 * 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 Variables {
  /**
   * Sets the main accent color used for Elements such as text links, focus borders, interactive backgrounds, highlights, etc.
   * @defaultValue `'#612fff'` (light mode) and `'#ABA8FF'` (dark mode)
   */
  colorBrand?: string;
  /**
   * Sets the primary text color. This selection automatically expands to generate a comprehensive color set, including secondary text, inverse text, disabled text, placeholder text, and more.
   * @defaultValue `'#14171a'` (light mode) and `'#F5F6F7'` (dark mode)
   */
  colorText?: string;
  /**
   * Sets the primary background color. This option also generates a complete set of background colors, including primary, secondary, field, and disabled backgrounds.
   * @defaultValue `'#ffffff'` (light mode) and `'#14171A'` (dark mode)
   */
  colorBackground?: string;
}

export interface Appearance {
  /**
   * The appearance mode for the Element. Accepts `'dark'` or `'light'` modes where each mode provides a different color variable preset and color generation logic.
   * @defaultValue `'light'`
   */
  mode?: 'light' | 'dark';
  /**
   * Set variables to customize the Element's appearance. The following color variables are supported:
   *
   * - `colorBackground`: Sets the primary background color. This automatically generates a complete
   *   set of background colors including primary, secondary, field, and disabled backgrounds.
   *
   * - `colorBrand`: Sets the main accent color used for Elements such as buttons, text links, focus borders,
   *   interactive backgrounds, highlights, etc. This color defines your brand's visual identity in the Element.
   *
   * - `colorText`: Sets the primary text color. This automatically generates a complete set of
   *   text colors including secondary text, inverse text, disabled text, and placeholder text.
   *
   * All color values can be specified in either RGB or HEX  format.
   */
  variables?: Variables;
}

interface GooglePayButtonCssSelector {
  '.GooglePayButton'?: CSSProperties;
  '.GooglePayButton:hover'?: CSSProperties;
}

export interface GooglePayButtonAppearance {
  /**
   * Set rules customize the appearance of the Google Pay button.
   */
  rules?: GooglePayButtonCssSelector;
}

interface ApplePayButtonCssSelector {
  '.ApplePayButton'?: CSSProperties;
  '.ApplePayButton:hover'?: CSSProperties;
}

export interface ApplePayButtonAppearance {
  /**
   * Set rules customize the appearance of the Apple Pay button.
   */
  rules?: ApplePayButtonCssSelector;
}

/**
 * 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;
  /**
   * Whether the CVC input is masked
   *  @defaultValue `false`
   */
  isMasked?: 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;
  /**
   * Options for PaymentConsent.
   */
  payment_consent?: PaymentConsentOptions;
  /**
   * 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;
}
type ApplePayBillingContactField = 'postalAddress';
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. Only postalAddress is supported. If you need to collect name, email, phone, you need to add requiredShippingContactFields config. e.g. requiredShippingContactFields: ['name', 'email', 'phone']
   */
  requiredBillingContactFields?: ApplePayBillingContactField[];

  /**
   * 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;
  /**
   * The merchant account ID in Airwallex. It is required for Google Pay Express Checkout Element.
   */
  gatewayMerchantId?: 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[];
  /**
   * Whether the shopper must use an existing payment method.
   * @defaultValue `false`
   */
  existingPaymentMethodRequired?: boolean;
  /**
   * Whether the CVC is required.
   * @defaultValue `true`
   * @hidden
   */
  cvcRequired?: boolean;
}

/**
 * Applies to `googlePayButton` element type integration, the interface used when `createElement()` is called with type `googlePayButton`.
 */
export interface GooglePayButtonOptions extends GooglePayRequestOptions {
  /**
   * Customize the appearance of the Google Pay button.
   */
  appearance?: GooglePayButtonAppearance;
  /**
   * 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;
  /**
   * Options for PaymentConsent.
   */
  payment_consent?: PaymentConsentOptions;
}

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 {
  /**
   * Customize the appearance of the Apple Pay button.
   */
  appearance?: ApplePayButtonAppearance;
  /**
   * 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;
  /**
   * Box style for the ApplePayButton Element.
   */
  style?: CSSProperties;
  /**
   * Options for PaymentConsent.
   */
  payment_consent?: PaymentConsentOptions;
}

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;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` with type `krCardExpiry`.
 */
export interface KrCardExpiryDateElementOptions {
  /**
   *  Whether the `krCardExpiry` 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 krCardExpiry Element.
   */
  style?: InputStyle;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` with type `krCardPswFirstTwo`.
 */
export interface KrCardPswFirstTwoElementOptions {
  /**
   * Whether the `krCardPswFirstTwo` 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 krCardPswFirstTwo Element.
   */
  style?: InputStyle;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` with type `krCardIdentifier`.
 */
export interface KrCardIdentifierElementOptions {
  /**
   * The type of the identifier.
   */
  cardType: 'personal' | 'company';
  /**
   * Whether the `krCardIdentifier` 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 when card type is 'personal'.
   */
  dateOfBirthPlaceholder?: string;
  /**
   * A short hint to suggest the expected value of an input field to the shopper when card type is 'company'.
   */
  businessNumberPlaceholder?: string;
  /**
   * Style for the krCardIdentifier Element.
   */
  style?: InputStyle;
}

/**
 * Applies to split card element type integration, the interface used when `createElement()` called with type `krCardNumber`
 */
export interface KrCardNumberElementOptions {
  /**
   *  Whether the `krCardNumber` 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;
  /**
   * A short hint to suggest the expected value of an input field to the shopper.
   */
  placeholder?: string;
  /**
   * Style for the krCardNumber Element.
   */
  style?: InputStyle;
}

/**
 * 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 Element to your HTML DOM.
   */
  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. Note that the Element instance will remain.
   */
  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;
}

/**
 * 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;
  /**
   * Call this function to create a Payment Consent, which represents the agreement between the merchant and shopper of making subsequent payments using the provided payment method.
   * @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.
   * @typeParam EventCode - A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.
   * @param event - The event name
   * @param handler - The event handler
   * @example
   * ```ts
   * element.on('submit', () => {
   *   // Handle submit event
   * });
   * ```
   */
  on<EventCode extends CardElementEventCode>(eventCode: EventCode, handler: CardElementEventHandler<EventCode>): void;
}

/**
 * BIN (Bank Identification Number) information for card payment methods.
 */
export interface BinInfo {
  card_brand?: string;
  card_type?: string;
  commercial_card?: boolean;
  issuer_country_code?: string;
  issuer_name?: string;
  product_code?: string;
  product_description?: string;
  product_subtype_code?: string;
  product_subtype_description?: string;
}

/**
 * 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;
  /**
   * Call this function to create a Payment Consent, which represents the agreement between the merchant and shopper of making subsequent payments using the provided payment method.
   * @example
   * ```ts
   * element.createPaymentConsent({
   *   client_secret: 'replace-with-your-client-secret',
   * });
   *