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?

To capture and display messages from a custom action URL or API endpoint (such as Stripe) in Webflow, you need to handle form submissions using JavaScript or a backend service. Since Webflow doesn’t support server-side logic directly, you’ll need a workaround. Here’s how:

1. Prevent Webflow’s Default Form Submission

• Unbind Webflow’s default form submission by adding a preventDefault() event listener.
• Capture the form’s data using JavaScript.

const form = document.querySelector("#donation-form");form.addEventListener("submit", async (e) => {  e.preventDefault();  const formData = new FormData(form);  const response = await fetch("YOUR_CUSTOM_ACTION_URL", {    method: "POST",    body: formData,  });  const data = await response.json();  handleResponse(data);});

2. Handle the API Response

• Based on the API response, display an appropriate message or redirect the user.
• Example conditions:
• Success: Show a "Thank you" message or redirect to a success page.
• Failure: Display an error message on the same page.

function handleResponse(data) {  if (data.status === "success") {    window.location.href = "/donation-success"; // Webflow success page  } else {    document.querySelector("#error-message").textContent = data.message;    document.querySelector("#error-message").style.display = "block";  }}

3. Setting Up Hidden Fields for Redirects (Optional)

If you want to submit the form to a server-side script and then handle the redirect on the server:

• Action URL: Point the form’s action attribute to an external processing script (e.g., /process-donation).
• Redirection Logic: The server script can return a redirect URL as a query parameter (?status=success) and use JavaScript to redirect.

Example PHP (server-side example):

if ($chargeSuccessful) {    header("Location: /donation-success");} else {    header("Location: /donation-failed?message=" . urlencode($errorMessage));}exit;

4. Display Error Messages Dynamically on a Webflow Page

If redirected with an error message (e.g., /donation-failed?message=Card declined):

• Use JavaScript to extract the error message and display it.

const urlParams = new URLSearchParams(window.location.search);const errorMessage = urlParams.get("message");if (errorMessage) {  document.querySelector("#error-message").textContent = errorMessage;  document.querySelector("#error-message").style.display = "block";}

Summary

To handle Stripe donation responses in Webflow:

• Prevent the default form submission and send data to your backend via JavaScript.
• Handle success/failure responses dynamically (display messages or redirect).
• Use a custom action URL to process payments and return status codes.
• Redirect users based on the payment result, optionally passing messages via query parameters.

This approach ensures a seamless user experience while working within Webflow’s limitations.