#harcon_confirm-payment
warped mothBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- harcon_code, 2 days ago, 24 messages
- harcon_api, 2 days ago, 19 messages
reef bisonBOT
👋 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/1263863258964824165
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
modern zealot
Good question, looking in to this. Do you have an example ID of a PaymentIntent that you got this error from?
gaunt anvil
Here's some more code:
The paymentIntent creation on our backend:
async createPaymentIntent(stripeCustomerId, amount, paymentDescription = 'Zark User Payment', metadata = {}) {
const ephemeralKey = await stripe.ephemeralKeys.create(
{ customer: stripeCustomerId },
{ apiVersion: '2024-04-10' }
);
console.log('AMOUNT AT CREATION', amount);
let paymentIntentRequest = {
amount: convertDollarsToCents(amount),
automatic_payment_methods: { enabled: true },
setup_future_usage: 'off_session',
payment_method_options: {
card: {
setup_future_usage: 'off_session',
},
},
currency: 'usd',
customer: stripeCustomerId,
description: paymentDescription,
metadata,
};
const paymentIntent = await stripe.paymentIntents.create(paymentIntentRequest);
const customerSession = await stripeLts.customerSessions.create({
customer: stripeCustomerId,
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'on_session',
payment_method_remove: 'enabled',
},
},
},
});
console.log('CUS SESH', customerSession);
const res = {
paymentIntent: paymentIntent.id,
amount: convertDollarsToCents(amount),
customerClientSecret: customerSession.client_secret,
clientSecret: paymentIntent.client_secret,
ephemeralKey: ephemeralKey.secret,
customer: stripeCustomerId,
type: 'payment_intent',
};
return res;
},
Yes I can get if for you now
pi_3PeHaxGyjGYV1j4Z1RnLNDUB
This is the initial element setup that gets updated with the customerSessionClientSecret once the PI is created:
elements?.update({
mode: "payment",
currency: "usd",
amount: 1000,
setup_future_usage: "off_session",
});
Does that elements update call happen soon before your elements submit?
gaunt anvil
yes
Also to clarify (in case it matters but might not), for the sake of backwads compatibility we are using npm aliases on our api to use two versions of stripe, this was necessary so we could generate the customerClientSecret. This would mean that the stripe instance on our backend would be initialized twice with the same secret. Hoping that's not related to the issue but I figured I'd mention anyways.
modern zealot
Gotcha, would you be able to move that update to before you ask your server to create the payment intent instead? I ran in to a potentially related issue yesterday with calling update immediately before submit, so I am wondering if there is something strange happening where update doesn't have a chance to take effect before submit is called.
gaunt anvil
which update specifically? The one above is called at render, and then the cusSeshClientSec is added once the payment intent returns with it in the response as recommended in your docs
I could create a separate endpoint that just gets the cusClientSec if that's what you mean? but the payment intent is created on render, and a new request would have to as well...
Something I didn't mention before, the error is only happening when I tick "Save details for future purchase", when I don't click it the confirm request works fine
modern zealot
@gaunt anvil apologies for dropping off there. I was talking about the elements.update update and elements.submit calls. If update is made too soon before submit, that can cause issues
gaunt anvil
I've moved any updates calls outside of my submit function and am still getting the same error
and the button to confirm the payment is disabled until the paymentIntent has returned
modern zealot
Gotcha, I will consult my colleagues on this and get back to you.
modern zealot
Ah, it looks like in your customer session creation you are still passing on_session
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'on_session',
payment_method_remove: 'enabled',
},
},```
I think that may be the conflict. Can you try changing that to `off_session`?Nice! it's confirming as expected now, the only issue is the PaymentElement still isn't showing the saved payment methods, might be something I'm missing from the docs so I'll have a read through
modern zealot
Good to hear. Trying to think of what that may be
gaunt anvil
Ah sorry, it is displaying them it just defaults to adding a new card
Thank you very much for your time, I'm sorry the error was something so obvious
modern zealot
No worries at all, happy to help and that was an easy line of code to miss. As evidenced by me completely missing it for a bit 😬
reef bisonBOT