airwallex-payment-elements 1.62.0 → 1.89.0

package/types/element.d.ts

@@ -1,29 +1,33 @@
 import { Intent, PaymentMethodBasicInfo } from './cardNumber';
-import { Properties } from 'csstype';
 import { PaymentMethodWithQrcode, QrcodeElementOptions } from './qrcodeElement';
-import { AuthorizationType, Consent, RecurringOptions } from './airwallex';
 import { DropInElementOptions } from './dropInElement';
 import { RedirectElementOptions } from './redirectElement';
-import { Mode, InitOptions, PaymentMethod, PaymentConsentRequest, PaymentConsentResponse } from './airwallex';
-
-export type PaymentMethodRequest = Omit<PaymentMethod, 'element'>;
-export type CreatePaymentConsentRequest = Omit<PaymentConsentRequest, 'element'>;
+import {
+  Mode,
+  InitOptions,
+  PaymentMethodRequestData,
+  PaymentConsentResponse,
+  AuthorizationType,
+  Consent,
+  RecurringOptions,
+  VerifyConsentRequest,
+  PaymentConsentRequestData,
+} from './airwallex';
 
 /**
- * All the flows supported by Local Payment Methods
+ * 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`
+ * `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.
+ * 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'
@@ -262,6 +266,7 @@ export interface EventDetail {
    */
   type: ElementType | 'threeDsFrictionless' | 'threeDsChallenge';
   /**
+
    * Whether the element input is in a valid format or not.
    */
   complete?: boolean;
@@ -366,72 +371,56 @@ export type SelectorAllowed =
   | '.ApplePayButton:hover'
   | '.Input:hover'
   | '.Input:active';
-export interface Appearance {
-  rules?: Record<SelectorAllowed, Properties>;
-}
 
-/**
- * Config based options for element integration supported for ElementType.
- */
-export interface ElementOptions {
-  /**
-   * * Element container css style camelcase option, default style by Chrome browser.
-   */
-  style?: PopUpStyle & Properties;
-  /**
-   * The checkout website origin url, i.e.,'window.location.origin' field of the merchant's checkout page.
-   */
-  origin?: string;
-  /**
-   * Customize the payment Element to match the design of your site.
-   * The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.
-   */
-  appearance?: Appearance;
+export interface CSSProperties {
+  [CSSPropertyName: string]: string | number | undefined;
+}
+export interface Appearance {
+  rules?: Partial<Record<SelectorAllowed, CSSProperties>>;
 }
 
 /**
  * Supported customized pseudo css style for `cardNumber` | `expiry` | `cvc` Elements
  * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  */
-type PseudoClasses = ':hover' | ':focus' | '::placeholder' | '::selection' | ':disabled';
+type PseudoClasses = ':hover' | ':focus' | ':autofill' | '::placeholder' | '::selection' | ':disabled';
 
 /**
  * Pseudo-classes object
  */
-type PseudoClassStyle = { [K in PseudoClasses]?: Properties };
+type PseudoClassStyle = { [K in PseudoClasses]?: CSSProperties };
 
 /**
- * Customize the input element using CSS properties.
+ * 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 & Properties;
+  base?: PseudoClassStyle & CSSProperties;
   /**
    * Styling applied to the input element when a field passes validation.
    */
-  valid?: Properties;
+  valid?: CSSProperties;
   /**
    * Styling applied to the input element when a field fails validation.
    */
-  invalid?: Properties;
+  invalid?: CSSProperties;
 }
 
 /**
- * Customize `dropIn`, `fullFeaturedCard`,  and hosted payment page integration layout by using CSS properties
- *
+ * 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?: Properties;
+  base?: CSSProperties;
   /**
    * Styling applied to the input element
    */
-  input?: Properties & PseudoClassStyle;
+  input?: CSSProperties & PseudoClassStyle;
   /**
    * Input variation
    */
