mirajacc

[eternal osprey]

Hi there, the payment button that you are talking is the PLACE YOUR ORDER button?

[lethal thunder]

Hi @eternal osprey Sorry for the confusion. I need the stripe container classes to be updated in order to control the state of the payment button. Disable it if the form is empty or invalid.

[eternal osprey]

There's a Appearance API (https://stripe.com/docs/elements/appearance-api?platform=web) that you an use to adjust the look and feel of the PaymentElement.

However, I don't think the PLACE YOUR ORDER button is part of the PaymentElement.

[lethal thunder]

True, it is not. My issue is the stripe container is not updating its class based on form state. https://stripe.com/docs/js/element/the_element_container

[eternal osprey]

These CSS classes are not applicable to PaymentElement

https://stripe.com/docs/elements/appearance-api?platform=web#rules you should use Appearance API instead

[lethal thunder]

Sure. Thanks @eternal osprey Let me check

A quick question. Is there any way to communicate the state of the form inside the stripe iframe to the outside world? This could be easily done with card element classes, is there anything similar in payment element?

The appearance of the form isn't the issue, I only need to know the state of the form outside of the iframe

[eternal osprey]

There are some events that you can listen to https://stripe.com/docs/js/element/events#element_events

[lethal thunder]

Awesome

[eternal osprey]

For instance, you can listen to change event, and check if complete = true to determine whether the customer has filled in all information

So that you can enable the Pay button only when a change event with complete = true occurs

[lethal thunder]

Thanks @eternal osprey This is what I've been looking for. Great help

[eternal osprey]

Welcome!