Airwallex

Airwallex handles 160+ local payment methods and interbank FX rates through hosted payment pages, payment links, and a REST API — filling the gap for cross-border sellers who need more than Stripe or PayPal. Native Ecommerce checkout supports only those two providers (plus Apple Pay/web payments), and you can't slot Airwallex into that flow.

The workaround: build product pages in Webflow, send shoppers to Airwallex's secure checkout, and write transaction records back to the Webflow CMS after payment. This fits agencies building storefronts for cross-border merchants, SaaS teams running subscription billing, founders chasing lower FX costs, and marketplace operators paying suppliers in multiple currencies through Airwallex payouts.

How to integrate Airwallex with Webflow

What is Airwallex? Airwallex is a global financial platform for international payments, multi-currency accounts, FX, corporate cards, and payouts. Businesses accept payments through hosted checkout supporting 160+ local payment methods, send transfers to 200+ countries at interbank rates, and embed financial products via API. It holds PCI-DSS Level 1 certification.

Reach for Airwallex on Webflow when cross-border revenue makes Stripe or PayPal FX costs add up. Your product page redirects to Airwallex checkout, the customer pays in a local method, and order data lands in your CMS. The method you pick depends on whether you have a backend and how much control over the checkout UI you need.

The Airwallex-Webflow integration supports three approaches:

• Payment Links and hosted checkout let you accept payments with a pasted URL or a small script embed, with no full backend required for the Payment Links path.
• Code Embed with Airwallex.js lets you mount drop-in or embedded checkout elements, but these require a server-side PaymentIntent.
• The Webflow and Airwallex APIs give you full control over checkout, refunds, subscriptions, and CMS sync, but require server-side development.

Most implementations combine two or more of these methods depending on setup complexity.

Add Airwallex Payment Links to Webflow buttons

Payment Links are the only no-code path to accept payments on Webflow. You generate a secure hosted checkout URL in the Airwallex web app, then paste it into any button or text link href. The link opens Airwallex's hosted payment page, which handles cards and local payment methods. You don't need custom code, a backend, or server execution on your site.

To set up the integration:

1. In the Airwallex web app, go to Payments > Payment Links > New payment link.
2. Copy the generated URL.
3. In Webflow, paste the URL into a button or text link's href field.

This pattern covers several common scenarios without writing code:

• One-time product purchases on a landing page
• Invoices for B2B services and agency work
• Donation buttons on campaign pages

Payment Links keep your PCI scope at SAQ A because card collection happens on Airwallex's hosted page. For embedded checkout or order sync back to the CMS, move to the methods below.

Add Airwallex checkout with Code Embed elements

For checkout that stays closer to your site, use the Code Embed element or page-level custom code to load Airwallex.js. This approach covers hosted page redirects triggered from your own button and embedded checkout elements. Each Code Embed block caps at 50,000 characters. Server-side languages don't run inside your site, so anything beyond a basic link needs external middleware for the PaymentIntent.

Redirect to the hosted payment page

The hosted payment page is Airwallex's low-code redirect flow. Add an Airwallex.js snippet to a Code Embed element or to the page head through custom code in head and body tags. A backend still creates the PaymentIntent before the redirect fires. This pattern keeps your PCI scope at SAQ A and supports Apple Pay and Google Pay.

To redirect a customer to hosted checkout:

1. On your backend, authenticate with POST /api/v1/authentication/login and store the token server-side.
2. Create a PaymentIntent with POST /api/v1/pa/payment_intents/create. Pass amount, currency, and auto_capture.
3. In a Code Embed, call Airwallex.js payments.redirectToCheckout with the returned client_secret and a successUrl.

The customer returns to your success URL after paying, and your backend confirms the result through a webhook.

Mount drop-in or embedded elements

The drop-in element renders a prebuilt checkout block inside your page using createElement('dropIn', options) and mount(domElement). Embedded elements provide individual card, Apple Pay, and Google Pay components. Both require a server-side PaymentIntent, and the drop-in element also needs a registered merchant domain under Payments > Settings in the Airwallex web app.

To mount a drop-in element:

