Credit card payment form, enable scanning in Chrome with Angular & Kendo UI?-CodePudding

I am working on a credit card payment form in Angular with Kendo UI. I want to enable scanning (which is, weirdly, part of browser autocomplete functionality).

I have read this article, and experimented with this basic example and this workaround for my specific case:

export class AppComponent {
  @ViewChild("creditCardNumber") creditCardNumber;

  ngAfterViewInit() {
    this.creditCardNumber.input.nativeElement.setAttribute(
      "autocomplete",
      "cc-number"
    );
  }
}

No luck - the autocomplete attributes are added to my kendo elements, but the scanner still does not work. I've tried using ngrok, so it doesn't appear to be an https issue.

I tried reverse engineering the form - scanning works in chrome with the raw html, but stops working when I introduce Angular.

Any help would be appreciated. I'm starting to lose my mind. Thank you.

CodePudding user response：

I am not in a position to test this because I do not have a scanner, but if you want the kendo appearance with the autocomplete functionality why don't you use TextBox directive (documentation) and set the autocomplete on the input. Something like this:

<input #creditCardNumber autocomplete="cc-number" kendoTextBox />

Fiddle: https://codesandbox.io/s/bold-bird-98jmp0?file=/src/app/app.component.ts