Mollie

How to integrate Mollie with Webflow

Webflow's architecture does not support server-side code execution or inbound webhook reception, which prevents direct Mollie integration.

The easiest way to set up your Mollie Webflow integration is through Mollie's hosted payment solutions, like payment links or hosted checkout pages that require no coding. You can also connect Mollie payments with Webflow data through automation platforms like Zapier and Make.com. If you need custom checkout experiences or complex payment workflows, you can build with the Mollie API and Webflow API using external middleware.

Use Mollie payment links and hosted checkout

Mollie provides two no-code solutions that work within Webflow's frontend-only architecture. Payment links generate shareable checkout URLs through the Mollie dashboard, while hosted checkout creates a branded payment page on Mollie's servers. Both methods handle PCI compliance automatically and support all Mollie payment methods.

Create payment links through the Mollie dashboard by navigating to Browse → Payment links → Create. Configure the payment amount, description, and accepted payment methods. Copy the generated URL and add it to any Webflow button or link element. For hosted checkout, customize the appearance in More → Checkout and link directly to the checkout URL from your Webflow site.

Payment link capabilities:

• Generate single-use or reusable links through the Mollie dashboard or mobile app
• Share via any channel including email, social media, or embedded in Webflow pages
• Track payment status through the Mollie dashboard

Hosted checkout features:

• Customize branding and appearance through visual dashboard settings
• Support all Mollie payment methods automatically with zero additional setup
• Mobile-responsive design handled automatically by Mollie's infrastructure
• PCI-compliant with Mollie managing all payment security
• Redirect customers back to your site after payment completion

This approach works for donations, single-product sales, event registrations, and simple checkout scenarios. Customers redirect to Mollie's pages for payment processing, then return to your Webflow site after completion.

Connect through automation platforms

Automation platforms create workflows between Mollie and Webflow without requiring code. Zapier provides six Mollie triggers (New Payment, Payment Refunded, Subscription Created, New Order, Failed Payment, New Customer) and multiple Webflow actions (Update Item, Create Item, Fulfill Order, Refund Order). Make.com supports complex multi-step scenarios with conditional branching logic. viaSocket provides six Mollie triggers including options for chargebacks and settlements.

Connect both accounts to your chosen platform, then configure triggers and actions through visual builders. Zapier provides pre-built templates that create Mollie payments from Webflow form submissions or new orders. Make.com requires building custom scenarios but offers more flexibility for complex workflows.

Zapier workflows:

• New Payment trigger creates or updates Webflow CMS items with payment status
• Payment Refunded trigger updates order status and refunds Webflow orders
• Subscription Created trigger adds members to Webflow CMS collections
• Failed Payment trigger creates follow-up tasks in Webflow collections

Make.com capabilities:

• Watch new payments triggers workflows when Mollie receives payments
• Create items stores transaction records in Webflow CMS collections
• Update items syncs payment status changes
• Conditional routing handles different payment methods with separate logic branches

viaSocket features:

• New Payment Chargeback trigger creates records in Webflow CMS when chargebacks occur
• New Settlements trigger logs settlement data to Webflow collections
• Pre-built templates for customer synchronization

Automation platforms enable order fulfillment, customer database synchronization, subscription management, and refund processing workflows. These platforms eliminate manual data entry between systems but add platform fees. Importantly, automation platforms cannot create embedded checkout experiences or handle real-time payment validation within Webflow pages due to Webflow's architectural limitations.

Build with Webflow and Mollie APIs

Custom API integration solves technical requirements that no-code tools cannot address: embedding checkout forms directly in Webflow pages, synchronizing payment data in real-time, processing webhooks with business logic, and building subscription systems with granular control. The Mollie Payments API handles transaction processing. The Webflow CMS API stores payment data. External middleware receives webhooks and executes server-side code.

Configure OAuth authentication for Webflow APIs using the authentication documentation with required scopes: cms:write, ecommerce:read, and sites:write. Store Mollie API keys in your middleware environment variables following Mollie's security best practices. Implement webhook signature verification using the X-Mollie-Signature header.

Process one-time payments

Create payment sessions by calling POST https://api.mollie.com/v2/payments from your external middleware with the transaction amount, description, and redirect URL pointing back to your Webflow site.

// Example payment creation (run in external middleware, not Webflow)
const response = await fetch('https://api.mollie.com/v2/payments', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${MOLLIE_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    amount: { currency: 'EUR', value: '10.00' },
    description: 'Order #12345',
    redirectUrl: 'https://yoursite.webflow.io/payment-complete',
    webhookUrl: 'https://your-middleware.com/webhooks/mollie'
  })
});

After payment completion, store the Mollie payment ID in your Webflow CMS by calling POST /collections/{collectionid}/items to link transactions with orders.

Configure webhooks to receive payment status updates by implementing external middleware. Webflow webhooks are outbound-only and cannot receive incoming webhooks from external services. Mollie sends POST requests to your middleware URL when payment status changes. Verify the X-Mollie-Signature header, then fetch complete payment details using GET https://api.mollie.com/v2/payments/{id}.

Handle refunds and cancellations

Process refunds through POST https://api.mollie.com/v2/payments/{paymentid}/refunds. Omit the amount parameter for full refunds or specify an amount object for partial refunds. Mollie sends webhook notifications as refund status progresses.

To implement Mollie payment refunds with Webflow, use a third-party automation platform like Zapier as an intermediary. Configure Zapier to listen for payment.refunded events in Mollie, then trigger Webflow CMS updates to store refund IDs and statuses. Alternatively, implement custom middleware that receives Mollie webhooks, verifies signatures, and updates Webflow CMS items.

Manage subscriptions and recurring billing

Create customer records first using POST https://api.mollie.com/v2/customers. Store the returned customer ID in Webflow member records or CMS collections. Establish payment mandates by creating an initial payment with sequenceType: "first".

Create subscriptions through POST https://api.mollie.com/v2/customers/{customerId}/subscriptions. Configure the billing interval, set a payment description, and specify a webhook URL for status updates. Mollie charges the customer automatically on each billing cycle and sends webhook notifications for successful and failed payments.

Sync order data between platforms

Register Mollie webhooks to receive payment status updates. Listen for payment.created events to track new payments and payment.paid events to confirm successful transactions. Handle payment.failed and payment.expired events to manage declined or abandoned payments. Use these webhooks with external middleware to update Webflow CMS collections. Webflow webhooks are outbound-only and cannot directly receive Mollie notifications.

Retrieve complete order details through GET https://api.webflow.com/v2/sites/{siteid}/orders. Extract line items, customer information, and billing addresses to populate Mollie payment requests. Store Mollie payment IDs in Webflow CMS collections by creating or updating collection items.

What you can build

Connect Mollie with Webflow to provide payment processing infrastructure for European merchants, supporting recurring billing, donation collection, and local payment methods.

Dutch market e-commerce: Build online stores with iDEAL integration for Dutch customers. Create product catalogs in Webflow, redirect to Mollie for checkout, and sync order data to Webflow CMS for fulfillment tracking.

Membership and subscription sites: Create SaaS platforms with automated recurring billing. Process initial mandate payments through Mollie's hosted checkout, then handle automatic renewals through Mollie's Subscriptions API.

Belgian market commerce: Build e-commerce sites with Bancontact payment support for Belgian customers. Design your storefront in Webflow, then use Mollie's Hosted Checkout or Payment Links for payment processing.

Nonprofit donation platforms: Create fundraising websites that accept one-time and recurring donations. Generate unique payment links for different campaigns and add them to Webflow buttons.