Is It Possible To Build A Custom Stripe Elements Payment Flow in WeWeb?

Hi WeWeb community,

I’m wondering if it’s possible to build a custom payment flow using Stripe Elements directly inside WeWeb, specifically the approach outlined under the “Advanced integration” section in Stripe’s documentation:
https://docs.stripe.com/payments/quickstart

To clarify, I’m not referring to the built-in WeWeb Stripe plugin or the Stripe hosted checkout flow options, but the custom setup with Stripe.js which allows for more advanced customization options, like adjusting layout and disabling postal code collection, etc. which isn’t currently supported in the other integration methods.

I’m trying to build this with the Supabase integration (tables and edge functions) and here’s what I’ve tried so far:

  • Created a valid PaymentIntent using WeWeb workflows + Supabase edge functions
  • Injected the required Stripe script using WeWeb’s Custom Code <head> setting
  • Used a hardcoded valid client_secret in an HTML embed block for testing

The page loads and displays a “Pay now” button, but the Stripe payment form itself never renders.

Has anyone successfully built a similar integration in WeWeb, or is this a limitation of the HTML block environment? Is there anything I’m missing that might prevent this integration from working?

Any help or guidance would be much appreciated.

it’s 100% doable.
most likely your problem is that the js code runs before the html component actually renders the elements on the page.
a tip: when you need to access elements on the page it’s better to create a component because tou have access to the actual DOM element in the context of actions/workflows inside it. run the necessary code in a js action triggered on load of the component. bonus point if you load stripe js with the official loader script to avoid loading it twice and get warnings in the console.

2 Likes

It’s doable but I feel like it’s pointless. So much work for very little benefit. Even OpenAI uses the Stripe’s portal.

1 Like