Mollie

How to integrate Mollie with Webflow

Mollie provides European payment processing with local methods like iDEAL and Bancontact that improve conversion rates in Netherlands and Belgian markets. Webflow cannot run server-side code or receive incoming webhooks, which affects how you implement Mollie payments.

You can connect Mollie with Webflow through payment links, hosted checkout pages, automation platforms, or custom API implementations with external middleware. Payment links and hosted checkout require no coding and redirect customers to Mollie's payment pages. Automation platforms like Zapier connect Mollie webhooks to Webflow CMS updates through visual workflows. Custom API builds require external middleware hosted on services like Vercel or AWS Lambda because Webflow cannot process webhooks or execute backend logic.

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 include the following:

• 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
• Distribute as URLs or buttons for different distribution methods
• Track payment status through the Mollie dashboard

Hosted checkout features include the following:

• Customize branding and appearance through visual dashboard settings at hosted checkout configuration
• Support all Mollie payment methods automatically with zero additional setup required
• 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 using configured redirect URLs

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. You cannot customize the checkout experience beyond Mollie's branding options, and real-time payment status updates require checking the Mollie dashboard.

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 eight Webflow actions (Update Item, Update Live Item, Create Item, Create Live Item, Fulfill Order, Unfulfill Order, Refund Order, Update Order). Make.com supports complex multi-step scenarios with conditional branching logic and offers triggers for new payments, subscription cancellations, and customer creation. viaSocket provides the most extensive trigger coverage with seven Mollie triggers including unique options for chargebacks and settlements, alongside Webflow actions for item and collection management.

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. viaSocket includes pre-built templates for creating or updating Webflow items when new Mollie customers are created.

Zapier workflows include the following:

• 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
• Create Item action stores payment data in custom Webflow CMS collections
• Fulfill Order action marks Webflow orders complete after successful payment

Make.com capabilities include the following:

• Watch new payments triggers workflows when Mollie receives payments through Make's Mollie integration
• 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 include the following:

• New Payment Chargeback trigger creates records in Webflow CMS when chargebacks occur via viaSocket's Mollie-Webflow integration
• New Settlements trigger logs settlement and financial transaction data to Webflow collections
• Pre-built templates for customer synchronization and collection item creation

Automation platforms like Zapier, Make, and viaSocket connect Mollie and Webflow for various tasks. They enable order fulfillment, customer database synchronization, subscription management, and refund processing workflows. These platforms process events asynchronously with typical delays of 1-5 seconds, though processing time can increase during high traffic periods. Platform fees apply separately from Mollie's transaction charges. Automation platforms cannot create embedded checkout experiences or handle real-time payment validation within Webflow pages. For embedded functionality, use Mollie's hosted solutions (hosted checkout or payment links) or implement custom middleware.

Build with Webflow and Mollie APIs

Custom API integration addresses technical requirements that no-code tools cannot handle. You can embed checkout forms directly in Webflow pages, synchronize payment data in real-time to custom CMS structures, process webhooks with business logic, and build subscription systems with granular control over billing cycles.

The Mollie Payments API handles transaction processing. The Webflow CMS API stores payment data. External middleware receives webhooks and executes server-side code. Webflow cannot run backend logic or accept incoming HTTP requests, so you must host middleware on external platforms like Vercel, AWS Lambda, or Heroku.

Configure OAuth authentication for Webflow APIs with required scopes: CMS:write, ecommerce:read, and sites:write. OAuth allows secure API access without exposing credentials. 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 according to Mollie's webhook best practices.

Process one-time payments

Endpoint: POST /v2/payments (Create payment documentation)

Required parameters include the following:

• amount: Currency and value
• description: Payment description
• redirectUrl: Webflow success/failure page

Optional parameters include the following:

• webhookUrl: Status notification endpoint
• metadata: Webflow order IDs, customer data
• method: Pre-select payment method

Implementation flow works as follows:

1. Webflow frontend calls your external middleware
2. Middleware calls POST /v2/payments to Mollie
3. Redirect customer to _links.checkout.href
4. Customer completes payment on Mollie's hosted page
5. Mollie triggers webhook to your middleware with status updates

Webhook events progress through these states:

• open → pending → paid (success)
• failed/expired/canceled (failure states)

Create payment sessions by calling POST <https://api.mollie.com/v2/payments> from your external middleware (not directly from Webflow) with the Payments API. Include 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/{collection_id}/items using the CMS API to link transactions with orders. Store API keys in middleware environment variables, not in client-side Webflow code.

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 using timing-attack-safe comparison, then fetch complete payment details using GET <https://api.mollie.com/v2/payments/{id}> from the Payments API.

// Example webhook handler (external middleware required)

const crypto = require('crypto');

‍

function verifyWebhook(signature, webhookBody, secret) {

  const hash = crypto.createHmac('sha256', secret)

    .update(webhookBody)

    .digest('hex');

  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(hash));

}

‍

