simon_link-addresselement-react | Stripe Developers | Page 1

rain nymphBOT Nov 1, 2024, 1:32 PM

#

👋 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/1301901770234003528

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

#

primal fiber Nov 1, 2024, 1:33 PM

#

For more context, this is how our code looks like:
[Step 1]

#

[step 2]

meager vigil Nov 1, 2024, 1:40 PM

#

When you say 2 steps, you mean they're not all displayed on the same page/form?

primal fiber Nov 1, 2024, 1:41 PM

#

yes!
Different urls too. As:
checkout/information
and checkout/payment

meager vigil Nov 1, 2024, 1:42 PM

#

Oh afaik this is expected: https://docs.stripe.com/payments/elements/link-authentication-element#combine-elements

#

The Link Authentication Element only interacts with the Payment Element by prefilling payment information for returning Link users. However, it can still be displayed with other elements as well, like the following example with the Link Authentication Element, Address Element, and Payment Element:

#

Oh but this is contradicted by : https://docs.stripe.com/elements/address-element?platform=web#autofill-with-link

#

But yeah if they're not in the same Elements group on the same page, then I would't expect the prefilling to work properly

primal fiber Nov 1, 2024, 1:47 PM

#

I'd have thought that if they are not in the same page as LinkAuthenticationElement, then I would expect AddressElement to autofilled (since they are on same page), PaymentElement not autofilling. But is the other way around 🤔

#

that being said, I am suspicious that maybe stripe/link is not saving my address.
When I enter a valid Link email, I see stripe makes these calls:

https://api.stripe.com/v1/consumers/shipping_addresses/list
Response is:

{
  "shipping_addresses": []
}

https://api.stripe.com/v1/consumers/payment_details/list
Response has my CC informaiton correctly.

meager vigil Nov 1, 2024, 1:50 PM

#

Ah

#

Interesting

#

What's the customer id you're testing with?

primal fiber Nov 1, 2024, 1:58 PM

#

got it - I think is this one: cus_R8I5mx1zpufTC1

meager vigil Nov 1, 2024, 2:02 PM

#

I see several link payment methods associated with that customer, and none have the address saved

primal fiber Nov 1, 2024, 2:04 PM

#

hmmm I see. What do you think it could be the reason?

meager vigil Nov 1, 2024, 2:06 PM

#

If you're collecting address on a different page before you submit payment, then I wouldn't expect it to persist

#

When you submit the payment element, it takes the address at that point

#

If the element is not on the page, it wouldn't collect the address

primal fiber Nov 1, 2024, 2:09 PM

#

oh that would make sense...

meager vigil Nov 1, 2024, 2:10 PM

#

Yeah it needs to be mounted to the page when confirming the PI or SI

#

https://docs.stripe.com/elements/address-element

primal fiber Nov 1, 2024, 2:15 PM

