Apple Pay Element
The Apple Pay Element allows you to offer Apple Pay checkout option on your website. Shoppers can click the Apple Pay button and pay using Touch ID or Face ID.
Checkout flow
If you want to offer a one-off or single payment experience where the shopper is present and active on your shop site, see Guest user checkout.
If you want to save shopper's payment details for future payments, see Registered user checkout.
Supported features
You can add the following features to your Embedded Element integration.
Style and appearance customization
You can use style, appearance, buttonType and buttonColor objects in createElement() to customize the Apple Pay Element.
style
Provide base styling for the iframe using CSS properties.
appearance
Fine tune individual Elements and states by specifying custom CSS properties using rules. The following classes and pseudo-classes can be styled using rules.
.ApplePayButton: CSSProperties.ApplePayButton:hover: CSSProperties
Localization
You can configure the Element to display localized text for payment fields based on the locale specified in init(). If no locale is specified, the browser's locale will be used, if it is supported by Airwallex.js. For a list of supported locales, see locales JS.
If the browser's locale is not supported, the Element will default to en.
Device fingerprinting
Device fingerprinting uniquely tracks and identifies devices used for transacting on your shopping site, increasing your protection from fraud. Airwallex.js automatically handles device fingerprinting, so no additional integration is needed.
FAQ
What are the common error scenarios with Embedded Elements integration?
The following errors are specific to payment Elements, Hosted Payment Page, Drop-in Element, Card Element, Split Card Element, Apple Pay Element, or Google Pay Element.
| Error code | Error message | Next steps |
|---|---|---|
| unauthorized | Access denied, authentication failed. | Regenerate the access token and re-authenticate to Airwallex. |
| awx_pay_error | Your payment was declined. Please try a different account or choose another payment method. | Retry with another payment method and if the issue persists, try a different account. |
| custom_code | Your current bank account balance is ${balanceAmount} EUR. To complete your payment, please add sufficient funds or choose a different account. | Add sufficient funds to your bank account or choose a different bank account. |
| resource_not_found | ${resourceID} cannot be found. Note: Resource may be either Payment Intent or Customer. |
Provide a valid identifier for Payment Intent or Customer. |
| required | ${inputName} is required. | Provide values for the required checkout fields. |
| invalid | ${inputName} is invalid. | Ensure values provided in the checkout fields are valid. |
| un_support | This card is not supported for payment. Please specify a different card. | Try payment with a different card. See supported card payment methods. |
| expired | The card’s expiration date cannot be in the past. Please enter a valid expiration date. | Check the card expiry date and ensure the value is valid. |
| no_payment_methods | No available payment methods. Please contact support to enable payment methods. | See supported card payment methods. |