One Page Checkout via AJAX with Cartthrob (Stripe)

Question

I am trying to create a one page checkout for donations on a site using Cartthrob Pro 6.3.0 and EE 6.2.7, where the donation is added to the cart and the user can checkout all on the same page without refreshing using the jQuery Form Plugin (which is what is used in the Cartthrob ajax examples).

I am able to submit the add_to_cart_form and have it add the donation product to the cart correctly, but when the checkout form is submitted right after that, it does not go through correctly. It creates a closed entry in the 'Orders' channel and when I check Stripe, the payment does not go through. This is the error I get in the Stripe log:

payment_intent_unexpected_state You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method.

So it seems like something is not being sent to Stripe when submitting the checkout form via AJAX but I'm not sure how to go about finding the issue. If anyone can point me in the right direction, I'd appreciate it!

(Also just a note that the add to cart and checkout system works correctly when not submitting via AJAX and just using a regular cart process to submit each form individually and moving to the next page.)

Answer 1

An update for anyone who happens upon this question:

We contacted the Cartthrob team about this issue, and from their response, it is not currently possible to do this the way we expected: "Due to how the cart and checkout template tag function, what you're attempting isn't doable without a pulling and executing the checkout template form with Ajax."