#Raymond
dense hemlock
burnt niche
Hi @grand spire
grand spire
Hey man
burnt niche
Pasting your screenshot in the thread:
grand spire
Thank you
You want me to share the code?
I've followed whatever was in the documentation step by step
burnt niche
Which documentation are you following?
grand spire
backend node, frontend react
Have i skipped anything?
I got my secret key and my public key, and as i understood they have to be strings so ${process.env.secret}
burnt niche
Based on the screenshot you shared, the frontend is trying to call /create-Payment-Intent on your server, but it's getting a 404 instead.
So can you souble check that: your server is running and that you provided the correct URL?
In the documentation page you shared the URL is /create-payment-intent (no uppercase)
grand spire
yeah i've tried different urls, i usally have api/payment/create-payment-intent
but that didn't work aswell
I've tried uppercase and non uppercase
burnt niche
What's your backend code? You need to make sure the URL you set in your frontend match the route in your backend.
grand spire
I got my routes here ```js
/* Code below is from stripe documentation */
const calculateOrderAmount = (items) => {
// Replace this constant with a calculation of the order's amount
// Calculate the order total on the server to prevent
// people from directly manipulating the amount on the client
return 1400;
};
/*A PaymentIntent tracks the customer’s payment lifecycle,
keeping track of any failed payment */
router.post("/create-payment-intent", async (req, res) => {
const { items } = req.body;
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: "sek",
automatic_payment_methods: {
enabled: true,
},
});
res.send({
clientSecret: paymentIntent.client_secret,
});
});
router.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'T-shirt',
},
unit_amount: 2000,
},
quantity: 1,
},
],
mode: 'payment',
success_url: 'http://localhost:4000/success',
cancel_url: 'http://localhost:4000/cancel',
});
res.redirect(303, session.url);
});
// export router
module.exports = router;```
const stripePaymentRoutes = require("./Routes/StripePaymentRoutes");
// globals
const configUrl = "/api/";
app.use(configUrl + "payment/", stripePaymentRoutes);```this inside the routes aswell
const express = require("express");
const router = express.Router();
const stripe = require("stripe")('${process.env.STRIPE_API_SECRET_KEY}');
router.use(express.static("public"));
router.use(express.json());
If thats not enough of information, i don't mind screensharing
burnt niche
Can you try with this url: /api/payment/create-payment-intent
grand spire
my server port is 4000
client 3000
you want me to add http://localhost:4000/ in there too?
It worked
i think?
^
StripeAuthenticationError: Invalid API Key provided: ${proces************************KEY}
at res.toJSON.then.StripeAPIError.message
(C:\Users\Raman\development\Fullstack-project\server\node_modules\stripe\lib\StripeResource.js:184:23)
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
type: 'StripeAuthenticationError',
raw: {
message: 'Invalid API Key provided: ${proces************************KEY}',
type: 'invalid_request_error',
headers: {
server: 'nginx',
date: 'Mon, 05 Dec 2022 13:39:25 GMT',
'content-type': 'application/json',
'content-length': '138',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET,
'strict-transport-security': 'max-
},
statusCode: 401,
requestId: undefined
},
rawType: 'invalid_request_error',
code: undefined,
doc_url: undefined,
param: undefined,
detail: undefined,
headers: {
server: 'nginx',
date: 'Mon, 05 Dec 2022 13:39:25 GMT',
'content-type': 'application/json',
'content-length': '138',
connection: 'keep-alive',
'access-control-allow-credentials': 'true',
'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS, DELETE',
'access-control-allow-origin': '*',
'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
'access-control-max-age': '300',
'cache-control': 'no-cache, no-store',
'www-authenticate': 'Bearer realm="Stripe"',
x-age=63072000; includeSubDomains; px-age=6307reload'
},
requestId: undefined,
statusCode: 401,
charge: undefined,
decline_code: undefined,
payment_intent: undefined,
payment_method: undefined,
payment_method_type: undefined,
setup_intent: undefined,
source: undefined
invalid api key?
client: ```const stripePromise = loadStripe("${process.env.CLIENT_APP_STRIPE_PUBLIC_KEY}");
Yes, you are currently passing this exactly string for the key: "${process.env.CLIENT_APP_STRIPE_PUBLIC_KEY}" which cannot work.
Instead you should pass the variable directly with process.env.CLIENT_APP_STRIPE_PUBLIC_KEY (no ", no $, no {)
grand spire
Actually now it works, i got 200 status
So the server side should not be passed as a string and client needs to be passed as a string
I can show you if i remove the " $ and { what happens
1 sec
burnt niche
So the server side should not be passed as a string and client needs to be passed as a string
I don't understand this sentence. Both the publishable key and the secret keys are strings.
grand spire
const stripePromise = loadStripe("${process.env.CLIENT_APP_STRIPE_PUBLIC_KEY}");
const stripe = require("stripe")(process.env.STRIPE_API_SECRET_KEY);
no $ in the server
or "
I assume this looks good, otherwise I appreciate your help alot!
burnt niche
So you managed to make things work?
burnt niche
Great 🙂