airwallex-payment-elements 1.45.0 → 1.59.2

package/types/element.d.ts

@@ -10,20 +10,20 @@ export type PaymentMethodRequest = Omit<PaymentMethod, 'element'>;
 export type CreatePaymentConsentRequest = Omit<PaymentConsentRequest, 'element'>;
 
 /**
- * All the flows that 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 `country_code` and `address` only need to pick one
+ * so provide either `country_code` or `address`
  */
 export type ContactField = 'name' | 'email' | 'country_code' | 'address' | 'phone';
 
 /**
- * Supported integration element type
- * We encourage to use `dropIn` element, since it's easy to scale new payment methods
- * We suggest to NOT use `applePayButton`, `googlePayButton`, `wechat`, `qrcode`, `redirect` and `fullFeaturedCard` elements
+ * 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'
@@ -39,7 +39,7 @@ export type ElementType =
   | 'fullFeaturedCard';
 
 /**
- * All payment method options for redirect element, those payment method type integration will trigger redirection from your checkout site to 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'
@@ -123,7 +123,8 @@ export type PaymentMethodWithRedirect =
   | 'toss_pay'
   | 'upi'
   | 'zip'
-  | 'spei';
+  | 'spei'
+  | 'afterpay';
 
 export type DirectDebitPaymentMethod =
   | 'ach_direct_debit'
@@ -133,7 +134,7 @@ export type DirectDebitPaymentMethod =
   | 'eft_direct_debit';
 
 /**
- * Supported integration payment method type for dropin and hostPaymentPage
+ * Supported payment method types for dropin and hostPaymentPage integrations.
  */
 export type PaymentMethodType =
   | 'googlepay'
@@ -145,7 +146,7 @@ export type PaymentMethodType =
   | DirectDebitPaymentMethod;
 
 /**
- * Define of error code when failed to validate user input or failed to request
+ * List of error codes for input validation and request failure.
  * [Error codes](https://www.airwallex.com/docs/payments__error-codes)
  */
 export type ERROR_CODE =
@@ -176,31 +177,31 @@ export type ERROR_CODE =
   | 'processor_refund_offline_required';
 
 /**
- * Event code supported value by element when shopper interact with the checkout element
+ * Supported events when shopper interacts with the checkout element.
  *
- * `onReady`: The event fires when a given element resource has loaded.
+ * `onReady`: Triggered when a given Element is fully rendered and can accept `element.focus` calls.
  *
- * `onSubmit`: The event is raised when confirm the intent. It fires after the click Pay button or calling confirmPaymentIntent function.
+ * `onSubmit`: Triggered when confirming the Payment Intent either when the shopper clicks the Pay button or when you call `confirmPaymentIntent()` method.
  *
- * `onSuccess`: The event fires when a intent is confirm with Airwallex
+ * `onSuccess`: Triggered when Airwallex confirms the Payment Intent.
  *
- * `onError`: Error events are fired at various targets for different kinds of errors with shopper interaction, refer to `ElementError` interface.
+ * `onError`: Triggered for various error events during shopper interaction, refer to Error Codes.
  *
- * `onCancel`: The event fires when shopper click cancel button when interact with the payment form.
+ * `onCancel`: Triggered when the shopper clicks the Cancel button when interacting with the payment form.
  *
- * `onFocus`: The event is raised when the shopper sets focus on an input by click or tab switch interaction.
+ * `onFocus`: Triggered when the shopper sets focus on an input in the Element by clicking or pressing the tab key.
  *
- * `onBlur`: The event is raised when an input in element loses focus.
+ * `onBlur`: Triggered when an input in the Element loses focus.
  *
- * `onChange`: The events fire when the user commits a value change to a input. This may be done, for example, by clicking outside of the input or by using the Tab key to switch to a different input.
+ * `onChange`: Triggered when the shopper changes a value in an input in the Element. For example, by clicking outside the input field or using the tab key to switch to a different input field.
  *
- * `onClick`: The event is raised when the user clicks on an input element.
+ * `onClick`: Triggered when the shopper clicks on an input in the Element.
  *
- * `onDynamicCurrencyConversion`: The events fire when merchant enable Dynamic Currency Conversion (DCC) feature and shopper is confirm payment with an intent which match DCC scenario
+ * `onDynamicCurrencyConversion`: Triggered when the merchant enables Dynamic Currency Conversion (DCC) feature and the shopper confirms the Payment Intent with DCC.
  *
- * `onPendingVerifyAccount`: The events fire when shoppers checkout with direct debit methods and the bank account need to be verified
+ * `onPendingVerifyAccount`: Triggered when the shopper checks out with Direct Debit payment methods and the bank account needs to be verified.
  *
- * `onSwitchMethod`: The event fires when shoppers switch payment method in hpp or dropIn element
+ * `onSwitchMethod`: Triggered when the shopper switches payment methods in Hosted Payment Page or dropIn Element.
  */
 export type EventCode =
   | 'onReady'
