CODEWITHSUNDEEP
stripe-paymentspostal-code
Quang Hà Đặng
Quang Hà Đặng

Reputation: 35

How to show postal code field in Stripe element

I am trying to integrate Stripe payments into my project, but it seems that Stripe's payment element doesn't show the postal code field. Is there a way to display that field?

Here is my code

<script src="https://js.stripe.com/v3/"></script>

<script>
const stripe = Stripe('PUBLIC_KEY');

const elements = stripe.elements({
                     clientSecret: clientSecret,
                     theme: 'stripe',
                 });

const element = elements.create("payment");

element.mount('#card-stripe');
</script>

Upvotes: 1

Views: 1168

Answers (2)

Lucky2501
Lucky2501

Reputation: 1704

There is no way to 'force-display' fields with the payment element.

Using the fields param won't help - you have two values: auto and never. There is no always value. auto will only conditionally show the field.

Concretely, the payment element will show the postal code field only if the card BIN matches a card that requires postal code collection - e.g. US or GB cards. You can also witness this by changing the country field on the element.

If you want to always display and collect a postal code, your options are to create the postal code element yourself (in which case you would omit it from the payment element with never), or use an address element in conjunction with your payment element:
https://stripe.com/docs/elements/address-element

Upvotes: 2

os4m37
os4m37

Reputation: 1133

You can specify what billing fields you want to display by passing this property: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails

You are looking at this field in particular in order to display the postal code:

https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-postalCode

const paymentElement = elements.create("payment", {
        fields: {
            billingDetails: {
                name: 'auto',
                email: 'auto',
                address: {
                    postalCode: 'auto'
                }
            },
        }
    });

Upvotes: 0

Related Questions