#ben_customcheckout-bug
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/1431326754068496556
๐ Have more to share? Add more details, code, screenshots, videos, etc. below.
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.
- ben-hamilton_api, 17 hours ago, 12 messages
- ben-hamilton_api, 3 days ago, 17 messages
- Ideal fix: Make it so I can update the user's name without knowing the billing address's country
- Less-ideal fix: Update the documentation for
actions.updateBillingAddress()to make it clear thatbillingAddressis required
And good morning (if it's morning where you are). by the way. ๐
๐ Morning! Reading over your question and the docs ๐
Thanks much
Could you go into detail about the error you are seeing?
trying to repro now
could you also share a snippet of the code triggering the issue?
Sure. As I mentioned in the original thread, the error is:
Uncaught (in promise) IntegrationError: Invalid value for updateBillingAddress: address should be an object. You specified: null.
The code is:
const updateResult = await checkoutActions.updateBillingAddress({name: "Ben Hamilton"]);
Here's how I create the payment element:
const paymentElement = checkoutSession.createPaymentElement({
fields: {
billingDetails: {
// Tell Stripe not to collect name and email; we'll collect
// them and push them into the payment state.
name: 'never',
email: 'never',
},
},
});
Here's where the docs say that address should be optional
So, this seems to be a bug in the Stripe Javascript client-side library for Elements
As I mentioned in the original thread, I'm happy to file this as a bug
ben_customcheckout-bug
@stray flax I'm taking over. I was working on exactly that with a colleague a couple days ago so I feel like you already came with that ask maybe, or another person reported the same bug
Yeah, I originally asked 3 days ago but we ran out of time
Definitely appreciate your time and expertise on this
Gotcha, damn I thought this would have been flagged to the product team since since I spent an hour debugging this with them too.
I think we should just escalate this to a support ticket at this point so we can investigate and reply async
That'd be lovely
Do you mind writing in a clear summary to support on https://support.stripe.com/contact ? Don't use the live chat thing and just send an email (it is a convoluted process with that damn chatbot)
A bit annoying of a dance but once you have submitted let me know so I can look for it and get it in front of the right person on my team
I did try the suggested workaround (listen for the change event on the checkout session and read the country code out of there), but there seems to be a separate bug there โ the billing address / country code is never present in the checkout session, even when I change the country drop-down in the payment element
How do I just send the email? The chat bot is the only option I get besides Discord.
yeah sorry you get that AI chat bot first And you have to get through it.
Really really painful.
I usually now say "I want to talk to a human now" until it gives me the option to send an email (sadly most companies have those horrible AI chat bots now)
But don't talk to a human agent on live chat, since they can't help
heh.. why can't I just get that link directly
I KNOW
We used to have a URL that let you write a real email with a subject and a message as a textarea
we removed it to improve support. Yelled a lot internally but was told I was wrong.
I know it's much better for 95% of basic questions, but for cases like ours it sucks
My team does technically have a flow that sends you through this to create a ticket, but it doesn't let you write anything. So I'd get a ticket but with no summary at all and would have to read all 3 threads to even grasp state which is dumb too.
Really sorry ๐ญ
I've been there, I don't blame you (bad leadership decisions)
I just wish I had some sort of "I am a clued-in developer with 25+ years of experience, please don't make me yell at the cloud^H^H^H^H^H^H chatbot" button
ok, support ticket submitted with link to this chat and your stripe username
FWIW the secret URL is:
https://support.stripe.com/contact/email?topic=api_integration
yeah it got straight to my team this time. I'll have someone chase this done but it will likely take a bit of time!
in case you want to help anyone avoid the chatbot ๐
ah neat they had told me they had removed this lol I'll re-bookmark it
@stray flax the Checkout Session id you shared in the support ticket doesn't exist. I think you truncated some characters
req_ZYWSlwo4fgCdFi
note that the error is returned client-side by the Stripe JS Elements API so it doesn't even bother talking to the server to update the checkout session with the name
thanks!
Another question if you have time:
What are you really trying to do in like 2 sentences?
I get the docs are likely wrong, but when I paired with my colleague I couldn't make sense of what you were really doing in that flow
Sure. The production implementation I'm working on changing is here:
https://plant.terraformation.com/
This collects name + email and pushes them to our server endpoint which creates a user in our DB then redirects to a Stripe-hosted payment form. Users are falling out of this flow so we want to move to a custom embedded Stripe checkout form with Elements.
When moving to Elements, I want to make sure the user doesn't have to re-enter their name or email. So I disabled name + email collection:
const paymentElement = checkoutSession.createPaymentElement({
fields: {
billingDetails: {
// Tell Stripe not to collect name and email; we'll collect
// them and push them into the payment state.
name: 'never',
email: 'never',
},
},
});
But that means I have to push name and email into the Stripe checkout session
So I tried to push the data into the Stripe checkout session from the client side, which gave me that error
This is what the new UI looks like with the embedded Stripe Elements custom checkout form
If there's a better way to do this, I'm all ears ๐
makes sense, thanks a lot!
As an aside, if there were a way to make the Payment element require collecting name + email, I would just use that, but the only options I have are never and auto:
https://docs.stripe.com/js/custom_checkout/create_payment_element
So I have to collect them on our side and push them into the checkout session
yeah it's been another one of my top asks for years and years ยฏ_(ใ)_/ยฏ
We only collect what is required in PaymentElement.
Then I was told "but AddressElement will fix it" and then they decided to only collect a full address not just name/email
And now it's the usual "it's not that hard to make your own email/name input"
Turns out it's much harder than it looks to make it work well, have good validation, consistent styles, etc.
another ๐ญ
right, that's 100% the cycle I'm stuck in right now
I don't want to collect the full address unless Stripe decides the payment method requires it
okay getting some traction internally so replying here
It's a bit tricky, I think they are trying to use billingAddress.name to collect the name. But when providing billingAddress, they have to at least provide billingAddress.address.country as well.
So their workaround is
listen to PaymentElement change event to get the billingDetails which includes postalCode and country https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler-value-billingDetails
paymentElement.on('change', (event) => {
billingAddress = event.value.billingDetails;
})```
And then pass both email and name alongside that postal code and country
But you were saying that change event wasn't working for you can you confirm?
Let me try on the payment element
I was trying with the checkout session I think
ah, I was mixing them up a bit, I did set up change handlers for both the payment element and the checkout session
yeah I am also trying in parallel. So many pieces with that integration path ๐
yes, I confirmed the change event on the payment element does in fact provide the country code, I was mixing that up with the change event on the checkout session:
XXX payment element changed: {"type":"card","billingDetails":{"address":{"country":"US","postalCode":""}}}
perfect. Try confirming. I was surprised you were allowed to override that personally so I want to make sure you don't get another error
I'm trying too but I'm a few steps behind
yep! this workaround is functioning correctly now that I'm looking for the country in the payment element and not the checkout session
(the checkout session update event does fire after I update the billing address with the name + country code, and it does reflect both the name and country code I pushed into it)
thanks for your patience
as a follow-up, it'd be great to make it so we can update the name without this workaround
and/or update the docs. ๐
Heading out now. Thanks again
I'm so glad it worked. Adn yes I'll have them update the docs to be much clearer