#niraj-p_unexpected
1 messages · Page 1 of 1 (latest)
👋 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/1407940221034561591
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
⛔️ Stripe developers have stepped away for a short while
Please leave your questions here, and we’ll respond as soon as we're back! If you need help urgently, you can contact Stripe support for help.
Hi there, is your Stripe Element accessible to the public so I can access and test?
are you also using the Payment Element?
Yes i'm using payment element.
Here i'm sharing checkout link, create customer and in stripe element select the country UK and enter invalid postal code .
Is this website accepting live payments?
Yes it is
For you reference we are using the below code
this.stripeV3 = Stripe(
this.profile.pk,
{ betas: ['custom_checkout_adaptive_pricing_2'], locale: this.currencyCode || 'auto', },
);
Init stripe element
this.elements = await this.stripeV3.initCheckout({
fetchClientSecret: () => this.getClientSecret(clientSecret),
elementsOptions: { appearance: STRIPE_APPEARANCE_ELEMENT },
});
this.paymentElement = this.elements.createPaymentElement({ layout: 'tabs' });
this.paymentElement.mount('#payment-element');
if (this.invoice?.type === INVOICE_TYPE.SINGLE) {
const currencySelectorElement = this.elements.createCurrencySelectorElement();
currencySelectorElement.mount('#currency-selector');
}
click on pay now
const { error, confirmResponse } = await this.elements.confirm();
Okay if its accepting live payment, I can't make a test payment on your website to troubleshoot.
Also it looks like you are using Stripe Checkout [0] with embedded components, could you try following our integration guide and see if the same error persist please: https://docs.stripe.com/checkout/custom/quickstart?lang=node
I have test link but it is not publicly accessible so i am sending you directly.
can you share with me the "wrong" postal code you used?
to trigger postal code collection, you must have been checking out as "United States" correct?
No
Okay please share with me how to reproduce the error
Enter customer details and click on next.
Enter the card details and use the 3ds card and select country united kingdom and enter wrong postal code and click on pay now.
After this you got an error and enter valid postal code and click on pay now.
what values did you enter under Postal Code when you tried?
is this the 3DS test card you used: 4000002500003155?
WS11
Yes
Re enter
WS111DB
Which is valid
I just tested two payment on your test website, and it is not redirecting me anywhere after a payment in successful, regardless of whether I initially used a wrong postal code at first. Could you double check that your return URL is working correctly
Return URL is working correctly.
This issue is facing only in billing address with postal code.
When you try to made payment with other billing address like US then you properly redirect on payment successful.
When wrong postal code enter and click on pay now and then after valid postal code enter and click on pay now.
But I cannot reproduce a successful redirection using the test payment url provided
For successful redirection try this case:
Create new customer and select country US and click on Pay now.
After this you can redirection on successful payment page.
I am only redirected to your invoice success page if I don't use a 3DS test card. Using the 4242 test cards works fine
Yes exactly
The problem is with the postal code
We are facing an issue for the wrong postal code
Steps
- Enter wrong postal code for the first time.
- Then enter the right postal code again.
This will cause unsuccessful redirection
The 3DS card element still gets mounted and it is not removed from the DOM
FYI
I've ran multiple tests on your test payment page, with my team as well. And we believe it is not the postal code. Because it looks like the 3DS pop-up have to hit a while blank screen in order to the customer to get redirected. This is the white background with 3DS pop-up I am talking about
In most cases, when I test on your website, the 3DS pop-up looked like this, where I can still see the Payment Element in the background.
It is not the return URL but more so how your own integration handles redirection and loading
Can you please take a look on this snippet and guide me what i'm missing?
I can't. This is not the code snippet that handles redirection and loading on your website. The code snippet you shared initializes Checkout and mounts the Payment Element, but the issue is not with your checkout session or payment element.
You would want to work with your own team to review how your website handles redirection, there seems to be a white page with a green loading indicator that I believe its custom built
But without the postal code the 3DS are working fine
Can you please try to change the country to US and try the 3DS card?
I did. I don't get redirected even if I use the correct Postal Code
I suggest checking why are you trying to redirect the customer when 3DS is required
there are times the 3DS pop-up window is infront of a white background
but other times it is infront of your payment element
Yes exactly
Yes and "why the white background is appearing" is a logic being controlled on your end, outside of Stripe
I want to that white background everytime
Not only for some cases
I tried all the possible ways, but i'm unable to find exact issue
That's something I can't advice because it has something to do with how your website handles redirection and the loading of each pages
which is why I asked, why are you trying to redirect the cusomer at the same time when 3DS is required? It doesn't look like the redirection is working properly when 3DS needs to happen first
If you run our working sample for Checkout with EmbeddedComponents [0], the 3DS pop-up appears right after the customer click pay, and if the payment is successful, the customer will get redirected to complete.html
[0] https://docs.stripe.com/checkout/custom/quickstart?lang=node
Can you tell me which type of redirection showing when use 3DS because i don't use any redirection after confirm.
I don't understand. There should be no custom redirection needed when handling 3DS when Stripe Checkout with Embedded Components
The return_url can be set when creating the Checkout Session in your server
there's no need to handle redirection under checkout.confirm()
the same is stated in the quickstart I gave you: https://docs.stripe.com/checkout/custom/quickstart?lang=node
See line 83 - 93 under checkout.js
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// yourreturn_url. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to thereturn_url.
Yes exactly
I have do the same thing
try {
const { error, confirmResponse } = await this.elements.confirm();
if (error) {
this.handleSecureError(error);
return;
}
return;
} catch (error) {
this.handleSecureError(error);
}
Okay so why is the white page with the green loading indicator appearing only sometimes? My team wouldn't know this
This is my spinner which show on confirm payment.
this.spinnerService.show('payment-success');
If in case getting any error then this spinner is hide
this.spinnerService.hide('payment-success');
Okay but in the first screenshot I shared with you, the spinner shows even though I haven't confirm 3DS — and it looks like your integration needs the spinner to show to have customer redirected to the success page.
If the spinner doesn't show, then redirection to the return_url doesn't work
and I can't advice why the spinner doesn't show
When you confirm the payment then spinner is show and this return_url handle the 3DS flow.
But when you try with the postal code error case then in this case first case confirm is call and return the error
and valid postal code enter re clicking on pay now then 3DS popup modal behavior unexpected.
When you confirm the payment then spinner is show and this return_url handle the 3DS flow.
But this is not always the case, your spinner does not consistently show when I confirm payment, even when I used the correct postal code
I am not able to advice why your spinner doesn't always show when I click confirm payment (as shared in my screenshot).
However, our Payment Element has an built-in logic to detect when an invalid postal code is submitted. You can try putting in an invlalid postal code into our Payment Element demo: https://docs.stripe.com/payments/payment-element and the postal code field should be highlighted red
You can consider relying on our in-built logic to handle postal code validation to simplify your checkout process, instead of returning a custom postal code error.
Okay but in my case if the postal code is invalid but you can click on pay now.
Any way can i validate postal code or card element before confirm call?
const { error, confirmResponse } = await this.elements.confirm();
You can try using the change event for Payment Element to validate: https://docs.stripe.com/js/element/events/on_change?type=paymentElement