#

  "billing_details": {
    "address": {
      "city": null,
      "country": "CA",
      "line1": null,
      "line2": null,
      "postal_code": "18509",
      "state": null
    },

Looks like we are sending incomplete data too - for Card and Link users. I will fix this and will let you know if it fixes the auto-fill issue. Thanks!

meager vigil Nov 1, 2024, 2:16 PM

#

Likely that postal code is coming from Payment Element

rain nymphBOT Nov 1, 2024, 2:19 PM

#

hidden oar Nov 1, 2024, 2:22 PM

#

Hi there 👋 jumping in as my teammate needs to step away soon. What mode are you running the Address Element in?

primal fiber Nov 1, 2024, 2:23 PM

#

hey Toby, it's in shipping mode

#

I also have an AddressElement in step 2 btw, for billing address form.
But that one is billing mode - I don't expect this one to auto fill.

hidden oar Nov 1, 2024, 2:26 PM

#

Gotcha! Currently the Address Element doesn't prefill address details when using Link if it's running in billing mode. But it should be able to populated shipping addresses that were saved in a Link account.

primal fiber Nov 1, 2024, 2:41 PM

#

at what moment of the process does Stripe/Link saves the address? And how the address is passed?

It is in the confirmParams of stripe.confirmPayment?

hidden oar Nov 1, 2024, 2:42 PM

#

Link saves the address that is provided while interacting with the Link modal that appears. It's not something your integration is able to pass.

primal fiber Nov 1, 2024, 2:57 PM

#

which Link modal?

hidden oar Nov 1, 2024, 2:58 PM

#

Oh, wait, you said Payment Element didn't you. Then it's pulled from the Address Element I'm pretty sure.

#

Give me a minute to fire up my test flow and double check that.

primal fiber Nov 1, 2024, 3:01 PM

#

yeah Payment Element is saving information fine for us. But AddressElement seems to not saving it.

I am about to confirm if it's because we are sending incomplete billing address data when we call stripe.confirmPayment. Just waiting a deploy to finish

hidden oar Nov 1, 2024, 3:08 PM

#

Okay, so in my flow, where I'm seeing the shipping mode Address Element get prefilled if I'm authenticated with Link, I'm not doing anything special to pass the values from the Address Element. It's in my Elements instance along with the Link Authentication Element and Payment Element, so the confirmPayment request pulls from all of the elements.

I'm not sure if this works if you manually pass shipping address information, and would need to test that more thoroughly. Does the Address Element in shipping mode still exist in the Elements instance when you call confirmPayment?

primal fiber Nov 1, 2024, 3:14 PM

#

My guess is that if my https://api.stripe.com/v1/consumers/shipping_addresses/list call returns a valid shipping address, my element would be auto-filled. But I haven't been able to get an address for that API call.

UI wise, the Address Element is not present when I call confirmPayment.

In step 1 my AddressElement is wrapped by Elements.
In sep 2, PaymentElement is wrapped by ElementsConsumer

hidden oar Nov 1, 2024, 3:16 PM

#

That's not an API for you to interact with, I'm fairly certain. If the shipping mode address element is being destroyed before you call confirmPayment, then I suspect the values from it aren't being pulled through. Do you read from the shipping mode Address Element and manually pass the values that it contained when confirming the payment, via the confirmParams.shipping hash?

primal fiber Nov 1, 2024, 3:22 PM

#

Yeah I am not trying to POST an address directly to that API, just trying to understand in what part of the process Stripe saves an address there. And what are the requistes for it.

Yes, I manually pass shipping details into confirmParams.

    payment_method_data: {
      billing_details: {
        address: {
          country: customerInformation.address?.country || '',
          postal_code: customerInformation?.address?.postal_code,
          state: customerInformation?.address?.state,
          city: customerInformation?.address?.city,
          line1: customerInformation?.address?.line1,
          line2: customerInformation?.address?.line2,
        },
      },
    }

hidden oar Nov 1, 2024, 3:23 PM

#

That parameter is for the billing address, not the shipping address.

We save the address during the confirmation step, pulling it from the Address Element as far as I can tell.

primal fiber Nov 1, 2024, 3:26 PM

#

Oh i see what you mean.
Could you check if this user cus_R8dwl9WkZzC5VC has a shipping address saved?

That is a normal Card user, not Link.
But if that user does not have a shipping address, it may be our issue not sending correct shipping address to Stripe

hidden oar Nov 1, 2024, 3:28 PM

#

They aren't saved to the Customer objects (I don't think, I'll have to double check that), I'm pretty sure they're saved to the Link account that gets created.

primal fiber Nov 1, 2024, 3:32 PM

#

I will try manually passing shipping hash into confirmParams too.
Hopefully Link takes it from there

hidden oar Nov 1, 2024, 3:33 PM

#

I just double checked the Customer I used when I did see Link prefill shipping address information, and confirmed the shipping address details are not stored on that object. They're stored in the Link account that the customer uses.

primal fiber Nov 1, 2024, 3:43 PM

#

Yeah even with sending shipping hash into confirmParams, Link is not saving my address 😦

#

this is my customerID: cus_R8I5mx1zpufTC1

hidden oar Nov 1, 2024, 3:44 PM

#

It won't be saved on the Customer object.

rain nymphBOT Nov 1, 2024, 3:44 PM

#

hidden oar Nov 1, 2024, 3:44 PM

#

The Customer object also doesn't map to a specific Link account.

primal fiber Nov 1, 2024, 3:45 PM

#

not saving my address into Link account *

#

do you recommend trying something else? I am running out of ideas hehe

hidden oar Nov 1, 2024, 3:49 PM

#

I still don't have a good sense of what your flow is to begin with, so I'm not sure what to suggest.

Do you have a public test site we can look at?

primal fiber Nov 1, 2024, 4:00 PM

#

Sorry to keep you in the dark, but we are before launch so we can't share links publicly.
but let me see what I can do

#

do you happen to have code of a Link implementation using React? If it's multi spet as ours, it would be awesome!

hidden oar Nov 1, 2024, 4:03 PM

#

I don't have a complete integration in react handy, one may be able to be pieced together from the code in our guides.

#

I'm modifying my integration to manually pass shipping details as part of one confirmation, then see if that populates the Address Element on the return visit. But I'm not sure Link is expected to work that way.

primal fiber Nov 1, 2024, 4:04 PM

#

thanks!

#

that would be helpful. Just want to know if link supports multi-step or it's an error in our side.

hidden oar Nov 1, 2024, 4:12 PM

#

Alright, here's what I stepped through and what I'm seeing:

First payment, where the Link account is created, I manually provided a shipping address via confirmParams.shipping
When returning to the payment page and rendering my form with the Address Element in shipping mode, I do not see the shipping address prefilled when I complete the Link authentication.

I'm fairly certain Link needs to pull directly from the Address Element to collect address details, when working in testmode. For live payments, your customers will be able to manage shipping address details in their Link account via link.com, but there isn't a testmode parallel for that site.

#

I'm testing a bit more, but it seems like in testmode Link only pulls the shipping address from the Address Element during the payment confirmation when the Link account is first created. It doesn't look like subsequent payments update the shipping address information for the testmode Link account.

#

Oh, ignore that last part, I did just see the address update for my testmode Link account. But it does seem that Link needs to pull directly from the Address Element

#

So, my thinking on why this isn't working for you, still revolves around whether the shipping mode Address Element is destroyed before the call is made to confirmPayment.

primal fiber Nov 1, 2024, 4:25 PM

#

hmmm interesting. Thanks Toby!
this was really helpful. I'll keep you posted if we find something else.

primal fiber Nov 1, 2024, 5:05 PM

#

For the record, I added AddressElement (hidden, I just want the element to render) in page where we call stripe.confirmPayment and now is saving addresses in Link!

tender vector Nov 1, 2024, 5:05 PM

#

Hi 👋
I took over as @hidden oar had to go but I will let them know this solution worked. Thanks for the follow up

primal fiber Nov 1, 2024, 5:06 PM

#

thank you all 👋

#simon_link-addresselement-react