Naveed-VueJS | Stripe Developers | Page 1

swift roost Sep 1, 2022, 4:16 AM

#

Hi, looking...

gilded depot Sep 1, 2022, 4:17 AM

#

perhaps this has some hints https://stripe.com/docs/js/element/mount

It mentions:
"If the container DOM element has a label, the Element is automatically focused when its label is clicked"

Perhaps I can listen for the focus event

Stripe JS Reference

#

Or perhaps I need to rethink my entire approach. Perhaps I need to use stripe elements on a per-field basis? Maybe not using PaymentElement?

Is there something like that?

#

i need to collect this information btw. so not just country

Screenshot_2022-09-01_at_12.18.43_PM.png

swift roost Sep 1, 2022, 4:19 AM

#

https://stripe.com/docs/js/element/events/on_ready

Stripe JS Reference

#

Maybe you can try this event?

#

only render your button when you receive this

gilded depot Sep 1, 2022, 4:24 AM

#

hmmm much better!

swift roost Sep 1, 2022, 4:26 AM

#

Still seeing the same screen recording 😅

gilded depot Sep 1, 2022, 4:26 AM

#

Ok but does Stripe elements support those 2 additional fields i mentioned above

swift roost Sep 1, 2022, 4:29 AM

#

We do collect billing detail, but in an "automatic" way. See here: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails

Stripe JS Reference

#

never or auto. Payment Element will detect by itself and collect if it think it should

#

So if you want to force collecting some info, then yes you might need an additional form, then pass as defaultValue when you create the PaymentElement https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-defaultValues

Stripe JS Reference

gilded depot Sep 1, 2022, 4:31 AM

#

so what does auto do, based on what does it make the decision to collect

#

it might be at odds with business requirements right

swift roost Sep 1, 2022, 4:33 AM

#

It's a detection engine, all I can say is it may look at customer location/ip and all the obligation/regulation we need to follow as a Payment processor

#

For example if the customer is in some countries, we know those countries regulation requires additional address etc

#

The idea is we take care of that, you don't need to

gilded depot Sep 1, 2022, 4:35 AM

#

okay interesting so the default is 'auto' am i right?

swift roost Sep 1, 2022, 4:35 AM

#

yes

gilded depot Sep 1, 2022, 4:36 AM

#

so if thats the case then the form that gets loaded is dynamic

#

which means that if i were to add billing fields on my own

#

potentially id come across a situation where there are duplicate fields for billing address

#

unless i specify never that is...

swift roost Sep 1, 2022, 4:37 AM

#

if you collect on your own, then:

You pass the collected info in defaultValues when creating Element
You set the corresponding fields as never

gilded depot Sep 1, 2022, 4:38 AM

#

Dont understand this part

You pass the collected info in defaultValues when creating Element

swift roost Sep 1, 2022, 4:38 AM

#

Here: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-defaultValues

Stripe JS Reference

gilded depot Sep 1, 2022, 4:38 AM

#

the element being created is to collect customer info, at that point in time i have no collected info

#

so u mean i can initialise with null?

swift roost Sep 1, 2022, 4:39 AM

#

Oh this is prefilling

gilded depot Sep 1, 2022, 4:39 AM

#

initialise billing fields with null or something?

swift roost Sep 1, 2022, 4:39 AM

#

Sorry disregard step 2. Step 1 is enough for prefilling

gilded depot Sep 1, 2022, 4:40 AM

#

hm i dont get it why do i need to prefill

swift roost Sep 1, 2022, 4:40 AM

#

Because you already have your form right? I see

gilded depot Sep 1, 2022, 4:41 AM

#

my form is basically a combination of Stripe + my own button + my own address fields

#

of course ideally all the form inputs are from Stripe

#

i havent added the address fields yet

#

so ignore that for now

#

itll be annoying becaus i need to match the UI of stripe for the form

swift roost Sep 1, 2022, 4:43 AM

#

But you have plan to add your own address fields, correct?

gilded depot Sep 1, 2022, 4:43 AM

#

yep

swift roost Sep 1, 2022, 4:44 AM

#

Let's forget about prefilling. Collect address via your own address fields, disabling Stripe's Payment Element with never, then pass the information you collected in confirmation call

#

This part

If you disable the collection of a certain field with the fields option, you must pass that same data to stripe.confirmPayment or the payment will be rejected.

gilded depot Sep 1, 2022, 4:46 AM

#

👍 okay I will try this out

#Naveed-VueJS