Airwallex logo

Embedded fields integration

The Embedded fields integration enables Merchants to accept payments when they wish to partially delegate the responsibility of handling their payments but they still aim to control the overall look and feel of their payments page. In this scenario a limited PCI-DSS certification is required.

Unlike Drop In integration, the Embedded fields integration is a set of prebuilt UI components, like inputs and buttons that you can directly place in your checkout flow.

The main distinctive features include:

  • Automatic formatting card information(card number, expiry, cvc) while entered
  • Customizable placeholders to fit your UX design
  • Usage of responsive design to fit the width of your customer’s screen or mobile device
  • Customizable styling to match the look and feel of your checkout flow
  • Limited PCI-DSS scope suitable for partners with a PCI-DSS SAQ

The following steps will guide you through our integration, if you are familiar with the Drop In integrations there is very few additional work.

The following steps will guide you through our integrations. Refer to our API reference for the complete details of the calls.

  1. Initially you need to create a Payment Intent. The payment intent captures the details of your checkout and includes the currency and amount you wish to charge your customer.
curl https://pci-api.airwallex.com/api/v1/pa/payment_intents/create \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer your_bearer_token \
  -d '{
    "request_id": "ed11e38a-7234-11ea-aa94-7fd44ffd1b89",
    "amount": 100,
    "currency": "CNY",
    "merchant_order_id": "85d7b0e0-7235-11ea-862e-9f6aa1adfca6"
  }'

The response of the Payment Intent creation looks as below and contains a client_secret, it represents your payment session and you need to use it to request the URL where you will redirect your client

  1. In order to leverage the components that Airwallex has built on your behalf, you will need to leverage our frontend scripts.

Load the Airwallex checkout JavaScript in your front end and initialize it accordingly with the information you received.

In order to do so you can get the airwallex-payment-elements yarn or npm package

yarn add airwallex-payment-elements
npm install airwallex-payment-elements

You can also embed the code directly in your HTML client.

<!-- Step #1: Load Checkout Universal Module Definition (UMD) bundle js-->
<script src="https://checkout.airwallex.com/assets/bundle.0.0.xx.min.js"></script>

Initialize it with

// Step #2: Initialize the Airwallex global context for event communication
Airwallex.init({
 env: 'demo', // Setup which env('staging' | 'demo' | 'prod') you would like to integrate with
 origin: window.location.origin, // Setup your event target to receive the browser events message
});

Pay attention to the following parameters:

  • env: Required setup which env('staging' | 'demo' | 'prod') you would like to integrate with
  • origin: Required setup your event target to receive the browser events message

  • options [Optional] you can provide additional parameters to customize your checkout following the below interface.

/**
* Global font option config for Airwallex integration methods
*/
export interface FontOptions {
 /**
  * The font-family property
  * https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
  */
 family?: string;
 /**
  * The font source url
  * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
  */
 src?: string;
 /**
  * The font-weight property
  * https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
  */
 weight?: string | number;
}

/**
* Indicate which airwallex integration env your merchant site would like to connect with
*/
export type AirwallexEnv = 'dev' | 'preview' | 'qa' | 'staging' | 'demo' | 'prod';

/**
* Global init option config for Airwallex javascript SDK
*/
export interface InitOptions {
 /**
  * Indicate which airwallex integration env your merchant site would like to connect with
  * If not provide default will be prod which point to [Airwallex Checkout](https://checkout.airwallex.com)
  */
 env?: AirwallexEnv;
 /**
  * Your checkout website origin url, aka merchant checkout page's 'window.location.origin' field
  */
 origin?: string;
 /**
  * i18n localization config
  */
 locale?: 'en' | 'zh';
 /**
  * Global font options
  */
 font?: FontOptions;
}
  1. It is time to create the elements that will help you to capture the payment details. You can further customize those with the Style interface :
