Airwallex

How to integrate Airwallex with Webflow

Integrating Airwallex with Webflow lets you accept payments on your site while maintaining PCI compliance and flexible payment flows. Teams use this integration to process transactions, manage orders in Webflow CMS, and automate payment workflows without building custom payment interfaces from scratch.

You can integrate Airwallex with Webflow through hosted payment pages that redirect customers to secure checkout or by building custom implementations using both platforms' APIs.

Use Airwallex hosted payment pages

Airwallex provides hosted payment pages that you can redirect customers to from your Webflow site. This redirect method doesn't require embedding payment forms directly on your Webflow pages, which helps maintain PCI compliance since sensitive card data is collected on Airwallex's infrastructure.

Generate payment sessions through Airwallex API calls, then redirect customers to Airwallex-hosted checkout pages using the payment link returned by the API. After customers complete payment on Airwallex's pages, they return to your Webflow site via a configured return URL.

This approach works when you want to accept payments without building custom payment interfaces on your Webflow site.

Build with Webflow and Airwallex API

You can connect Airwallex to Webflow by implementing API calls from your site and setting up webhook listeners to receive payment events. This method requires technical implementation but provides complete control over the payment experience and data flow.

Start by configuring authentication with Airwallex, then implement payment flows using their hosted pages or direct API integration. Set up a webhook endpoint to receive payment status updates and synchronize that data with Webflow CMS using the Webflow CMS API.

This integration enables the following actions:

• Process payments using Airwallex's hosted payment pages by redirecting customers to Airwallex-hosted checkout pages that handle payment collection
• Receive payment notifications through webhook events that notify you of payment status changes like successful charges or failed transactions
• Sync payment data to Webflow CMS using the collection items API to store transaction records in your Webflow CMS for order management
• Authenticate API requests with Webflow bearer tokens to secure your CMS API calls

You'll need server infrastructure or serverless functions to handle API requests and webhook processing, as client-side JavaScript alone cannot securely manage payment credentials or process webhook events.

Accept payments with hosted pages

When building with the API method, you can integrate Airwallex's hosted payment pages into custom workflows that synchronize payment data with Webflow CMS. This involves generating payment sessions programmatically and using webhooks to update your Webflow collections based on payment outcomes.

According to the documentation, this approach involves:

• Generate payment sessions through Airwallex API calls from a serverless function or external server
• Redirect customers to Airwallex-hosted checkout pages for payment collection
• Receive payment status through return URLs after payment completion
• Update order status via webhook notifications sent to your endpoint

Use this pattern when you want to accept payments without building custom checkout interfaces.

Set up webhook listeners to receive real-time payment notifications. When payment events occur, your webhook endpoint can update Webflow CMS items using the CMS API to reflect order status changes.

Synchronize payment data to Webflow CMS

Store transaction records and payment metadata in Webflow CMS collections to build order management interfaces or customer dashboards. When your webhook endpoint receives payment notifications from Airwallex, make API calls to Webflow to create or update collection items.

This synchronization involves:

• Configure Webflow authentication with site-scoped bearer tokens according to Webflow's authentication documentation. Generate tokens from Site settings > Apps & integrations > API access. Each token grants full access to the site's CMS collections and items.
• Create collection items to store transaction records, customer information, and payment details
• Update items when webhook notifications arrive from Airwallex with status changes
• Query payment history through CMS API endpoints for displaying in admin interfaces

This pattern works for building admin interfaces where staff view orders, customer portals showing payment history, or automated email triggers based on payment status changes. Combine Webflow's webhook events with Airwallex notifications to keep both systems synchronized.

What you can build

Integrating Airwallex with Webflow lets you build payment systems that process transactions and sync order data to your site's CMS.

• Product checkout pages: Build product pages in Webflow that redirect to Airwallex-hosted checkout for payment processing, with order data syncing back to Webflow CMS collections after successful payment
• Membership payment portals: Create member registration forms that process subscription payments through Airwallex, then update Webflow CMS items to grant access to gated content based on payment status
• Donation pages: Design campaign landing pages that accept donations through Airwallex's payment processing, storing donor information and contribution amounts in Webflow CMS for reporting
• Order management dashboards: Build internal admin interfaces using Webflow CMS that display transaction data received from Airwallex webhooks, showing payment status and customer details for fulfillment teams