[BUG]: Invalid attribute on card number input in terms of accessibility

vipulrawat commented 2 weeks ago

What happened?

Issue Rendering <PaymentElement /> from the library renders the card number input inside the payment form. The input field for card number created has the attribute autocomplete="billing cc-number" which is invalid for accessibility. Based on MDN the value billing can only be combined with address fields. This happens when the address element is also present in the form.

Expected Result The card number input should only have autocomplete=cc-number i.e., without billing or shipping

Reproduction Render the following react component and inspect the card number input on browser. Notice that the input has autocomplete=billing cc-number.

const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  useEffect(() => {
    if (elements) {
      const addressElement = elements.create("address", {
        mode: "billing",
        blockPoBox: true,
      });

      addressElement.mount("#address-element");
    }
  }, [elements]);

  return (
    <form onSubmit={() => {}}>
      <PaymentElement />
      <div id="address-element" />
    </form>
  );
};

OR you can inspect the input on the documentation example here.