#patrick_unexpected
tulip gorgeBOT
👋 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/1262898419169759343
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
tender peak
Hey, no not really
I have done this so many times so I almost know this by heart
I can share with you the frontend code and backend code if you would like?
blissful knot
Sure, just be sure to omit any keys
tender peak
Ok
Here is the frontend
backend:
router.post('/payment-intent', async (req, res, next) => {
const schema = Joi.object({
service_id: Joi.string().uuid().required(), // The ID of the service
customer_email: Joi.string().email().required()
})
try {
await schema.validateAsync(req.body)
// Get the data from the database
const { result } = await sqlQuery(`select * from ${variables.DB_DATABASE}.kalendi_services where id = ?`, req.body.service_id) as MySQLResponse<KalendiServices>
const data = Array.isArray(result) ? result[0] : result
console.log(data)
// Check if the product exists in stripe
let productExists: boolean = true;
try {
await stripe.products.retrieve(data.id)
} catch (error) {
productExists = false
}
if(!productExists){
await stripe.products.create({
id: data.id,
name: data.name,
url: data.url || undefined,
images: data.image ? [data.image] : undefined,
default_price_data: {
unit_amount: data.price * 100, // Since the value is in cents for Stripe
currency: data.currency
}
})
}
// Create the paymentIntent
const paymentIntent = await stripe.paymentIntents.create({
amount: data.price * 100,
currency: data.currency,
receipt_email: req.body.email
});
return res.status(200).send(paymentIntent)
} catch (error) {
next(error)
}
})
This is basically all I get
It has been stuck in this step for minutes
blissful knot
Is your PaymentIntent being created?
Can you log your client secret to be sure it's being passed to your frontend?
tender peak
I can see it in the network tab
{
"id": "pi_3PdJiQ2NTxDhWMVh1F7x3GJk",
"object": "payment_intent",
"amount": 289500,
"amount_capturable": 0,
"amount_details": {
"tip": {}
},
"amount_received": 0,
"application": null,
"application_fee_amount": null,
"automatic_payment_methods": {
"allow_redirects": "always",
"enabled": true
},
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "automatic",
"client_secret": "pi_3PdJiQ2NTxDhWMVh1F7x3GJk_secret_sI0A7cuyTabo6WIXgqEdjraSa",
"confirmation_method": "automatic",
"created": 1721168362,
"currency": "sek",
"customer": null,
"description": null,
"invoice": null,
"last_payment_error": null,
"latest_charge": null,
"livemode": true,
"metadata": {},
"next_action": null,
"on_behalf_of": null,
"payment_method": null,
"payment_method_configuration_details": {
"id": "pmc_1PImKW2NTxDhWMVhokmF4Erc",
"parent": null
},
"payment_method_options": {
"card": {
"installments": null,
"mandate_options": null,
"network": null,
"request_three_d_secure": "automatic"
},
"link": {
"persistent_token": null
}
},
"payment_method_types": [
"card",
"link"
],
"processing": null,
"receipt_email": null,
"review": null,
"setup_future_usage": null,
"shipping": null,
"source": null,
"statement_descriptor": null,
"statement_descriptor_suffix": null,
"status": "requires_payment_method",
"transfer_data": null,
"transfer_group": null
}
With status 200
blissful knot
Oh, this is also all in live mode. I'm not saying that's the problem but if you're testing, you should be doing this with your test mode secret and publishable keys instead
tender peak
yes, so this issue does not appear in development
Only in live mode
I have even used live credentials in localhost development, with api request to prod backend and it worked fine
so the issue seems to be running frontend in prod
blissful knot
I think you'll need to debug the differences between your development and prod code
tender peak
It is practically the same
blissful knot
And really try to strip down the code as much as you can to have a minimal reproduction then slowly change things
tender peak
There is nothing you can see from your backend?
The request to your servers being rejected or something?
Can you see in the backend when a website makes a request for PaymentElement? I assume it must since I can see the requests
blissful knot
Nope. I see the PaymentIntent creation request, and I see the request associated with the Element session (and the fact that you passed a client secret for this, vs. something like the deferred intent flow)
But that's about it
tender peak
So everything looks green from your side?
blissful knot
As in I see the necessary bits to be able to render the PaymentElement? Yes, that all looks good
I recommend comparing your dev and prod code to spot the differences. There must be something there given the differences you see
tender peak
I think I know that the issue is
It might actually be a react issue blocking Stripe from loading, and not actually a stripe issue
blissful knot
Ooh, I see!