Webflow sync, pageviews & more.
NEW

How can I capture and display messages returned from a custom action URL or API endpoint in Webflow? Specifically, I am integrating Stripe donations and need to show a different message for successful charges and failed charges. Can I submit the form to a different page for processing and then redirect the user to a success or error page based on the outcome?

TL;DR
  • Set the Webflow form’s action to a custom server endpoint that handles Stripe payments via POST.
  • On the server, process the payment and redirect users to either a success or error Webflow page.
  • Alternatively, redirect to a single page with query parameters and use JavaScript to display different messages.

To handle Stripe donations in Webflow and show different messages based on the charge result, you need to use a custom form processing flow with conditional redirection.

1. Use a Custom Action URL for the Form

  • In your Webflow Designer, select your form and open its settings.
  • Set the Form Action to the external server-side endpoint or API proxy you've configured to handle the Stripe payment (e.g., hosted on Node.js, PHP, etc.).
  • Set the Form Method to POST.

2. Process the Form on the Server

  • Your backend script (on the action URL) should:
  • Receive form data like name, email, Stripe token/payment method ID.
  • Use the Stripe API to create a charge or subscription.
  • Redirect the user based on the result:
    • On success, redirect to a Webflow success page (e.g., /thank-you).
    • On failure, redirect to a custom error page (e.g., /payment-error).

3. Set Up Webflow Success and Error Pages

  • Create a Webflow page like /thank-you for successful payments.
  • Create a separate page like /payment-error to show an error message.
  • Customize each page with your messaging, e.g., "Thank you for your donation!" or "Payment failed. Please try again."

4. Optional: Use Query Parameters for Custom Message Display

  • If you prefer a single redirect page, have your backend redirect like: /payment-status?success=true or /payment-status?error=card_declined
  • On your Webflow page, add custom code to parse the query string and display the correct message using JavaScript.
  • Example: Use window.location.search to detect ?success=true and update content dynamically.

5. Ensure Form Doesn't Use Webflow Native Form Submission

  • Since you're handling submission externally:
  • Webflow's built-in success/error handling won't be used.
  • Ensure the Webflow form doesn't rely on Webflow Forms backend, just uses your custom action URL.

Summary

To display success or error messages after submitting a Stripe-powered Webflow form, post the form to a custom server endpoint, process the payment there, and redirect users to different Webflow pages based on the outcome. Alternatively, you can redirect to a single page with query parameters and use JavaScript to conditionally show a message.

Rate this answer

Other Webflow Questions