airwallex-payment-elements/types/dropInElement.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 { PaymentMethodType, BoxStyle, CardNetwork, Appearance, CSSProperties, SelectorAllowed } from './element';
import {
  Mode,
  RecurringOptions,
  Billing,
  AuthorizationType,
  Layout,
  PaymentConsentOptions,
  SavedPaymentMethodOptions,
  SubmitType,
  ExpressPaymentMethodType,
} from './airwallex';
import { ApplePayHppOrDropInRequestOptions, GooglePayRequestOptions, ContactField, LPMFlows } from './element';
interface WeChatPayFlow {
  desktopFlow?: LPMFlows;
  mobileFlow?: LPMFlows;
}

interface DropinTheme {
  palette?: {
    primary?: string;
  };
}

interface DropInAppearance extends Appearance {
  /**
   * Set rules to further customize the appearance of the Element.
   */
  rules?: Partial<Record<SelectorAllowed, CSSProperties>>;
}

/**
 * Apply to `dropIn` element type integration, interface used when `createElement` called with type `dropIn`
 */
export interface DropInElementOptions {
  /**
   * The layout of the DropIn element.
   */
  layout?: Layout;
  /**
   * Customize the visual appearance of the DropIn Element to match your website's design.
   *
   * You can configure:
   *
   * - `mode`: Choose between `'dark'` and `'light'` mode.
   *
   * - `variables`: Set `colorBrand`, `colorText`, `colorBackground` properties.
   *
   * - `rules`: Customize the styles of the specific elements.
   */
  appearance?: DropInAppearance;
  /**
   * 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 three-letter ISO currency code representing the currency of the Payment Intent or Payment Consent.  Only payment methods supported for the specified `currency` will be shown on the payment page.
   */
  currency: string;
  /**
   * When using Payments for Platforms, specify the ID of the connected account associated with the payment if you want to use its information to process the payment.
   * For example, the statement descriptor displayed on the shopper's credit card or bank statement and the payment methods activated by the connected account.
   *
   */
  platformConnectedAccount?: string;
  /**
   * The checkout mode for the shopper, `'payment'` or `'recurring'`.
   * @defaultValue `'payment'`
   */
  mode?: Mode;
  /**
   * The payment consent details.
   */
  payment_consent?: PaymentConsentOptions;
  /**
   * The options for saved payment method.
   * @defaultValue `{ displayMode: 'auto', saveMode: 'auto' }`
   */
  savedPaymentMethod?: SavedPaymentMethodOptions;
  /**
   * The payment methods your website would like to integrate with
   * @deprecated use {@link methods} instead
   */
  components?: Array<PaymentMethodType>;
  /**
   * The payment methods your website would like to integrate with.
   */
  methods?: Array<PaymentMethodType>;
  /**
   * Whether to display the built-in confirm button. Default is `true`.
   * When set to `false`:
   * - The confirm button will be hidden
   * - Only card payment method will be displayed, other payment methods will be hidden
   * - You must implement your own button and call `dropInElement.confirm()` to submit the payment
   * @defaultValue `true`
   */
  showConfirmButton?: 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 `pre_auth` is 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;
  /**
   * One or more card networks that you support.
   */
  allowedCardNetworks?: CardNetwork[];
  /**
   * The options for Wechat Pay.
   */
  wechatpay?: WeChatPayFlow;
  /**
   * Checkout configuration options for Apple Pay.
   */
  applePayRequestOptions?: ApplePayHppOrDropInRequestOptions;
  /**
   * Checkout configuration options for Google Pay.
   */
  googlePayRequestOptions?: GooglePayRequestOptions;
  /**
   * Indicate to improve 3DS experience, indicate if the payment form will collect billing info from shopper
   * @deprecated please use {@link requiredBillingContactFields} instead
   */
  withBilling?: boolean;
  /**
   * The billing information that you require from the user in order to process the transaction.
   */
  requiredBillingContactFields?: ContactField[];
  /**
   * Box style for the dropIn element.
   */
  style?: BoxStyle;
  /**
   * The container of the authentication form used in 3D Secure authentication.
   */
  authFormContainer?: string;
  /**
   * The ID of the Payment Intent you would like to checkout. Required when `mode` is `'payment'`.
   */
  intent_id?: 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;
  /**
   * Options for recurring flow.
   * @deprecated use {@link payment_consent} instead
   */
  recurringOptions?: RecurringOptions;
  /**
   * The two-letter ISO country code of the shopper's country. This is required for `bank_transfer`, `online_banking`, `skrill` or `seven_eleven` payment methods.
   */
  country_code?: string;
  /**
   * The shopper's full name.
   */
  shopper_name?: string;
  /**
   * The shopper's phone number.
   */
  shopper_phone?: string;
  /**
   * The shopper's email address.
   */
  shopper_email?: string;
  /**
   * Billing information provided by the merchant.
   * This option overrides the billing information from the shopper as provided in the input billing fields. Do not set `withBilling` and `requiredBillingContactFields` when you use this option.
   */
  billing?: Billing;

  /**
   * Customize DropIn Element style.
   * @deprecated use {@link appearance} instead
   * @hidden
   */
  theme?: DropinTheme;

  /**
   * 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;
  /**
   * Describes the type of transaction being performed in order to customize the submit button text.
   * Available options are 'pay', 'book', or 'subscribe'.
   * The type can only be specified in `payment` mode.
   * If blank, the default value will be `'pay'`
   * @defaultValue `'pay'`
   */
  submitType?: SubmitType;
  /**
   * This field is used for Multi-Currency Pricing(MCP).
   * The merchant can create a quote for the shopper, and pass the quote_id to Drop-in Element.
   * If the quote_id is provided, Drop-in Element will use that quote to convert the amount and currency.
   * And each time the shopper changes the currency, the merchant needs to create a new quote or reuse existing quotes and update the quote_id.
   * If the quote_id is not provided, Drop-in Element will use ACC logic to automatically convert the amount and currency.
   */
  quote_id?: string | null;
  /**
   * Whether to force disable automatic currency conversion.
   * - `true`: Overrides merchant settings to disable conversion.
   * - `false`: Respects the merchant's automatic conversion configuration.
   * @defaultValue `false`
   */
  disableAutoCurrencyConversion?: boolean;
  /**
   * The express payment methods to be displayed on the payment page.
   * @defaultValue `['googlepay', 'applepay', 'paypal', 'venmo', 'lumi', 'birdpay']`
   * @hidden
   */
  expressPaymentMethods?: ExpressPaymentMethodType[];
}