Когда в iOS8 Safari доступна опция "Сканировать кредитную карту"?

Question

Поэтому Safari предлагает функцию сканирования кредитных карт на iOS8 с некоторыми формами кредитных карт.

У меня вопрос: как Safari определяет, когда предлагать эту опцию?

До сих пор я обнаружил, что эта опция доступна в Amazon и PayPal, но ни одна из моих форм ввода с кредитной карты не смогла воспроизвести это поведение.

Answer 1

После небольшого исследования с браузером iOS8 и эмуляцией Chrome я понял это частично. Я знаю о некоторых решениях, но я точно не знаю, есть ли другие способы сделать это. Вы должны будете поблагодарить Apple за удивительное отсутствие документации по этому вопросу.

В настоящее время в Netflix/Amazon сканирование кредитных карт работает правильно. Поэтому я эмулировал пользовательский агент iOS8 в своем браузере Chrome и проверил разметку в поле номера их кредитной карты. Вот Netflix's:

<input name="cardNumber" smopname="num" id="cardNumber-CC" class="cardNumber" type="text" value="************0891" pattern="[0-9]*">

А вот и Амазонка:

<input name="addCreditCardNumber" size="20" maxlength="20">

В этот момент я поиграл с формой, обслуживаемой через HTTPS, которую я контролировал, и начал устанавливать атрибуты, чтобы увидеть, что произойдет. Ниже "работает" означает "успешно запущено сканирование карты", а "не работает" означает " не инициировано сканирование карты":

• name="addCreditCardNumber" => работает
• name="cardNumber" => работает
• name="cardnumber" => работает
• class="cardNumber" => не работает
• type="cardNumber" => не работает
• id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear" => работает

Так как name Атрибут управляет данными формы и может повлиять на работу серверной формы. Я настоятельно рекомендую запустить сканирование кредитной карты, указав свой ввод id в cardNumber,

Я бы дал ссылку на соответствующую документацию... но эй! Там нет (по крайней мере, не то, что я знаю)

Answer 2

Я думаю, что вам лучше использовать HTML5 Autocomplete Types на ваших входах.

Придерживайтесь типов, связанных с кредитной картой, и большинство современных браузеров автоматически распознают эти поля, включая Mobile Safari и функцию "Сканировать кредитную карту". Бонус в том, что вы всегда получите правильную клавиатуру и на мобильных устройствах.

Пример (примечание autocomplete, x-autocompletetype, а также pattern атрибуты):

<input type="text" id="cc-num" autocomplete="cc-number" x-autocompletetype="cc-number" pattern="\d*">

<input type="text" id="cc-name" autocomplete="cc-name" x-autocompletetype="cc-full-name">

Я также написал соответствующее сообщение в блоге на эту тему и создал HTML5 Autocomplete Cheatsheet.

Answer 3

В дополнение к ответу Арно Брусо, поиск "номера карты" в файлах симулятора iOS дает следующий файл:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared

Быстрый пробег strings на нем показаны эти строки, которые, безусловно, используются для сопоставления потенциальных полей:

card number
cardnumber
cardnum
ccnum
ccnumber
cc num
creditcardnumber
credit card number
newcreditcardnumber
new credit card
creditcardno
credit card no
card#
card #
cvc2
cvv2
ccv2
security code
card verification
name on credit card
name on card
nameoncard
cardholder
card holder
name des karteninhabers
card type
cardtype
cc type
cctype
payment type
expiration date
expirationdate
expdate

и чуть дальше:

month
date m
date mo
year
date y
date yr

Не могу увидеть (при таком наивном подходе) какие-либо ссылки на какие атрибуты (id, name, placeholder...) или другие метаданные (возможно, метка?) сравниваются с этим списком. Кроме того, за исключением "name des karteninhabers", оно действительно очень ориентировано на английский, что довольно необычно для Apple IMHO.

Answer 4

Благодаря @barbazoo, опция Сканировать кредитную карту будет доступна через https с действующим (не самоподписанным) сертификатом.

Answer 5

Для полей срока действия, основываясь на ответе Арно, я обнаружил, что поля срока действия будут распознаваться по cardExpirationYear а также cardExpirationMonth быть в id приписывать.

Это сработало, когда год и месяц являются обычными текстовыми вводами с соответствующими идентификаторами. Месяц заполняется как двузначное число, а год - как четырехзначное число.

В быстром тесте с использованием тегов я обнаружил, что он также заполняет правильные месяц и год.

<input type="text" id="cardNumber" placeholder="CC number">

<select id="cardExpirationMonth">
  <option value="01">01</option>
  <option value="02">02</option>
  ...
  <option value="11">11</option>
  <option value="12">12</option>
</select>

<select id="cardExpirationYear">
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  ...
  <option value="2024">2024</option>
  <option value="2025">2025</option>
</select>

Я не знаю, какие другие значения будут работать в тегах параметров.

7

Источник Поделиться

user1234190 11 ноя '14 в 18:35 2014-11-11 18:35

2014-11-11 18:35

