airwallex-payment-elements 1.89.0 → 1.104.0

package/types/element.d.ts

@@ -12,6 +12,7 @@ import {
   RecurringOptions,
   VerifyConsentRequest,
   PaymentConsentRequestData,
+  CreatePaymentMethodRequest,
 } from './airwallex';
 
 /**
@@ -352,11 +353,11 @@ export interface ElementEvent {
  */
 export interface PopUpStyle {
   /**
-   * Customized Popup overlay width like 3DS payment flow
+   * Customized Popup overlay width like 3DS payment flow.
    */
   popupWidth?: number;
   /**
-   * Customized Popup overlay height like 3DS payment flow
+   * Customized Popup overlay height like 3DS payment flow.
    */
   popupHeight?: number;
 }
@@ -380,13 +381,13 @@ export interface Appearance {
 }
 
 /**
- * Supported customized pseudo css style for `cardNumber` | `expiry` | `cvc` Elements
+ * Supported customized pseudo css style for `cardNumber` | `expiry` | `cvc` Elements.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  */
 type PseudoClasses = ':hover' | ':focus' | ':autofill' | '::placeholder' | '::selection' | ':disabled';
 
 /**
- * Pseudo-classes object
+ * Pseudo-classes object.
  */
 type PseudoClassStyle = { [K in PseudoClasses]?: CSSProperties };
 
@@ -418,11 +419,11 @@ export interface BoxStyle extends PopUpStyle {
    */
   base?: CSSProperties;
   /**
-   * Styling applied to the input element
+   * Styling applied to the input element.
    */
   input?: CSSProperties & PseudoClassStyle;
   /**
-   * Input variation
+   * Input variation.
    */
   variant?: 'outlined' | 'filled' | 'standard' | 'bootstrap';
 }
@@ -629,6 +630,17 @@ export interface FullFeaturedCardElementOptions {
    * The options for the recurring flow. Required when `mode` is `'recurring'`.
    */
   recurringOptions?: RecurringOptions;
+  /**
+   * Specifies whether the card payment method should be automatically saved for future transactions.
+   *
+   * This parameter is only effective in payment mode when a `customer_id` is provided.
+   *
+   * - If set to `true`, the "Save my card for future payments" checkbox will be preselected by default.
+   * - If set to `false`, the checkbox will remain unchecked, requiring the shopper to manually opt in.
+   *
+   * @defaultValue `true`
+   */
+  autoSaveCardForFuturePayments?: boolean;
 }
 
 /**
@@ -653,7 +665,7 @@ export interface ApplePayRecurringLineItem {
 
 export interface ApplePayRequestOriginalOptions {
   /**
-   * The merchant's two-letter ISO 3166 country code, e.g. 'US'.
+   * The merchant's two-letter ISO 3166 country code. For example, 'US'.
    */
   countryCode: string;
 
@@ -788,18 +800,13 @@ 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.
-   * * @defaultValue `'FINAL'`
+   *   @defaultValue `'FINAL'`
    */
   totalPriceStatus?: 'NOT_CURRENTLY_KNOWN' | 'ESTIMATED' | 'FINAL';
   /**
    * Total price label of this transaction.
-   *
-   * The string will be shown as the total price label on the cart modal
-   * dialog page.
-   *
-   * This field is optional, but required if developer wants to show cart
-   * information. Otherwise the cart modal dialog will not be rendered
-   * even if transactionInfo.displayItems is set.
+   * The string will be shown as the total price label on the cart modal dialog page.
+   * This field is optional, but required if developer wants to show cart information. Otherwise the cart modal dialog will not be rendered.
    */
   totalPriceLabel?: string;
   /**
@@ -877,11 +884,6 @@ export interface GooglePayRequestOptions {
 
   /**
    * Parameters for shipping option that can be used in this request.
-   *
-   * This should only be set if
-   * [[PaymentDataRequest.shippingOptionRequired|`PaymentDataRequest.shippingOptionRequired`]]
-   * is set to `true`.
-   *
    * Note: This field is currently for web only.
    */
   shippingOptionParameters?: google.payments.api.ShippingOptionParameters;
