Stripe Payment Integration with custom UI

Need help Plugins
1

Hey everyone, need some help on Stripe payment integration!

For a project, the client has provided a specific design for the payment form with separate input fields for:

  • Credit Card Number
  • Expiry Date (MM/YY)
  • CVV

(Example attached - Image 1)

I’m currently using Stripe.js 2 plugin, but the default Stripe Element groups these fields together into a single “Card Number” input with expiry & CVV bundled inside to the right (Image 2). Functionally fine, but design-wise it doesn’t match what the client wants.

My questions:

  1. Is it possible to build a custom payment form UI in Bubble with separate inputs (Card No / Expiry / CVV) and still securely process payments via Stripe?

  2. Does Stripe.js 2 support this kind of custom styling, or would I need to use Stripe Elements via custom code / HTML embed?

  3. Any plugins or workflows that help with this exact use case?

The goal is to match the custom frontend design while being able to integrate Stripe payments. The payment should be made/triggered when the “submit” button is clicked.

Would love to hear from anyone who has tackled this!

Appreciate your guidance!

Attaching reference images for clarity.

Thanks!
Mehul

Screenshot 2025-05-16 at 10.12.51 PM
Screenshot 2025-05-16 at 10.12.51 PM1490×648 78.2 KB

Screenshot 2025-05-16 at 10.15.53 PM
Screenshot 2025-05-16 at 10.15.53 PM1824×872 72.8 KB

Screenshot 2025-05-16 at 10.16.16 PM
Screenshot 2025-05-16 at 10.16.16 PM1920×875 91.5 KB

2

How do you feel about talking to your client about the UI design available with the plugin?

They might not care much about this specific design detail, while they might care more about cutting down development time.

As long as there is transparency I don’t see a problem with negotiating this kind of things. I’ve been in both sides of the negotiation and everyone ended up agreeing.