I am trying to set up stripe.js with my app. I have literally every single thing done and when the purchase is complete stripe passes the client to a success page. The problem I am having is that stripe seems to be resetting my application (the props + state from previously rendered components before stripe.js' checkout are not being passed through) in order to properly show the appropriate data on this success page i need the state from previous components.
I am using stripe's redirectToCheckout function and it redirects out of the app .maybe a serverless function from JAMstack could send the data between stripe? Someone please let me know! Here is some of my code below for the stripe part of my app. There isn't really a specific part of my code to show that would help answering this question tbh. It's a fundamental question of whether there is a way to not have stripe reset my app thus losing previous state after redirecttoCheckout function.
The response (or data on products and session etc) is coming from a serverless netlify function. which is why i mentioned it above. Maybe that could be a possible help
//client sides
import {loadStripe} from "@stripe/stripe-js"
export async function handleFormSubmission(event) {
event.preventDefault();
const form = new FormData(event.target);
const data = {
sku: form.get('sku'),
quantity: Number(form.get('quantity')),
};
const response = await fetch('/.netlify/functions/create-checkout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}).then((res) => res.json())
const stripe=await loadStripe(response.publishableKey);
const {err}=await stripe.redirectToCheckout({
sessionId:response.sessionId
})
if(err){
console.log(err)
}
}
//client sides
import {loadStripe} from "@stripe/stripe-js"
export async function handleFormSubmission(event) {
event.preventDefault();
const form = new FormData(event.target);
const data = {
sku: form.get('sku'),
quantity: Number(form.get('quantity')),
};
const response = await fetch('/.netlify/functions/create-checkout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}).then((res) => res.json())
const stripe=await loadStripe(response.publishableKey);
const {err}=await stripe.redirectToCheckout({
sessionId:response.sessionId
})
if(err){
console.log(err)
}
}