cyrus_checkout-embedded

[silk pagoda]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always 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/1230985767539445932

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[hidden token]

cyrus_checkout-embedded

I can't really help with just a dump of your whole code unfortunately. I think you need to add clear logs to your code first to understand what the issue is. Like does that POST request ever reach your server? Is it on the wrong port? Did it start properly?

[winged wadi]

EmbeddedCheckoutButton.jsx:12
POST http://localhost:5173/api/embedded-checkout 404 (Not Found)
embedded-checkout-ou…790b282c6410e5.js:1 Uncaught (in promise) IntegrationError: fetchClientSecret failed with error "Unexpected token '<', "<!DOCTYPE "... is not valid JSON"
at embedded-checkout-ou…2c6410e5.js:1:16996
embedded-checkout-in…91aa7dbb2685.html:1 The resource https://js.stripe.com/v3/fingerprinted/js/checkout-embedded-app-init-2883105….js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
embedded-checkout-in…91aa7dbb2685.html:1 The resource https://js.stripe.com/v3/fingerprinted/js/vendor-ed806f9….js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
embedded-checkout-in…91aa7dbb2685.html:1 The resource https://js.stripe.com/v3/fingerprinted/css/checkout-embedded-app-init-7b84d98….css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

From what I am getting the post request isnt finding my endpoint on the server. Returns from html

The embedded checkout window appears however

I have added logs and its logging that the button is clicked but never logs a recieved status in console

localhost:3000 is the correct port

[hidden token]

yeah my guess is you are mixing up ports between your client-side and server-side code

[winged wadi]

I know the api runs on 3000 and client side 5173

[hidden token]

sounds good so you did figure out it was a bug in your code

[winged wadi]

I know its a bug in the code I just cant figure out where.const fetchClientSecret = useCallback(() => {
return fetch("/api/embedded-checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ priceId: "price_1P7D6PAOg135X54QFHUDmSgG" }),
})
.then((res) => res.json())
.then((data) => data.client_secret);
}, []);
as you can see I dont use the localhost with the port in it but I dont use the localhost with the port in my sign in or sign up function and it still works

router.post('/api/embedded-checkout', async (req, res) => {
console.log('Received POST request to /api/embedded-checkout');
try {
const { priceId } = req.body;

  const session = await Stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
          {
              price: priceId,
          },
      ],
      mode: 'subscription',
      success_url: `${req.headers.origin}/return?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${req.headers.origin}/cancel`,
  });
  console.log('Embedded checkout endpoint reached.'); // Logging
  res.json({ id: session.id, client_secret: session.client_secret });

} catch (error) {
console.error(error);
res.status(500).json({ message: error.message });
}
});
export default router; like neither of console logs log anything to console

[hidden token]

I mean the second line of code you shared is making that exact request. You have /api/... so it uses the exact same domain as the page you're one. Change that to have the full http://localhost:3000/api/...