/**
* The definition mapping of supported integration element type with it's props options used to customize the element, merchant can check on each element options type for details
*/
export interface ElementOptionsTypeMap {
 /**
  * Define card number input element type and it's mapped option type, apply to split card element integration
  * Using together with `expiry` and `cvc` element to gain maximum customization
  */
 cardNumber: CardNumberElementOptions;
 /**
  * Define expiry input element type and it's mapped option type, apply to split card element integration
  * Using together with `cardNumber` and `cvc` element to gain maximum customization
  */
 expiry: ExpiryDateElementOptions;
 /**
  * Define cvc input element type and it's mapped option type, apply to split card element integration
  * Using together with `cardNumber` and `expiry` element to gain maximum customization
  */
 cvc: CvcElementOptions;
 /**
  * Define W3C payment request API element type and it's mapped option type
  */
 paymentRequestButton: PaymentRequestButtonOptions;
 /**
  * Define card element type and it's mapped option type, this integration make the card PCI input (card number / cvc / expiry) behavior like a single input
  */
 card: CardElementOptions;
 /**
  * Define WeChat element type and it's mapped option type
  */
 wechat: WechatElementOptions;
 /**
  * Define dropIn element type and it's mapped option type, this integration make integrate with Airwallex supported card and APM (alternative payment method like WeChat etc.) payment method like a single widget
  */
 dropIn: DropInElementOptions;
 /**
  * Define full featured card element type and it's mapped option type, this integration make integrate with Airwallex supported card payment method like a single widget
  */
 fullFeaturedCard: FullFeaturedCardElementOptions;
}

/**
* Element integration `step #2`
* Create payment element for checkout
*/
export declare function createElement<T extends ElementType>(
 type: T,
 options?: ElementOptionsTypeMap[T],
): Element | null;

/**
* The payment intent you would like to checkout
* Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
*
* ***Hint***:
* This interface only contain the necessary information when shopper checkout
* For the detail meaning of each field you can refer to above api document
*/
export interface Intent {
 /**
  * Id of intent
  */
 id: string;
 /**
  * client_secret of intent
  */
 client_secret?: string;
 /**
  * Your request id when create payment intent
  */
 request_id?: string;
 amount?: number;
 currency?: string;
 merchant_order_id?: string;
 customer_id?: string;
 status?: string;
 created_at?: string;
 updated_at?: string;
}

/**
* 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';
/**
* Pseudo-classes object
*/
type PseudoClassStyle = { [K in PseudoClasses]?: Properties };

/**
* Customize the the element using CSS properties
* 1. Reference: https://github.com/frenic/csstype
* 2. Extend with element variations for `hpp` | `card` | `dropIn`, following the best practices of https://material-ui.com/api/input-base/
* 3. To support customized Popup overlay width and height
*/
export interface Style extends PseudoClassStyle, Properties {
 /**
  * Input variation for `hpp` | `card` | `dropIn` integration
  */
 variant?: 'outlined' | 'filled' | 'standard' | 'bootstrap';
 /**
  * Customized Popup overlay width like 3DS payment flow
  */
 popupWidth?: number;
 /**
  * Customized Popup overlay height like 3DS payment flow
  */
 popupHeight?: number;
}

/**
* Config base options for element integration, support using for ElementType
*/
export interface ElementOptions {
 /**
  * Element css style camelcase option, default style by Chrome browser default
  */
 style?: Style;
 /**
  * Your checkout website origin url, aka merchant checkout page's 'window.location.origin' field
  */
 origin?: string;
}

/**
* Apply to slim `card` element type integration, interface used when call createElement with type `card`
*/
export interface CardElementOptions extends ElementOptions {
 /**
  * Config if the element input are disabled or not, default false
  */
 disabled?: boolean;
 /**
  * Indicate whether to capture immediate when authentication success
  */
 autoCapture?: boolean;
}

/**
* Apply to split card element type integration, interface used when call createElement with type `cardNumber`
*/
export interface CardNumberElementOptions extends ElementOptions {
 /**
  * Config if the element input are disabled or not, default false
  */
 disabled?: boolean;
 /**
  * The payment intent you would like to checkout
  * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
  *
  */
 intent?: Intent;
 /**
  * Indicate whether to capture immediate when authentication success
  */
 autoCapture?: boolean;
 /**
  * The placeholder attribute specifies a short hint that describes the expected value of an input field
  */
 placeholder?: string;
}

/**
* Apply to split card element type integration, interface used when call createElement with type `expiry`
*/
export interface ExpiryDateElementOptions extends ElementOptions {
 /**
  * Config if the element input are disabled or not, default false
  */
 disabled?: boolean;
 /**
  * The placeholder attribute specifies a short hint that describes the expected value of an input field
  */
 placeholder?: string;
}