Дело не в том, когда, а в том, как мы можем включить эту функцию в браузере Safari.

Давайте просто поговорим о том, что происходит при отправке формы:

1. Некоторые браузеры хранят все input ценности с этим name приписывать. И он предложит автозаполнение этих полей, когда он сталкивается с тем же name d input элементы.

2. Некоторые браузеры сканируют только autocomplete атрибут для предложения автозаполнения и,

3. Некоторые другие сканируют такие атрибуты, как label или же name за input элементы тоже.

Сейчас, autocomplete атрибут может иметь больший набор значений, включая cc-name (Название карты), cc-number, cc-exp, cc-csc (Номер безопасности - CVV) и т. Д. (Полный список здесь)

Например, мы могли бы сказать браузеру, что это поле номера карты, и оно должно предлагать autocomplete когда это возможно, и это должно включить функцию сканирования кредитной карты как:

<label>Credit card number: 
  <input type=text autocomplete="cc-number">
</label>

В общем:

<input type="text" autocomplete="[section-](optional) [shipping|billing](optional) 
[home|work|mobile|fax|pager](optional) [autofill field name]">

более подробный пример:

<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

И каждое значение автозаполнения выглядит так:

section-red : wrapping as a section. (named red)
shipping : shopping/billing
mobile   : home|work|mobile|fax|pager (For telephone)
tel      : [Tokens][2]

Когда мы кодируем его так, как этот браузер, мы точно знаем, какое значение должно быть заполнено в этом поле.

Но браузер вроде сафари нужен name или же id или же label значения также должны быть установлены правильно.

Поддержка пока autocomplete, id а также name атрибуты для автозаполнения значений.

Browse  Ver OS              ID      Name    Autocomplete
Chrome  50  OS X 10.11.4    No      Yes     Yes
Opera   35  OS X 10.11.4    No      Yes     Yes
Firefox 46  OS X 10.11.4    Yes     Yes     No
Edge    25  Windows 10      No      Yes     No
Safari  9.1 OS X 10.11.4    Partial Partial Partial
Safari  9   iOS  9.3.1      Partial Partial Partial

Здесь есть и другие вещи. Я настоятельно рекомендую этот блог, на который я ссылался.

1

Источник Поделиться

user4015856 30 май '16 в 05:22 2016-05-30 05:22

2016-05-30 05:22

Даже после использования методов автозаполнения и идентификации, описанных выше, в верхней части моей страницы была метка со значением Credit / Debit / Gift Card это помешало iOS предложить опцию Scan CC. Я закончил тем, что добавил эту метку над полем с номером CC, чтобы обмануть iOS и предложить опцию Scan CC:

<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>

Непрозрачность 0 или размер шрифта 1pt не позволяет iOS предлагать эту опцию.

0

Источник Поделиться

user612547 28 сен '16 в 15:01 2016-09-28 15:01

2016-09-28 15:01

Это теперь все сломано после обновления до iOS 8.1.3 этим утром. Когда на iOS 8.1.2 все вышеперечисленное работало просто отлично - теперь опция клавиатуры для сканирования кредитной карты просто не появляется. Вот мой код, который вчера работал на iOS 8.1.2 и сегодня не работает на iOS 8.1.3:

<html>
<head>
<title>Scan credit card using iOS 8</title>
<style type="text/css">
  input {height:1.5em;width:95%}
  input[type="number"] {font-size: 2.5em}
  body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
  #purchase {font-size: 2em;font-weight: bold;height:1.2em}
</style>
</head>
<body>
<form action="https://yoursite.com/credit-card-purchase" method="POST">
Credit Card Number 1<br />
<input  type="number" autocomplete="cc-number" name="cardNumber" id="cardNumber" value="" placeholder="*** **** *** ****" />
<br />
Expiry month <br /> 
<input type="number"  name="expirationMonth" id="cardExpirationMonth" />
<br />
Expiry year <br />
<input type="number" name="expirationYear" id="cardExpirationYear" />
<br />
<br />
<input type="submit" value="Purchase" id="purchase">
</form>
</head>
</html>

0

Источник Поделиться

user2528675 20 фев '15 в 10:15 2015-02-20 10:15

2015-02-20 10:15

Я обнаружил, что что-то вроде этого работает, но я считаю это очень уродливым решением, так как оно зависит от фактического отображаемого текста между label теги:

<html>
  <head>
    <title>AutoFill test</title>
  </head>
  <body>
    <h1>AutoFill test</h1>
    <h2>revision 4</h2>

    <form action="#">
      <input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
      <input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
      <label>Expiration date</label>
      <input type="text" name="expirationMonth" id="id3" maxlength="2">
      <input type="text" name="expirationYear" id="id4" maxlength="2"><br>
      <input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
    </form>
  </body>
</html>

Я не совсем уверен, но я думаю, что name параметры не важны.

0

Источник Поделиться

user511878 02 ноя '14 в 15:09 2014-11-02 15:09

2014-11-02 15:09

Другие вопросы по тегам ios safari ios8 credit-card

