#arti-villa_api
rancid canopyBOT
👋 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/1340980928406880276
📝 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.
- arti-villa_api, 25 minutes ago, 7 messages
lunar creek
I was in a previous chat and the person took ages to respond and then closed the chat. ¯_(ツ)_/¯
hybrid marsh
I don't see defaultValues in your code?
lunar creek
I added it and it didnt' work.
<AddressElement
onChange={handleBillingChange}
options={{
defaultValues: billingDefaultValues,
mode: 'billing',
display: {
name: 'split',
},
}}
/>
I closed it ~30 minutes after they replied to you which is what we do
lunar creek
ok
const [billingDefaultValues, setBillingDefaultValues] = useState<any>();
function prepareBillingDefaults(shippingAddress: any) {
if (!shippingAddress) return undefined;
return {
name: shippingAddress.name || '',
firstName: shippingAddress.name?.split(' ')[0] || '',
lastName: shippingAddress.name?.split(' ').slice(1).join(' ') || '',
address: {
line1: shippingAddress.address.line1 || '',
line2: shippingAddress.address.line2 || '',
city: shippingAddress.address.city || '',
state: shippingAddress.address.state || '',
postal_code: shippingAddress.address.postal_code || '',
country: shippingAddress.address.country || '',
},
};
}
async function handleCloneShippingIntoBilling(enabled: boolean) {
setSameAsShipping(enabled);
if (enabled && checkout.shippingAddress) {
await updateBillingAddress(
checkout.shippingAddress.name || '',
checkout.shippingAddress.address,
);
// Set billing default values when enabled
setBillingDefaultValues(prepareBillingDefaults(checkout.shippingAddress));
} else {
// Clear billing default values when disabled
setBillingDefaultValues(undefined);
}
}
async function updateBillingAddress(name: string, address: any) {
try {
await checkout.updateBillingAddress({
name,
address: {
city: address.city,
country: address.country,
line1: address.line1,
line2: address.line2,
postal_code: address.postal_code,
state: address.state,
},
});
} catch (error) {
handleAddressError('billing', error);
}
}
these are parts that are relevant. but really the fundamental issue is checkout.updateBillingAddress() via the api does not update the UI. so it is some stale data which is confusing. either I need to entirely wipe it or I need to match what's in the shipping form.
the programmatic api does not control the UI. and hide/show does not mount/remount the component.
hybrid marsh
You can't use updateBillingAddress with the Address Element AFAIK
Why not just use the Address Element in shipping mode?
lunar creek
apparently i can. like the useCheckout() billingAddress and shippingAddress values get updated.
hybrid marsh
It has a 'billing is same as shipping' checkbox?
hybrid marsh
apparently i can. like the useCheckout() billingAddress and shippingAddress valu...
Apparently according to who/what? There's no way to programatically update Address Element fields
updateBillingAddress just updates the values on the session
lunar creek
I'm using both. no I custom designed it. I put 2 AddressElement with differnet modes and then when the user does onchange we can do checkout.updateBillingAddress or checkout.updateShippingAddress
hybrid marsh
But why do you need to instances? As I said, just use one in shipping mode: https://docs.stripe.com/elements/address-element#automatic-behavior
lunar creek
`updateBillingAddress` just updates the values on the session
i need full shipping and billing
for optimal fraud
hybrid marsh
I'm using both. no I custom designed it. I put 2 AddressElement with differnet ...
Sure, but that won't update the actual fields in the Element UI as you can see
It just sets the values on the Checkout Session object
lunar creek
Sure, but that won't update the actual fields in the Element UI as you can see
right so how do i clear that?
lunar creek
this seems like a basic feature. i think in the meanttime I'll need to hide billing address and just use the basic billing that is part of the payment element
hybrid marsh
(i.e. clear the fields and set them to match the values from the other Element)
lunar creek
who can i report this to?
hybrid marsh
this seems like a basic feature. i think in the meanttime I'll need to hide bill...
I don't necessarily disagree, it's good feedback. But it just doesn't work today
lunar creek
that's still good to know. ty!
hybrid marsh
who can i report this to?
checkout-beta@stripe.com
lunar creek
apprecate it!
hybrid marsh
No problem, glad I could help!
rancid canopyBOT
hollow glacier
👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!