@@ -889,7 +891,7 @@ export interface GooglePayRequestOptions {
   /**
    * List of callbacks that the developer intents to handle.
    * Upon selection by the shopper, these intents can be used to update the
-   * request with new data based on that selection (e.g. if a shipping
+   * request with new data based on that selection (For exmaple, if a shipping
    * option is selected, the developer could update the `transactionInfo`
    * with new `totalPrice` and `diplayItems`).
    *
@@ -955,7 +957,7 @@ export interface GooglePayButtonOptions extends GooglePayRequestOptions {
   authFormContainer?: string;
   /**
    * Error displayed to the shopper for erroneous payment data.
-   * For example, you can update error when user selects the wrong shipping option
+   * For example, you can update error when user selects the wrong shipping option.
    * Note: This field is currently available for web only.
    */
   error?: google.payments.api.PaymentDataError;
@@ -1043,6 +1045,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).
    */
@@ -1060,6 +1063,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'`
@@ -1067,17 +1071,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[];
 }
@@ -1093,18 +1104,22 @@ interface Amount {
 export interface ApplePayButtonOptions extends ApplePayRequestOptions {
   /**
    * The ID of the Payment Intent you would like to checkout.
+   *
    * Required when `mode` is set to `'payment'` but optional for `'recurring'`.
+   *
    * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/)
    *
    */
   intent_id?: string;
   /**
    * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
+   *
    * Leave it empty if `intent_id` and `customer_id` are not provided as you can provide it in the update() function later.
    */
   client_secret?: string;
   /**
    * The ID of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
+   *
    * This field is required when `mode` is `'recurring'`.
    */
   customer_id?: string;
@@ -1115,18 +1130,22 @@ 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.
+   *
    * 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'`
    */
@@ -1154,6 +1173,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/)
    *
    */
@@ -1193,6 +1213,7 @@ export interface Element {
   domElement: null | HTMLElement;
   /**
    * Element integration `step #3`
+   *
    * Mounts payment Element to your HTML DOM element for checkout.
    */
   mount(domElement: string | HTMLElement): null | HTMLElement;
@@ -1249,40 +1270,32 @@ interface ElementBaseType {
    * Mounts Element to your HTML DOM.
    * @example
    * ```ts
-  // type
-  element.mount: (domElement: string | HTMLElement) => void
-
-  // There are two ways to mount the element:
-  // 1. Call with the container DOM id
-  element.mount('container-dom-id'); 
-    
-  // 2. Find the created DOM in the existing HTML and call with the container DOM element
-  const containerElement = document.getElementById('container-dom-id');
-  element.mount(containerElement); 
-  ```
-  */
+   * // There are two ways to mount the element:
+   * // 1. Call with the container DOM id
+   * element.mount('container-dom-id');
+   *
+   * // 2. Find the created DOM in the existing HTML and call with the container DOM element
+   * const containerElement = document.getElementById('container-dom-id');
+   * element.mount(containerElement);
+   * ```
+   */
   mount(domElement: string | HTMLElement): null | HTMLElement;
 
   /**
    * Unmounts the Element. Note that the Element instance will remain.
-
    * @example
    * ```ts
-    element.unmount();
-    ```
+   * element.unmount();
+   * ```
    */
   unmount(): void;
 
   /**
-   * Destroys the Element instance. 
+   * Destroys the Element instance.
    * @example
-   ```ts
-  element.destroy();
-  ```
-   *
-   * ***IMPORTANT***
-   *
-   * Once Element is destroyed by calling destroyElement() function, the Element reference is no longer valid.
+   * ```ts
+   * element.destroy();
+   * ```
    */
   destroy(): void;
 }
@@ -1294,80 +1307,84 @@ type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur' | 'change';
 export interface CardElementType extends ElementBaseType {
   /**
    * Using this function to blur the HTML Input element
-   *@example
-    ```ts
-      element.blur();
-    ```
+   * @example
+   * ```ts
+   * element.blur();
+   * ```
    */
   blur(): void;
   /**
    * Using this function to clear the HTML Input element
    * @example
-    ```ts
-      element.clear();
-    ```
+   * ```ts
+   * element.clear();
+   * ```
    */
   clear(): void;
   /**
    * Using this function to focus the HTML Input element
    * @example
-    ```ts
-      element.focus();
-    ```
+   * ```ts
+   * element.focus();
+   * ```
    */
   focus(): void;
   /**
    * Creates a Payment Consent, which represents the consent between you and the shopper to use the shopper’s saved card details for future payments.
    * @param data - Payment consent request payload
    * @example
-    ```ts
-      element.createPaymentConsent({client_secret: 'mock_client_secret'});
-    ```
+   * ```ts
+   * element.createPaymentConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
    * Using this function to verify consent
    * @param data - Verify consent request payload
    * @example
-    ```ts
-      element.verifyConsent({ 
-        consent_id: 'mock_consent_id', 
-        client_secret: 'mock_client_secret', 
-        currency: 'mock_currency' 
-      });
-    ```
+   * ```ts
+   * element.verifyConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   *   currency: 'replace-with-your-currency',
+   * });
+   * ```
    */
   verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
   /**
    * Using this function to confirm payment intent
+   *
    * Confirms the Payment Intent. Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
    * @param data - Payment method request payload
    * @example
-    ```ts
-      element.confirm({client_secret: 'mock_client_secret'});
-    ```
+   * ```ts
+   * element.confirm({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
    * Using this function to update the element option after create the element
    * @example
-    ```ts
-      element.update({autoCapture: true});
-    ```
+   * ```ts
+   * element.update({autoCapture: true});
+   * ```
    */
   update(options?: Partial<CardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
    * Listen to Element events.
-   * 
+   *
    * @param event - The event name
    * @param handler - The event handler
    * @example
-  ```ts
-    element.on('success', () => {
-      // Handle success event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('success', () => {
+   *   // Handle success event
+   * });
+   * ```
+   */
   on(event: CardElementEvent, handler: EventListener): void;
 }
 
@@ -1378,76 +1395,99 @@ export type CardNumberElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pr
  */
 export interface CardNumberElementType extends ElementBaseType {
   /**
-   * Using this function to blur the HTML Input element
+   * Using this function to blur the HTML Input element.
    * @example
-    ```ts
-      element.blur();
-    ```
+   * ```ts
+   * element.blur();
+   * ```
    */
   blur(): void;
   /**
-   * Using this function to clear the HTML Input element
+   * Using this function to clear the HTML Input element.
    * @example
-    ```ts
-      element.clear();
-    ```
+   * ```ts
+   * element.clear();
+   * ```
    */
   clear(): void;
   /**
    * Using this function to focus the HTML Input element
    * @example
-    ```ts
-      element.focus();
-    ```
+   * ```ts
+   * element.focus();
+   * ```
    */
   focus(): void;
   /**
    * Creates a Payment Consent, which represents the consent between you and the shopper to use the shopper’s saved card details for future payments.
-   *@example
-    ```ts
-      element.createPaymentConsent({client_secret: 'mock_client_secret'});
-    ```
+   * @example
+   * ```ts
+   * element.createPaymentConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
    * Using this function to verify payment consent.
-   *@example
-    ```ts
-      element.verifyConsent({ 
-        consent_id: 'mock_consent_id', 
-        client_secret: 'mock_client_secret', 
-        currency: 'mock_currency' 
-      });
-    ```
+   * @example
+   * ```ts
+   * element.verifyConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   *   currency: 'replace-with-your-currency',
+   * });
+   * ```
    */
   verifyConsent(data: VerifyConsentRequest): Promise<PaymentConsentResponse | boolean>;
   /**
    * Using this function to confirm payment intent.
+   *
    * Confirms the Payment Intent.
    *@example
-    ```ts
-      element.confirm({client_secret: 'mock_client_secret'});
-    ```
+   * ```ts
+   * element.confirm({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
-   * Using this function to update the element option after create the element
-   *@example
-    ```ts
-      element.update({autoCapture: false});
-    ```
+   * Using this function to create a payment method for future payments. The created payment method can be saved in your system.
+   * @param data - Payment method request payload
+   * @example
+   * ```ts
+   * element.createPaymentMethod({
+   *   client_secret: 'replace-with-your-client-secret',
+   *   customer_id: 'replace-with-your-customer-id',
+   *   payment_method: {
+   *     card: {
+   *       name: 'John Doe',
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  createPaymentMethod(data: CreatePaymentMethodRequest): Promise<PaymentMethodBasicInfo>;
+  /**
+   * Using this function to update the element option after create the element.
+   * @example
+   * ```ts
+   * element.update({
+   *   autoCapture: false,
+   * });
+   * ```
    */
   update(options?: Partial<CardNumberElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element events. 
-   * 
+   * Listen to element events.
+   *
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: CardNumberElementEvent, handler: EventListener): void;
 }
 
@@ -1458,114 +1498,122 @@ export type ExpiryElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressA
  */
 export interface ExpiryDateElementType extends ElementBaseType {
   /**
-   * Using this function to blur the HTML Input element
+   * Using this function to blur the HTML Input element.
    * @example
-    ```ts
-      element.blur();
-    ```
+   * ```ts
+   * element.blur();
+   * ```
    */
   blur(): void;
   /**
-   * Using this function to clear the HTML Input element
+   * Using this function to clear the HTML Input element.
    * @example
-    ```ts
-      element.clear();
-    ```
+   * ```ts
+   * element.clear();
+   * ```
    */
   clear(): void;
   /**
    * Using this function to focus the HTML Input element
    * @example
-    ```ts
-      element.focus();
-    ```
+   * ```ts
+   * element.focus();
+   * ```
    */
   focus(): void;
   /**
-   * Using this function to update the element option after create the element
-   *@example
-    ```ts
-      element.update({placeholder: 'mock placeholder'});
-    ```
+   * Using this function to update the element option after create the element.
+   * @example
+   * ```ts
+   * element.update({
+   *   placeholder: 'replace-with-your-placeholder',
+   * });
+   * ```
    */
   update(options?: Partial<ExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
    * Listen to element event
-   * 
+   *
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: ExpiryElementEvent, handler: EventListener): void;
 }
 
 export type CvcElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArrowKey' | 'submit';
 
 /**
- * Functions and external fields can be used in your integration flow with Airwallex element
+ * Element functions can be used in your integration flow with Airwallex element.
  */
 export interface CvcElementType extends ElementBaseType {
   /**
-   * Using this function to blur the HTML Input element
+   * Using this function to blur the HTML Input element.
    * @example
-    ```ts
-      element.blur();
-    ```
+   * ```ts
+   * element.blur();
+   * ```
    */
   blur(): void;
   /**
-   * Using this function to clear the HTML Input element
+   * Using this function to clear the HTML Input element.
    * @example
-    ```ts
-      element.clear();
-    ```
+   * ```ts
+   * element.clear();
+   *  ```
    */
   clear(): void;
   /**
-   * Using this function to focus the HTML Input element
+   * Using this function to focus the HTML Input element.
    * @example
-    ```ts
-      element.focus();
-    ```
+   *  ```ts
+   * element.focus();
+   * ```
    */
   focus(): void;
   /**
-   * Using this function to confirm payment intent
+   * Using this function to confirm payment intent.
    * @example
-    ```ts
-      element.confirm({client_secret: 'mocked client_secret'});
-    ```
+   * ```ts
+   * element.confirm({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   confirm(data: PaymentMethodRequestData): Promise<Intent>;
   /**
-   *  Using this function to create payment consent
+   * Using this function to create payment consent.
    * @example
-    ```ts
-      element.createPaymentConsent({client_secret: 'mocked client_secret'});
-    ```
+   * ```ts
+   * element.createPaymentConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   createPaymentConsent(data: PaymentConsentRequestData): Promise<PaymentConsentResponse>;
   /**
-   * Using this function to update the element option after create the element
+   * Using this function to update the element option after create the element.
    * @example
-    ```ts
-      element.update({placeholder: 'mocked placeholder'});
-    ```
+   * ```ts
+   * element.update({
+   *   placeholder: 'replace-with-your-placeholder',
+   * });
+   * ```
    */
   update(options?: Partial<CvcElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
    * Listen to element event
-   * 
+   *
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: CvcElementEvent, handler: EventListener): void;
 }
 
@@ -1588,72 +1636,72 @@ interface ParameterObject {
 }
 
 /**
- * Functions and external fields can be used in your integration flow with Airwallex element
+ * 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
+   * Using this function to update the element option after create the element.
    * @example
-  ```ts
-    element.update({
-      buttonType: 'donate',
-    }, {
-      locale: 'en',
-    });
-  ```
+   * ```ts
+   * element.update({
+   *   buttonType: 'donate',
+   * }, {
+   *   locale: 'en',
+   * });
+   * ```
    */
   update(options?: Partial<ApplePayButtonUpdateOptions>, initOptions?: Partial<InitOptions>): void;
 
   /**
    * Listen to element event
-   * 
+   *
    * @example
-  ```ts
-    element.on('success', () => {
-      // Handle success event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('success', () => {
+   *   // Handle success event
+   * });
+   * ```
+   */
   on(event: ApplePayButtonEvent, handler: EventListener): void;
   /**
-   * Using this function to confirm payment intent
+   * Using this function to confirm payment intent.
    * @example
-  ```ts
-    element.confirmIntent({
-      client_secret: intent?.client_secret,
-    });
-  ```
+   * ```ts
+   * element.confirmIntent({
+   *   client_secret: intent?.client_secret,
+   * });
+   * ```
    */
   confirmIntent(data: ParameterObject): Promise<Intent>;
   /**
-   * Using this function to create payment consent
+   * Using this function to create payment consent.
    * @example
-  ```ts
-    element.createPaymentConsent({
-      client_secret: intent?.client_secret,
-    });
-  ```
+   * ```ts
+   * element.createPaymentConsent({
+   *   client_secret: intent?.client_secret,
+   * });
+   * ```
    */
   createPaymentConsent(data: ParameterObject): Promise<Consent | undefined>;
   /**
    *
    * @param merchantSession - An opaque message session object.
    * @example
-  ```ts
-    element.completeValidation({
-      epochTimestamp: 1721269728247,
-      expiresAt: 1721273328247,
-      merchantSessionIdentifier: 'xxx',
-      nonce: '9c283350',
-      merchantIdentifier: 'xxx',
-      domainName: 'your domain name',
-      displayName: 'Sawayn, O\'Conner and Quigley',
-      signature: 'xxx',
-      operationalAnalyticsIdentifier: 'xxx',
-      retries: 0,
-      pspId: 'xxx',
-    });
-  ```
+   * ```ts
+   * element.completeValidation({
+   *   epochTimestamp: 1721269728247,
+   *   expiresAt: 1721273328247,
+   *   merchantSessionIdentifier: 'SSH16075688527B4E',
+   *   nonce: '9c283350',
+   *   merchantIdentifier: '3409DA66CE0',
+   *   domainName: 'your domain name',
+   *   displayName: 'Sawayn, Conner and Quigley',
+   *   signature: '308006092a86',
+   *   operationalAnalyticsIdentifier: 'Carroll, Swaniawski',
+   *   retries: 0,
+   *   pspId: '803FB3E0FC',
+   * });
+   * ```
    */
   completeValidation(merchantSession: unknown): void;
 }
@@ -1668,31 +1716,31 @@ export type DropInElementEvent =
   | 'pendingVerifyAccount';
 
 /**
- * Functions and external fields can be used in your integration flow with Airwallex element
+ * 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
+   * Using this function to update the element option after create the element.
    * @example
-  ```ts
-    element.update({
-      methods: ['card'],
-    }, {
-      locale: 'en',
-    });
-  ```
+   * ```ts
+   * element.update({
+   *   methods: ['card'],
+   * }, {
+   *   locale: 'en',
+   * });
+   * ```
    */
   update(options?: Partial<DropInElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
+   *
    * @example
-  ```ts
-    element.on('success', () => {
-      // Handle success event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('success', () => {
+   *   // Handle success event
+   * });
+   * ```
+   */
   on(event: DropInElementEvent, handler: EventListener): void;
 }
 
@@ -1706,159 +1754,166 @@ export type GooglePayButtonEvent =
   | 'shippingAddressChange'
   | 'shippingMethodChange';
 /**
- * Functions and external fields can be used in your integration flow with Airwallex element
+ * 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
+   * Using this function to update the element option after create the element.
    * @example
-  ```ts
-    element.update({
-      autoCapture: true,
-    }, {
-      locale: 'en',
-    });
+   * ```ts
+   * element.update({
+   *   autoCapture: true,
+   * }, {
+   *   locale: 'en',
+   * });
+   * ```
   ```
    */
   update(options?: Partial<GooglePayButtonOptions>, initOptions?: Partial<InitOptions>): void;
 
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
+   *
    * @example
-  ```ts
-    element.on('success', () => {
-      // Handle success event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('success', () => {
+   *   // Handle success event
+   * });
+   * ```
+   */
   on(event: GooglePayButtonEvent, handler: EventListener): void;
 
   /**
-   * Using this function to confirm payment intent
+   * Using this function to confirm payment intent.
    * @example
-  ```ts
-    element.confirmIntent({
-      client_secret: 'xxx'
-    });
-  ```
+   * ```ts
+   * element.confirmIntent({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   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({
-      client_secret: 'xxx'
-    });
-  ```
+   * Using this function to create payment consent.
+   * @example
+   * ```ts
+   * element.createPaymentConsent({
+   *   client_secret: 'replace-with-your-client-secret',
+   * });
+   * ```
    */
   createPaymentConsent(data: ParameterObject): Promise<Consent | undefined>;
 }
 
 export type WechatElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated Use {@link DropInElementType} instead
+ * @deprecated Use {@link DropInElementType} instead.
  */
 export interface WechatElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element
-  * @example
-  ```ts
-    element.update({
-      intent: {
-        id: 'xxx',
-        client_secret: 'xxx',
-      }
-    });
-  ```
+   * Using this function to update the element option after create the element.
+   * @example
+   * ```ts
+   * element.update({
+   *   intent: {
+   *     id: 'replace-with-your-intent-id',
+   *     client_secret: 'replace-with-your-client-secret',
+   *   }
+   * });
+   * ```
    */
   update(options?: Partial<WechatElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
+   *
    * @example
-  ```ts
-    element.on('ready', () => {
-      // Handle ready event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('ready', () => {
+   *   // Handle ready event
+   * });
+   * ```
+   */
   on(event: WechatElementEvent, handler: EventListener): void;
 }
 
 export type QrcodeElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated Use {@link DropInElementType} instead
+ * @deprecated Use {@link DropInElementType} instead.
  */
 export interface QrcodeElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element
+   * Using this function to update the element option after create the element.
+   * @example
+   * ```ts
+   * element.update({
+   *   autoCapture: true,
+   * }, {
+   *   locale: 'en',
+   * });
+   * ```
    */
   update(options?: Partial<QrcodeElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
+   *
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: QrcodeElementEvent, handler: EventListener): void;
 }
 
 type FullFeaturedCardElementEvent = 'ready' | 'success' | 'error';
 
 /**
- * @deprecated Use {@link DropInElementType} instead
+ * @deprecated Use {@link DropInElementType} instead.
  */
 export interface FullFeaturedCardElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element
+   * Using this function to update the element option after create the element.
    * @example
-  ```ts
-    element.update({
-      autoCapture: true,
-    }, {
-      locale: 'en',
-    });
-    ```
+   * ```ts
+   * element.update({
+   *   autoCapture: true,
+   * }, {
+   *   locale: 'en',
+   * });
+   *  ```
    */
   update(options?: Partial<FullFeaturedCardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: FullFeaturedCardElementEvent, handler: EventListener): void;
 }
 
 export type RedirectElementEvent = 'ready' | 'success' | 'error';
 /**
- * @deprecated Use {@link DropInElementType} instead
+ * @deprecated Use {@link DropInElementType} instead.
  */
 export interface RedirectElementType extends ElementBaseType {
   /**
-   * Using this function to update the element option after create the element
+   * Using this function to update the element option after create the element.
    */
   update(options?: Partial<RedirectElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
-   * 
+   * Listen to element event.
+   *
    * @example
-  ```ts
-    element.on('change', () => {
-      // Handle change event
-    });
-  ```
-  */
+   * ```ts
+   * element.on('change', () => {
+   *   // Handle change event
+   * });
+   * ```
+   */
   on(event: RedirectElementEvent, handler: EventListener): void;
 }