Textbox does not show the normal Google Chrome credit card detection

Question

When using Google Chrome, the credit card textbox on my checkout page does not show the normal ability to select an existing credit card. I did set the "auto complete type" as Google recommends.

Is it due to the long "asp.net" style id field?

<input name="ctl00$conMain$CheckoutControl1$txtCreditCardNumber" type="text" id="ctl00_conMain_CheckoutControl1_txtCreditCardNumber" title="Credit Card Number " x-autocompletetype="cc-number">

https://dia-fundraising-dinner-2015.simpletix.com/Checkout/Guest/Order/df71f52a-f9b9-4dcd-923b-4e2d46bd754a/

Answer 1

It works fine, but you need the name on the creditcard as the first input field, chrome uses this to autocomplete the rest. Also use autocomplete besides x-autocompletetype as well to support other versions of chrome.

<input name="ccname" id="frmNameCC" required 
  placeholder="Full Name" autocomplete="cc-name"> 
<input name="ctl00$conMain$CheckoutControl1$txtCreditCardNumber" 
  type="text" id="ctl00_conMain_CheckoutControl1_txtCreditCardNumber"
  title="Credit Card Number " x-autocompletetype="cc-number" 
  autocomplete="cc-number">

See my jsfiddle: https://jsfiddle.net/c3ck1uxc/1/