#sanderfish
prisma geyser
mode: shipping is for shipping address collection. If you wish to collect billing address, it should be mode: billing
shrewd crystal
I'm looking to do something like this in Stripe Checkout
Should we add the checkbox ourselves and render another AddressElement in mode: billing?
prisma geyser
What is the use case that user will have different billing address? There should only be one billing address for a payment method
shrewd crystal
Sorry that's not what I mean, the use case is the same as in Stripe Checkout, allowing the user to enter a shipping address and optionally enter a billing address (if billing is not the same as shipping)
prisma geyser
Ah I see! Sorry for misunderstanding your question.
Yes, if you wish to collect shipping address that is different from the billing address collected in Payment Element, Address Element with mode: shipping is recommended
shrewd crystal
So should I use two AddressElement in that case?
One with mode: billing and one with mode: shipping?
prisma geyser
Only one Address Element can be used in Elements group. For billing address, it can be collected using Payment Element whereas Address Element will be used to collect shipping address
shrewd crystal
So what if I need to collect two different addresses like in Stripe Checkout?
I basically want to replicate this behaviour
trail widgetBOT
tacit matrix
You can collect Shipping Address by AddressElement with shipping mode, and Billing Address within Payment Element. So you will collect both of them in 1 screen like the Checkout link you shared
tacit matrix
Yes. It's a bit tricky that PaymentElement doesn't guarantee to collect Billing Address. It only collects when it (Stripe) think it's best to collect to maximize your conversion and still comply to payment methods regulations
Same to Checkout tho
And yeah PaymentElement doesn't have that checkbox AFAIK
shrewd crystal
Okay, always catches me out that Stripe Checkout is not actually built with these elements 😅
Thanks for your help, I'll go back to the drawing board based on what's possible
shrewd crystal
hey @tacit matrix, I was looking at the docs again and realize maybe we're missing something
In shipping mode, the element does two things:
Collect a shipping address.
Offer the customer the option to use it as a billing address too.
But when I render it in shipping mode, it doesn't "Offer the customer the option to use it as a billing address too."
tacit matrix
Yeah don't see it too. Let me check around a bit more
The option will be displayed under the PaymentElement, when you have the Address Element on shipping mode
like this
shrewd crystal
Okay, so that only works in combination with the PaymentElement
Oooh got it working!
Thanks 🙏
tacit matrix
👍
shrewd crystal
but... it doesn't collect a full address
tacit matrix
You mean the lower part? It should have more below, right?
shrewd crystal
No, that's all
Some countries it doens't display anything else
In PaymentElement > fields I can only set fields to "auto" or "off", not "on" https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails
tacit matrix
Yes. It's a bit tricky that PaymentElement doesn't guarantee to collect Billing ...
Yeah only auto. So that's the point of Payment Element mentioned here
shrewd crystal
Okay gotcha. I'm a bit lost though. Is there a recommended integration path to collecting both Shipping Address and Billing Address?
tacit matrix
So collecting Shipping by AddressElement, and Billing by PaymentElemenet (but could have some fields hide) is the recommended path. If you want to collect full Billing Address, I guess you would want to implement a custom UI yourself, forcing everything to display, and then pass it into the PaymentElement (while still keep the Address Element happily collect Shipping)