arminomari_error | Stripe Developers | Page 1

novel peakBOT Mar 26, 2024, 10:26 PM

#

👋 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/1222310782344106145

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

rich fossilBOT Mar 26, 2024, 10:27 PM

#

tawny salmon Mar 26, 2024, 10:30 PM

#

Can you share more about where you're receiving this error?

mild surge Mar 26, 2024, 10:31 PM

#

well i downloaded the github, i followed the youtube tutorial, put in the env, and then theres two different folders, the server and the client, when i tried to npm run start the client it gave me that error in the terminal but the server worked

tawny salmon Mar 26, 2024, 10:34 PM

#

For the client, you'll need to use npm start . Do you receive the same error if you try this command instead?

mild surge Mar 26, 2024, 10:34 PM

#

yeah

tawny salmon Mar 26, 2024, 10:37 PM

#

Gotcha. Give me a few minutes

#

You'll need to install this package: https://www.npmjs.com/package/cross-env

The reason for this is that the client app is trying to set the port number in a way that is supported on Unix machines, and you're using Windows

#

Let me know if installing this package and starting the client server again gets you past this error

mild surge Mar 26, 2024, 10:43 PM

#

is it just to npm install --save-dev cross-env in the client?

tawny salmon Mar 26, 2024, 10:44 PM

#

Yep

mild surge Mar 26, 2024, 10:44 PM

#

it didnt work still got the same problem

tawny salmon Mar 26, 2024, 10:45 PM

#

Which version of Node.js are you using?

mild surge Mar 26, 2024, 10:47 PM

#

v.20.11.0

tawny salmon Mar 26, 2024, 10:50 PM

#

If you have it handy, could you share a screenshot of your terminal that shows the install of cross-env as well as your latest attempt to start the client?

#

Also, could you share what the client/react-cra/package.json file looks like locally?

mild surge Mar 26, 2024, 10:51 PM

#

📎 message.txt

tawny salmon Mar 26, 2024, 10:53 PM

#

Thanks! I see cross-env is included in devDependencies above so not sure why you're running into the same error

#

Give me a few more minutes

mild surge Mar 26, 2024, 10:59 PM

#

