IOS 7 remember this card callback

Question

I am having this problem where we have a payment page that we only allow you to submit once.

And on iOS if you enter a credit card it will ask you if you would like to save it (Safari feature not ours). However this is called after our javascript validation assigns the boolean to disallow resubmition.

The Safari popup stops page propagation and nothing happens.

I was wondering if there was a way to use a callback or hook into when the user submits this value and continue with form submission.

Note: I have already tried autocomplete="off" on the form and the input to have this popup not appear. Which does not work.

Edit: I discovered that the reason the form does not submit after clicking not now is because we make use of Recaptcha (which is hidden behind the popup in the picture).

Answer 1

Surprisingly I had a difficult time getting the AutoFill dialog to pop up. It seems that Safari needs some type of clue that you're submitting credit card info. If you want the dialog to just go away and you control the name of the form elements, then name the elements to something unrelated to a credit card:

This prompts autofill:

<form action="test" method="post" id="credit">
    Name:<input type="text" name="cardholder"  />
    <br/>
    Credit Card Type:
    <select name="cardtype"  >
        <option></option>
        <option value="amex">amex</option>
        <option value="visa">visa</option>
        <option value="mastercard">mastercard</option>
    </select>
    <br/>
    Credit Card:<input type="text" name="cardnumber" />
    <br/>
    Expiration:<input type="text" name="expirationdate" />
    <br/>
    <input type="submit">
</form>

This does not prompt:

<form action="test" method="post" id="credit" autocomplete="off" >
    Name:<input type="text" name="h" autocomplete="off"  />
    <br/>
    Credit Card Type:
    <select name="t" autocomplete="off"  >
        <option></option>
        <option value="amex">amex</option>
        <option value="visa">visa</option>
        <option value="mastercard">mastercard</option>
    </select>
    <br/>
    Credit Card:<input type="text" name="n" autocomplete="off" />
    <br/>
    Expiration:<input type="text" name="d" autocomplete="off"  />
    <br/>
    <input type="submit">
</form>

Answer 2

This is a variant on Sam Nunnally's answer.

I was in a situation where I was working with a Python package and couldn't edit the name of the credit card, so I had to rename fields on the fly with jQuery. This may or may not work for others depending on how they need to use the submitted form data.

Here's most of the relevant code that worked for me with some comments. I needed to rename the field and detach the label from the input (when there was a label for the input that said "Credit Card", iOS sniffed it out), and I threw in autocomplete="off" for good measure.

var iOSCheck = false;
var cardField = $("#id_card_number");

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // This could be more elegant; should sniff iOS 7.x specifically
  iOSCheck = true;
}

if (iOSCheck == true) {
  $("#id_card_number").attr('id','workaround-one'); // Rename ID. Nondescript name.
  $('#workaround-one').attr('autocomplete','off'); // Turn off autocomplete (not sure if necessary)

  $("#w1-label").after('<div class="simulate-label">Credit Card</div>'); // Kill the label. Append the text,
  $("#w1-label").remove(); // Then remove the label. That way the text in the label doesn't link to the CC field.

  cardField = $('#workaround-one'); // Redefine our credit card field so we can reference it later in the script.
}