Stripe Element + Model Form in one form submission?

Hello Django Forums!

I’m working on a project using Stripe elements (to ensure PCI compliance and keep the end user experience on our domain) but getting hung up in the workflow. The project allows someone to make a custom donation amount. My client wants end users to type in a donation amount and make the credit card payment in a single form (to avoid multiple forms and/or page changes).

If I’ve read the Stripe API’s correctly, I don’t see how I can do this without significant javascript/htmx. If the charge amount to submit to Stripe is not yet known, I can’t immediately build the Stripe payment intent until I know these values.

Current process (2-3 pages):

  • Create a view with GET/POST to let end user input e-mail, donation amount, and other custom fields into a model form

  • If model form is valid, redirect to the Stripe element for payment with values from the model form (Stripe.js makes POST request for a payment intent)

  • User completes credit card form, Stripe element redirects to success/cancel page

Ideal process (1-2 pages):

  • User inputs model form fields and Stripe elements in a single form (GET/POST)

  • Stripe element redirects to success/cancel page

Any thoughts or recommendations? I’ve seen some software/payment pages/plugins (Wordpress, others) in the wild that do this today and they are not using things like Stripe Checkout. Really appreciate any insights, thank you!