#omar-paymentintent-error

1 messages · Page 1 of 1 (latest)

winter echoBOT
arctic yarrow
#

@sweet flicker do you have more details?

sweet flicker
arctic yarrow
#

okay so this has nothing to do with Checkout nor Link entirely

#

and is solely about your own payments code having an error on PaymentIntent creation?

sweet flicker
#

I mean it works fine on desktop

#

so i was thinking it had something to do with mobile

arctic yarrow
#

All good, just trying to grasp the question first. You mentioned 2 words that are real Stripe products: Checkout and Link. But it seems this is unrelated right now

#

you seem to have a type error somewhere server-side right? Since PaymentIntent creation happens on the server. Can you share maybe your server-side code?

sweet flicker
#

Sorry if I'm unclear. I'm very confused with the problem myself

arctic yarrow
#

sorry that's just a picture 🙂

#

omar-paymentintent-error

sweet flicker
#

const express = require("express");
const app = express();
const cors = require('cors');
const path = require('path');

require('dotenv').config();
const stripe = require("stripe")(process.env.STRIPE_API_KEY);

app.use(express.static("src"));
app.use(express.json());
app.use(express.static('public'));

app.use((req, res, next) => {
// Allow requests from any origin
res.header('Access-Control-Allow-Origin', ['http://localhost:3000, https://649e00b479a9e300be9ee7fc--ummyahyasbakery.netlify.app']);
// Allow specific headers
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
// Allow specific methods
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
next();
});

app.use(cors({
origin: '*',
allowedHeaders: 'Origin, X-Requested-With, Content-Type, Accept'
}));

app.post("/create-payment-intent", async (req, res) => {
const { items } = req.body;

const totalAmount = items.reduce((total, item) => total + item.price, 0);

// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: totalAmount,
currency: "usd",
automatic_payment_methods: {
enabled: true,
},
description: "Look out for pickup time email",
});

const clientSecret = paymentIntent.client_secret;
res.setHeader('Content-Type', 'application/json');

res.send({
clientSecret: clientSecret,
});
});

app.get('/success.html', (req, res) => {
const successFilePath = path.join(__dirname, 'public', 'success.html');
res.sendFile(successFilePath);
});

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

arctic yarrow
#

so what's not working?

#

Can you add logs to that code to understand which exact part is erroring?

sweet flicker
#

My understanding so far is that the request headers on mobile are sending application/x-www-form-urlencoded

#

even though I'm sending headers: { "Content-Type": "application/json" },

#

This is the network tab results for the error: Content-Type application/x-www-form-urlencoded

arctic yarrow
#

hum

#

ah so it crashes with the items decoding?

#

what's your client-side code that sends items?

sweet flicker
#

useEffect(() => {

if (selectedProduct) {
  fetch("http://localhost:4242/create-payment-intent", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items: selectedProduct }),
  })
    .then((res) => res.json())
    .then((data) => setClientSecret(data.clientSecret))
    .catch((error) => console.error("Error creating PaymentIntent:", error));
}

}, [selectedProduct]);

#

selectedProduct is an array of object(s)

arctic yarrow
#

hum that seems correct to me

#

so that exact code is running on your mobile device and still ignoring the headers?

sweet flicker
#

Ya because I don't change anything

#

I tested desktop and then mobile right after

arctic yarrow
#

I wonder if it's something like this

#

Sorry, I don't know much about CORS and preflight options but google seems to indicate it might be that

winter echoBOT
sweet flicker
#

still doesn't work