is it anything about this line that i could posible change? "scripts": {
"start": "PORT=4242 react-scripts start",

#

in my package.json?

tawny salmon Mar 26, 2024, 11:02 PM

#

oh, did you share package-lock.json with me instead of package.json?

mild surge Mar 26, 2024, 11:03 PM

#

oh maybe {
"name": "react-cra",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.35.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.4.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^3.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "PORT=4242 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write "**/*.{js,jsx}""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5252",
"devDependencies": {
"cross-env": "^7.0.3",
"prettier": "^2.7.1"
}
}
here

#

mb

tawny salmon Mar 26, 2024, 11:04 PM

#

Did you change this file yourself after downloading from github? I'm not sure why there seems to be a mismatch here:
"start": "PORT=4242 react-scripts start",

"proxy": "http://localhost:5252/",

mild surge Mar 26, 2024, 11:04 PM

#

no i didnt

#

it came like that

#

but the host is right i belive

#

{
"name": "react-cra",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.35.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.4.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "PORT=4242 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write "**/*.{js,jsx}""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5252",
"devDependencies": {
"prettier": "^2.7.1"
}
} look this is direct from github

tawny salmon Mar 26, 2024, 11:07 PM

#

Can you link to the file on github?

mild surge Mar 26, 2024, 11:07 PM

#

https://github.com/matthewling-stripe/react-stripe-payment-element

tawny salmon Mar 26, 2024, 11:08 PM

#

Interesting, okay. We're looking at two different things

#

https://docs.stripe.com/payments/payment-element

This links to https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element

#

I recommend working with the code from stripe-samples

mild surge Mar 26, 2024, 11:09 PM

#

so i should restard with this one? https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element

#

and try=

tawny salmon Mar 26, 2024, 11:10 PM

#

Yes, please restart with the code from stripe-samples. You'll likely need to run npm install --save-dev cross-env again

mild surge Mar 26, 2024, 11:11 PM

#

ait ait

#

ill get back to you

#

w8 just a question

#

how do i git clone this specific https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element

#

it doesnt show me a show code

#

nvm

#

but this isnt the same used as in the tutorial bro

tawny salmon Mar 26, 2024, 11:22 PM

#

Basic functionality should be similar though

mild surge Mar 26, 2024, 11:45 PM

#

nah cant get it to work thx for the help though trynna use some other tutorial

tawny salmon Mar 26, 2024, 11:47 PM

#

Are you running into the same error or something else?

mild surge Mar 26, 2024, 11:53 PM

#

nah same error

tawny salmon Mar 26, 2024, 11:53 PM

#

and you ran npm install --save-dev cross-env again?

rich fossilBOT Mar 26, 2024, 11:56 PM

#

mild surge Mar 27, 2024, 12:07 AM

#

yeah

uncut cypress Mar 27, 2024, 12:09 AM

#

👋 roadrunner had to head out, but I'm around to answer questions if you need more help

mild surge Mar 27, 2024, 12:17 AM

#

bro everything is on linux i cant get it to work on windows

uncut cypress Mar 27, 2024, 12:21 AM

#

Which tutorial are you trying to get to work now? https://github.com/stripe-samples/accept-a-payment/tree/main/payment-element or https://github.com/matthewling-stripe/react-stripe-payment-element ?

#

Also, after install cross-env did you update the start command in your package.json to use it?

mild surge Mar 27, 2024, 12:30 AM

#

well w8 im finna start over again why not

#

i will try with this one https://github.com/matthewling-stripe/react-stripe-payment-element again

#

aight

#

#

same problme

#

and why does my .env look like that

uncut cypress Mar 27, 2024, 12:36 AM

#

Did you update the start command in your package.json

mild surge Mar 27, 2024, 12:37 AM

#

idk {
"name": "react-cra",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.35.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.4.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "PORT=4242 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write "**/*.{js,jsx}""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5252",
"devDependencies": {
"prettier": "^2.7.1"
}
}
this is how it looks

uncut cypress Mar 27, 2024, 12:38 AM

#

Yeah so you haven't actually used cross-env anywhere in there

mild surge Mar 27, 2024, 12:38 AM

#

i mean i could do it like this "start": "set PORT=4242 && react-scripts start" but then i get more problems

uncut cypress Mar 27, 2024, 12:38 AM

#

You need to do something like "start": "cross-env PORT=4242 react-scripts start",

mild surge Mar 27, 2024, 12:39 AM

#

#

now i get this

uncut cypress Mar 27, 2024, 12:40 AM

#

What are you running npm run and not npm start?

mild surge Mar 27, 2024, 12:41 AM

#

#

should i run npx browserslist@latest --update-db

uncut cypress Mar 27, 2024, 12:45 AM

#

sure - try it out and see what happens

mild surge Mar 27, 2024, 12:45 AM

#

uncut cypress Mar 27, 2024, 12:49 AM

#

Try this suggestion: https://stackoverflow.com/a/73807914/14107360

mild surge Mar 27, 2024, 12:52 AM

#

well i dont quiet understand how i should integrate that to my package.json

#

i got it

#

finaly

#

i got it

uncut cypress Mar 27, 2024, 12:55 AM

#

awesome 👍

mild surge Mar 27, 2024, 1:01 AM

#

thank you so much

#

hmm i am on the checkoout page and i just wanted to see if it would work so i copied your import { PaymentElement } from "@stripe/react-stripe-js";
import { useState } from "react";
import { useStripe, useElements } from "@stripe/react-stripe-js";

export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();

const [message, setMessage] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);

const handleSubmit = async (e) => {
e.preventDefault();

if (!stripe || !elements) {
  // Stripe.js has not yet loaded.
  // Make sure to disable form submission until Stripe.js has loaded.
  return;
}

setIsProcessing(true);

const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    // Make sure to change this to your payment completion page
    return_url: `${window.location.origin}/completion`,
  },
});

if (error.type === "card_error" || error.type === "validation_error") {
  setMessage(error.message);
} else {
  setMessage("An unexpected error occured.");
}

setIsProcessing(false);

};

return (
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<button disabled={isProcessing || !stripe || !elements} id="submit">
<span id="button-text">
{isProcessing ? "Processing ... " : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
);
} like that but mine looks like this

#

while your look like this

elfin cedar Mar 27, 2024, 1:11 AM

#

hi! I'm taking over this thread.

#

do you see any errors in the browser console?

mild surge Mar 27, 2024, 1:12 AM

#

yeah

#

elfin cedar Mar 27, 2024, 1:13 AM

#

looks like your backend server returned a 404 response. so you need to fix that.

mild surge Mar 27, 2024, 1:13 AM

#

how do i fix it?

elfin cedar Mar 27, 2024, 1:14 AM

#

make sure your backend server is running, make sure you have a route called /create-payment-intent in your backend, make sure the code in that route is working properly, etc.

mild surge Mar 27, 2024, 1:17 AM

#

server is running

#

and i got it

elfin cedar Mar 27, 2024, 1:18 AM

#

and i got it
does that mean you fixed the issue and its working?

mild surge Mar 27, 2024, 1:18 AM

#

no i got the route

#

/create-payment-intent

elfin cedar Mar 27, 2024, 1:21 AM

#

if you get a 404 error, it either means:

the server is not running, or running on a different port
the route is not called /create-payment-intent
or the URL you are using to call the backend is wrong

mild surge Mar 27, 2024, 1:26 AM

#

how do i know if the route is not called

#

what can i do to doubble check cause i just copy the github code

elfin cedar Mar 27, 2024, 1:27 AM

#

are you still getting a 404 error? then it means the route is not called.

#

are you sure your server is running, and it's on the correct port?

mild surge Mar 27, 2024, 1:28 AM

#

#

well yeah

elfin cedar Mar 27, 2024, 1:28 AM

#

so it's on port 5252, but the error you shared you are using port 4242.

#

so it's expected to not work

mild surge Mar 27, 2024, 1:28 AM

#

#

the client is on 4242

#

the backend is on 5252

elfin cedar Mar 27, 2024, 1:30 AM

#

in this screenshot you can see your frontend is trying to call your backend at the 4242 port, but it's on the 5252 port. so that can't work.

mild surge Mar 27, 2024, 1:30 AM

#

ah

#

well how do i fix that do i change it to the same port? that doesnt sound right haha

#

im trying but as you understand i am kinda new

#

can it do with the fact that i changed my package.json ? cause i added options but maybe i integrated it wrong or sum

#

cause mine and yours looks different now

elfin cedar Mar 27, 2024, 1:37 AM

#

not sure, having a look at https://github.com/matthewling-stripe/react-stripe-payment-element

#

I just downloaded the repo, then:

renamed .env.sample into .env and updated the values there
ran npm insall and npm init in the server/ folder
ran npm insall and npm init in the client/ folder
opened http://localhost:4242/ and it just works

mild surge Mar 27, 2024, 1:46 AM

#

and your using windows as well?

elfin cedar Mar 27, 2024, 1:47 AM

#

no, mac.

#

if you have trouble using the Payment Element, you might want to use Checkout Session or Payment Links, which are simpler to implement.

mild surge Mar 27, 2024, 1:49 AM

#

i tried to npm i and npm run again

#

now i got this

#

and cant start it again

elfin cedar Mar 27, 2024, 1:54 AM

#

maybe try this? https://stackoverflow.com/questions/70374005/invalid-options-object-dev-server-has-been-initialized-using-an-options-object
I'm sorry I can't really help with this, since I'm not familiar with Windows and this question is unrelated to Stripe API.

#arminomari_error