#ceora_embedded-checkout
half slateBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1261324605600170086
📝 Have more to share? Add details, code, screenshots, videos, etc. below.
outer horizonBOT
strange iris
Hi there 👋 are you seeing any errors thrown to your browser console when the error is shown on the page?
half slateBOT
ceora_embedded-checkout
fiery juniper
“Uncaught (in promise)
embedded-checkout-ou.4e808b5c0206e7.j5:4
IntegrationError: fetchClientSecret failed with error "The fetchClientSecret function should always resolve with a client secret as a string. The function that was provided resolved with a value type of undefined."
at embedded-checkout-ou.5c0206e7-15:4:13741”
That’s the error I’m getting in my browser console
Sorry for the formatting I’m using discord on mobile
strange iris
Gotcha, can you share the code you're using to call initEmbeddedCheckout? It sounds like the function being passed into fetchClientSecret isn't returning the value we're expecting it to.
fiery juniper
Sure!
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
export default function CheckoutForm() {
const fetchClientSecret = useCallback(() => {
return fetch("/api/checkout-session", {
method: "POST",
})
.then((res) => res.json())
.then((data) => data.clientSecret);
}, []);
const options = {fetchClientSecret};
return (
<div>
<EmbeddedCheckoutProvider
stripe={stripePromise}
options={options}
>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</div>
)
}
This is the code
It's pulled directly from this documentation -> https://docs.stripe.com/checkout/embedded/quickstart?client=next
strange iris
Hm, how is your endpoint running at /api/checkout-session responding when you make a POST request to it?
fiery juniper
This is the code I have there, POST response at the top
export default async function handler(req, res){
switch (req.method) {
case "POST":
try {
const session = await stripe.checkout.sessions.create({
ui_mode: "embedded",
line_items: [
{
price: "price_1Ow4DzLcO1FmkluyDC8iFYDP",
quantity: 1,
},
],
mode: "payment",
return_url: `${req.headers.origin}/return?session_id={CHECKOUT_SESSION_ID}`
});
res.send({clientSecret: session.clientSecret});
} catch(err) {
res.status(err.statusCode || 500).json(err.message);
}
break;
case "GET":
try {
const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
res.send({
status: session.status,
customer_email: session.customer_details.email
});
} catch (err) {
res.status(err.statusCode || 500).json(err.message);
}
break;
default:
res.setHeader('Allow', req.method);
res.status(405).end('Method Not Allowed')
}
}
And how does it respond when you make a request to it? Does it generate a Checkout Session and respond with a client secret, or does it crash and return an error?
Right now, I'm thinking one of two things is happening.
Either the endpoint isn't responding with a client secret at all.
or
The endpoint is responding with a client secert, but there's some sort of type-misalignment when the value is returned. I'm not sure if Next introduces type limitations like that, it's not a framework I'm too familiar with.
fiery juniper
I think it might be that the end point isn't responding with a client secret
Bc in the browser console, just saw an error that ssays "Error: Timed out waiting for client secret"
This is what shows up on the localhost:3000
That displays for a few seconds and then this message comes up
strange iris
That's because the page starts to render, calls your function to get a client secret, gets the client secret in the response, and then loads the session.
I'd suggest directly making a request to your endpoint generating your client secrets, so you can see exactly how it's responding. Or you may be able to get some insight from the Network tab in the browser console.
fiery juniper
I checked the network tab and every call is return a status 200. I'll try your first suggestion too (although I'm not exactly sure how to do that😅)
strange iris
What are you seeing in the response body when you look at those successful requests?
fiery juniper
I’m not sure how to look at that😅 Sorry I’m a bit inexperienced with this kinda thing
strange iris
If you click on the request in the Network tab, you should see new tabs appear for it to let you see it's headers and response:
fiery juniper
Okay it says “This request has no response data available”
I’m looking under the “Fetch/XHR” tab
strange iris
I'd leave that on All, and focus on finding the request to the /api/checkout-session endpoint. The Filter field can be useful for narrowing down the requests.
If the request to /api/checkout-session isn't including a response body, then that's likely the problem though I'm not exactly sure why that would be happening.
fiery juniper
Yeah still doesn'y include response body😬
It's strange because I'm definitely seeing that some calls to the stripe API are going through
strange iris
If your endpoint isn't responding with the client secret in it, that's likely the problem. You'll want to work on debugging why your endpoint isn't responding with the client secret. Are you seeing any errors being thrown server-side? If you log out the client secret value before returning it, do you see that getting logged correctly? Is the call to your endpoint responding with a 200 status?
half slateBOT
fiery juniper
There aren’t any server side errors
Looking at the logs on Stripe, they’re returning 200 status and the response body also includes the encrypted client secret
This is specifically for the secret key
However, the publishable key appears to not have been used at all
Which is strange bc it’s included in my code
strange iris
If you're getting the client secret on your server, then you need to look into why that value isn't then being sent in the response to your client side code.
Oh, and I think I see why
Can you try changing this line:
res.send({clientSecret: session.clientSecret});
to:
res.send({clientSecret: session.client_secret});
fiery juniper
I can’t thank you enough!!