Bug with payment methods different than card in stripe checkout
Unanswered
Californian posted this in #help-forum
CalifornianOP
Hello, I have a server action that creates a stripe checkout session. It looks like the following:
The stripe checkout session is created without problems but it's only showing
export async function createCheckoutSession(ordersForPriceCalculation: OrderForPriceCalculation[], _: FormData): Promise<void> {
const price: number = await databaseOperator.calculatePrice(ordersForPriceCalculation);
const checkoutSession: Stripe.Checkout.Session =
await stripe.checkout.sessions.create({
payment_method_types: ['card', 'wechat_pay', 'alipay', 'bancontact', 'giropay', 'eps', 'ideal', 'p24', 'sofort', 'sepa_debit'],
payment_method_options: {
wechat_pay: {
client: 'web',
},
},
mode: 'payment',
submit_type: 'pay',
line_items: [
{
quantity: 1,
price_data: {
currency: CURRENCY,
product_data: {
name: 'Total',
},
unit_amount: formatAmountForStripe(
price,
CURRENCY
),
},
},
],
success_url: `${headers().get('origin')}/checkout/result?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${headers().get('origin')}/cart`,
})
redirect(checkoutSession.url as string)
}The stripe checkout session is created without problems but it's only showing
card as payment method in the client side (image attached). Any idea on what could be the problem ?21 Replies
CalifornianOP
The problem is actually only with Chrome. In Firefox, all the payment methods appear (image attached). So weird, some time ago it worked with Chrome... 😠I will let stripe team know about it
@Californian The problem is actually only with Chrome. In Firefox, all the payment methods appear (image attached). So weird, some time ago it worked with Chrome... 😠I will let stripe team know about it
Do you know the that stripe have a discord server, specifically for developementent? You get instant answers to programming problems for stripe ^^
CalifornianOP
Cool, I didn't have noticed. I will ask there
CalifornianOP
Their help channel is closed until Wednesday, January 3rd 9AM APAC time 😠So, I will let it open here in case anyone knows about it. Maybe Next.js contributes to the problem, I don't know
Oh noooo I am so sorry 😕
CalifornianOP
Up, got an answer by contacting stripe through github:
But then it goes against what Next tells to do in their Stripe example: https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts .
How would you suggest to change it to be in agreement with what Stripe told me ? How about instead of the server action doing the redirect, I use an API route which just returns the Stripe checkout url and then I do the redirect on client side ? Any better way ?
the error is due to the fact that the server-side code is doing an HTTP redirect but the client-side code is doing an async request for example using fetch() and not expecting the redirect. If that's the problem, you want to change your client-side code to do a form submit for example. Otherwise you could change your server-side code to return the url and then do the redirect client-side.But then it goes against what Next tells to do in their Stripe example: https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/app/actions/stripe.ts .
How would you suggest to change it to be in agreement with what Stripe told me ? How about instead of the server action doing the redirect, I use an API route which just returns the Stripe checkout url and then I do the redirect on client side ? Any better way ?
when I would be you, I would generate the checkout url (the generation serverside by default) and then return the link to the client. From there you can push it in the client router
CalifornianOP
Are you telling something in the sense of making my button redirect to a server component, which calls stripe to get the checkout url and pass it as props to a child client component, which effectively redirects to the checkout url ?
CalifornianOP
I like it. Let me try it out
more like this:
client: "hey give me a checkout url with my items x, y and z"
server (your server action): "sure here you have a checkout url for your items"
client: "thanks, let me render this url"
client redirects
client: "hey give me a checkout url with my items x, y and z"
server (your server action): "sure here you have a checkout url for your items"
client: "thanks, let me render this url"
client redirects
CalifornianOP
Got it, I didn't know the server action could be called outside forms action. Thanks !
@B33fb0n3 more like this:
client: "hey give me a checkout url with my items x, y and z"
server (your server action): "sure here you have a checkout url for your items"
client: "thanks, let me render this url"
*client redirects*
CalifornianOP
I implemented this solution but unfortunately the CSP problem remains. I guess it's actually coming from the stripe server's CSP that generated the checkout page, not from my server's CSP because even if I change my CSP
script-src directive to something unsafe like unsafe-inline, the problem remains. I will reply to Stripe. But at the same time it's weird nobody else is raising the problem on stripe communication channels. Maybe it's something with Next ?Do you have some project handling payment methods other than card ? Do you mind checking if you also have the problem on Chrome ? ðŸ™
I am using stripe also for payment processing. And yeah, those „missing fields“ are kinda normal. So don’t worry about it. I think there is something missing in your request parameters for the checkout url or maybe some of the payment methods that you want are not activated in your dashboard. It could also be possible, that your browser don’t show for example Apple Pay, even if you activated everything, just because you don’t have apple for example ^^
If you have a payment intent id, I can show you a page where you can check why a specific payment method is not listed
If you have a payment intent id, I can show you a page where you can check why a specific payment method is not listed
CalifornianOP
The weird thing is that all payment methods appear normally in Firefox. The problem is just with Chrome. They are all activated in my Stripe dashboard.
But I don't know if the fact they don't appear in Chrome is related to the fact that Stripe scripts are blocked by CSP or not. It's also possible that is another problem. But on client side on Chrome, that is the only error that shows up. On my server side there is no error that pops
that sounds great
CalifornianOP
Yeah... I hope stripe support can help further. I'm contacting them directly. Otherwise I will have to wait for the 3 January to try getting some help on their discord server.
CalifornianOP
But apparently I also have the same problem on an older project built with Express, which was working fine in Chrome before. So, it's not particular to Next.
yea, I think so too. It should be stripe related. So like I said stripe support should be your best choice: https://nextjs-forum.com/post/1188568139299041453#message-1188578139530604615