#krazy-dirt - react app
sly turtle
hey there can you say more about what you're building or any guide you're following and where you encounter issues?
harsh bough
hello, i followed a youtube video on how to setup a client server with stripe. They used normal html and js
on a new project, it worked
but i want to link it to my reactjs webapp and on a specific button on a specific page
i read online that i have to create the build folder and use app.use(express.static("../build")); that function, (the path to the file is mine)
but it didn't work
they had a file called script.js, so i took the code an i've added it as a handler the used the onClick={} to request it, but it also didn't work
sly turtle
Unfortunately I can't really help with broad react application build errors. If you're having trouble specifically with the Stripe parts of your integration I'm happy to help with that
harsh bough
it is with stripe
i have 0 errors
the app is displaying as it should
but when i press the redirectToCheckout, it gives me undefined with the new implementsation
sly turtle
What is the exact call you're making, and the error?
harsh bough
there is no error
it just doesn’t submit
fetch("http://localhost:3000/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
items: [
{ id: 1, quantity: 3 },
{ id: 2, quantity: 1 },
],
}),
})
.then((res) => {
if (res.ok) return res.json();
return res.json().then((json) => Promise.reject(json));
})
.then(({ url }) => {
window.location = url;
})
.catch((e) => {
console.error(e.error);
});``` This was in the script.jsrequire("dotenv").config();
const express = require("express");
const app = express();
app.use(express.json());
app.use(express.static("../build"));
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const storeItems = new Map([
[1, { priceInCents: 100, name: "Item 1" }],
[2, { priceInCents: 200, name: "Item 2" }],
]);
app.post("/create-checkout-session", async (req, res) => {
try {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
mode: "payment",
allow_promotion_codes: true,
line_items: req.body.items.map((item) => {
const storeItem = storeItems.get(item.id);
return {
price_data: {
currency: "usd",
product_data: {
name: storeItem.name,
},
unit_amount: storeItem.priceInCents,
},
quantity: item.quantity,
};
}),
success_url: `${process.env.HOST}/success.html`,
cancel_url: `${process.env.HOST}/cancel.html`,
});
res.json({ url: session.url });
} catch (e) {
res.status(500).json({ error: e.message });
}
});
app.listen(3000);
``` and this was in the server.js
weak plover
Hi @harsh bough! I'm stepping in for @sly turtle as they need to step away. First of all, if you are going to redirect client-side then you should be using stripe.redirectToCheckout() for a secure redirect: https://stripe.com/docs/js/checkout/redirect_to_checkout. The recommended route is to redirect from your server like we show here: https://stripe.com/docs/payments/accept-a-payment?platform=web#redirect-customers. Lastly, if the button isn't doing anything then the first step is to add logs to your server to ensure you are actually hitting your local endpoint. Can you add logs here right after your app.post and let me know if you are receiving anything server-side from your client?
harsh bough
hello
okay i will try it
thank you
when i use require("stripe") i get loads of error
like can't resolve
weak plover
Have you installed Stripe?
Step 1 here: https://stripe.com/docs/payments/accept-a-payment
harsh bough
yes of course
that is an example: /node_modules/stripe/lib/net' they are saying they can't resolve
weak plover
Can you paste the full error message you are seeing
weak plover
Can you provide your package.json file?
harsh bough
yes
"name": "simlyweb",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@mui/icons-material": "^5.2.5",
"@mui/material": "^5.2.7",
"@stripe/react-stripe-js": "^1.7.0",
"@stripe/stripe-js": "^1.22.0",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"firebase": "^9.6.10",
"mdb-ui-kit": "^3.10.1",
"mdbreact": "^5.2.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "^5.0.0",
"react-search-field": "^2.0.1",
"react-select": "^5.2.1",
"react-select-search": "^3.0.9",
"stripe": "^8.216.0",
"stripe-axios": "0.0.1-beta.2",
"web-vitals": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}```Hmm I don't see Express on there as a dependency
harsh bough
wait
still the same error
i read on stackoverflow that i have to downgrade webpack, i did it, but nothing worked
weak plover
Yeah it sounds to me like one of your other dependencies is not playing nicely with Stripe.
I'd recommend either building a new project and adding Stripe and then seeing which affect, or cloning and then removing from your current project
harsh bough
i will try