joseph-react-checkout | Stripe Developers | Page 1

shadow brambleBOT Jan 4, 2023, 7:33 PM

#

oblique blade Jan 4, 2023, 7:33 PM

#

joseph-react-checkout

#

seems like the same problem someone asked about earlier. You mention port 3000 in parts of your code but the server seems started on 4242

gentle girder Jan 4, 2023, 7:35 PM

#

I searched about the problem here if somebody had the same issue. Couldn't find so

#

Can you help me out with this

oblique blade Jan 4, 2023, 7:38 PM

#

I have no idea what you mean, I just explained above what the issue is

#

you're hitting localhost:3000 but your server is on localhost:4242

gentle girder Jan 4, 2023, 7:41 PM

#

Okay let me check

#

Please give me 5mins before closing the thread

#

Hey, same error shows after changing to 4242

oblique blade Jan 4, 2023, 7:44 PM

#

I mean I ned more than this to help you sorry

gentle girder Jan 4, 2023, 7:45 PM

#

What you need ?

#

I have changed the

successUrl: 'http://localhost:4242/success',
cancelUrl: 'http://localhost:4242/cancel',

#

As the official docs suggested

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

app.post('/create-checkout-session', async (req, res) => {
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: 'price_1MKEdySJaJ2t0SuD5HMcFQ3n',
quantity: 1,
},
],
mode: 'payment',
success_url: ${YOUR_DOMAIN}?success=true,
cancel_url: ${YOUR_DOMAIN}?canceled=true,
});

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

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

oblique blade Jan 4, 2023, 7:48 PM

#

did you restart the whole server? Do you see other logs? How are you debugging this yourself as the developer of the app?

gentle girder Jan 4, 2023, 7:49 PM

#

I have restarted the server multiple times and getting still the same axios error

coarse fog Jan 4, 2023, 7:50 PM

#

As in it is still saying 404 not found?

#

Can you reach anything else on this server?

gentle girder Jan 4, 2023, 7:50 PM

#

Yes same 404 is saying

coarse fog Jan 4, 2023, 7:57 PM

#

Can you reach anything else on the server?

#

Are all requests to that server 404ing?

gentle girder Jan 4, 2023, 8:00 PM

#

I have only that request going on the 4242 server and the the app is running on 3000 server

After clicking on the checkout it's giving

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

coarse fog Jan 4, 2023, 8:02 PM

#

So if the app is still running on 3000, that would mean the create-checkout-session endpoint is also at localhost:3000, correct?

gentle girder Jan 4, 2023, 8:08 PM

#

yes sir

#

It's making the request but with a 404 error
xhr.js:247 POST http://localhost:3000/create-checkout-session (404)

#

stripe sample code which I download to check the code is running fine with 4242 and local 3000
But when I integrated with the above code it's showing error

coarse fog Jan 4, 2023, 8:17 PM

#

Your client side code should use whatever port you are actually running the server on

#

And I am still a bit unclear, can you reach other endpoints or anything else on that local server? Like if you do a curl command to the server does it respond or also give a 404?
curl -X POST https://localhost:3000/create-checkout-session

gentle girder Jan 4, 2023, 8:22 PM

#

I am really unable to understand about the client side code you are saying. If you don't mind please give a example.

As far the docs the server side code is this and I too have contructed my code in a similar way if you look a little up

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

app.post('/create-checkout-session', async (req, res) => {
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: 'price_1MKEdySJaJ2t0SuD5HMcFQ3n',
quantity: 1,
},
],
mode: 'payment',
success_url: ${YOUR_DOMAIN}?success=true,
cancel_url: ${YOUR_DOMAIN}?canceled=true,
});

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

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

coarse fog Jan 4, 2023, 8:27 PM

#

So basically, the code in your browser is running in to an issue when it runs this code, correct?

    products,
    successUrl: 'http://localhost:4242/success',
    cancelUrl: 'http://localhost:4242/cancel',
    total
  });```

gentle girder Jan 4, 2023, 8:28 PM

#

Absolutely sir that's the issue

coarse fog Jan 4, 2023, 8:29 PM

#

So a 404 means that the webpage cannot resolve that http://localhost:4242/create-checkout-session URL. So it sounds like either your local server is not running or there is some connectivity issue with it

#

If you restart the server that is at 4242 and then try to reach out to it with a cURL command, does it also get a 404?
curl -X POST https://localhost:3000/create-checkout-session

gentle girder Jan 4, 2023, 8:31 PM

#

Okay thank you so much at least for explaining. I will try this and get back to you.

#

It's showing this
curl: (35) error:1408F10B:SSL routines:ssl3_get_record:wrong version number

coarse fog Jan 4, 2023, 8:37 PM

#

Oh whoops I meant to paste that for the 4242 server. Do you get the same thing there?
curl -X POST https://localhost:4242/create-checkout-session

gentle girder Jan 4, 2023, 8:38 PM

#

Yes same error 😫

#

I checked out, It's probably for SSL/TLS connection between the client and the server. Any idea how to solve this?

coarse fog Jan 4, 2023, 8:41 PM

#

Checking in to how to debug this. It sounds like it may be your curl or the command more than the server. Will get back with another way to look at this

gentle girder Jan 4, 2023, 8:42 PM

#

Okay. Thank you so much!

coarse fog Jan 4, 2023, 8:52 PM

#

If you just try going to http://localhost:4242/create-checkout-session in a browser does it show anything?

#

If the server is running it will error with "Cannot GET /create-checkout-session" but that error at least confirms it is running and findable

gentle girder Jan 4, 2023, 8:53 PM

#

This is what is shows

#

Even I added cors also in the server code

var cors = require('cors');
app.use(cors());

But nothing new 🙃

coarse fog Jan 4, 2023, 8:57 PM

#

Gotcha. Thanks for trying that. So at least it is up and running, trying to think of how to debug the disconnect between your client and server here

gentle girder Jan 4, 2023, 8:58 PM

#

Same trying to debug.

#

const express = require('express');
var cors = require('cors');
const stripe = require('stripe')('SECRET_KEY');

const app = express();
app.use(cors());
app.use(express.static('public'));

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

// Create the Checkout Session on the server
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: products,
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
amount_total: total * 100 // Convert total price to cents
});

res.send({ sessionId: session.id });
});

app.listen(4242, () => console.log("Node server listening on port 4242!"));

Can you check if any parameters are missing or not ?
products I am fetching from handleCheckout function from frontend

distant haven Jan 4, 2023, 9:04 PM

#

Hello 👋
Taking over and catching up on the context..

#

can you add following to your server-side code make sure that the server isn't buggy

  res.send('hello world')
})```

