reforge99

[distant folio]

Hello 👋 , can you send the code for the call you are getting a 404 with?

[woeful ledge]

yeah sec

server.js

// This is your test secret API key.
const stripe = require('stripe')('sk_test_51NQQB4JZsPRc9TeipaBQNp5asDwcTD9WwHUSyX8OWd37BGO2cbwzf70DGy84X7DRZycdaZhb7EbEsydFOPqMfSCD00IqEvQXC2');
const express = require('express');
const app = express();
app.use(express.static('public'));

const YOUR_DOMAIN = 'http://localhost:4242';

app.post('/create-checkout-session', async (req, res) => {
const {Price, ItemDescription} = req.body;

  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
        price: 10000,
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}?success=true`,
    cancel_url: `${YOUR_DOMAIN}?canceled=true`,
    automatic_tax: {enabled: true},
  });

  res.redirect(303, session.url);
});

app.listen(4242, () => console.log('Running on port 4242'));

app.jsx

import React, { useState, useEffect } from "react";

const ProductDisplay = () => (
  <section>
    <div className="product">
      <img
        src="https://i.imgur.com/EHyR2nP.png"
        alt="The cover of Stubborn Attachments"
      />
      <div className="description">
      <h3>Stubborn Attachments</h3>
      <h5>$20.00</h5>
      </div>
    </div>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">
        Checkout
      </button>
    </form>
  </section>
);

const Message = ({ message }) => (
  <section>
    <p>{message}</p>
  </section>
);

export default function StripeApp() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    // Check to see if this is a redirect back from Checkout
    const query = new URLSearchParams(window.location.search);

    if (query.get("success")) {
      setMessage("Order placed! You will receive an email confirmation.");
    }

    if (query.get("canceled")) {
      setMessage(
        "Order canceled -- continue to shop around and checkout when you're ready."
      );
    }
  }, []);

  return message ? (
    <Message message={message} />
  ) : (
    <ProductDisplay />
  );
}

How I installed/ran the sample code.

Steps I took to run the code

1. Created new react app with vite
2. copy/pasted the backend into a file named server.js
3. copy/pasted the frontend without css into a new file named app.jsx
4. node server.js
5. started the application (localhost:3000)
6. pressed checkout button -> "Failed to load resource: the server responded with a status of 404 ()"

[distant folio]

Thanks for the info. Is the 404 from your client reaching out to your server or from your server reaching out to Stripe?

[woeful ledge]

I believe it is from reaching out to my server. But, I have no clue how to fix this.

Maybe you guys have some suggestions

[distant folio]

Debugging to find where exactly the 400 is coming from would be the first step.

[woeful ledge]

just to confirm, this code should work, right?

[distant folio]

I can't help too much on this because it is not Stripe-specific, but you should be able to find this fairly straightforwardly either by:

1. Looking at the network tab of your browser's developer tools and looking for the 404
2. Debugging the code for your create-checkout-session endpoint to see how it reacts to the request from your client

[woeful ledge]

upon pressing checkout I should navigate to the stripe checkout page, rihgt?

[distant folio]

I'm not immediately seeing anything wrong with the code, at least in a place where debugging is the best way to find what is going wrong