airwallex-payment-elements 1.96.0 → 1.119.1

package/types/element.d.ts

@@ -12,8 +12,21 @@ import {
   RecurringOptions,
   VerifyConsentRequest,
   PaymentConsentRequestData,
+  CreatePaymentMethodRequest,
+  PaymentConsentOptions,
 } from './airwallex';
-
+import {
+  ApplePayButtonEventCode,
+  ApplePayButtonEventHandler,
+  CardElementEventCode,
+  CardElementEventHandler,
+  DropInElementEventCode,
+  DropInElementEventHandler,
+  GooglePayButtonEventCode,
+  GooglePayButtonEventHandler,
+  SplitElementEventCode,
+  SplitElementEventHandler,
+} from './events';
 /**
  * All the flows supported by Local Payment Methods.
  */
@@ -43,7 +56,7 @@ export type ElementType =
   | '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.
+ * 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'
@@ -128,7 +141,10 @@ export type PaymentMethodWithRedirect =
   | 'upi'
   | 'zip'
   | 'spei'
-  | 'afterpay';
+  | 'afterpay'
+  | 'cash_app_pay'
+  | 'twint'
+  | 'laybuy';
 
 export type DirectDebitPaymentMethod =
   | 'ach_direct_debit'
@@ -375,8 +391,70 @@ export type SelectorAllowed =
 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 {
-  rules?: Partial<Record<SelectorAllowed, CSSProperties>>;
+  /**
+   * 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;
 }
 
 /**
@@ -444,7 +522,7 @@ export interface CardElementOptions {
   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.
+   * 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'`
    */
@@ -533,7 +611,7 @@ export interface ExpiryDateElementOptions {
  */
 export interface CvcElementOptions {
   /**
-   * Whether the `cvc` Element input is disabled or not.
+   * Whether the `CVC` Element input is disabled or not.
    * @defaultValue `false`
    */
   disabled?: boolean;
@@ -542,11 +620,11 @@ export interface CvcElementOptions {
    */
   placeholder?: string;
   /**
-   * Indicate cvc length.
+   * Indicate CVC length.
    */
   cvcLength?: number;
   /**
-   * Style for the cvc Element.
+   * Style for the CVC Element.
    */
   style?: InputStyle;
   /**
@@ -554,10 +632,15 @@ export interface CvcElementOptions {
    */
   authFormContainer?: string;
   /**
-   * Whether cvc Element works alone or not.
+   * 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;
 }
 
 /**
@@ -594,7 +677,7 @@ export interface FullFeaturedCardElementOptions {
   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.
+   * 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'`
    */
@@ -629,6 +712,21 @@ export interface FullFeaturedCardElementOptions {
    * 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;
 }
 
 /**
@@ -650,7 +748,7 @@ export interface ApplePayRecurringLineItem {
   recurringPaymentIntervalCount: number;
   recurringPaymentEndDate: Date;
 }
-
+type ApplePayBillingContactField = 'postalAddress';
 export interface ApplePayRequestOriginalOptions {
   /**
    * The merchant's two-letter ISO 3166 country code. For example, 'US'.
@@ -668,9 +766,9 @@ export interface ApplePayRequestOriginalOptions {
   billingContact?: ApplePayJS.ApplePayPaymentContact;
 
   /**
-   * The billing information that you require from the shopper in order to process the transaction.
+   * 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?: ApplePayJS.ApplePayContactField[];
+  requiredBillingContactFields?: ApplePayBillingContactField[];
 
   /**
    * The shipping information that you require from the shopper in order to fulfill the order.
@@ -726,10 +824,13 @@ 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.
@@ -892,9 +993,9 @@ export interface GooglePayRequestOptions {
  */
 export interface GooglePayButtonOptions extends GooglePayRequestOptions {
   /**
-   * The layout of each element stays consistent, but you can modify width, height, and more.
+   * Customize the appearance of the Google Pay button.
    */
-  appearance?: Appearance;
+  appearance?: GooglePayButtonAppearance;
   /**
    * Box style and 3ds popUp style for the GooglePayButton Element.
    */
@@ -933,7 +1034,7 @@ export interface GooglePayButtonOptions extends GooglePayRequestOptions {
   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.
+   * 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'`
@@ -949,6 +1050,10 @@ export interface GooglePayButtonOptions extends GooglePayRequestOptions {
    * Note: This field is currently available for web only.
    */
   error?: google.payments.api.PaymentDataError;
+  /**
+   * Options for PaymentConsent.
+   */
+  payment_consent?: PaymentConsentOptions;
 }
 
 type GooglePayNextActionOptions = Pick<
@@ -1033,6 +1138,7 @@ 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).
    */
@@ -1050,6 +1156,7 @@ export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
   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'`
@@ -1057,17 +1164,24 @@ export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
   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).
+   *
+   * - 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[];
 }
@@ -1081,20 +1195,28 @@ interface Amount {
  * 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;
@@ -1105,30 +1227,34 @@ export interface ApplePayButtonOptions extends ApplePayRequestOptions {
   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.
+   *
+   * 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;
+  /**
+   * Options for PaymentConsent.
+   */
+  payment_consent?: PaymentConsentOptions;
 }
 
 export interface ApplePayButtonUpdateOptions extends ApplePayButtonOptions {
@@ -1144,6 +1270,7 @@ export interface ApplePayButtonUpdateOptions extends ApplePayButtonOptions {
 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/)
    *
    */
@@ -1183,7 +1310,8 @@ export interface Element {
   domElement: null | HTMLElement;
   /**
    * Element integration `step #3`
-   * Mounts payment Element to your HTML DOM element for checkout.
+   *
+   * Mounts Element to your HTML DOM.
    */
   mount(domElement: string | HTMLElement): null | HTMLElement;
   /**
@@ -1201,7 +1329,7 @@ export interface Element {
    */
   focus(): void;
   /**
-   * Unmounts the Element by reversing the mount action.
+   * Unmounts the Element. Note that the Element instance will remain.
    */
   unmount(): void;
   /**
@@ -1269,7 +1397,6 @@ interface ElementBaseType {
   destroy(): void;
 }
 
-type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur' | 'change';
 /**
  * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
  */
@@ -1299,7 +1426,7 @@ export interface CardElementType extends ElementBaseType {
    */
   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.
+   * 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
@@ -1315,7 +1442,6 @@ export interface CardElementType extends ElementBaseType {
    * @example
    * ```ts
    * element.verifyConsent({
-   *   consent_id: 'replace-with-your-consent-id',
    *   client_secret: 'replace-with-your-client-secret',
    *   currency: 'replace-with-your-currency',
    * });
@@ -1324,6 +1450,7 @@ export interface CardElementType extends ElementBaseType {
   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
@@ -1349,16 +1476,14 @@ export interface CardElementType extends ElementBaseType {
    * @param handler - The event handler
    * @example
    * ```ts
-   * element.on('success', () => {
-   *   // Handle success event
+   * element.on('submit', () => {
+   *   // Handle submit event
    * });
    * ```
    */
-  on(event: CardElementEvent, handler: EventListener): void;
+  on<T extends CardElementEventCode>(eventCode: T, handler: CardElementEventHandler<T>): 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.
  */
@@ -1388,7 +1513,7 @@ export interface CardNumberElementType extends ElementBaseType {
    */
   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.
+   * 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({
@@ -1402,7 +1527,6 @@ export interface CardNumberElementType extends ElementBaseType {
    * @example
    * ```ts
    * element.verifyConsent({
-   *   consent_id: 'replace-with-your-consent-id',
    *   client_secret: 'replace-with-your-client-secret',
    *   currency: 'replace-with-your-currency',
    * });
@@ -1410,7 +1534,8 @@ export interface CardNumberElementType extends ElementBaseType {
    */
   verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
   /**
-   * Using this function to confirm payment intent.
+   * Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
+   *
    * Confirms the Payment Intent.
    *@example
    * ```ts
@@ -1421,7 +1546,24 @@ export interface CardNumberElementType extends ElementBaseType {
    */
   confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
-   * Using this function to update the element option after create the element.
+   * 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>;
+  /**
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1431,20 +1573,20 @@ export interface CardNumberElementType extends ElementBaseType {
    */
   update(options?: Partial<CardNumberElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element events.
-   *
+   * Listen to Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('change', () => {
+   * element.on('change', (e) => {
+   *    const { completed, empty, error } = e.detail;
    *   // Handle change event
    * });
    * ```
    */
-  on(event: CardNumberElementEvent, handler: EventListener): void;
+  on<T extends SplitElementEventCode>(eventCode: T, handler: SplitElementEventHandler<T>): void;
 }
 
-export type ExpiryElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey';
-
 /**
  * Functions and external fields can be used in your integration flow with Airwallex element
  */
@@ -1474,7 +1616,7 @@ export interface ExpiryDateElementType extends ElementBaseType {
    */
   focus(): void;
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1484,20 +1626,20 @@ export interface ExpiryDateElementType extends ElementBaseType {
    */
   update(options?: Partial<ExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   *
+   * Listen to Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('change', () => {
+   * element.on('change', (e) => {
+   *    const { completed, empty, error } = e.detail;
    *   // Handle change event
    * });
    * ```
    */
-  on(event: ExpiryElementEvent, handler: EventListener): void;
+  on<T extends SplitElementEventCode>(eventCode: T, handler: SplitElementEventHandler<T>): void;
 }
 
-export type CvcElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey' | 'submit';
-
 /**
  * Element functions can be used in your integration flow with Airwallex element.
  */
@@ -1527,7 +1669,7 @@ export interface CvcElementType extends ElementBaseType {
    */
   focus(): void;
   /**
-   * Using this function to confirm payment intent.
+   * Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
    * @example
    * ```ts
    * element.confirm({
@@ -1537,7 +1679,7 @@ export interface CvcElementType extends ElementBaseType {
    */
   confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
-   * Using this function to create payment consent.
+   * 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({
@@ -1547,7 +1689,7 @@ export interface CvcElementType extends ElementBaseType {
    */
   createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1557,29 +1699,20 @@ export interface CvcElementType extends ElementBaseType {
    */
   update(options?: Partial<CvcElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   *
+   * Listen to Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('change', () => {
+   * element.on('change', (e) => {
+   *    const { completed, empty, error } = e.detail;
    *   // Handle change event
    * });
    * ```
    */
-  on(event: CvcElementEvent, handler: EventListener): void;
+  on<T extends SplitElementEventCode>(eventCode: T, handler: SplitElementEventHandler<T>): 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.
@@ -1587,12 +1720,24 @@ interface ParameterObject {
   client_secret: string;
 }
 
+interface ConfirmIntentData {
+  /**
+   * 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;
+
+  /**
+   * Options for PaymentConsent.
+   */
+  payment_consent?: PaymentConsentOptions;
+}
+
 /**
  * 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.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1605,18 +1750,20 @@ export interface ApplePayButtonElementType extends ElementBaseType {
   update(options?: Partial<ApplePayButtonUpdateOptions>, initOptions?: Partial<InitOptions>): void;
 
   /**
-   * Listen to element event
-   *
+   * Listen to Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('success', () => {
+   * element.on('success', (e) => {
+   *   const { intent } = e.detail;
    *   // Handle success event
    * });
    * ```
    */
-  on(event: ApplePayButtonEvent, handler: EventListener): void;
+  on<T extends ApplePayButtonEventCode>(eventCode: T, handler: ApplePayButtonEventHandler<T>): void;
   /**
-   * Using this function to confirm payment intent.
+   * Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
    * @example
    * ```ts
    * element.confirmIntent({
@@ -1624,9 +1771,9 @@ export interface ApplePayButtonElementType extends ElementBaseType {
    * });
    * ```
    */
-  confirmIntent(data: ParameterObject): Promise<Intent>;
+  confirmIntent(data: ConfirmIntentData): Promise<Intent>;
   /**
-   * Using this function to create payment consent.
+   * 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({
@@ -1658,21 +1805,12 @@ export interface ApplePayButtonElementType extends ElementBaseType {
   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.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1684,33 +1822,26 @@ export interface DropInElementType extends ElementBaseType {
    */
   update(options?: Partial<DropInElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event.
-   *
+   * Listen to the Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('success', () => {
-   *   // Handle success event
+   * element.on('success', (e) => {
+   *   const { intent } = e.detail;
+   *  // Handle success event
    * });
    * ```
    */
-  on(event: DropInElementEvent, handler: EventListener): void;
+  on<T extends DropInElementEventCode>(eventCode: T, handler: DropInElementEventHandler<T>): void;
 }
 
-export type GooglePayButtonEvent =
-  | 'ready'
-  | 'click'
-  | 'cancel'
-  | 'success'
-  | 'error'
-  | 'authorized'
-  | 'shippingAddressChange'
-  | 'shippingMethodChange';
 /**
  * Element functions can be used in your integration flow with Airwallex element.
  */
 export interface GooglePayButtonElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element. 
    * @example
    * ```ts
    * element.update({
@@ -1724,19 +1855,21 @@ export interface GooglePayButtonElementType extends ElementBaseType {
   update(options?: Partial<GooglePayButtonOptions>, initOptions?: Partial<InitOptions>): void;
 
   /**
-   * Listen to element event.
-   *
+   * Listen to Element events.
+   * @param eventCode - The event code to listen for.
+   * @param handler - The callback function that will be called when the event occurs.
    * @example
    * ```ts
-   * element.on('success', () => {
-   *   // Handle success event
+   * element.on('success', (e) => {
+   *   const { intent } = e.detail;
+   *  // Handle success event
    * });
    * ```
    */
-  on(event: GooglePayButtonEvent, handler: EventListener): void;
+  on<T extends GooglePayButtonEventCode>(eventCode: T, handler: GooglePayButtonEventHandler<T>): void;
 
   /**
-   * Using this function to confirm payment intent.
+   * Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
    * @example
    * ```ts
    * element.confirmIntent({
@@ -1744,9 +1877,9 @@ export interface GooglePayButtonElementType extends ElementBaseType {
    * });
    * ```
    */
-  confirmIntent(data: ParameterObject): Promise<Intent>;
+  confirmIntent(data: ConfirmIntentData): Promise<Intent>;
   /**
-   * Using this function to create payment consent.
+   * 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({
@@ -1763,7 +1896,7 @@ export type WechatElementEvent = 'ready' | 'success' | 'error';
  */
 export interface WechatElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1776,7 +1909,7 @@ export interface WechatElementType extends ElementBaseType {
    */
   update(options?: Partial<WechatElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event.
+   * Listen to Element events.
    *
    * @example
    * ```ts
@@ -1794,7 +1927,7 @@ export type QrcodeElementEvent = 'ready' | 'success' | 'error';
  */
 export interface QrcodeElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1806,7 +1939,7 @@ export interface QrcodeElementType extends ElementBaseType {
    */
   update(options?: Partial<QrcodeElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event.
+   * Listen to Element events.
    *
    * @example
    * ```ts
@@ -1825,7 +1958,7 @@ type FullFeaturedCardElementEvent = 'ready' | 'success' | 'error';
  */
 export interface FullFeaturedCardElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    * @example
    * ```ts
    * element.update({
@@ -1837,8 +1970,7 @@ export interface FullFeaturedCardElementType extends ElementBaseType {
    */
   update(options?: Partial<FullFeaturedCardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event.
-   *
+   * Listen to Element events.
    * @example
    * ```ts
    * element.on('change', () => {
@@ -1855,15 +1987,16 @@ export type RedirectElementEvent = 'ready' | 'success' | 'error';
  */
 export interface RedirectElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element.
+   * Call this function to update Element options after creating the Element.
    */
   update(options?: Partial<RedirectElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event.
+   * Listen to Element events.
    *
    * @example
    * ```ts
-   * element.on('change', () => {
+   * element.on('change', (e) => {
+   *    const { completed, empty, error } = e.detail;
    *   // Handle change event
    * });
    * ```