gentle girder Jan 4, 2023, 9:05 PM

#

Hey, Sure

distant haven Jan 4, 2023, 9:05 PM

#

and try loading http://localhost:4200 in your browser

gentle girder Jan 4, 2023, 9:06 PM

#

Sure, let me try

distant haven Jan 4, 2023, 9:07 PM

#

also can you try adding following to your package.json ?

"proxy": "http://localhost:4242",

gentle girder Jan 4, 2023, 9:07 PM

#

distant haven and try loading `http://localhost:4200` in your browser

This came

distant haven Jan 4, 2023, 9:07 PM

#

Gotcha so the server is working..

gentle girder Jan 4, 2023, 9:08 PM

#

distant haven also can you try adding following to your `package.json` ? ``` "proxy": "http:/...

on the server folder package.json right ?

distant haven Jan 4, 2023, 9:08 PM

#

yup

gentle girder Jan 4, 2023, 9:08 PM

#

Okay sure

distant haven Jan 4, 2023, 9:08 PM

#

ah sorry, it needs to go to your react app's package.json I think

gentle girder Jan 4, 2023, 9:09 PM

#

Ohh, Okay will do so.

#

Added

#

Now giving error 500

#

in react it's giving this while compiling

distant haven Jan 4, 2023, 9:18 PM

#

ah its the wrong port

#

It should be

"proxy": "http://localhost:4200"

#

4200 and not 4242

gentle girder Jan 4, 2023, 9:18 PM

#

gentle girder Added

I changed to 4242 for everything

#

Hey, now I saw in server this error is coming

#

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

// Create the Checkout Session on the server
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: products,
success_url: "http://localhost:3000/success",
cancel_url: "http://localhost:3000/cancel",
amount_total: total * 100 // Convert total price to cents
});

res.send({ sessionId: session.id });
});

It's from this code

distant haven Jan 4, 2023, 9:19 PM

#

AH nice, that's the 500

gentle girder Jan 4, 2023, 9:20 PM

#

Yes atlast we know what is the issue.

distant haven Jan 4, 2023, 9:20 PM

#

Can you try setting a static array instead of sending products to see if the code works?

gentle girder Jan 4, 2023, 9:20 PM

#

Can you help with this like why it can't get the data

#

Okay sure

#

Let me try

distant haven Jan 4, 2023, 9:22 PM

#

also it looks like you're trying to set amount_total which isn't really a parameter you can set on creation

#

did that work? @gentle girder

gentle girder Jan 4, 2023, 9:25 PM

#

It's giving

#

then how can I give direct price

#

I gave like this

distant haven Jan 4, 2023, 9:26 PM

#

for inline pricing, you'd want to use price_data parameter
https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items-price_data

gentle girder Jan 4, 2023, 9:26 PM

#

Okay let's try with that

gentle girder Jan 4, 2023, 9:27 PM

#

gentle girder I gave like this

here then It would be price_data: 200

#

right ?

distant haven Jan 4, 2023, 9:27 PM

#

No, it should be as following

line_items: [
    {
      price_data: {
        currency: 'usd',
        unit_amount: 1000
      }
    },
  ],```

gentle girder Jan 4, 2023, 9:28 PM

#

Okay okay thankyou. Will try this

#

Now giving this

#

and the preset code is

distant haven Jan 4, 2023, 9:34 PM

#

    {
      price_data: {
        currency: 'usd',
        unit_amount: 1000,
        product_data: {
          name: 'Product name'
        }
      }
    },
    quantity: 2
  ],```

#

There's an example here
https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout#redirect-customers

gentle girder Jan 4, 2023, 9:35 PM

#

Okay let me check

#

Wow it worked. Thank you so much 🥺

distant haven Jan 4, 2023, 9:37 PM

#

Glad we could help 🙂 🎉

gentle girder Jan 4, 2023, 9:37 PM

#

Now just help me with the products to get here

#

It was showing couldn't destructure or atleast tell where I am going wrong I will check that. Anyway thankyou so much!

distant haven Jan 4, 2023, 9:39 PM

#

NP! 🙂 You would want to make sure that the products array match the structure that line_items expect

#

Good luck

gentle girder Jan 4, 2023, 9:40 PM

#

Okay thank you. Really glad of this support! ❤️

distant haven Jan 4, 2023, 9:41 PM

#

😄 👍

gentle girder Jan 4, 2023, 9:44 PM

#

distant haven also can you try adding following to your `package.json` ? ``` "proxy": "http:/...

One last question. What to keep this while deploying the app.

#joseph-react-checkout