[e-mail]
licensed under cc by-sa 3.0 with attribution

Answer 6

Дело не в том, когда, а в том, как мы можем включить эту функцию в браузере Safari.

Давайте просто поговорим о том, что происходит при отправке формы:

1. Некоторые браузеры хранят все input ценности с этим name приписывать. И он предложит автозаполнение этих полей, когда он сталкивается с тем же name d input элементы.

2. Некоторые браузеры сканируют только autocomplete атрибут для предложения автозаполнения и,

3. Некоторые другие сканируют такие атрибуты, как label или же name за input элементы тоже.

Сейчас, autocomplete атрибут может иметь больший набор значений, включая cc-name (Название карты), cc-number, cc-exp, cc-csc (Номер безопасности - CVV) и т. Д. (Полный список здесь)

Например, мы могли бы сказать браузеру, что это поле номера карты, и оно должно предлагать autocomplete когда это возможно, и это должно включить функцию сканирования кредитной карты как:

<label>Credit card number: 
  <input type=text autocomplete="cc-number">
</label>

В общем:

<input type="text" autocomplete="[section-](optional) [shipping|billing](optional) 
[home|work|mobile|fax|pager](optional) [autofill field name]">

более подробный пример:

<input type="text" name="foo" id="foo" autocomplete="section-red shipping mobile tel">

И каждое значение автозаполнения выглядит так:

section-red : wrapping as a section. (named red)
shipping : shopping/billing
mobile   : home|work|mobile|fax|pager (For telephone)
tel      : [Tokens][2]

Когда мы кодируем его так, как этот браузер, мы точно знаем, какое значение должно быть заполнено в этом поле.

Но браузер вроде сафари нужен name или же id или же label значения также должны быть установлены правильно.

Поддержка пока autocomplete, id а также name атрибуты для автозаполнения значений.

Browse  Ver OS              ID      Name    Autocomplete
Chrome  50  OS X 10.11.4    No      Yes     Yes
Opera   35  OS X 10.11.4    No      Yes     Yes
Firefox 46  OS X 10.11.4    Yes     Yes     No
Edge    25  Windows 10      No      Yes     No
Safari  9.1 OS X 10.11.4    Partial Partial Partial
Safari  9   iOS  9.3.1      Partial Partial Partial

Здесь есть и другие вещи. Я настоятельно рекомендую этот блог, на который я ссылался.

Answer 7

Даже после использования методов автозаполнения и идентификации, описанных выше, в верхней части моей страницы была метка со значением Credit / Debit / Gift Card это помешало iOS предложить опцию Scan CC. Я закончил тем, что добавил эту метку над полем с номером CC, чтобы обмануть iOS и предложить опцию Scan CC:

<label style="opacity:0.01;color:#FFF;font-size:2pt;">Card Number</label>

Непрозрачность 0 или размер шрифта 1pt не позволяет iOS предлагать эту опцию.

Answer 8

Это теперь все сломано после обновления до iOS 8.1.3 этим утром. Когда на iOS 8.1.2 все вышеперечисленное работало просто отлично - теперь опция клавиатуры для сканирования кредитной карты просто не появляется. Вот мой код, который вчера работал на iOS 8.1.2 и сегодня не работает на iOS 8.1.3:

<html>
<head>
<title>Scan credit card using iOS 8</title>
<style type="text/css">
  input {height:1.5em;width:95%}
  input[type="number"] {font-size: 2.5em}
  body {background-color:lightgray;font-size: 3em;font-family: sans-serif;}
  #purchase {font-size: 2em;font-weight: bold;height:1.2em}
</style>
</head>
<body>
<form action="https://yoursite.com/credit-card-purchase" method="POST">
Credit Card Number 1<br />
<input  type="number" autocomplete="cc-number" name="cardNumber" id="cardNumber" value="" placeholder="*** **** *** ****" />
<br />
Expiry month <br /> 
<input type="number"  name="expirationMonth" id="cardExpirationMonth" />
<br />
Expiry year <br />
<input type="number" name="expirationYear" id="cardExpirationYear" />
<br />
<br />
<input type="submit" value="Purchase" id="purchase">
</form>
</head>
</html>

Answer 9

Я обнаружил, что что-то вроде этого работает, но я считаю это очень уродливым решением, так как оно зависит от фактического отображаемого текста между label теги:

<html>
  <head>
    <title>AutoFill test</title>
  </head>
  <body>
    <h1>AutoFill test</h1>
    <h2>revision 4</h2>

    <form action="#">
      <input type="text" name="cardNumber" id="id1"> <label for="id1">Number</label><br>
      <input type="text" name="cardName" id="id2"> <label for="id2">Name on card</label><br>
      <label>Expiration date</label>
      <input type="text" name="expirationMonth" id="id3" maxlength="2">
      <input type="text" name="expirationYear" id="id4" maxlength="2"><br>
      <input type="text" name="csc" id="5"> <label for="id5">CSC</label><br>
    </form>
  </body>
</html>

Я не совсем уверен, но я думаю, что name параметры не важны.