Netlify form with Stripe

Support
,
1

Hello everyone :wave:

I’m looking for some guidance. I’ve been reading up on Netlify Forms recently and also following along with Jason Lengstorf’s blog posts about using Stripe with Netlify. It’s easy enough to build working forms using the Netlify docs and it’s straight forward enough to integrate Stripe using the techniques Jason outlined.

However, I’m wondering if anyone has experimented with trying to combine these concepts so you could either:

  1. Submit a Netlify Form and be redirected to Stripe checkout to complete payment.

  2. Submit a Netlify Form and Stripe Payment at the same time.

Thanks

2

While I haven’t personally tried it or have any knowledge about Stripe, I believe as long as you can manipulate content with JavaScript, a lot of stuff is possible.

  1. This should definitely be possible. Using a AJAX request, you could submit the form and redirect to Stripe. You can then include the form data as a query string parameter and so on.

  2. I don’t know what that really means. I can’t imagine a situation in which someone has to submit a form along with a payment. Payments are usually handled by payment gateways.

3

This was actually more straight forward than I thought.

Inside handleFormSubmission I was able to post the form data prior to the checkout being created and redirecting the user.

export async function handleFormSubmission(event) {

...

fetch('/', {
    method: 'POST',
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(form).toString()
})
.then(function () {
    console.log('Form successfully submitted');
})
.catch(function (error) {
    alert(error);
})

...

}

Hope this helps anyone else trying to do similar based on the links I shared.

4

Thanks for your reply. In Option 2 I was looking to have Stripe fields embedded on the page, , inside the <form> tag, alongside the form fields that would be submitted via Netlify. Seemed complex so opted for Option 1. I posted a solution that works. Hope it help someone else looking to do similar.

5

Thanks for sharing this! People like you help make Netlify Community great :grinning:

2 Likes