search

stripe / react-stripe-js

React components for Stripe.js and Stripe Elements
https://stripe.com/docs/stripe-js/react
MIT License
1.75k stars 267 forks source link

[BUG]: in `shipping` mode `PaymentElement` does not collect full billing address, only country and in some countries postal code #467

Closed matejcsok-ee closed 8 months ago

matejcsok-ee commented 9 months ago

What happened?

I use the PaymentElement and AddressElement in shipping mode, in which the AddressElement collects shipping address, and the PaymentElement shows a checkbox if the billing address is the same as shipping address. If I uncheck the checkbox, it offers me to specify the country, and in some cases postal code (like country US is selected). But I would like to use full billing address. I also see that payment element has default values but if I provide billingDetails.address and all the fields I still only see the country field.

stripe-examples/link - official example It is possible, that it is not a bug, it is just not implemented the way I would prefer to use it, or I just don't understand how to use it. But in my opinion when the billing address is not the same as the shipping address the client should be able to specify the full billing address not just the country. Please let me know which case it is, not implemented, bug or I am stupid. Thank you!

Environment

Chrome 120.0.6099.129 on macos 14.1.2 (23B92)

Reproduction

https://github.com/stripe-samples/link

matejcsok-ee commented 9 months ago

here it says: Provide initial customer information that will be displayed in the Payment Element. The form will render with empty fields if not provided. but actually I only see country, even if I specify these defaultValues

    const paymentElement = elements.create("payment", {
      defaultValues: {
        billingDetails: {
          address: {
            line1: street,
            line2: "",
            city,
            state,
            country,
            postal_code: zip,
          },
        },
      },
    });
    paymentElement.mount("#payment-element");
wesleyyee commented 8 months ago

same issue. additionally tried to use the AddressElement, one for shipping and one for billing and it complains that you can only have one address element

brendanm-stripe commented 8 months ago

Hey there, thanks for the feedback! This is not a bug, but we've also heard that developers would like to use Payment Element and Address Element more flexibly than what is currently supported.

We're working on way to improve this to support more use cases/patterns, but I don't have any specific details or timeline to share yet.