开发信用卡表单时如何禁用Chrome的Google Payments保存提示？

Absolutely, you can turn off that annoying save prompt—since you're tokenizing the card details and don't need users to store raw card info, this makes total sense. Here are the most reliable methods to do it:

• Use the autocomplete attribute properly
  This is the first line of defense. You can add autocomplete="off" directly to the entire form or individual credit card fields. For example:

  <form autocomplete="off" action="/process-card" method="POST">
    <label for="card-number">Card Number</label>
    <input type="text" id="card-number" name="card-number" autocomplete="off">
  
    <label for="card-expiry">Expiry Date</label>
    <input type="text" id="card-expiry" name="card-expiry" autocomplete="off">
  
    <label for="card-cvv">CVV</label>
    <input type="text" id="card-cvv" name="card-cvv" autocomplete="off">
  
    <button type="submit">Submit Payment</button>
  </form>
  

  Note: Some modern browsers might ignore autocomplete="off" for credit card fields as they prioritize user convenience. If that happens, try using more specific autocomplete values that signal a one-time use, like autocomplete="cc-number one-time" (though support varies, it's worth testing).

• Obscure field names (as a fallback)
  Browsers detect credit card fields by looking for common names like cardnumber, exp-date, or cvv. If you use less obvious names (e.g., user-payment-card, payment-expiry instead), the browser might not recognize the fields as credit card inputs and skip the save prompt. Just make sure your backend handles these custom names correctly when processing the form.

• Leverage tokenization library features
  If you're using a third-party tokenization library (like those from payment processors), many of them include built-in mechanisms to disable browser auto-save. For example, some libraries render card fields in iframes that isolate the inputs from the browser's auto-detection. Check your library's documentation for options like disableAutocomplete or similar.

• Post-submit field clearing
  After the form is submitted successfully, clear the credit card fields immediately. This can help prevent the browser from caching the values and triggering the save prompt. You can do this with a simple JavaScript snippet:

  document.querySelector('form').addEventListener('submit', (e) => {
    // Wait for submission to complete, then clear fields
    setTimeout(() => {
      document.getElementById('card-number').value = '';
      document.getElementById('card-expiry').value = '';
      document.getElementById('card-cvv').value = '';
    }, 500);
  });
  

Keep in mind that browser behavior can change over time, so it's a good idea to test these methods across different versions of Chrome to ensure they work as expected.

内容的提问来源于stack exchange，提问作者Naoya Fujita