Abishek - payment element billing fields | Stripe Developers | Page 1

frozen geode Feb 4, 2022, 9:00 PM

#

Good question. Checking in to that. What payment method are you taking?

#

That shouldn't matter because you said "always" but I just want to make sure I am testing right

fleet sail Feb 4, 2022, 9:03 PM

#

I am using elements.create('payment') if that is what you are asking. I only want to use a credit card and that is why I am disabling the wallets on the option. I did not want to use `elements.create('card'). Not a fan of that layout

#

but want to show all the billing fields

frozen geode Feb 4, 2022, 9:08 PM

#

Unfortunately we do not have an option for this at the moment https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails

Stripe JS Reference

#

We only have auto and never

fleet sail Feb 4, 2022, 9:08 PM

#

so, how does auto work?

frozen geode Feb 4, 2022, 9:08 PM

#

I believe there is a feature request for always. I do not know if there is on the roadmap

fleet sail Feb 4, 2022, 9:09 PM

#

do they only show when it is necessary?

frozen geode Feb 4, 2022, 9:09 PM

#

Auto is the behavior you are seeing now. If the payment method requires the billing options it will show it, if it does not require them it does not

#

Exactly

fleet sail Feb 4, 2022, 9:09 PM

#

ok

frozen geode Feb 4, 2022, 9:09 PM

#

So at the moment the recommendation would be to choose never and create your own form to take billing information

fleet sail Feb 4, 2022, 9:10 PM

#

is there a way to pass the custom elements when calling confirmSetup?

frozen geode Feb 4, 2022, 9:10 PM

#

Exactly. You would pass the values in to that call

fleet sail Feb 4, 2022, 9:22 PM

#

alright cool. thank you

fleet sail Feb 4, 2022, 9:43 PM

#

when using confirmSetup does it always navigate to the return_url?

frozen geode Feb 4, 2022, 9:51 PM

#

You can set redirect to if_required so that it only redirects when need be https://stripe.com/docs/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect

Stripe JS Reference

fleet sail Feb 4, 2022, 9:53 PM

#

but the redirect isn't required for confirmCardSetup right?

frozen geode Feb 4, 2022, 9:58 PM

#

I don't believe so. If 3DS is required, that should come up as a modal instead of a redirect.

#

Are you using confirmCardSetup with the Payment Element and it is redirecting?

fleet sail Feb 4, 2022, 11:30 PM

#

No, I don't want a redirection, but I also don't want to use confirmCardSetup. Not a fan of the layout when creating a card element.

#

Is it possible to configure to use a modal instead of a redirect when it comes to confirmSetup?

obtuse onyx Feb 4, 2022, 11:32 PM

#

Hi 👋 @frozen geode had to step away. I'm getting caught up

fleet sail Feb 4, 2022, 11:32 PM

#

there isn't a great way to update the appearance of the card element as well

obtuse onyx Feb 4, 2022, 11:34 PM

#

As @frozen geode pointed out, the 3DS authentication process uses a modal window to avoid redirection.

fleet sail Feb 4, 2022, 11:35 PM

#

yes, but that is only for when the payment element is card and not payment. Just wondering if there is a way to configure to use the modal instead of a redirect when it comes to elements.create('payment')

obtuse onyx Feb 4, 2022, 11:36 PM

#

That is not correct. I was testing 3DS earlier today with elements.create('payment') and it definitely still used a modal window.

fleet sail Feb 4, 2022, 11:37 PM

#

does'nt elements.create('payment') require you to use stripe.confirmSetup instead of stripe.confirmCardSetup?

#

because confirmSetup only does redirect and not modal

#

am I missing something?

obtuse onyx Feb 4, 2022, 11:38 PM

#

Screen_Shot_2022-02-04_at_3.37.31_PM.png

fleet sail Feb 4, 2022, 11:38 PM

#

is there a way to use stripe.confirmCardSetup with elements.create('payment')

obtuse onyx Feb 4, 2022, 11:39 PM

#

The .confirmCardSetup function does not exist on the object returned when using payment

fleet sail Feb 4, 2022, 11:39 PM

#

thats great. how do I get the card Element to pass to confirmCardSetup when using elements.create('payment') been trying this for sometime now

#

any chance you have the full js code to what you showed above?

obtuse onyx Feb 4, 2022, 11:41 PM

#

Sure

fleet sail Feb 4, 2022, 11:42 PM

#

https://stripe.com/docs/js/setup_intents/confirm_card_setup#stripe_confirm_card_setup-data-payment_method here the payment_method requires the card element and i am not sure how to get the card element when using elements.create('payment');

Stripe JS Reference

obtuse onyx Feb 4, 2022, 11:42 PM

#

const options = {
        clientSecret : document.getElementById('client-secret').value,
        appearance: {
            theme: 'night',
            labels: 'floating'
        },
    }
    
    const elements = stripe.elements(options);

    const paymentElement = elements.create('payment');
    paymentElement.mount('#payment-element')
    paymentElement.on('change', event => {console.log(event)})
    const form = document.getElementById('setup-form')
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const { error }= await stripe.confirmSetup({
            elements,
            confirmParams: {
                return_url: window.location.href
            }
        })
        errMessageHandler(error)
    })

#

Okay hold on sec

#

You are confusing elements and methods.

fleet sail Feb 4, 2022, 11:43 PM

#

in the above code you are passing the return_url. This above code navigates for me

#

doesn't open a modal

obtuse onyx Feb 4, 2022, 11:44 PM

#

elements.create('payment') Creates a Payment Element, not a Card. The confirm method is confirmSetup
elements.create('card') Creates a Card Element, the confirm method is .confirmCardSetup

#

So you want another modal after the 3DS?

fleet sail Feb 4, 2022, 11:45 PM

#

does the above code redirect to the bank page for 3DS or open a modal?

obtuse onyx Feb 4, 2022, 11:47 PM

#

The above code returns the request back to my application. It does trigger a browser refresh

#

But I am not navigated away from my application

fleet sail Feb 4, 2022, 11:48 PM

#

ya, that is my problem, is there a way to not refresh the browser and open a modal instead for 3DS?

#

ok, let me put it this way, if I use elements.create('payment') , can I use stripe.confirmCardSetup to confirm the setupIntent?

#

if yes, how would the above code change?

obtuse onyx Feb 4, 2022, 11:51 PM

#

No you cannot

#

As I said earlier, confirmCardSetup is only available for Card Elements.

#

When you use elements.create('payment') you are instantiating a Payment Element

fleet sail Feb 4, 2022, 11:52 PM

#

ok

#

ok, so with elements.create('payment') there will always be a page refresh

obtuse onyx Feb 4, 2022, 11:55 PM

#

You can avoid it by passing in redirect: 'if_required'

#

https://stripe.com/docs/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect

Stripe JS Reference

#

The problem here is that you need to take into account that a user could potentially try to confirm the same setupIntent twice, which would cause an error

fleet sail Feb 4, 2022, 11:56 PM

#

the main reason I am trying to prevent the page refresh is because of oAuth. Its a shopify app and the redirection is going to be a pain because the app loads on shopify's app bridge, so when I navigate, it will go to homepage of the app and not to the current page. And I am not a fan of the card layout. It's just a bit blah. I like the payment element and I cannot use it without redirection

obtuse onyx Feb 4, 2022, 11:57 PM

#

I just revised my code like so:

const { error }= await stripe.confirmSetup({
            elements,
            confirmParams: {
                return_url: window.location.href
            },
            redirect: 'if_required'
        })

and I don't get a redirect even with 3DS

fleet sail Feb 4, 2022, 11:57 PM

#

so I am just trying to address a pain point when it comes to UX within a shopify app.

#

so, what does if_required actually mean if it doesn't redirect?

#

just trying to understand if there is an edge case and a customer gets redirected.

obtuse onyx Feb 4, 2022, 11:58 PM

#

Yeah, payment is definitely an improvement both stylistically and for more features.

#

The redirect is if the user needs to be taken to a new page. Some payment methods like Afterpay require this

fleet sail Feb 4, 2022, 11:59 PM

#

well, I only want to show card with elements.create('payment') because wallets and afterpay don't support subscriptions

#

so I just want to stick to accepting card with elements.create('payment') and prevent a redirect

obtuse onyx Feb 5, 2022, 12:00 AM

#

Then I think you should be able to avoid redirects

fleet sail Feb 5, 2022, 12:00 AM

#

ok, is there a way to disable afterPay, klarna and stuff. I already have the wallets disabled

#

obtuse onyx Feb 5, 2022, 12:01 AM

#

If they aren't enabled in your dashboard, they won't be an option.

fleet sail Feb 5, 2022, 12:02 AM

#

so, I need to enable these services for it show on the payment form?

obtuse onyx Feb 5, 2022, 12:02 AM

#

For each individual Setup Intent, you can specify which payment methods you accept on your server:
https://stripe.com/docs/api/setup_intents/create#create_setup_intent-payment_method_types

Stripe API reference – Create a SetupIntent – curl

Complete reference documentation for the Stripe API. Includes code snippets and examples for our Python, Java, PHP, Node.js, Go, Ruby, and .NET libraries.

#

In test mode it will show more payment methods than you have activated but you will also see a Console warning stating which ones won't be active in live mode

fleet sail Feb 5, 2022, 12:03 AM

#

ok, so I only have it setup to card

obtuse onyx Feb 5, 2022, 12:03 AM

#

Then you shouldn't see those other methods as options

fleet sail Feb 5, 2022, 12:04 AM

#

and with paymentMethod set to card + elements.create('payment') + confirmSetup with redirect set to if_required I don't have to worry about redirection, correct?

#

no edge cases right?

#

I am not going to have any of the other payment modes

#

only card

obtuse onyx Feb 5, 2022, 12:05 AM

#

I am fairly certain, but personally I would test with all the test cards to validate the expected behavior: https://stripe.com/docs/testing

Test your integration

Learn about the different methods to test your integration before going live.

fleet sail Feb 5, 2022, 12:06 AM

#

ok, I will make sure I will do that

#

thank you

obtuse onyx Feb 5, 2022, 12:06 AM

#

Happy to help 👍

fleet sail Feb 5, 2022, 12:13 AM

#

do the elements have client side events? like ready loading loaded?

#

something like that to indicate if the elements are loaded on the page?

obtuse onyx Feb 5, 2022, 12:15 AM

#

Here are the Element events. It is worth noting not all events fire on all elements so make sure you check with element is selected: https://stripe.com/docs/js/element/events

Stripe JS Reference

#

For instance, the paymentElement does not have a a click event

fleet sail Feb 5, 2022, 12:16 AM

#

perfect

#

Thank you for clarifying on the usage of elements.create('payment') I really appreciate it.

#

owe you a beer or more

#

been struggling it for hours

obtuse onyx Feb 5, 2022, 12:26 AM

#

It can be pretty easy to get confused. The names of many of the functions are only slightly different

#Abishek - payment element billing fields