Update corresponding Webflow CMS items using the CMS API endpoint PATCH /collections/{collection_id}/items with the new payment status. Alternatively, use third-party automation platforms like Zapier to sync payment data to Webflow CMS without custom middleware.

Implement idempotency using UUID4 values in the Idempotency-Key HTTP header to prevent duplicate payment charges and refunds from network failures and retry attempts. According to Mollie's API idempotency documentation, store these idempotency keys alongside corresponding Webflow order records. Reuse them for any retry attempts on the same operation. Idempotency keys expire after API credential rotation, requiring new keys for subsequent credential changes.

Handle refunds and cancellations

Process refunds through POST <https://api.mollie.com/v2/payments/{payment_id}/refunds> using the Refunds API. Omit the amount parameter for full refunds or specify an amount object for partial refunds. Mollie sends webhook notifications as refund status progresses through states from queued to pending, processing, and finally refunded, with webhooks also triggered for failed or canceled refund states, as documented in the refund documentation.

To implement Mollie payment refunds with Webflow, use a third-party automation platform like Zapier as an intermediary. Webflow cannot directly receive incoming webhooks from Mollie. Configure Zapier to listen for payment.refunded events in Mollie, then trigger Webflow CMS updates via the CMS API to store refund IDs and statuses in custom collections for customer service tracking. Alternatively, implement custom middleware that receives Mollie webhooks, verifies signatures, and updates Webflow CMS items via API calls to synchronize refund data across both systems.

Manage subscriptions and recurring billing

Create customer records first using POST <https://api.mollie.com/v2/customers> from the Mollie Customers API. Store the returned customer ID in Webflow member records or CMS collections. Establish payment mandates by creating an initial payment with sequenceType: "first" according to Mollie's Recurring Payments documentation.

Create subscriptions through POST <https://api.mollie.com/v2/customers/{customerId}/subscriptions> using the Subscriptions API. Configure the billing interval (using formats like "1 month", "3 months", or "1 year"), 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. Subscriptions require a customer record (created via the Customers API) and an initial mandate payment before recurring charges can begin.

Handle subscription lifecycle events by using external middleware to listen for Mollie webhook notifications. Webflow webhooks are outbound-only and cannot receive incoming webhooks from external services. Update Webflow member access based on payment status using the CMS API. Cancel subscriptions through DELETE <https://api.mollie.com/v2/customers/{customerId}/subscriptions/{subscriptionId}> when members request cancellation from your Webflow site.

Sync order data between platforms

Register Mollie webhooks to receive payment status updates, using POST <https://api.mollie.com/v2/sites/{site_id}/webhooks> from the Create Webhook documentation to configure external webhook endpoints. 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. Process refund.created and refund.completed notifications to synchronize refund status. Use these webhooks with external middleware to update Webflow CMS collections via the Webflow CMS API. Webflow webhooks are outbound-only and cannot directly receive Mollie notifications.

Retrieve complete order details through GET <https://api.webflow.com/v2/sites/{site_id}/orders> using the Ecommerce Orders API. 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 using the CMS API, storing the payment ID in a custom text field for bidirectional reference. Webflow cannot receive incoming webhooks. Implement external middleware or a third-party automation platform (Zapier, Make, Pipedream) to receive Mollie webhook notifications and synchronize payment status updates back to Webflow CMS collections.

Implement rate limiting to stay within Mollie's API rate limits according to error handling documentation. Use exponential backoff for retry logic when receiving HTTP 429 responses. Queue requests during high-traffic periods to prevent exceeding rate limits and verify reliable API communication.

What you can build

Integrating Mollie with Webflow provides payment processing infrastructure for European merchants, supporting recurring billing, donation collection, and local payment methods like iDEAL and Bancontact.

• Dutch market e-commerce: Build online stores targeting Netherlands customers with iDEAL integration. Create product catalogs in Webflow, redirect to Mollie for checkout, and sync order data back to Webflow CMS for fulfillment tracking through Zapier workflows or custom middleware.
• Membership and subscription sites: Create SaaS platforms or content subscriptions with automated recurring billing. Store customer records in Webflow CMS, process initial mandate payments through Mollie's hosted checkout, then handle automatic renewals through Mollie's Subscriptions API. Sync subscription status updates to Webflow CMS using automation platforms like Zapier, which monitors Mollie subscription webhooks and updates CMS records.
• Belgian market commerce: Build e-commerce sites for Belgian customers requiring Bancontact payment support. Design your storefront in Webflow with complete brand control, then use Mollie's hosted checkout or payment links for payment processing. Implement payment status synchronization through third-party automation platforms.
• Nonprofit donation platforms: Create fundraising websites that accept one-time and recurring donations through payment links or hosted checkout. Generate unique payment links for different campaigns through the Mollie dashboard and add them to Webflow buttons. For automated donation tracking and CMS synchronization, set up Mollie webhooks through a third-party automation platform (such as Zapier) to update Webflow CMS collections with donation records and sync donor information for relationship management.

‍