mkoenke-link-billingdetails

[urban axle]

when a customer fills out the payment element without link, and we create a payment method, the billing details are returned, but if they click the checkbox to set up link, they are not

[random sandal]

When the customer selects link, are they filling out the billing details?

Also, why are you using createPaymentMethod instead of a SetupIntent?

[urban axle]

we use setup intents when we are storing a new payment method, but in this case we are building on top of the pre-existing system that defers creating the payment intent on the backend and passes the payment method to perform the charge at the same time.

and yes they are

when link is not checked, all the billing detail information is returned

ohhhhh no, we get the card details returned when the type is card, not the billing details

well I guess we get the country and postal code in billing details too, which is actually what I am looking for specifically

[random sandal]

So first image of billing_details is when you create PM with Link and second is when you create PM without Link?

[urban axle]

correct

[random sandal]

Hm yeah I'm not sure why we're not persisting billing details in that scenario

Let me ask a colleague

[urban axle]

thanks so much!

[random sandal]

Can you also paste the payment method id's from the above 2 screenshots for easy reference?

[urban axle]

this is without link: "pm_0NVEojUmS57H7yUMDuNZ4EQA" and this is one with link (different from above bc I no longer had that response): "pm_0NVF3LUmS57H7yUMX2Jw4fCk"

new example response with link

[random sandal]

Can you share your code snippet for creating the payment method? Want to see exactly how you're handling this

[urban axle]

sure

    try {
      let stripeResponse = await createPaymentMethod({
        elements,
        params: {
          ...(name ? { billing_details: { name } } : {}),
        },
      });

[random sandal]

Can you share the whole code block?

Just want to see a little more context

The whole file if necessary, but up to you

[urban axle]

    const {
      stripe: { createPaymentMethod },
      errorReset,
      elements,
    } = this.props;

    const { name } = this.state;
    try {
      let stripeResponse = await createPaymentMethod({
        elements,
        params: {
          ...(name ? { billing_details: { name } } : {}),
        },
      });

      if (!stripeResponse) {
        throw new Error('Could not create payment method');
      }

      const {
        token: {
          card: { country: cardCountryCode, address_zip: cardPostalCode } = {},
        } = {},
        paymentMethod: {
          card: { country: paymentMethodCountryCode } = {},
          billing_details: {
            address: { postal_code: paymentMethodPostalCode } = {},
          } = {},
        } = {},
        error,
      } = stripeResponse;
      const postalCode = cardPostalCode || paymentMethodPostalCode || '';
      const countryCode = cardCountryCode || paymentMethodCountryCode;
      this.updatePrices(countryCode, postalCode);

      if (error) {
        this.handleError({ message: error.message, resetStripe: true });
      } else {
        errorReset({ from: 'payment' });
      }

      await this.setState({
        cardDetailsNotSet: false,
        stripeResponse,
        postalCode,
      });
    } catch (e) {
      this.handleError({ resetStripe: true });
    }
  }

the file is massive!!!!

[random sandal]

It does look like you are only passing name to billing_details: let stripeResponse = await createPaymentMethod({ elements, params: { ...(name ? { billing_details: { name } } : {}), }, });

So if name is not null you pass name, otherwise an empty object

And the link payment method you created does have just name in billing_details

[urban axle]

so it seems like the billing details, when the payment method is a card, are returned automatically from the information entered into the payment element. We do not have to populate it into the params. The reason we pass the name is bc we collect that information in a separate form.

with a card, we get the country and the postal code also returned, which we do not populate

for link, we are passing the name into the params too, and that is returned to us, we are just not getting the address billing detail information like we do with a card

[random sandal]

I see got it

Thanks for the additional context. Checking with a colleague

[urban axle]

sure thing, thanks for your help

[rare hill]

mkoenke-link-billingdetails

[urban axle]

hello

[rare hill]

👋 Hello! sorry we were discussing as a team to make sure we were aligned. As far as we can tell this is fully expected here. If someone signs up for Link during this flow, you're going to get a Link PaymentMethod not a card one. If we gave you the country/postal code here, you'd be broken when another customer comes and has already signed up for Link already and would not even enter a country or postal code

So really with integrations like yours, if you absolutely need some parts of the billing details, you have to collect it upfront yourself separate from PaymentElement

[urban axle]

I see, I understand what you are saying. Our biggest issue is that we calculate taxes based off of the billing information provided by the customer. If we do not know where they are from, we don't have the information to calculate taxes. When a customer is using link, since we do not have access to the billing information, how do we know where they are from? There is a lot of resistance within the team to collect more information separately, since it kind of defeats the purpose of a 1-click checkout.

using an IP address seems very unreliable

[rare hill]

Really this is mostly impossible with PaymentElement. If you care about the billing details you have to collect those separately with AddressElement for example