/**
* Apply to split card element type integration, interface used when call createElement with type `cvc`
*/
export interface CvcElementOptions extends ElementOptions {
 /**
  * Config if the element input are disabled or not, default false
  */
 disabled?: boolean;
 /**
  * The placeholder attribute specifies a short hint that describes the expected value of an input field
  */
 placeholder?: string;
 /**
  * Indicate cvc's length
  */
 cvcLength?: number;
}

/**
* Apply to full featured card element type integration, interface used when call createElement with type `fullFeaturedCard`
*/
export interface FullFeaturedCardElementOptions extends ElementOptions {
 /**
  * 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;
 /**
  * The payment method component your website would like to integrate with
  */
 component?: 'default' | 'card' | 'wechatpay';
 /**
  * Indicate whether to capture immediate when authentication success, apply when shopper using card payment method
  */
 autoCapture?: boolean;
 /**
  * Indicate to improve 3DS experience, indicate if the payment form will collect billing info from shopper
  */
 withBilling?: boolean;
}

/**
* Apply to dropIn element type integration, interface used when call createElement with type `dropIn`
*/
export interface DropInElementOptions extends ElementOptions {
 /**
  * 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;
 /**
  * The payment method component your website would like to integrate with
  */
 component?: 'default' | 'card' | 'wechatpay';
 /**
  * Indicate whether to capture immediate when authentication success
  */
 autoCapture?: boolean;
 /**
  * Indicate to improve 3DS experience, indicate if the payment form will collect billing info from shopper
  */
 withBilling?: boolean;
}

/**
* The PaymentShippingOption dictionary has members describing a shipping option.
*/
export interface PaymentShippingOption {
 id: string;
 label: string;
 amount: {
   currency: string;
   value: string;
 };
 selected: boolean;
}

/**
* Apply to W3C payment request API element type integration, interface used when call createElement with type `paymentRequestButton`
*/
export interface PaymentRequestButtonOptions extends ElementOptions {
 /**
  * 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;
 /**
  * Indicate whether to capture immediate when authentication success
  */
 autoCapture?: boolean;
 /**
  * Indicate if the payment form collect payer name is required
  */
 requestPayerName?: boolean;
 /**
  * Indicate if the payment form collect payer email is required
  */
 requestPayerEmail?: boolean;
 /**
  * Indicate if the payment form collect payer phone is required
  */
 requestPayerPhone?: boolean;
 /**
  * Indicate if the payment form collect shipping info from shopper is required
  */
 requestShipping?: boolean;
 /**
  * The shippingOptions must be supplied when requestShipping is true for the customer to proceed in the flow.
  */
 shippingOptions?: Array<PaymentShippingOption>;
}

