#jerman-request-error
primal halo
Hey 👋 nothing is jumping out at me as being off. Do you happen to have the request ID (req_XXX) where you received the error?
primal halo
😄 thanks
faint junco
primal halo
Sorry, things got really busy all of a sudden, taking a look now.
faint junco
thanks, no worries
primal halo
What I'm seeing on our side is that we're receiving just a hash for the line_items rather than an array of hashes, but looking at your code I'm not sure why.
primal halo
Thanks for your patience, still looking
Can you double check the current code you have and paste it here again? Just want to make sure that line_items is being given an array.
And if you could paste the raw code (rather than a screenshot) that'd be awesome so we can copy into our local envs for testing.
faint junco
create-checkout-session.js:
const stripe = require("stripe")(${process.env.STRIPE_SECRET_KEY});
export default async (req, res) => {
const { items, mail, quantity } = req.body;
console.log(items);
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
description: items.description + " Kursdatum: " + items.date,
quantity: quantity,
price_data: {
currency: "sek",
tax_behavior: "inclusive",
unit_amount: items.price * 100 * 1.25,
product_data: {
name: items.name,
},
},
},
],
mode: "payment",
success_url: ${process.env.HOST}/success,
cancel_url: ${process.env.HOST}/checkout,
});
res.status(200).json({ id: session.id });
};
primal halo
Sorry, we don't do DMs here, this should be good though.
Admittedly, I'm a little baffled, that worked within my environment.
The only immediate difference I noticed is that I'm one minor version ahead of you (8.183.0 vs 8.182.0) but don't see anything in the changelog that indicates a concern with the version you're using.
primal halo
Oh, wait a minutes, I see the call that got the error, but then I see you made 7 successful calls after that.
faint junco
oh yes you're correct, still getting same error in browser though:
this is what it re-directs me to, but if I check Response body url that one works
primal halo
I'm pretty sure I've found the checkout session that relates to, but the URL shown in your browser is differing from what I'm seeing provided in the Checkout Session creation response (and the URL there I can access and see the checkout page).
Can you double check you're not modifying the url returned by that call? (To me it looks like this is the last bit of the URL that matches from your screenshot and the API response, after this the values look different: YHwnPyd)
faint junco
I'm not sure where I would modify it tbh, but it seems that shortly after #fid in the URL it changes compared to Checkout Session creation response
primal halo
Yup, that's what I'm seeing. So it looks like your backend is creating the session correctly. Do you have the frontend code where you're making the redirect?
faint junco
const stripePromise = loadStripe(${process.env.STRIPE_PUBLIC_KEY});
const createCheckoutSession = async () => {
const stripe = await stripePromise;
// Call the back-end to create a checkout session
const checkoutSession = await axios.post("/api/create-checkout-session", {
items: items,
mail: contact.email,
quantity: quantity,
});
// Redirect customer to Stripe Checkout
const result = await stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
if (result.error) {
alert(result.error.message);
}
};
primal halo
And you are retrieving Stripe JS from the following location?
https://js.stripe.com/v3/
faint junco
on react:
import { loadStripe } from "@stripe/stripe-js";
primal halo
Ah, apologies, overlooked that you're working with React.
I put your ID into the redirectToCheckout function on my page (Stripe JS), and it seemed to direct me to the expected URL (though I couldn't access it due to a key mismatch, as expected)
Could you try clearing cache or running through the flow in an incognito window?
faint junco
Tried, still no luck
are these docs new? https://stripe.com/docs/checkout/integration-builder?client=next
for Next.js, I could try to re-write my code for next.js framework and see if that fixes it
primal halo
I'm not sure how long those have been up, but I'm glad you linked to them! I noticed that for React + Node the sample handles the redirect serverside.
Instead of:
res.status(200).json({ id: session.id });
it uses:
res.redirect(303, session.url)
Could you see if changing to the latter approach resolves the behavior you're experiencing?
faint junco
after changing to res.redirect(303, session.url)
the link in the console error is correct link
maybe its because im on localhost, let me try on https
getting same error on production
brazen maple
Sorry I think there's some real confusion here in the back and forth
The code @primal halo recommended you changed is now making a server-side redirect. That can not happen inside a call to await axios.post("/api/create-checkout-session", { which expects a JSON response
faint junco
brazen maple
Have you looked at https://stripe.com/docs/checkout/integration-builder?client=react which covers the exact end to end code and what to do?
faint junco
I'll check it out, thanks
brazen maple
If you look at that doc you can see that the server-side code is doing a redirect where you create the session and then redirect to session.url like what @primal halo recommended
and if you look at the client-side code, you can see it doesn't do a fetch or an axios post. It's a simple form submission
if you combine both it will work!
brazen maple
sure, let us know if that works!
faint junco
I found a fix
const stripePromise = loadStripe(${process.env.stripe_public_key});
for some reason this was the problem, if I changed it to a string with my public it works
I tried running it with const stripePromise = loadStripe(process.env.stripe_public_key);
but got the error IntegrationError: Missing value for Stripe(): apiKey should be a string.
so now I'm running loadStripe with public key exposed, but that shouldn't be any problem right?
brazen maple
correct the public key is made to be exposed and visible