google-pay / google-pay-button

Google Pay button - React, Angular, and custom element
Apache License 2.0
252 stars 60 forks source link

Autofocus option #275

Open mateusbw opened 6 months ago

mateusbw commented 6 months ago

I'm currently working on some ADA requirements adjustments and i need the Google Pay button to be on focus when my page loads.

I tried a couple different solutions. The one i currently have is to use the onReadyToPayChange callback and if isButtonVisible is true, i get the button via jquery and force the focus.

onReadyToPayChange={({ isButtonVisible }) => {
  if (!isButtonVisible) return;
  const [button] = $('.gpay-button');

  if (button) {
    button.focus();
  }
}}

I would like to be able to the pass the html autoFocus attribute as a prop instead of forcing the focus using js.

I could't find in the Google Pay API docs the option to pass the attribute. So one possible solution could be to add the autofocus attribute (and any other native html attr) after the Google Pay client creates the button.

const button = this.client.createButton(buttonOptions);
button.firstChild.autofocus = this.config.autofocus;