/**
* Apply to wechat element type integration, interface used when call createElement with type `wechat`
*/
export interface WechatElementOptions extends ElementOptions {
 /**
  * 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;
}
/**
* Interface to confirm a payment intent with card payment method, the full api request payload can be found:
* [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents__id__confirm/post)
*
* BACKGROUNDS:
* ------------
* Due to [PCI CSS](https://www.pcisecuritystandards.org/) Airwallex js SDK will load Airwallex javascript to handle all sensitive information
* The PCI Security Standards Council (SSC) defines `cardholder data` which must also be protected:
*
* Primary Account Number (PAN) or the full PAN along with any of the following elements: `Cardholder name` `Expiration date` `Service code`
*
* Sensitive Authentication Data, which must also be protected, includes full magnetic stripe data, CAV2, CVC2, CVV2, CID, PINs, PIN blocks
* Only apply to Card elements (`cardNumber` | `cvc` | `expiry`) integration, refer to ElementType
*
* SOLUTIONS:
* ------------
* The javascript SDK will fulfill collection of all the sensitive information required by PCI DSS
*
* You checkout page can collect the rest of NON-PCI DSS data and call confirmPaymentIntent using below interface to pass them to Airwallex checkout
*/
export interface PaymentMethod {
 /**
  * Element create by call createElement interface with 'cardNumber' element type
  */
 element: Element;
 /**
  * The payment method id if you have, can be create by call createPaymentMethod
  */
 methodId?: string;
 /**
  * The client_secret when you create payment intent, contain in the response
  */
 client_secret?: string;
 /**
  * The payment intent you would like to checkout
  * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
  */
 id?: string;
 /**
  * The payment method component your website would like to integrate with
  */
 customer_id?: string;
 /**
  * Indicate whether to save this payment method for future payment
  */
 save_payment_method?: boolean;
 /**
  * The payment method detail return by call createPaymentMethod
  */
 payment_method?: {
   /**
    * Card info
    */
   card: {
     /**
      * Card holder name
      */
     name?: string;
   };
   /**
    * Card billing information if exist
    */
   billing?: Billing;
 };
 /**
  * Only apply for card payment, use this option to provide additional config to confirm payment intent
  */
 payment_method_options?: {
   /**
    * Option only apply to card
    */
   card?: {
     /**
      * Only support for card payment, indicate whether to capture immediate when authentication success
      */
     auto_capture?: boolean;
   };
 };
 /**
  * Response error when failed to call createPaymentMethod
  */
 error?: {
   /**
    * Free text message in english
    */
   message?: string;
   /**
    * String code, will support in the future
    */
   code?: string;
 };
}
/**
* Interface to confirm a payment intent with card payment method, the full api request payload can be found:
* [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/_api_v1_pa_payment_intents__id__confirm/post)
*
* BACKGROUNDS:
* ------------
* Due to [PCI CSS](https://www.pcisecuritystandards.org/) Airwallex js SDK will load Airwallex javascript to handle all sensitive information
* The PCI Security Standards Council (SSC) defines `cardholder data` which must also be protected:
*
* Primary Account Number (PAN) or the full PAN along with any of the following elements: `Cardholder name` `Expiration date` `Service code`
*
* Sensitive Authentication Data, which must also be protected, includes full magnetic stripe data, CAV2, CVC2, CVV2, CID, PINs, PIN blocks
* Only apply to Card elements (`cardNumber` | `cvc` | `expiry`) integration, refer to ElementType
*
* SOLUTIONS:
* ------------
* The javascript SDK will fulfill collection of all the sensitive information required by PCI DSS
*
* You checkout page can collect the rest of NON-PCI DSS data and call confirmPaymentIntent using below interface to pass them to Airwallex checkout
*/
export interface PaymentMethod {
 /**
  * Element create by call createElement interface with 'cardNumber' element type
  */
 element: Element;
 /**
  * The payment method id if you have, can be create by call createPaymentMethod
  */
 methodId?: string;
 /**
  * The client_secret when you create payment intent, contain in the response
  */
 client_secret?: string;
 /**
  * The payment intent you would like to checkout
  * Refer to [Airwallex Client API](https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro)
  */
 id?: string;
 /**
  * The payment method component your website would like to integrate with
  */
 customer_id?: string;
 /**
  * Indicate whether to save this payment method for future payment
  */
 save_payment_method?: boolean;
 /**
  * The payment method detail return by call createPaymentMethod
  */
 payment_method?: {
   /**
    * Card info
    */
   card: {
     /**
      * Card holder name
      */
     name?: string;
   };
   /**
    * Card billing information if exist
    */
   billing?: Billing;
 };
 /**
  * Only apply for card payment, use this option to provide additional config to confirm payment intent
  */
 payment_method_options?: {
   /**
    * Option only apply to card
    */
   card?: {
     /**
      * Only support for card payment, indicate whether to capture immediate when authentication success
      */
     auto_capture?: boolean;
   };
 };
 /**
  * Response error when failed to call createPaymentMethod
  */
 error?: {
   /**
    * Free text message in english
    */
   message?: string;
   /**
    * String code, will support in the future
    */
   code?: string;
 };
}

Once your customization is complete, you need to create the fields that will collect the information from the Buyer:

// Scenario #1: Slim card integration
// Step #3: Create 'card' element
const card = Airwallex.createElement('card');
// Step #4: Mount card element
card.mount('card');

// Scenario #2: Full featured card integration
// Step #3: Create 'fullFeaturedCard' element
const card = Airwallex.createElement('fullFeaturedCard', {
   intent: { // Required, dropIn use intent Id and client_secret to prepare checkout
     id: 'replace-with-your-intent-id',
     client_secret: 'replace-with-your-client-secret'
   }
});
// Step #4: Mount 'fullFeaturedCard' element
card.mount('full-featured-card');

// Scenario #3: Split card element integration
// Step #3.1: Create 'cardNumber' element
const cardNumber = Airwallex.createElement('cardNumber');
// Step #3.2: Create 'expiry' element
const expiry = Airwallex.createElement('expiry');
// Step #3.3: Create 'cvc' element
const cvc = Airwallex.createElement('cvc');
// Step #4: Mount card elements
cardNumber.mount('cardNumber');
expiry.mount('expiry');
cvc.mount('cvc');

// Scenario #4: Wechat element integration
const wechat = Airwallex.createElement('wechat', {
  intent: { // Required, dropIn use intent Id and client_secret to prepare checkout
    id: 'replace-with-your-intent-id',
    client_secret: 'replace-with-your-client-secret'
  }
});
// Step #4: Mount 'wechat' element
wechat.mount('wechat');
  1. Place the card elements on your checkout page . You can use the html template snippet below to fulfill this task
// Scenario #1: Slim card integration
<div id='card'></div>
<button id='submit'>Your Submit</button>

// Scenario #2: Full featured card integration
<div id='full-featured-card'></div>

// Scenario #3: Split card element integration
   <label>
     Card number
     <div id='cardNumber'></div>
   </label>
   <label>
     Expiry
     <div id='expiry'></div>
   </label>
   <label>
     CVC
     <div id='cvc'></div>
   </label>

// Scenario #4: Wechat element integration
   <div id='wechat'></div>

These elements collect sensitive details from the buyer. This provides you the freedom to leverage our API to integrate the other payment methods and or collect the rest of the information you want to provide Airwallex.

