Why credit card autofill doesn't work when production build but it works with npm start in my react application?

Question

I have a very simple form in my react application to fetch the user credit card information as follows.

<form autocomplete="on">
    <input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
    <input name="cc-exp-month"/>
    <input name="cc-exp-year"/>
    <input name="cc-exp"/>
</form>

I also tested in a "react-way"

I want the browser (safari in this case) to show the credit card options like the image below.

Interesting fact: I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above). However, if I run npm run build and serve the ./build folder the credit card options don't show up.

That's what I still don't understand, why the same code works in one way but it doesn't work in another way?

PS1: I'm testing in both cases with HTTPS.

PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.

Answer 1

your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:

• https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
• https://greenido.github.io/Product-Site-101/form-cc-example.html

I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.

If both of them is working for you then you please compare them with your html.

As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>

An example of proper payment form

<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

just as a reminder i would like to add here

How to Enable AutoComplete on your HTML forms

Here are some key points on how to enable autocomplete:

• Use a <label> for all your <input> fields

• Add a autocomplete attribute to your <input> tags and fill it in using this guide.

• Name your name and autocomplete attributes correctly for all <input> tags

• Example:

   <label for="frmNameA">Name</label>
   <input type="text" name="name" id="frmNameA"
   placeholder="Full name" required autocomplete="name">
  
   <label for="frmEmailA">Email</label>
   <input type="email" name="email" id="frmEmailA"
   placeholder="[email protected]" required autocomplete="email">
  
   <!-- note that "emailC" will not be autocompleted -->
   <label for="frmEmailC">Confirm Email</label>
   <input type="email" name="emailC" id="frmEmailC"
   placeholder="[email protected]" required autocomplete="email">
  
   <label for="frmPhoneNumA">Phone</label>
   <input type="tel" name="phone" id="frmPhoneNumA"
   placeholder="+1-555-555-1212" required autocomplete="tel">
  

How to name your tags

In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values

For example for CC

• Credit Card
  • Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Use any of these for autocomplete:
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type

requestAutocomplete()

Read here:

• https://developer.chrome.com/multidevice/requestautocomplete-faq
• https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
• https://blog.alexmaccaw.com/requestautocomplete

Resources

• Current WHATWG HTML Standard for autocomplete.
• "Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
• "Help Users Checkout Faster with Autofill" from Google in 2015.