liz_unexpected

[opal stag]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1326314364357185667

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[timid sphinx]

This is our on change code

componentDidMount() {
const { elements } = this.props;

if (elements) {
  const paymentElement = elements.getElement('payment');

  if (paymentElement) {
    this.setState({ paymentElement });
    paymentElement.on('change', (event) => {
      this.setState({ paymentElementStatus: event });
    });
  }
}

}

[modest vortex]

Hello! To confirm, you said, "If it is false we call paymentElement.submit()" but you meant to say if it's true, correct?

[timid sphinx]

oh geeze sorry that is correct. If "true" then we call submit

[modest vortex]

Gotcha. That's fairly unusual. Our recommendation is to call elements.submit() when your customer presses the "Pay" or "Buy Now" button. It shouldn't be something that happens automatically.

[timid sphinx]

oh interesting

Can I ask why that is?

[modest vortex]

There are a lot of reasons, but the main one is that elements.submit() triggers some operations for certain payment methods that must be tied to a user-driven event in the browser. For example, Apple Pay won't work if elements.submit() isn't called from a user gesture handler.

[timid sphinx]

oh! that's very interesting because I've only started looking at this because we've had issues with apple pay

ok cool

thank you! I'll see if moving the submit leads to different behavior