Are there any online resources that can help me build a custom donation form in Webflow that can connect to a payment partner allowing for iDEAL payments in the Netherlands?

TL;DR
  • Build a form in Webflow, then connect it to Stripe (or Mollie) via Stripe Checkout, Payment Links, or automation tools like Make to support iDEAL payments.  
  • Use custom code or Webhooks to pass form data and redirect users to a Stripe iDEAL-enabled checkout page, as Webflow’s native tools don't support iDEAL directly.

To build a custom donation form in Webflow with support for iDEAL payments (commonly used in the Netherlands), you’ll need to integrate with a payment processor that supports iDEAL and connect it to Webflow via custom code or a third-party tool.

1. Use Payment Processors That Support iDEAL

  • Stripe is a popular payment processor that supports iDEAL and can be integrated with Webflow.
  • Other options include Mollie and PayPal, but for seamless Webflow integrations, Stripe is the most developer-friendly.

2. Build a Custom Donation Form in Webflow

  • Design the donation form using Webflow’s native Form block.
  • Include necessary fields like name, email, amount, and a hidden field if needed for donation metadata.
  • Use custom attributes or IDs on elements to reference them in your custom script.
  • Important: Webflow's native e-commerce checkout does not support iDEAL, so you'll need third-party or custom JS integration.

3. Integrate With Stripe via Payment Links or Stripe Checkout

  • Set up your products or donation tiers in Stripe Dashboard.
  • For no-code solution: Use Stripe Payment Links with iDEAL enabled. Then:
  • Create buttons or form-submit actions that redirect to the Stripe Payment Link.
  • Use conditional logic in Webflow (via custom JS) to dynamically link to appropriate payment URLs.
  • For custom integration: Embed Stripe Checkout using the Stripe API and a backend (via tools like Make, Zapier + serverless functions, or a custom server).
  • Use Stripe’s API to create a Checkout Session that includes paymentmethodtypes: ['ideal'].
  • Pass data from the Webflow form to your backend to start the session.

4. Use Third-Party Tools if You Don’t Want to Code

  • Outseta: Supports custom forms and payments, but does not natively support iDEAL.
  • Memberstack, Make, or Zapier:
  • Combine tools like Webflow + Make + Stripe API to handle form input, call Stripe, and redirect users to the right Checkout URL.
  • Make has native integrations for both Stripe and Mollie, and can easily be connected to Webflow forms via Webhooks.

5. Helpful Online Resources

  • Stripe Docs on iDEAL: https://stripe.com/docs/sources/ideal
  • Webflow + Stripe via Make tutorial: Search for relevant tutorials on YouTube or at university.webflow.com (though direct iDEAL integration isn’t covered).
  • Mollie Webflow Integration articles: Look for community guides or consult Mollie’s docs at https://docs.mollie.com.
  • Online Courses or Templates:
  • Check JetboostFinsweet, or Flowbase for prebuilt components that might help speed up UI, though integration with iDEAL will still require custom work.

Summary

To build a donation form in Webflow with iDEAL support, use Stripe (with iDEAL enabled) or Mollie, and connect via Stripe Checkout, custom code, or automation platforms like Make. Webflow does not natively support iDEAL, so third-party integration is required. Use resources like Stripe DocsMake, and community tutorials to guide your implementation.

Rate this answer

Other Webflow Questions