Meet M

[west abyss]

I think you need to configure the Payment Element to always require a zip/postal code: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-postalCode

We normally on request it for cards from certain countries

[sour ledge]

@west abyss Like as per indian regualtions we need cutsomer name and address in payment_method object.

So can we add it here in this form ?

[west abyss]

You can't no. You'd need to capture those details yourself and pass them during confirmation: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method_data-billing_details

[sour ledge]

But I want all those at time of payment method creation
Like we edit from dashboard

Can't we customise it from react side ?
in elements ?

@west abyss

[west abyss]

Not possible right now I'm afraid!

[sour ledge]

We do have stripe hosted elements page like this

[west abyss]

Did you try passing the parameters I shared? https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address-postalCode

[warm holly]

<Elements stripe={stripePromise} options={options}>
<SetupForm />
</Elements>

I created this in reactjs so how can I add the address data option in this?

[west abyss]

As stated, you can't

The Payment Element will only render fields that are required according to the BIN of the card uses

If you need additional billing details (name, address) you'll need to pass those during confirmation: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-payment_method_data-billing_details

Have you tried using an Indian test card? https://stripe.com/docs/testing?numbers-or-method-or-token=payment-methods#asia-pacific

Hmm, doesn't make a difference in my testing actually

[spare ocean]

👋 taking over for my colleague. Let me know if there's any follow-up Qs I can answer!

[warm holly]

Hii

@spare ocean

const options = {
fields: { billingDetails: 'auto' }
}
return (
<form onSubmit={handleSubmit} className="card">
<PaymentElement options={options} />
<button disabled={!stripe}>Submit</button>
</form>
);

This is the code I'm trying

to add billing details text field

So user can add at time of payment method add

We are exactly folowing this flow
https://stripe.com/docs/payments/save-and-reuse?platform=web&html-or-react=react#add-the-payment-element-component

[spare ocean]

this only add the billingDetails fields whenever it's necessary

[warm holly]

for our application

[spare ocean]

based on the customer's location etc...

[warm holly]

I want to add it for india

payment fails if user don't add this in INDIA

AS per indian regulations,name and address are required

This error came

[spare ocean]

if you want to always collect the billingDetails I would suggest you pass fields: { billingDetails: 'never'} and collect the billing details from your own input and pass the values to the confirmPayment method

[warm holly]

Actually I want to add name as well, for alll countries ?

I guess name should be available for all ?

[spare ocean]

no not really

[warm holly]

@spare ocean We are not using confirmPayment

[spare ocean]

this is why you need to create your own inputs

[warm holly]

WE are using confirmSetup

[spare ocean]

same

it works the same way

[warm holly]

How can I attach my text element with stripe hosted element then? 😅

[visual kestrel]

Hi 👋 I'm jumping in as my teammate needs to step away.

You won't attach your text element to the Stripe element. There are the steps to collect billing details yourself, which gives you greater control over when that information is collected.

First you'll use the billingDetails parameter when creating your instance of the Payment Element to suppress its collection of the fields you'd like to collect yourself by passing never for those fields:
https://stripe.com/docs/js/elements_object/create_payment_element

You'll then add your own elements to page to collect the information that you'd like to.

Lastly, when calling confirmSetup, you'll reference your custom input fields and provide their values inside of the confirmParams.payment_method_data.billing_details:
https://stripe.com/docs/js/setup_intents/confirm_setup#confirm_setup_intent-options-confirmParams-payment_method_data-billing_details