#TheAudioBull-redirect-checkout
atomic nebula
Do you have a request ID?
Here's how you can find a request ID: https://support.stripe.com/questions/finding-the-id-for-an-api-request
Ah, it looks like you're not passing the Session ID. You're passing in data.checkout.session but I believe you mean to pass in data.checkout.session.id
delicate urchin
Ah, it looks like you're not passing the Session ID. You're passing in `data.che...
Oh sorry I should've specified that when I return the session I'm doing so like this
session: session.id,
};
If I try to change it to data.checkout.session.id I get this:
Uncaught (in promise) IntegrationError: stripe.redirectToCheckout: You must provide one of lineItems, items, or sessionId.
I'll take a look at the request id you linked
thank you for helping!
calm ice
Hello! If you log the value of data.checkout.session just before you call redirectToCheckout what do you see?
delicate urchin
I get this:
data.checkout.session: cs_test_b11nZmj5N2Fuovi3MPHO0MzD1CT35NLOde9lQZbPTiicvqHXboVidVc6E0
I also logged the session object from this:
payment_method_types: ["card"],
line_items,
mode: "payment",
success_url: `${url}/success/{CHECKOUT_SESSION_ID}`,
cancel_url: `${url}/`,
});
console.log("Setup complete!");
console.log(session);
here is the output from console.log(session)
Here is that output:
Setup complete!
{
id: 'cs_test_b11nZmj5N2Fuovi3MPHO0MzD1CT35NLOde9lQZbPTiicvqHXboVidVc6E0',
object: 'checkout.session',
after_expiration: null,
allow_promotion_codes: null,
amount_subtotal: 3000,
amount_total: 3000,
automatic_tax: { enabled: false, status: null },
billing_address_collection: null,
cancel_url: 'http://localhost:3000/',
client_reference_id: null,
consent: null,
consent_collection: null,
currency: 'usd',
customer: null,
customer_creation: 'always',
customer_details: null,
customer_email: null,
expires_at: 1654214887,
livemode: false,
locale: null,
metadata: {},
mode: 'payment',
payment_intent: 'pi_3L61a8BhtB05wy5B0cqsOZXK',
payment_link: null,
payment_method_options: {},
payment_method_types: [ 'card' ],
payment_status: 'unpaid',
phone_number_collection: { enabled: false },
recovered_from: null,
setup_intent: null,
shipping: null,
shipping_address_collection: null,
shipping_options: [],
shipping_rate: null,
status: 'open',
submit_type: null,
subscription: null,
success_url: 'http://localhost:3000/success/{CHECKOUT_SESSION_ID}',
total_details: { amount_discount: 0, amount_shipping: 0, amount_tax: 0 },
url: 'https://checkout.stripe.com/pay/cs_test_b11nZmj5N2Fuovi3MPHO0MzD1CT35NLOde9lQZbPTiicvqHXboVidVc6E0#fidkdWxOYHwnPyd1blpxYHZxWjA0T1RHaGxHbXFHNTByfDBHcUFwZ190SDdEampPTG1zbHBpSDxicDcwaGB2aG5ybUNXTzUwNmlSUUxAc2xWT1Bvak1gPXR0b0ZiRnxtQ3d3YWRIVFdNUHNKNTVdSn9UbGE3UicpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPydocGlxbFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl'
}
That all looks correct. It's worth pointing out that we don't recommend using redirectToCheckout anymore (you should redirect to the url on the Checkout Session instead), but redirectToCheckout should work if you pass the ID in like that. Let me investigate...
Is this happening every time or just sometimes?
calm ice
In res.redirectToCheckout what is res and where is it created/initialized?
Happy to help! That's why we're here!
delicate urchin
stripePromise.then((res) => {
res.redirectToCheckout({ sessionId: data.checkout.session });
});
right beforehand
calm ice
What about stripePromise?
delicate urchin
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
just below the imports
more specifically
loadStripe is imported in the list above
calm ice
🤔
delicate urchin
We are using react v18 for this. I'm not sure if that will matter or not but I know we learned the implementation in V17
calm ice
I don't think that would matter.
Can you open your browser's dev tools, go to the network tab, trigger the issue, then find the request that failed? There should be a request ID in the headers of the response that starts with req_. If you can find that it would help me figure out what the issue is.
calm ice
Huh... that's the right spot, but there's no request ID...
That screenshot is helpful though, hang on...
calm ice
I'm not sure what's causing this. We're going to investigate further, but as a workaround in the meantime I recommend you avoid redirectToCheckout and handle the redirect to the Checkout Session's url yourself without Stripe.js if possible.
delicate urchin
Alright, we'll take a look at using it that way. Thank you for all your assistance though 🙂
calm ice
Happy to help! We'll try to find what's going on and get it fixed, but I didn't want you to have to wait for that to happen just in case it takes a while. 🙂
Ah! I think my teammate found the problem: looks like the API key you're using client-side has invalid characters. Can you check to confirm the key is correct?
delicate urchin
I recopied the api keys from my dashboard and pasted them in, made sure there wasn't anything extra, and tested, same result
though i did find that error now showing that
I'm not sure why my API key wouldn't work though
random stump
👋 stepping in
I see 2 double quote in the end
don't you have extra double quote when you copy paste?
delicate urchin
I see 2 double quote in the end
i didn't even notice that though so good catch!
random stump
Yes but the value is still having an extra double quote, so can you (triple) check how it ends up like that?