  1. Leverage the following script in order to provide our API with the payment method sensitive details
 // Step #5: Confirm payment intent with id and client_secret
// Scenario #1: Slim card integration
   // Bind event listener on your submit button to confirm the intent
   document.getElementById('submit').addEventListener('click', () => {
     // Step #5: Confirm payment intent with id and client_secret
     Airwallex.confirmPaymentIntent({
       element: card,
       id: 'replace-with-your-intent-id',
       client_secret: 'replace-with-your-client-secret'
     }).then((response) => {
       /* handle confirm response in your business flow */
       alert(JSON.stringify(response));
     });
   });
   window.addEventListener('onReady', (event) => {
     /*
       ... Handle event
     */
     alert(event.detail)
   })

// Scenario #2: Full featured card integration
window.addEventListener('onSuccess', (event) => {
  /*
    ... Handle event
  */
  alert(JSON.stringify(event.detail));
 })

// Scenario #3: Split card element integration
document.getElementById('submit').addEventListener('click', () => {
  // Step #5: Confirm payment intent with id and client_secret
  Airwallex.confirmPaymentIntent({
    element: cardNumber,
    id: 'replace-with-your-intent-id',
    client_secret: 'replace-with-your-client-secret'
  }).then((response) => {
    /* handle confirm response in your business flow */
    alert(JSON.stringify(response));
  });
});
window.addEventListener('onReady', (event) => {
  /*
    ... Handle event
  */
  alert(event.detail)
});

// Scenario #4: Wechat element integration
window.addEventListener('onSuccess', (event) => {
  /*
    ... Handle event
  */
  alert(JSON.stringify(event.detail));
});
  1. You must listen to the events of the element to appropriately react to those during your checkout. The following interface defines the data you can collect from an event
/**
* Supported integration element type
*/
export type ElementType =
 | 'cardNumber'
 | 'expiry'
 | 'cvc'
 | 'paymentRequestButton'
 | 'card'
 | 'wechat'
 | 'dropIn'
 | 'fullFeaturedCard';

/**
* Define of error code when failed to validate user input or failed to request
* [Error codes](https://www.airwallex.com/docs/payments__error-codes)
*/
export type ERROR_CODE =
 | 'required'
 | 'invalid'
 | 'un_support'
 | 'expired'
 | 'validation_error'
 | 'duplicate_request'
 | 'resource_not_found'
 | 'resource_already_exists'
 | 'state_invalid_for_operation'
 | 'service_unavailable'
 | 'processor_unavailable'
 | 'processor_busy'
 | 'processor_declined'
 | 'amount_above_limit'
 | 'frequency_above_limit'
 | 'transaction_blocked'
 | 'payment_blocked'
 | 'unsupported_operation_on_payment_method'
 | 'capture_amount_above_limit'
 | 'refund_amount_above_limit'
 | 'insufficient_available_funds'
 | 'insufficient_incoming_funds'
 | 'processor_user_account_abnormal'
 | 'processor_refund_period_expired'
 | 'processor_refund_offline_required';

/**
* Event code supported value by element when shopper interact with the checkout element
*
* `onReady`: The event fires when a given element resource has loaded.
*
* `onSubmit`: The event is raised when confirm the intent. It fires after the click Pay button or calling confirmPaymentIntent function.
*
* `onSuccess`: The event fires when a intent is confirm with Airwallex
*
* `onError`: Error events are fired at various targets for different kinds of errors with shopper interaction, refer to `ElementError` interface.
*
* `onCancel`: The event fires when shopper click cancel button when interact with the payment form.
*
* `onFocus`: The event is raised when the shopper sets focus on an input by click or tab switch interaction.
*
* `onBlur`: The event is raised when an input in 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.
*
* `onClick`: The event is raised when the user clicks on an input 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
*/
export type EventCode =
 | 'onReady'
 | 'onSubmit'
 | 'onDynamicCurrencyConversion'
 | 'onSuccess'
 | 'onError'
 | 'onCancel'
 | 'onFocus'
 | 'onBlur'
 | 'onChange'
 | 'onClick';

/**
* Return error when failed to validate user input or failed to request
*/
export interface ElementError {
 /**
  * Feel text message in english
  */
 message: string;
 /**
  * String code, will support in the future
  */
 code?: ERROR_CODE;
}

/**
* Event detail, field define by CustomEvent, we fully leverage it to communicate the event payload
*/
export interface EventDetail {
 /**
  * Type of element which fire the event
  */
 type: ElementType;
 /**
  * Indicate if the element input is validate format
  */
 complete?: boolean;
 /**
  * Indicate if the element input is empty or not
  */
 empty?: boolean;
 /**
  * Indicate the brand of card, only apply for card payment method
  */
 brand?: string;
 /**
  * Indicate the confirm response when integrate with `paymentRequestButton` | `card` | `wechat` | `dropIn` element
  */
 intent?: Intent;
 /**
  * Response error when failed to call interact with shopper input
  */
 error?: ElementError;
}

/**
* The event object your checkout page can listen to by below implementation:
*
* Using html [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)
*
* window.addEventListener(code: EventCode, (event: { detail: ElementEvent }) => /* Your code here *\/ );
*/
export interface ElementEvent {
 /**
  * Event type code
  * https://developer.mozilla.org/en-US/docs/Web/API/Event/type
  */
 type: EventCode;
 /**
  * Event detail of CustomEvent
  * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail
  */
 detail: EventDetail;
}
/**
* Functions and external fields can be using in your integration flow with airwallex element
*
* Two ways to get elements, by call createElement function or getElement
*
* ***IMPORTANT***
*
* Once element destroy by call function destroyElement, the element reference should not be using anymore
*/
export interface Element {
 /**
  * Refer to the options when call createElement
  */
 options?:
   | CardElementOptions
   | CardNumberElementOptions
   | ExpiryDateElementOptions
   | CvcElementOptions
   | FullFeaturedCardElementOptions
   | DropInElementOptions
   | WechatElementOptions
   | PaymentRequestButtonOptions;
 /**
  * The iframe element after mount to the DOM
  */
 iframe: HTMLIFrameElement | null;
 /**
  * Refer to the DOM element you call mount function
  */
 domElement: string | HTMLElement;
 /**
  * Element integration `step #3`
  * Mount payment element to your HTML DOM element for checkout
  */
 mount(domElement: string | HTMLElement): void;
 /**
  * Using this function to blur the input html element
  */
 blur(): void;
 /**
  * Using this function to focus the input html element
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur
  */
 focus(): void;
 /**
  * Using this function to unmount the element, opposite to mount function
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
  */
 unmount(): void;
 /**
  * Using this function to update the element option after create the element
  */
 update(
   options?:
     | CardElementOptions
     | CardNumberElementOptions
     | ExpiryDateElementOptions
     | CvcElementOptions
     | FullFeaturedCardElementOptions
     | DropInElementOptions
     | WechatElementOptions
     | PaymentRequestButtonOptions,
 ): void;
}