Подтвердить что ты не робот

Когда опция Scan Credit Card доступна на Safari iOS8?

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

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

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

Scan credit card option activation on a form

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

А вот Amazon's:

<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" = > works

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

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

Ответ 2

Я думаю, что ваша лучшая ставка заключается в том, чтобы использовать типы автозаполнения HTML5 на ваших входах.

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

Пример (обратите внимание 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.

Ответ 3

В дополнение к Arnaud Brousseau answer поиск "номера карты" в файлах симулятора 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.

Ответ 4

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

Ответ 5

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

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

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

<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>

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

Ответ 6

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

Позвольте просто поговорить о том, что произойдет, когда будет отправлена ​​форма:

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

  • Некоторые браузеры сканируют только для атрибута autocomplete для автоматического автозавершения и

  • Некоторые другие сканируют атрибуты типа 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]">

более подробно ex:

<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

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

Ответ 7

Я обнаружил, что что-то вроде этого работает, но я считаю это очень уродливым решением, поскольку оно зависит от фактического отображаемого текста между тегами 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 не важны.

Ответ 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>

Ответ 9

Даже после использования методов автозаполнения и идентификатора, описанных выше, у меня была метка в верхней части моей страницы со значением 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 предлагать эту опцию.