@@ -441,18 +430,23 @@ export interface BoxStyle extends PopUpStyle {
 /**
  * Applies to `card` element type integration, the interface used when `createElement()` is called with type `card`.
  */
-export interface CardElementOptions extends ElementOptions {
+export interface CardElementOptions {
   /**
-   *  Whether the Element input is disabled or not.  Defaults to `false`.
+   *  Whether the Element input is disabled or not.
+   * @defaultValue `false`
    */
   disabled?: boolean;
   /**
-   *  Whether the amount should be captured automatically upon successful payment authorization. Defaults to `true` if authorization type is `final_auth` and `false` for `pre_auth`. Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
+   *  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`. Defaults to `final_auth` to enable funds to be captured immediately after successful authorization.
-   * 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. You should also set `autoCapture` to `false` if you want to enable pre_auth.
+   * 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;
   /**
@@ -472,25 +466,29 @@ export interface CardElementOptions extends ElementOptions {
 /**
  * Applies to split card element type integration, the interface used when `createElement()` called with type `cardNumber`
  */
-export interface CardNumberElementOptions extends ElementOptions {
+export interface CardNumberElementOptions {
   /**
-   *  Whether the `cardNumber` Element input is disabled or not. Defaults to `false`.
+   *  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/Intro)
+   * 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. Defaults to `true` if authorization type is `final_auth` and `false` for `pre_auth`. Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
+   * 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`. Defaults to `final_auth` to enable funds to be captured immediately after successful authorization.
-   * 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. You should also set `autoCapture` to `false` if you want to enable pre_auth.
+   * 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;
   /**
@@ -514,9 +512,10 @@ export interface CardNumberElementOptions extends ElementOptions {
 /**
  * Applies to split card element type integration, the interface used when `createElement()` with type `expiry`.
  */
-export interface ExpiryDateElementOptions extends ElementOptions {
+export interface ExpiryDateElementOptions {
   /**
-   *  Whether the `expiry` Element input is disabled or not. Defaults to `false`.
+   *  Whether the `expiry` Element input is disabled or not.
+   * @defaultValue `false`
    */
   disabled?: boolean;
   /**
@@ -532,9 +531,10 @@ export interface ExpiryDateElementOptions extends ElementOptions {
 /**
  * Applies to split card element type integration, the interface used when `createElement()` called with type `cvc`.
  */
-export interface CvcElementOptions extends ElementOptions {
+export interface CvcElementOptions {
   /**
-   *  Whether the `cvc` Element input is disabled or not. Defaults to `false`.
+   * Whether the `cvc` Element input is disabled or not.
+   * @defaultValue `false`
    */
   disabled?: boolean;
   /**
@@ -554,7 +554,7 @@ export interface CvcElementOptions extends ElementOptions {
    */
   authFormContainer?: string;
   /**
-   * Whether cvc Elemment 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;
@@ -563,7 +563,11 @@ export interface CvcElementOptions extends ElementOptions {
 /**
  * Applies to full featured card element type integration, the interface used when `createElement()` called with type `fullFeaturedCard`.
  */
-export interface FullFeaturedCardElementOptions extends ElementOptions {
+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.
    */
@@ -573,22 +577,26 @@ export interface FullFeaturedCardElementOptions extends ElementOptions {
    */
   mode?: 'payment' | 'recurring';
   /**
-   * The ID of the Payment Intent you would like to checkout. Required when `mode` is `payment`.
+   * 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/Intro)
-   * @deprecated Please use client_secret and intent_id directly
+   * 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. Defaults to `true` if authorization type is `final_auth` and `false` for `pre_auth`. Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
+   * 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`. Defaults to `final_auth` to enable funds to be captured immediately after successful authorization.
-   * 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. You should also set `autoCapture` to `false` if you want to enable pre_auth.
+   * 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;
   /**
@@ -597,6 +605,7 @@ export interface FullFeaturedCardElementOptions extends ElementOptions {
   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;
   /**
@@ -604,7 +613,7 @@ export interface FullFeaturedCardElementOptions extends ElementOptions {
    */
   requiredBillingContactFields?: ContactField[];
   /**
-   * Style for the fullFeaturedCard Element.
+   * Box style for the fullFeaturedCard Element.
    */
   style?: BoxStyle;
   /**
@@ -613,11 +622,11 @@ export interface FullFeaturedCardElementOptions extends ElementOptions {
   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`.
+   * This field is required when `mode` is `'recurring'`.
    */
   customer_id?: string;
   /**
-   * The options for the recurring flow. Required when `mode` is `recurring`.
+   * The options for the recurring flow. Required when `mode` is `'recurring'`.
    */
   recurringOptions?: RecurringOptions;
 }
@@ -628,22 +637,19 @@ export interface FullFeaturedCardElementOptions extends ElementOptions {
 export interface PaymentShippingOption {
   id: string;
   label: string;
-  amount: {
-    currency: string;
-    value: string;
-  };
+  amount: Amount;
   selected: boolean;
 }
 
 export type ApplePayHppOrDropInRequestOptions = ApplePayRequestOptions;
 
-export type ApplePayRecurringLineItem = {
+export interface ApplePayRecurringLineItem {
   paymentTiming: 'recurring' | 'deferred';
   recurringPaymentStartDate: Date;
   recurringPaymentIntervalUnit: 'year' | 'month' | 'day' | 'hour' | 'minute';
   recurringPaymentIntervalCount: number;
   recurringPaymentEndDate: Date;
-};
+}
 
 export interface ApplePayRequestOriginalOptions {
   /**
@@ -654,7 +660,7 @@ export interface ApplePayRequestOriginalOptions {
   /**
    * A set of line items that explain recurring payments and/or additional charges.
    */
-  lineItems?: (ApplePayJS.ApplePayLineItem & ApplePayRecurringLineItem)[];
+  lineItems?: ApplePayJS.ApplePayLineItem[];
 
   /**
    * Billing contact information for the shopper.
@@ -714,7 +720,7 @@ export interface GooglePayHppRequestOptions extends Omit<GooglePayRequestOptions
 
 export type CardNetwork = 'visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover';
 
-export type GoogleSupportedCardNetWork = 'MASTERCARD' | 'MAESTRO' | 'VISA';
+export type GoogleSupportedCardNetWork = 'MASTERCARD' | 'MAESTRO' | 'VISA' | 'AMEX' | 'DISCOVER' | 'JCB';
 export interface GooglePayRequestOptions {
   /**
    * The two-letter ISO-3166 country code.
@@ -733,26 +739,25 @@ export interface GooglePayRequestOptions {
   /**
    *  Whether the shopper must provide their email.
    *
-   * @default "false"
+   * @defaultValue `false`
    */
   emailRequired?: boolean;
   /**
    * Specifies the text to be displayed within the Google Pay button.
    *
-   * @default "buy"
    */
   buttonType?: google.payments.api.ButtonType;
   /**
    * Specifies the button color of the Google Pay button.
    *
-   * @default "default"
+   * @defaultValue `'default'`
    */
   buttonColor?: google.payments.api.ButtonColor;
   /**
    * Determines how the button's size should change relative to the
    * button's parent element.
    *
-   * @default "static"
+   * @defaultValue `'static'`
    */
   buttonSizeMode?: google.payments.api.ButtonSizeMode;
   /**
@@ -783,7 +788,7 @@ export interface GooglePayRequestOptions {
    * - `FINAL`:
    *   The total price is the final total price of the transaction, and will
    *   not change based on selections made by the shopper.
-   * * @default "FINAL"
+   * * @defaultValue `'FINAL'`
    */
   totalPriceStatus?: 'NOT_CURRENTLY_KNOWN' | 'ESTIMATED' | 'FINAL';
   /**
@@ -804,54 +809,39 @@ export interface GooglePayRequestOptions {
   /**
    * Defines callback methods for handling changed payment data and payment
    * authorized events.
-   *
-   * If you set up Dynamic Price Updates in your integration, make sure you add
-   * the following [[PaymentDataChangedHandler|`onPaymentDataChanged`]] and
-   * [[PaymentAuthorizedHandler|`onPaymentAuthorized`]] callbacks.
-   *
-   * Example:
-   *
-   * The following example configuration uses the callbacks needed to set up
-   * Dynamic Price Updates:
-   *
-   * ```js
-   * {
-   *   onPaymentDataChanged: onPaymentDataChanged,
-   *   onPaymentAuthorized: onPaymentAuthorized
-   * }
-   * ```
    */
   paymentDataCallbacks?: google.payments.api.PaymentDataCallbacks;
   /**
-   * Allowed authentication methods. The default value is ["PAN_ONLY", "CRYPTOGRAM_3DS"]
+   * Allowed authentication methods.
+   * @defaultValue `['PAN_ONLY', 'CRYPTOGRAM_3DS']`
    */
   allowedAuthMethods?: google.payments.api.CardAuthMethod[];
   /**
-   * One or more card networks that you support. The default value is ["MASTERCARD", "MAESTRO", "VISA"]
+   * One or more card networks that you support.
    */
   allowedCardNetworks?: GoogleSupportedCardNetWork[];
   /**
    * Whether a prepaid card may be used for this transaction.
    *
-   * @default true
+   * @defaultValue `true`
    */
   allowPrepaidCards?: boolean;
   /**
    * Whether a credit card may be used for this transaction.
    *
-   * @default true
+   * @defaultValue `true`
    */
   allowCreditCards?: boolean;
   /**
    * Set to `true` if you need information about the validation performed on the returned payment data.
    *
-   * @default false
+   * @defaultValue `false`
    */
   assuranceDetailsRequired?: boolean;
   /**
    * Whether a billing address is required from the shopper.
    *
-   * @default false
+   * @defaultValue `false`
    */
   billingAddressRequired?: boolean;
 
@@ -862,16 +852,12 @@ export interface GooglePayRequestOptions {
   /**
    * Whether a shipping address is required from the shopper.
    *
-   * @default false
+   * @defaultValue `false`
    */
   shippingAddressRequired?: false | true | undefined;
 
   /**
-   * Optional shipping address parameters.
-   *
-   * If omitted, the default values specified in
-   * [[ShippingAddressParameters|`ShippingAddressParameters`]] will be
-   * used.
+   * Optional shipping address parameters for the returned shipping address.
    */
   shippingAddressParameters?: google.payments.api.ShippingAddressParameters;
   /**
@@ -885,7 +871,7 @@ export interface GooglePayRequestOptions {
    *
    * Note: This field is currently for web only.
    *
-   * @default false
+   * @defaultValue `false`
    */
   shippingOptionRequired?: boolean;
 
@@ -907,55 +893,60 @@ export interface GooglePayRequestOptions {
    * option is selected, the developer could update the `transactionInfo`
    * with new `totalPrice` and `diplayItems`).
    *
-   * Note: This functionality is only available for web.
    */
   callbackIntents?: google.payments.api.CallbackIntent[];
 }
 
-export interface GooglePayButtonOptions extends GooglePayRequestOptions, ElementOptions {
+/**
+ * Applies to `googlePayButton` element type integration, the interface used when `createElement()` is called with type `googlePayButton`.
+ */
+export interface GooglePayButtonOptions extends GooglePayRequestOptions {
+  /**
+   * The layout of each element stays consistent, but you can modify width, height, and more.
+   */
+  appearance?: Appearance;
+  /**
+   * Box style and 3ds popUp style for the GooglePayButton Element.
+   */
+  style?: CSSProperties & PopUpStyle;
   /**
    * The ID of the Payment Intent you would like to checkout.
-   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
+   * 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.
+   * 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`.
+   * 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.
-   * @example
-   * If the mode is set to `recurring` and intent_id omitted, amount should be {value: 0, currency: 'Replace with payment currency'}.
+   * If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
    */
-  amount: {
-    value: number;
-    currency: string;
-  };
+  amount: Amount;
 
   /**
    * Whether the amount should be captured automatically upon successful payment authorization.
-   * Defaults to `true` if authorization type is `final_auth` and `false` for `pre_auth`.
    * Set it to `false` if you want to place a hold on the payment method and capture the funds sometime later.
-   * @defaultValue `true` if authorization type is `final_auth` and `false` for `pre_auth`.
+   * @defaultValue `true`
    */
   autoCapture?: boolean;
   /**
-   * The authorization type for the card payment. Options include: `pre_auth`, `final_auth`. Defaults to `final_auth` to enable funds to be captured immediately after successful authorization.
-   * 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. You should also set `autoCapture` to `false` if you want to enable pre_auth.
+   * 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"
+   * @defaultValue `'final_auth'`
    */
   authorizationType?: AuthorizationType;
   /**
@@ -974,19 +965,94 @@ 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 {
   /**
-   * 	Indicate the type of button you want displayed on your payment form, e.g.,'donate'
-   *  https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css
+   * 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?: string;
+  buttonType?: ApplePayButtonType;
   /**
    * Indicate the color of the button.
    *
-   * @defaultValue "black"
+   * @defaultValue `'black'`
    */
-  buttonColor?: 'black' | 'white' | ' white-with-line';
+  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.".
    *
@@ -996,7 +1062,7 @@ export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
    * 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"
+   * @defaultValue `'final'`
    */
   totalPriceType?: 'final' | 'pending';
   /**
@@ -1015,51 +1081,64 @@ export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
    */
   merchantCapabilities?: ApplePayJS.ApplePayMerchantCapability[];
 }
-export interface ApplePayButtonOptions extends ElementOptions, ApplePayRequestOptions {
+
+interface Amount {
+  value: number;
+  currency: string;
+}
+
+/**
+ * Applies to `applePayButton` element type integration, the interface used when `createElement()` is called with type `applePayButton`.
+ */
+export interface ApplePayButtonOptions extends ApplePayRequestOptions {
   /**
    * The ID of the Payment Intent you would like to checkout.
-   * Required when `mode` is set to `payment` but optional for `recurring`.
-   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
+   * 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.
+   * 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`.
+   * This field is required when `mode` is `'recurring'`.
    */
   customer_id?: string;
   /**
    * The checkout mode for the shopper.
-   * @default "payment"
+   * @defaultValue `'payment'`
    */
   mode?: Mode;
   /**
    * Indicate the amount and currency of the Payment Intent.
-   * @example
-   * If the mode is set to `recurring` and intent_id omitted, amount should be {value: 0, currency: 'Replace with payment currency'}.
+   * If the `mode` is set to `'recurring'` and `intent_id` omitted, amount should be `{value: 0, currency: 'Replace with payment currency'}`.
    */
-  amount: {
-    value: number;
-    currency: string;
-  };
+  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` if authorization type is `final_auth` and `false` for `pre_auth`.
+   * @defaultValue `true`
    */
   autoCapture?: boolean;
   /**
-   * The authorization type for the card payment. Options include: `pre_auth`, `final_auth`. Defaults to `final_auth` to enable funds to be captured immediately after successful authorization.
-   * 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. You should also set `autoCapture` to `false` if you want to enable `pre_auth`.
-   * @defaultValue `final_auth`
+   * The authorization type for the card payment.
+   * Set it to `'pre_auth'` if you want to place a hold on your customer’s card for more than 7 days, i.e., extend the authorization time window.
+   * Currently it's only available when the card brand is Visa or Mastercard. `autoCapture` will be automatically set to `false` if you enable `pre_auth`.
+   * @defaultValue `'final_auth'`
    */
   authorizationType?: AuthorizationType;
+  /**
+   * The layout of each element stays consistent, but you can modify width, height, and more.
+   */
+  appearance?: Appearance;
+  /**
+   * Box style for the ApplePayButton Element.
+   */
+  style?: CSSProperties;
 }
 
 export interface ApplePayButtonUpdateOptions extends ApplePayButtonOptions {
@@ -1072,23 +1151,21 @@ export interface ApplePayButtonUpdateOptions extends ApplePayButtonOptions {
 /**
  * Apply to wechat Element type integration, the interface used when createElemen() is called with type `wechat`.
  */
-export interface WechatElementOptions extends ElementOptions {
+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/Intro)
+   * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
    *
    */
   intent?: Intent;
+  /**
+   * Box style for the WechatElement Element.
+   */
+  style?: CSSProperties;
 }
 
 /**
  * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
- *
- * Two ways to get elements: createElement() function or getElement() function
- *
- * ***IMPORTANT***
- *
- * Once Element is destroyed by calling destroyElement() function, the Element reference is no longer valid.
  */
 export interface Element {
   /**
@@ -1120,16 +1197,16 @@ export interface Element {
    */
   mount(domElement: string | HTMLElement): null | HTMLElement;
   /**
-   * Blurs the input html Element.
+   * Blurs the the HTML Input element.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
    */
   blur(): void;
   /**
-   * Clears the input html Element.
+   * Clears the the HTML Input element.
    */
   clear(): void;
   /**
-   * Focuses the input html Element.
+   * Focuses the the HTML Input element.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
    */
   focus(): void;
@@ -1168,10 +1245,6 @@ interface ElementBaseType {
    * The DOM element you called in the mount() function.
    */
   domElement: null | HTMLElement;
-  /**
-   * Element integration `step #3`
-   * Mounts payment Element to your HTML DOM element for checkout.
-   */
   /**
    * Mounts Element to your HTML DOM.
    * @example
@@ -1184,7 +1257,7 @@ interface ElementBaseType {
   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");
+  const containerElement = document.getElementById('container-dom-id');
   element.mount(containerElement); 
   ```
   */
@@ -1214,13 +1287,13 @@ interface ElementBaseType {
   destroy(): void;
 }
 
-type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur';
+type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur' | 'change';
 /**
  * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
  */
 export interface CardElementType extends ElementBaseType {
   /**
-   * Using this function to blur the input html element
+   * Using this function to blur the HTML Input element
    *@example
     ```ts
       element.blur();
@@ -1228,16 +1301,16 @@ export interface CardElementType extends ElementBaseType {
    */
   blur(): void;
   /**
-   * Using this function to clear the input html element
-     *@example
+   * Using this function to clear the HTML Input element
+   * @example
     ```ts
       element.clear();
     ```
    */
   clear(): void;
   /**
-   * Using this function to focus the input html element
-      *@example
+   * Using this function to focus the HTML Input element
+   * @example
     ```ts
       element.focus();
     ```
@@ -1245,33 +1318,49 @@ 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.
-   * @param data Payment consent request
-   *@example
+   * @param data - Payment consent request payload
+   * @example
     ```ts
       element.createPaymentConsent({client_secret: 'mock_client_secret'});
     ```
    */
-  createPaymentConsent(data: CreatePaymentConsentRequest): Promise<PaymentConsentResponse>;
+  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
+   * Using this function to verify consent
+   * @param data - Verify consent request payload
+   * @example
+    ```ts
+      element.verifyConsent({ 
+        consent_id: 'mock_consent_id', 
+        client_secret: 'mock_client_secret', 
+        currency: 'mock_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
-   *@example
+   * @param data - Payment method request payload
+   * @example
     ```ts
       element.confirm({client_secret: 'mock_client_secret'});
     ```
    */
-  confirm(data: PaymentMethodRequest): Promise<Intent>;
+  confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
    * Using this function to update the element option after create the element
-   *@example
+   * @example
     ```ts
-      element.confirm({client_secret: 'mock_client_secret'});
+      element.update({autoCapture: true});
     ```
    */
   update(options?: Partial<CardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
    * Listen to Element events.
    * 
+   * @param event - The event name
+   * @param handler - The event handler
    * @example
   ```ts
     element.on('success', () => {
@@ -1289,25 +1378,24 @@ export type CardNumberElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pr
  */
 export interface CardNumberElementType extends ElementBaseType {
   /**
-   * Using this function to blur the input html element
-   *@example
+   * Using this function to blur the HTML Input element
+   * @example
     ```ts
       element.blur();
     ```
    */
   blur(): void;
   /**
-   * Using this function to clear the input html element
-   *@example
+   * Using this function to clear the HTML Input element
+   * @example
     ```ts
       element.clear();
     ```
    */
   clear(): void;
   /**
-   * Using this function to focus the input html element
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
-   *@example
+   * Using this function to focus the HTML Input element
+   * @example
     ```ts
       element.focus();
     ```
@@ -1315,22 +1403,33 @@ 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.
-   * @param data Payment consent request
    *@example
     ```ts
       element.createPaymentConsent({client_secret: 'mock_client_secret'});
     ```
    */
-  createPaymentConsent(data: CreatePaymentConsentRequest): Promise<PaymentConsentResponse>;
+  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
+   * Using this function to verify payment consent.
+   *@example
+    ```ts
+      element.verifyConsent({ 
+        consent_id: 'mock_consent_id', 
+        client_secret: 'mock_client_secret', 
+        currency: 'mock_currency' 
+      });
+    ```
+   */
+  verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
+  /**
+   * Using this function to confirm payment intent.
    * Confirms the Payment Intent.
-   * @param data Payment method
    *@example
     ```ts
       element.confirm({client_secret: 'mock_client_secret'});
     ```
    */
-  confirm(data: PaymentMethodRequest): Promise<Intent>;
+  confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
    * Using this function to update the element option after create the element
    *@example
@@ -1355,28 +1454,28 @@ export interface CardNumberElementType extends ElementBaseType {
 export type ExpiryElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey';
 
 /**
- * Functions and external fields can be used in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex element
  */
 export interface ExpiryDateElementType extends ElementBaseType {
   /**
-   * Using this function to blur the input html element
-   *@example
+   * Using this function to blur the HTML Input element
+   * @example
     ```ts
       element.blur();
     ```
    */
   blur(): void;
   /**
-   * Using this function to clear the input html element
-   *@example
+   * Using this function to clear the HTML Input element
+   * @example
     ```ts
       element.clear();
     ```
    */
   clear(): void;
   /**
-   * Using this function to focus the input html element
-   *@example
+   * Using this function to focus the HTML Input element
+   * @example
     ```ts
       element.focus();
     ```
@@ -1406,28 +1505,28 @@ export interface ExpiryDateElementType extends ElementBaseType {
 export type CvcElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey' | 'submit';
 
 /**
- * Functions and external fields can be used in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex element
  */
 export interface CvcElementType extends ElementBaseType {
   /**
-   * Using this function to blur the input html element
-   *@example
+   * Using this function to blur the HTML Input element
+   * @example
     ```ts
       element.blur();
     ```
    */
   blur(): void;
   /**
-   * Using this function to clear the input html element
-   *@example
+   * Using this function to clear the HTML Input element
+   * @example
     ```ts
       element.clear();
     ```
    */
   clear(): void;
   /**
-   * Using this function to focus the input html element
-   *@example
+   * Using this function to focus the HTML Input element
+   * @example
     ```ts
       element.focus();
     ```
@@ -1435,25 +1534,23 @@ export interface CvcElementType extends ElementBaseType {
   focus(): void;
   /**
    * Using this function to confirm payment intent
-   * @param data Payment method
-   *@example
+   * @example
     ```ts
       element.confirm({client_secret: 'mocked client_secret'});
     ```
    */
-  confirm(data: PaymentMethodRequest): Promise<Intent>;
+  confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
    *  Using this function to create payment consent
-   * @param data Payment consent request
-   *@example
+   * @example
     ```ts
       element.createPaymentConsent({client_secret: 'mocked client_secret'});
     ```
    */
-  createPaymentConsent(data: CreatePaymentConsentRequest): Promise<PaymentConsentResponse>;
+  createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
    * Using this function to update the element option after create the element
-   *@example
+   * @example
     ```ts
       element.update({placeholder: 'mocked placeholder'});
     ```
@@ -1483,8 +1580,15 @@ export type ApplePayButtonEvent =
   | 'success'
   | 'error';
 
+interface ParameterObject {
+  /**
+   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
+   */
+  client_secret: string;
+}
+
 /**
- * Functions and external fields can be used in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex element
  */
 export interface ApplePayButtonElementType extends ElementBaseType {
   /**
@@ -1513,7 +1617,6 @@ export interface ApplePayButtonElementType extends ElementBaseType {
   on(event: ApplePayButtonEvent, handler: EventListener): void;
   /**
    * Using this function to confirm payment intent
-   * @param data client_secret returned in create intent response
    * @example
   ```ts
     element.confirmIntent({
@@ -1521,10 +1624,9 @@ export interface ApplePayButtonElementType extends ElementBaseType {
     });
   ```
    */
-  confirmIntent(data: { client_secret?: string }): Promise<Intent>;
+  confirmIntent(data: ParameterObject): Promise<Intent>;
   /**
    * Using this function to create payment consent
-   * @param data client_secret returned in create intent response or returned in create customer response
    * @example
   ```ts
     element.createPaymentConsent({
@@ -1532,33 +1634,33 @@ export interface ApplePayButtonElementType extends ElementBaseType {
     });
   ```
    */
-  createPaymentConsent(data: { client_secret: string }): Promise<Consent | undefined>;
+  createPaymentConsent(data: ParameterObject): Promise<Consent | undefined>;
   /**
    *
-   * @param data apple pay session data
+   * @param merchantSession - An opaque message session object.
    * @example
   ```ts
     element.completeValidation({
-    "epochTimestamp": 1721269728247,
-    "expiresAt": 1721273328247,
-    "merchantSessionIdentifier": "xxx",
-    "nonce": "9c283350",
-    "merchantIdentifier": "xxx",
-    "domainName": "your domain name",
-    "displayName": "Sawayn, O'Conner and Quigley",
-    "signature": "xxx",
-    "operationalAnalyticsIdentifier": "xxx",
-    "retries": 0,
-    "pspId": "xxx"
-  });
+      epochTimestamp: 1721269728247,
+      expiresAt: 1721273328247,
+      merchantSessionIdentifier: 'xxx',
+      nonce: '9c283350',
+      merchantIdentifier: 'xxx',
+      domainName: 'your domain name',
+      displayName: 'Sawayn, O\'Conner and Quigley',
+      signature: 'xxx',
+      operationalAnalyticsIdentifier: 'xxx',
+      retries: 0,
+      pspId: 'xxx',
+    });
   ```
    */
-  completeValidation(data: unknown): void;
+  completeValidation(merchantSession: unknown): void;
 }
 
 export type DropInElementEvent =
   | 'ready'
-  | 'click'
+  | 'clickConfirmButton'
   | 'cancel'
   | 'success'
   | 'error'
@@ -1566,7 +1668,7 @@ export type DropInElementEvent =
   | 'pendingVerifyAccount';
 
 /**
- * Functions and external fields can be used in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex element
  */
 export interface DropInElementType extends ElementBaseType {
   /**
@@ -1604,7 +1706,7 @@ export type GooglePayButtonEvent =
   | 'shippingAddressChange'
   | 'shippingMethodChange';
 /**
- * Functions and external fields can be used in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex element
  */
 export interface GooglePayButtonElementType extends ElementBaseType {
   /**
@@ -1634,7 +1736,6 @@ export interface GooglePayButtonElementType extends ElementBaseType {
 
   /**
    * Using this function to confirm payment intent
-   * @param data client_secret returned in create intent response
    * @example
   ```ts
     element.confirmIntent({
@@ -1642,7 +1743,7 @@ export interface GooglePayButtonElementType extends ElementBaseType {
     });
   ```
    */
-  confirmIntent(data: { client_secret: string }): Promise<Intent>;
+  confirmIntent(data: ParameterObject): Promise<Intent>;
   /**
    * Using this function to create payment consent
    * @param data client_secret returned in create intent response or returned in create customer response
@@ -1653,12 +1754,12 @@ export interface GooglePayButtonElementType extends ElementBaseType {
     });
   ```
    */
-  createPaymentConsent(data: { client_secret: string }): Promise<Consent | undefined>;
+  createPaymentConsent(data: ParameterObject): Promise<Consent | undefined>;
 }
 
 export type WechatElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated
+ * @deprecated Use {@link DropInElementType} instead
  */
 export interface WechatElementType extends ElementBaseType {
   /**
@@ -1689,7 +1790,7 @@ export interface WechatElementType extends ElementBaseType {
 
 export type QrcodeElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated
+ * @deprecated Use {@link DropInElementType} instead
  */
 export interface QrcodeElementType extends ElementBaseType {
   /**
@@ -1712,7 +1813,7 @@ export interface QrcodeElementType extends ElementBaseType {
 type FullFeaturedCardElementEvent = 'ready' | 'success' | 'error';
 
 /**
- * @deprecated
+ * @deprecated Use {@link DropInElementType} instead
  */
 export interface FullFeaturedCardElementType extends ElementBaseType {
   /**
@@ -1742,7 +1843,7 @@ export interface FullFeaturedCardElementType extends ElementBaseType {
 
 export type RedirectElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated
+ * @deprecated Use {@link DropInElementType} instead
  */
 export interface RedirectElementType extends ElementBaseType {
   /**