1. On your backend, create a PaymentIntent and return its id and client_secret to the page.
2. Load Airwallex.js in a Code Embed and initialize it with the client_secret.
3. Call createElement('dropIn', options) and mount it to a div in your layout.

Decide the charge amount server-side to prevent tampering — these elements never work from client-side code alone.

Connect Webflow and Airwallex with Zapier

Zapier is the only automation platform where both apps are natively accessible today. Make, n8n, and IFTTT have no Airwallex connector, and viaSocket's Airwallex app sits in beta. No prebuilt Webflow + Airwallex template exists, so you build a custom Zap from each app's native triggers and actions.

Useful trigger-to-action pairings include:

• Webflow New Form Submission → Airwallex Create Payment Acceptance Customer
• Airwallex New Transaction → Webflow Update Live Item, to sync order status to the CMS
• Webflow New Order → Airwallex Create Beneficiary, for marketplace payouts

Airwallex's Zapier integration isn't available for customers in the UK or EU, so confirm your region before building a Zap.

Build with the Webflow and Airwallex APIs

For full control over checkout, subscriptions, refunds, and CMS sync, call both REST APIs from a backend or serverless function. This path suits developers comfortable with server-side code and webhook handling. Never put API keys in browser-side custom code. Run all authenticated calls from external infrastructure like AWS Lambda, Vercel Functions, or Cloudflare Workers.

The relevant APIs are:

• Airwallex Payment Intents API handles one-time charges through create, confirm, and retrieve endpoints
• Airwallex Transfers API handles cross-border payouts to beneficiaries
• The Data API handles CMS collection items and form submissions
• Webhooks trigger real-time events like collection_item_created and form_submission

Your site can't receive webhook POST requests directly, so your middleware listens for Airwallex events and writes to the CMS.

Sync transaction records to the Webflow CMS

After a successful payment, write the order to a CMS collection so it appears on your site or in a member dashboard. Your serverless function listens for the Airwallex webhook, then calls the CMS API. This is the standard way to turn a payment event into a published record.

To sync a transaction:

1. Register a webhook endpoint on your serverless function and listen for payment_intent.succeeded.
2. On receipt, verify the x-signature HMAC-SHA256 header and return 200 OK.
3. Call POST https://api.webflow.com/v2/collections/{collection_id}/items/live with a fieldData object that contains at least name and slug.

Generate the CMS bearer token from Site settings > Apps & integrations > API access. Note that the CMS plan supports 120 requests/minute through the API, so plan your sync logic around transaction volume and rate limits.

Run subscriptions with billing checkouts

For recurring revenue, use Airwallex billing checkouts to manage subscriptions and sync status to gated content. You create a billing customer, open a checkout in subscription mode, then update CMS items as the subscription lifecycle changes. This drives membership portals where access depends on payment status.

To set up a subscription:

1. On your backend, create a billing customer with POST /api/v1/billing_customers/create.
2. Create a billing checkout with POST /api/v1/billing_checkouts/create and mode: SUBSCRIPTION.
3. Redirect the user to the hosted checkout URL, then listen for the subscription.active webhook to confirm activation.

Subscription status moves through PENDING, IN_TRIAL, ACTIVE, UNPAID, and CANCELLED, so map those states to CMS fields that control access.

What can you build with the Airwallex Webflow integration?

Integrating Airwallex with Webflow lets you accept global payments and track orders in your CMS without replacing your native checkout with a gateway it doesn't support.

• Cross-border product checkout: Build product pages in Webflow that redirect to Airwallex hosted checkout, then write the order to a CMS collection through a webhook after payment_intent.succeeded. Shoppers pay in local methods while you settle in your chosen currency.
• Membership payment portals: Create registration forms that process subscription payments through Airwallex billing checkouts, then update CMS items to grant access to gated content when subscription.active fires.
• No-code invoice and service payments: Paste Airwallex Payment Links into Webflow buttons for agency invoices or B2B services, covering 160+ payment methods with no backend.
• Donation pages: Accept donations on a campaign landing page through an Airwallex hosted page, then store donor records in a CMS collection for reporting and follow-up.

If you need more control over custom checkout UI or marketplace payouts, the API integration path covers those cases with full flexibility.