@@ -218,11 +219,11 @@ export type EventCode =
   | 'onSwitchMethod';
 
 /**
- * Return error when failed to validate user input or failed to request
+ * Return error when user input validation or the request fails.
  */
 export interface ElementError {
   /**
-   * Feel text message in english
+   * Free text message in English.
    */
   message: string;
   /**
@@ -230,50 +231,50 @@ export interface ElementError {
    */
   code?: ERROR_CODE;
   /**
-   * Error details, only apply for card payment method
+   * Error details, only applies to card payment method.
    */
   details?: {
     /**
-     * Indicate the card brand
+     * The card brand.
      */
     card_brand?: string;
     /**
-     * Indicate the card type, CREDIT / DEBIT / PREPAID
+     * The card type, CREDIT / DEBIT / PREPAID
      */
     card_type?: string;
     /**
-     * Indicate if the card is commercial
+     * Indicate if the card is commercial.
      */
     is_commercial?: false;
     /**
-     * Indicate the Issuing bank name
+     * The issuing bank name.
      */
     issuing_bank_name: string;
   };
 }
 
 /**
- * Event detail, field define by CustomEvent, we fully leverage it to communicate the event payload
+ * Event detail, field defined by CustomEvent, we fully leverage it to communicate the event payload.
  */
 export interface EventDetail {
   /**
-   * Type of element which fire the event
+   * Type of element which triggers the event.
    */
   type: ElementType | 'threeDsFrictionless' | 'threeDsChallenge';
   /**
-   * Indicate if the element input is validate format
+   * Indicate whether the element input is in a valid format or not.
    */
   complete?: boolean;
   /**
-   * Indicate if the element input is empty or not
+   * Indicate whether the element input is empty or not.
    */
   empty?: boolean;
   /**
-   * Indicate the brand of card, only apply for card payment method
+   * Indicate the brand of the card, only applies to card payment methods.
    */
   brand?: string;
   /**
-   * Indicate the confirm response when integrate with `card` | `wechat` | `dropIn` element
+   * Indicate the confirm response when integrated with `card` | `wechat` | `dropIn` Element.
    */
   intent?: Intent & {
     latest_payment_attempt: {
@@ -281,11 +282,11 @@ export interface EventDetail {
     };
   };
   /**
-   * Response error when failed to call interact with shopper input
+   * Response error when failure to interact with shopper input.
    */
   error?: ElementError;
   /**
-   * Indicate the direct debit information
+   * Indicate the direct debit information.
    */
   directDebit?: {
     url: string;
@@ -294,7 +295,7 @@ export interface EventDetail {
 }
 
 /**
- * The `next_action` field returned from the confirm request
+ * The `next_action` field returned from the confirm request.
  */
 interface NextAction {
   data: {
@@ -322,7 +323,7 @@ export type ExtendEventDetail = EventDetail & {
 };
 
 /**
- * The event object your checkout page can listen to by below implementation:
+ * The event object your checkout page can listen to using the below implementation:
  *
  * Using html [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)
  * @example
@@ -335,14 +336,14 @@ export interface ElementEvent {
    */
   type: EventCode;
   /**
-   * Event detail of CustomEvent
+   * Event details of the CustomEvent
    * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail
    */
   detail: EventDetail;
 }
 
 /**
- * To support customized popup overlay width and height when trigger 3DS V2 challenge flow
+ * To support customized popup overlay width and height when 3DS V2 challenge flow is triggered.
  */
 export interface PopUpStyle {
   /**
@@ -369,26 +370,26 @@ export interface Appearance {
 }
 
 /**
- * Config base options for element integration, support using for ElementType
+ * Config based options for element integration supported for ElementType.
  */
 export interface ElementOptions {
   /**
-   * * Element container css style camelcase option, default style by Chrome browser default
+   * * Element container css style camelcase option, default style by Chrome browser.
    */
   style?: PopUpStyle & Properties;
   /**
-   * Your checkout website origin url, aka merchant checkout page's 'window.location.origin' field
+   * 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
+   * 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;
 }
 
 /**
- * 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' | '::placeholder' | '::selection' | ':disabled';
@@ -399,7 +400,7 @@ type PseudoClasses = ':hover' | ':focus' | '::placeholder' | '::selection' | ':d
 type PseudoClassStyle = { [K in PseudoClasses]?: Properties };
 
 /**
- * Customize the the input element using CSS properties
+ * Customize the input element using CSS properties.
  *
  */
 export interface InputStyle extends PopUpStyle {
@@ -437,21 +438,20 @@ export interface BoxStyle extends PopUpStyle {
 }
 
 /**
- * Apply to slim `card` element type integration, interface used when call createElement with type `card`
+ * Applies to `card` element type integration, the interface used when `createElement()` is called with type `card`.
  */
 export interface CardElementOptions extends ElementOptions {
   /**
-   * Config if the element input are disabled or not, default false
+   * Indicate whether the Element input is disabled or not.  Defaults to `false`.
    */
   disabled?: boolean;
   /**
-   * Specifies whether the funds should be requested automatically after the payment is authorized. Set it to `false` if you want to capture the funds sometime later.
-   * @defaultValue `true` if authorization type is `final_auth` and `false` for `pre_auth`.
+   * Indicate 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.
    */
   autoCapture?: boolean;
   /**
-   * The authorization type of 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. Currently it's only available when the card brand is visa or mastercard. You should also set `auto_capture` to be false if you want to enable pre-auth.
-   * @defaultValue `final_auth`
+   * 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.
    */
   authorizationType?: AuthorizationType;
   /**
@@ -459,37 +459,37 @@ export interface CardElementOptions extends ElementOptions {
    */
   allowedCardNetworks?: CardNetwork[];
   /**
-   * Style for card element
+   * Style for the card element.
    */
   style?: InputStyle;
   /**
-   * Container for authentication form, it's an element id
+   * The container id of the authentication form used in 3D Secure authentication.
    */
   authFormContainer?: string;
 }
 
 /**
- * Apply to split card element type integration, interface used when call createElement with type `cardNumber`
+ * Applies to split card element type integration, the interface used when `createElement()` called with type `cardNumber`
  */
 export interface CardNumberElementOptions extends ElementOptions {
   /**
-   * Config if the element input are disabled or not, default false
+   * Indicate whether the `cardNumber` Element input is disabled or not. Defaults to `false`.
    */
   disabled?: boolean;
   /**
-   * The payment intent you would like to checkout
+   * The Payment Intent you would like to checkout.
    * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
    *
    */
   intent?: Intent;
   /**
-   * Specifies whether the funds should be requested automatically after the payment is authorized. Set it to `false` if you want to capture the funds sometime later.
-   * @defaultValue `true` if authorization type is `final_auth` and `false` for `pre_auth`.
+   * Indicate 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.
    */
   autoCapture?: boolean;
   /**
-   * The authorization type of 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. Currently it's only available when the card brand is visa or mastercard. You should also set `auto_capture` to be false if you want to enable pre-auth.
-   * @defaultValue `final_auth`
+   * 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.
    */
   authorizationType?: AuthorizationType;
   /**
@@ -497,124 +497,126 @@ export interface CardNumberElementOptions extends ElementOptions {
    */
   allowedCardNetworks?: CardNetwork[];
   /**
-   * The placeholder attribute specifies a short hint that describes the expected value of an input field
+   * A short hint to suggest the expected value of an input field to the shopper.
    */
   placeholder?: string;
   /**
-   * Style for cardNumber element
+   * Style for the cardNumber Element.
    */
   style?: InputStyle;
   /**
-   * Container for authentication form, it's an element id
+   * The container id of the authentication form used in 3D Secure authentication.
    */
   authFormContainer?: string;
 }
 
 /**
- * Apply to split card element type integration, interface used when call createElement with type `expiry`
+ * Applies to split card element type integration, the interface used when `createElement()` with type `expiry`.
  */
 export interface ExpiryDateElementOptions extends ElementOptions {
   /**
-   * Config if the element input are disabled or not, default false
+   * Indicate whether the `expiry` Element input is disabled or not. Defaults to `false`.
    */
   disabled?: boolean;
   /**
-   * The placeholder attribute specifies a short hint that describes the expected value of an input field
+   * A short hint to suggest the expected value of an input field to the shopper.
    */
   placeholder?: string;
   /**
-   * Style for expiry element
+   * Style for the expiry Element.
    */
   style?: InputStyle;
 }
 
 /**
- * Apply to split card element type integration, interface used when call createElement with type `cvc`
+ * Applies to split card element type integration, the interface used when `createElement()` called with type `cvc`.
  */
 export interface CvcElementOptions extends ElementOptions {
   /**
-   * Config if the element input are disabled or not, default false
+   * Indicate whether the `cvc` Element input is disabled or not. Defaults to `false`.
    */
   disabled?: boolean;
   /**
-   * The placeholder attribute specifies a short hint that describes the expected value of an input field
+   * A short hint to suggest the expected value of an input field to the shopper.
    */
   placeholder?: string;
   /**
-   * Indicate cvc's length
+   * Indicate cvc length.
    */
   cvcLength?: number;
   /**
-   * Style for cvc element
+   * Style for the cvc Element.
    */
   style?: InputStyle;
   /**
-   * Container for authentication form, it's an element id
+   * The container id of the authentication form used in 3D Secure authentication.
    */
   authFormContainer?: string;
   /**
-   * Indicate if cvc elemment works alone or not.
-   * If you want to use cvc elements for saved consents payment, you could set it true to improve checkout experience
+   * Indicate if cvc Elemment works alone or not.
+   * If you want to use cvc Element for saved payment consent, you could set it `true` to improve checkout experience.
    */
   isStandalone?: boolean;
 }
 
 /**
- * Apply to full featured card element type integration, interface used when call createElement with type `fullFeaturedCard`
+ * Applies to full featured card element type integration, the interface used when `createElement()` called with type `fullFeaturedCard`.
  */
 export interface FullFeaturedCardElementOptions extends ElementOptions {
   /**
-   * If intent_id provided, this should be the client_secret of the intent
-   * If no intent_id provided, this should be the client_secret of the customer
+   * 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;
   /**
-   * Checkout mode
+   * The checkout mode for the shopper.
    */
   mode?: 'payment' | 'recurring';
   /**
-   * The payment intent id you would like to checkout, it's required when mode is `payment`
+   * The identifier 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
+   * 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
    */
   intent?: Intent;
   /**
-   * Specifies whether the funds should be requested automatically after the payment is authorized. Set it to `false` if you want to capture the funds sometime later.
-   * @defaultValue `true` if authorization type is `final_auth` and `false` for `pre_auth`.
+   * Indicate 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.
    */
   autoCapture?: boolean;
   /**
-   * The authorization type of 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. Currently it's only available when the card brand is visa or mastercard. You should also set `auto_capture` to be false if you want to enable pre-auth.
-   * @defaultValue `final_auth`
+   * 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.
    */
   authorizationType?: AuthorizationType;
   /**
-   * Indicate to improve 3DS experience, indicate if the payment form will collect billing info from shopper
+   * Indicate whether you require the shopper to provide cvc when they checkout with a network tokenized card.
+   */
+  cvcRequired?: boolean;
+  /**
+   * Used to increase the likelihood of 3DS frictionless checkout. Set this to `true` if you want the payment form to collect billing information from the shopper. Only applies to card payment method.
    */
   withBilling?: boolean;
   /**
-   * The billing information that you require from the user in order to process the transaction.
+   * The billing information that you require from the shopper in order to process the transaction.
    */
   requiredBillingContactFields?: ContactField[];
   /**
-   * Style for fullFeaturedCard element
+   * Style for the fullFeaturedCard Element.
    */
   style?: BoxStyle;
   /**
-   * Container for authentication form, it's an element id
+   * The container id of the authentication form used in 3D Secure authentication.
    */
   authFormContainer?: string;
   /**
-   * Checkout for know customer, refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
-   * it's required when mode is `recurring`
+   * The identifier of the Customer used in registered user checkout. Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
+   * This field is required when `mode` is `recurring`.
    */
   customer_id?: string;
   /**
-   * The options of recurring flow, it's required when mode is `recurring`
+   * The options for the recurring flow. Required when `mode` is `recurring`.
    */
   recurringOptions?: RecurringOptions;
 }
@@ -644,7 +646,7 @@ export type ApplePayRecurringLineItem = {
 
 export interface ApplePayRequestOriginalOptions {
   /**
-   * The merchant's two-letter ISO 3166 country code. Like 'US'
+   * The merchant's two-letter ISO 3166 country code, e.g. 'US'.
    */
   countryCode: string;
 
@@ -654,22 +656,22 @@ export interface ApplePayRequestOriginalOptions {
   lineItems?: (ApplePayJS.ApplePayLineItem & ApplePayRecurringLineItem)[];
 
   /**
-   * Billing contact information for the user.
+   * Billing contact information for the shopper.
    */
   billingContact?: ApplePayJS.ApplePayPaymentContact;
 
   /**
-   * The billing information that you require from the user in order to process the transaction.
+   * The billing information that you require from the shopper in order to process the transaction.
    */
   requiredBillingContactFields?: ApplePayJS.ApplePayContactField[];
 
   /**
-   * The shipping information that you require from the user in order to fulfill the order.
+   * The shipping information that you require from the shopper in order to fulfill the order.
    */
   requiredShippingContactFields?: ApplePayJS.ApplePayContactField[];
 
   /**
-   * Shipping contact information for the user.
+   * Shipping contact information for the shopper.
    */
   shippingContact?: ApplePayJS.ApplePayPaymentContact;
 
@@ -679,7 +681,7 @@ export interface ApplePayRequestOriginalOptions {
   shippingMethods?: ApplePayJS.ApplePayShippingMethod[];
 
   /**
-   * How the items are to be shipped.
+   * An optional value that indicates how purchased items are to be shipped.
    */
   shippingType?: ApplePayJS.ApplePayShippingType;
 
@@ -728,11 +730,9 @@ export interface GooglePayRequestOptions {
     merchantName?: string;
   };
   /**
-   * Whether to collect the email from the buyer.
-   *
-   * If omitted, defaults to `false`.
+   * Indicate whether the shopper must provide their email.
    *
-   * @default false
+   * @default "false"
    */
   emailRequired?: boolean;
   /**
@@ -757,17 +757,16 @@ export interface GooglePayRequestOptions {
   /**
    * Correlation ID to refer to this transaction.
    *
-   * This field is optional. It is generated by the merchant and is used
-   * for referring to this transaction later on (e.g. for debugging issues
-   * when communicating with Google).
+   * This field is optional. It is generated by the merchant and used to reference this transaction later,
+   * such as for debugging issues when communicating with Google.
    */
   transactionId?: string;
   /**
-   * Definition of a cart item.
+   * Description of a cart item.
    */
   displayItems?: google.payments.api.DisplayItem[];
   /**
-   * The status of the total price used.
+   * The status of the total price.
    * If it is a variable subscription, the status should be NOT_CURRENTLY_KNOWN.
    *
    * Options:
@@ -777,12 +776,12 @@ export interface GooglePayRequestOptions {
    *
    * - `ESTIMATED`:
    *   The total price provided is an estimated price. The final price may
-   *   change depending on the selected shipping address or billing address,
+   *   change depending on the shipping address or billing address,
    *   if requested.
    *
    * - `FINAL`:
    *   The total price is the final total price of the transaction, and will
-   *   not change based on selections made by the buyer.
+   *   not change based on selections made by the shopper.
    * * @default "FINAL"
    */
   totalPriceStatus?: 'NOT_CURRENTLY_KNOWN' | 'ESTIMATED' | 'FINAL';
@@ -802,10 +801,10 @@ export interface GooglePayRequestOptions {
    */
   checkoutOption?: google.payments.api.CheckoutOption;
   /**
-   * Defines callback methods for handling payment data changed and payment
+   * Defines callback methods for handling changed payment data and payment
    * authorized events.
    *
-   * If you set up Dynamic Price Updates in your integration, be sure to add
+   * If you set up Dynamic Price Updates in your integration, make sure you add
    * the following [[PaymentDataChangedHandler|`onPaymentDataChanged`]] and
    * [[PaymentAuthorizedHandler|`onPaymentAuthorized`]] callbacks.
    *
@@ -827,41 +826,29 @@ export interface GooglePayRequestOptions {
    */
   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. The default value is ["MASTERCARD", "MAESTRO", "VISA"]
    */
   allowedCardNetworks?: GoogleSupportedCardNetWork[];
   /**
-   * Whether a prepaid card may be used for this transaction.
-   *
-   * If omitted, defaults to `true`.
+   * Indicate whether a prepaid card may be used for this transaction.
    *
    * @default true
    */
   allowPrepaidCards?: boolean;
   /**
-   * Whether a credit card may be used for this transaction.
-   *
-   * If omitted, defaults to `true`.
+   * Indicate whether a credit card may be used for this transaction.
    *
    * @default true
    */
   allowCreditCards?: boolean;
   /**
-   * Set to `true` to request assuranceDetails.
-   *
-   * If omitted, defaults to `false`.
-   *
-   * You may set if you need object provides information about the validation performed on the returned payment data.
+   * Set to `true` if you need information about the validation performed on the returned payment data.
    *
    * @default false
    */
   assuranceDetailsRequired?: boolean;
   /**
-   * Set to `true` to request assuranceDetails.
-   *
-   * If omitted, defaults to `false`.
-   *
-   * You may set if you need object provides information about the validation performed on the returned payment data.
+   * Indicate whether a billing address is required from the shopper.
    *
    * @default false
    */
@@ -872,13 +859,11 @@ export interface GooglePayRequestOptions {
    */
   billingAddressParameters?: google.payments.api.BillingAddressParameters;
   /**
-   * Whether a shipping address is required from the buyer.
+   * Indicate whether a shipping address is required from the shopper.
    *
    * The returned shipping address can be retrieved from
    * [[Address|`Address`]].
    *
-   * If omitted, defaults to `false`.
-   *
    * @default false
    */
   shippingAddressRequired?: false | true | undefined;
@@ -888,7 +873,7 @@ export interface GooglePayRequestOptions {
    *
    * If omitted, the default values specified in
    * [[ShippingAddressParameters|`ShippingAddressParameters`]] will be
-   * assumed.
+   * used.
    */
   shippingAddressParameters?: google.payments.api.ShippingAddressParameters;
   /**
@@ -898,10 +883,9 @@ export interface GooglePayRequestOptions {
   offerInfo?: google.payments.api.OfferInfo;
 
   /**
-   * Whether a shipping option is required from the buyer.
+   * Indicate whether a shipping option is required from the shopper.
    *
-   * If omitted, defaults to `false`.
-   * Note: This field is currently only for web only.
+   * Note: This field is currently for web only.
    *
    * @default false
    */
@@ -912,51 +896,50 @@ export interface GooglePayRequestOptions {
    *
    * This should only be set if
    * [[PaymentDataRequest.shippingOptionRequired|`PaymentDataRequest.shippingOptionRequired`]]
-   * is set to true.
+   * is set to `true`.
    *
-   * Note: This field is currently only for web only.
+   * Note: This field is currently for web only.
    */
   shippingOptionParameters?: google.payments.api.ShippingOptionParameters;
 
   /**
    * List of callbacks that the developer intents to handle.
-   * Upon selection by the user, these intents can be used to update the
+   * 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
    * option is selected, the developer could update the `transactionInfo`
    * with new `totalPrice` and `diplayItems`).
    *
-   * Note: This  functionality is only available for web.
+   * Note: This functionality is only available for web.
    */
   callbackIntents?: google.payments.api.CallbackIntent[];
 }
 
 export interface GooglePayButtonOptions extends GooglePayRequestOptions, ElementOptions {
   /**
-   * The payment intent id you would like to checkout
+   * The identifier 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)
    *
    */
   intent_id?: string;
   /**
-   * If the intent_id provided, this should be the client_secret of the intent
-   * If no intent_id provided and customer_id provided, this should be the client_secret of the customer
-   * If no intent_id provided and no customer_id provided, this field can be empty
+   * The `client_secret` of the Payment Intent when Payment Intent is provided. Otherwise, this should be the `client_secret` of the Customer object.
+   * Leave it empty if intent_id and customer_id are not provided.
    */
   client_secret?: string;
   /**
-   * Checkout for know customer, refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
-   * It's required for recurring mode
+   * The identifier 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;
   /**
-   * Checkout mode
-   * @default "payment"
+   * The checkout mode for the shopper.
+   * @defaultValue "payment"
    */
   mode?: Mode;
   /**
-   * Indicate the amount and currency of the intent.
+   * Indicate the amount and currency of the Payment Intent.
    * @example
-   * If the mode is recurring and there is no intent_id provided, 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;
@@ -964,23 +947,27 @@ export interface GooglePayButtonOptions extends GooglePayRequestOptions, Element
   };
 
   /**
-   * Specifies whether the funds should be requested automatically after the payment is authorized. Set it to `false` if you want to capture the funds sometime later.
+   * Indicate 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`.
    */
   autoCapture?: boolean;
   /**
-   * The authorization type of 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. Currently it's only available when the card brand is visa or mastercard. You should also set `auto_capture` to be false if you want to enable pre-auth.
-   * @defaultValue `final_auth`
+   * 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"
    */
   authorizationType?: AuthorizationType;
   /**
-   * Container for authentication form, it's an element id
+   * The container id of the authentication form used in 3D Secure authentication.
    */
   authFormContainer?: string;
   /**
-   * Error for the last PaymentData, will be displayed to the user.
-   * Example: you can update error when user selected the wrong shipping option
-   * Note: This field is currently only for web only.
+   * Error displayed to the shopper for erroneous payment data.
+   * For example, you can update error when user selects the wrong shipping option
+   * Note: This field is currently available for web only.
    */
   error?: google.payments.api.PaymentDataError;
 }
@@ -992,91 +979,97 @@ type GooglePayNextActionOptions = Pick<
 
 export interface ApplePayRequestOptions extends ApplePayRequestOriginalOptions {
   /**
-   * 	Indicate the type of button you want displayed on your payments form. Like 'donate'
+   * 	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
    */
   buttonType?: string;
   /**
-   * Indicate the color of the button. Default value is 'black'
+   * Indicate the color of the button.
+   *
+   * @defaultValue "black"
    */
   buttonColor?: 'black' | 'white' | ' white-with-line';
   /**
-   * Provide a business name for the label field. Use the same business name people will see when they look for the charge on their bank or credit card statement. For example, "COMPANY, INC."
+   * Provide a business name for the label field. Use the same business name that you want displayed for the charge on the shopper's bank or credit card statement. For example, "COMPANY, INC.".
+   *
    */
   totalPriceLabel?: string;
   /**
-   * A type that indicates whether a line item is final or pending.
-   * if the mode is recurring and it's a variable subscription, the value should be pending.
-   * @default "final"
+   * Indicate whether a line item is final or pending.
+   * If the mode is `recurring` and if it's a variable subscription, the value should be pending.
+   *
+   * @defaultValue "final"
    */
   totalPriceType?: 'final' | 'pending';
   /**
    * Card networks supported by the merchant.
-   * if not configured, supportedNetworks will automatically configure based on merchant account settings
-   * For more details, please refer to https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916122-supportednetworks
+   * 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, supportedNetworks will automatically configure according to the merchant account settings
+   * 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 don't contains chinaUnionPay, please don't include it).
+   * 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[];
 }
 export interface ApplePayButtonOptions extends ElementOptions, ApplePayRequestOptions {
   /**
-   * The payment intent id you would like to checkout
-   * It's required for payment mode and optional for recurring mode
+   * The identifier 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)
    *
    */
   intent_id?: string;
   /**
-   * If the intent_id provided, this should be the client_secret of the intent
-   * If no intent_id provided and customer_id provided, this should be the client_secret of the customer
-   * If no intent_id provided and no customer_id provided, this value can be passed in update function later
+   * 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;
   /**
-   * Checkout for know customer, refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Customers/Intro)
-   * It's required for recurring mode
+   * The identifier 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;
   /**
-   * Checkout mode
+   * The checkout mode for the shopper.
    * @default "payment"
    */
   mode?: Mode;
   /**
-   * Indicate the amount and currency of the intent.
+   * Indicate the amount and currency of the Payment Intent.
    * @example
-   * If the mode is recurring and there is no intent_id provided, 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;
   };
   /**
-   * Specifies whether the funds should be requested automatically after the payment is authorized. Set it to `false` if you want to capture the funds sometime later.
+   * Indicate 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`.
    */
   autoCapture?: boolean;
   /**
-   * The authorization type of 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. Currently it's only available when the card brand is visa or mastercard. You should also set `auto_capture` to be false if you want to enable pre-auth.
+   * 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`
    */
   authorizationType?: AuthorizationType;
 }
 
 /**
- * Apply to wechat element type integration, interface used when call createElement with type `wechat`
+ * Apply to wechat Element type integration, the interface used when createElemen() is called with type `wechat`.
  */
 export interface WechatElementOptions extends ElementOptions {
   /**
-   * The payment intent you would like to checkout
+   * The Payment Intent you would like to checkout.
    * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
    *
    */
@@ -1084,17 +1077,17 @@ export interface WechatElementOptions extends ElementOptions {
 }
 
 /**
- * Functions and external fields can be using in your integration flow with airwallex element
+ * Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
  *
- * Two ways to get elements, by call createElement function or getElement
+ * Two ways to get elements: createElement() function or getElement() function
  *
  * ***IMPORTANT***
  *
- * Once element destroy by call function destroyElement, the element reference should not be using anymore
+ * Once Element is destroyed by calling destroyElement() function, the Element reference is no longer valid.
  */
 export interface Element {
   /**
-   * Refer to the options when call createElement
+   * The Element options when calling createElement().
    */
   options?:
     | GooglePayButtonOptions
@@ -1109,38 +1102,38 @@ export interface Element {
     | QrcodeElementOptions
     | RedirectElementOptions;
   /**
-   * The iframe element after mount to the DOM
+   * The iframe element after mounting the Element to the DOM.
    */
   iframe: HTMLIFrameElement | null;
   /**
-   * Refer to the DOM element you call mount function
+   * The DOM element you called in the mount() function.
    */
   domElement: null | HTMLElement;
   /**
    * Element integration `step #3`
-   * Mount payment element to your HTML DOM element for checkout
+   * Mounts payment Element to your HTML DOM element for checkout.
    */
   mount(domElement: string | HTMLElement): null | HTMLElement;
   /**
-   * Using this function to blur the input html element
+   * Blurs the input html Element.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
    */
   blur(): void;
   /**
-   * Using this function to clear the input html element
+   * Clears the input html Element.
    */
   clear(): void;
   /**
-   * Using this function to focus the input html element
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
+   * Focuses the input html Element.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
    */
   focus(): void;
   /**
-   * Using this function to unmount the element, opposite to mount function
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
+   * Unmounts the Element by reversing the mount action.
    */
   unmount(): void;
   /**
-   * Using this function to update the element option after create the element
+   * Updates the Element options after creating the Element.
    */
   update(
     options?:
@@ -1162,30 +1155,30 @@ export interface Element {
 interface ElementBaseType {
   /**
    * @hidden
-   * The iframe element after mount to the DOM
+   * The iframe element after mounting the Element to the DOM.
    */
   iframe: HTMLIFrameElement | null;
   /**
    * @hidden
-   * Refer to the DOM element you call mount function
+   * The DOM element you called in the mount() function.
    */
   domElement: null | HTMLElement;
   /**
    * Element integration `step #3`
-   * Mount payment element to your HTML DOM element for checkout
+   * Mounts payment Element to your HTML DOM element for checkout.
    */
   /**
-   * Mount element to your HTML DOM
+   * Mounts Element to your HTML DOM.
    * @example
    * ```ts
   // type
   element.mount: (domElement: string | HTMLElement) => void
 
-  // There are two ways to mount element:
-  // 1. call with container dom id
+  // 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 existing HTML and call with container DOM element
+  // 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); 
   ```
@@ -1193,8 +1186,8 @@ interface ElementBaseType {
   mount(domElement: string | HTMLElement): null | HTMLElement;
 
   /**
-   * Using this function to unmount the element, opposite to mount function
-   * The element instance is still kept
+   * Unmounts the Element. Note that the Element instance will remain.
+
    * @example
    * ```ts
     element.unmount();
@@ -1203,7 +1196,7 @@ interface ElementBaseType {
   unmount(): void;
 
   /**
-   * Using this function to destory the element instance
+   * Destroys the Element instance. 
    * @example
    ```ts
   element.destroy();
@@ -1211,45 +1204,68 @@ interface ElementBaseType {
    *
    * ***IMPORTANT***
    *
-   * Once element destroy by call function destroyElement, the element reference should not be used anymore
+   * Once Element is destroyed by calling destroyElement() function, the Element reference is no longer valid.
    */
   destroy(): void;
 }
 
 type CardElementEvent = 'ready' | 'click' | 'focus' | 'blur';
 /**
- * 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 Payment Elements.
  */
 export interface CardElementType extends ElementBaseType {
   /**
    * Using this function to blur the input html element
+   *@example
+    ```ts
+      element.blur();
+    ```
    */
   blur(): void;
   /**
    * Using this function to clear the input html 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
+    ```ts
+      element.focus();
+    ```
    */
   focus(): void;
   /**
-   * Using this function to create payment consent
+   * 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>;
   /**
-   * 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
+    ```ts
+      element.confirm({client_secret: 'mock_client_secret'});
+    ```
    */
   confirm(data: PaymentMethodRequest): Promise<Intent>;
   /**
    * Using this function to update the element option after create the element
+   *@example
+    ```ts
+      element.confirm({client_secret: 'mock_client_secret'});
+    ```
    */
   update(options?: Partial<CardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
-   * Listen to element event
+   * Listen to Element events.
    * 
    * @example
   ```ts
@@ -1264,38 +1280,62 @@ export interface CardElementType extends ElementBaseType {
 export type CardNumberElementEvent = '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 Payment Elements.
  */
 export interface CardNumberElementType extends ElementBaseType {
   /**
    * Using this function to blur the input html element
+   *@example
+    ```ts
+      element.blur();
+    ```
    */
   blur(): void;
   /**
    * Using this function to clear the input html 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
+    ```ts
+      element.focus();
+    ```
    */
   focus(): void;
   /**
-   * Using this function to create payment consent
+   * 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>;
   /**
-   * 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>;
   /**
    * 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 event
+   * Listen to element events. 
    * 
    * @example
   ```ts
@@ -1315,19 +1355,34 @@ export type ExpiryElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressA
 export interface ExpiryDateElementType extends ElementBaseType {
   /**
    * Using this function to blur the input html element
+   *@example
+    ```ts
+      element.blur();
+    ```
    */
   blur(): void;
   /**
    * Using this function to clear the input html 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
+    ```ts
+      element.focus();
+    ```
    */
   focus(): void;
   /**
    * Using this function to update the element option after create the element
+   *@example
+    ```ts
+      element.update({placeholder: 'mock placeholder'});
+    ```
    */
   update(options?: Partial<ExpiryDateElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
@@ -1351,31 +1406,53 @@ export type CvcElementEvent = 'ready' | 'change' | 'focus' | 'blur' | 'pressArro
 export interface CvcElementType extends ElementBaseType {
   /**
    * Using this function to blur the input html element
+   *@example
+    ```ts
+      element.blur();
+    ```
    */
   blur(): void;
   /**
    * Using this function to clear the input html 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
+    ```ts
+      element.focus();
+    ```
    */
   focus(): void;
   /**
    * Using this function to confirm payment intent
    * @param data Payment method
+   *@example
+    ```ts
+      element.confirm({client_secret: 'mocked client_secret'});
+    ```
    */
   confirm(data: PaymentMethodRequest): Promise<Intent>;
   /**
    *  Using this function to create payment consent
    * @param data Payment consent request
+   *@example
+    ```ts
+      element.createPaymentConsent({client_secret: 'mocked client_secret'});
+    ```
    */
   createPaymentConsent(data: CreatePaymentConsentRequest): Promise<PaymentConsentResponse>;
   /**
    * Using this function to update the element option after create the element
+   *@example
+    ```ts
+      element.update({placeholder: 'mocked placeholder'});
+    ```
    */
-
   update(options?: Partial<CvcElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
    * Listen to element event
@@ -1407,6 +1484,14 @@ export type ApplePayButtonEvent =
 export interface ApplePayButtonElementType extends ElementBaseType {
   /**
    * Using this function to update the element option after create the element
+   * @example
+  ```ts
+    element.update({
+      buttonType: 'donate',
+    }, {
+      locale: 'en',
+    });
+  ```
    */
   update(options?: Partial<ApplePayButtonOptions>, initOptions?: Partial<InitOptions>): void;
 
@@ -1424,16 +1509,44 @@ export interface ApplePayButtonElementType extends ElementBaseType {
   /**
    * Using this function to confirm payment intent
    * @param data client_secret returned in create intent response
+   * @example
+  ```ts
+    element.confirmIntent({
+      client_secret: intent?.client_secret,
+    });
+  ```
    */
-  confirmIntent(data: { client_secret: string }): Promise<Intent>;
+  confirmIntent(data: { client_secret?: string }): 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: intent?.client_secret,
+    });
+  ```
    */
   createPaymentConsent(data: { client_secret: string }): Promise<Consent | undefined>;
   /**
    *
    * @param data apple pay session data
+   * @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"
+  });
+  ```
    */
   completeValidation(data: unknown): void;
 }
@@ -1453,6 +1566,14 @@ export type DropInElementEvent =
 export interface DropInElementType extends ElementBaseType {
   /**
    * Using this function to update the element option after create the element
+   * @example
+  ```ts
+    element.update({
+      methods: ['card'],
+    }, {
+      locale: 'en',
+    });
+  ```
    */
   update(options?: Partial<DropInElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
@@ -1483,6 +1604,14 @@ export type GooglePayButtonEvent =
 export interface GooglePayButtonElementType extends ElementBaseType {
   /**
    * Using this function to update the element option after create the element
+   * @example
+  ```ts
+    element.update({
+      autoCapture: true,
+    }, {
+      locale: 'en',
+    });
+  ```
    */
   update(options?: Partial<GooglePayButtonOptions>, initOptions?: Partial<InitOptions>): void;
 
@@ -1501,11 +1630,23 @@ 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({
+      client_secret: 'xxx'
+    });
+  ```
    */
   confirmIntent(data: { client_secret: string }): 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'
+    });
+  ```
    */
   createPaymentConsent(data: { client_secret: string }): Promise<Consent | undefined>;
 }
@@ -1517,6 +1658,15 @@ export type WechatElementEvent = 'ready' | 'success' | 'error';
 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',
+      }
+    });
+  ```
    */
   update(options?: Partial<WechatElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**
@@ -1562,6 +1712,14 @@ type FullFeaturedCardElementEvent = 'ready' | 'success' | 'error';
 export interface FullFeaturedCardElementType extends ElementBaseType {
   /**
    * Using this function to update the element option after create the element
+   * @example
+  ```ts
+    element.update({
+      autoCapture: true,
+    }, {
+      locale: 'en',
+    });
+    ```
    */
   update(options?: Partial<FullFeaturedCardElementOptions>, initOptions?: Partial<InitOptions>): void;
   /**