#Heena
rancid ivy
i created payment form using stripe payment element
const paymentElement = elements.create('payment', {
fields: {
billingDetails: {
name : 'auto',
email : 'auto',
address: {
postalCode: 'auto'
}
}
}});
Hi, what's the question?
rancid ivy
Please write in this thread, and not in the main channel, thanks!
Let me check
You need to add an Address Element: https://stripe.com/docs/elements/address-element
opaque raptor
how ca i add with payment element ?
i added https://js.stripe.com/v3/
I did form using https://stripe.com/docs/js/element/payment_element
payment element also provide "postalCode" fields but in my form not display
rancid ivy
You have elements.create('payment', ...)
You also need to add elements.create("address", ...): https://stripe.com/docs/elements/address-element/collect-addresses?platform=web&client=html#web-collect-address
rancid ivy
Okay, 'auto' is default for billingDetails fields, could you set all the other ones to never please? https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address
coral spruceBOT
opaque raptor
payment element are different and address element are different
rancid ivy
The issue is that the address element is in mode: "shipping"
But payment element specifies billingDetails
You need to set mode: "billing"
opaque raptor
i tried ti billing
const addressElement = elements.create("address", {
mode: "billing",
});
is that ok ?
little radish
Yep, that will put the Element in billing mode
opaque raptor
not working
little radish
But I'm not sure that will work as you need
opaque raptor
little radish
We only collect the required billing details for the payment method type/customer location
opaque raptor
my question is payment element provide postalcode
little radish
I guess in India postal code is not deemed necessary for payment conversion
So we don't collect it, you'd need to collect it separately
opaque raptor
i did this site for UK
but payment element provide postalcode then why it not worked?
little radish
Yep, UK is one country where we do collect a postal code. As I said, it's determined on a per country basis
If you need the postal code I'd recommend collecting it via your own UI and passing on confirmation: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method_data-billing_details
opaque raptor
ok
little radish
We try to collect a few details as possible required for the payment to succeed, in order to increase conversion: https://stripe.com/docs/disputes/prevention/verification#avs-check:~:text=Support for both,the United Kingdom.
opaque raptor
const paymentElement = elements.create('payment', {
fields: {
billingDetails: {
name : 'auto',
email : 'auto',
address: {
postalCode: 'auto'
}
}
},
defaultValues: {
billingDetails: {
address: {
country: 'GB',
postalCode: '90005'
}
}
}
});
I did like this
and removed address element
I did it 🙂
little radish
Yeah, but if you switch country to India the postal code field will disappear
opaque raptor
yes
little radish
As I said, the other address fields are determined by the billing country. In your original question you had India selected. So it was expected
opaque raptor
yes right
i not know about it
can you please let me know that how can i display country and postal code fields in same line
I need same design like that screenshot
little radish
You can't
little radish
What's the question?
opaque raptor
i need to display country and postal code in same line like above screenshot
little radish
The form is just responsive. I suspect that because your form is in narrow modal it collapses the fields onto separate lines. Make it wider and they'll be on the same line
little radish
Not possible I'm afraid
opaque raptor
ok
then why it display in above portal ?
in customer management page you can see in "Add payment method"
little radish
As I explained, because of the wider viewport. Shrink your browser and the fields will collapse onto their own rows