ios safari ios8 credit-card

¿Cuándo está disponible la opción Escanear Tarjeta de Crédito en iOS8 Safari?



credit-card (9)

Por lo tanto, Safari ofrece la función Escanear tarjeta de crédito en iOS8 con algunos formularios de tarjeta de crédito.

Mi pregunta es, ¿cómo determina Safari cuándo ofrecer esta opción?

Hasta el momento, descubrí que esta opción está disponible en Amazon y PayPal, pero ninguno de mis formularios de entrada de tarjeta de crédito pudo reproducir este comportamiento.

Creo que tu mejor opción es utilizar HTML5 Autocompletar Tipos en tus entradas.

Siga los tipos relacionados con la tarjeta de crédito, y la mayoría de los navegadores modernos reconocerán automáticamente estos campos, incluyendo Mobile Safari y la función "Escanear tarjeta de crédito". La ventaja es que siempre obtendrás el teclado correcto en dispositivos móviles también.

Ejemplo (observe autocomplete , x-autocompletetype y atributos de 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">

También escribí una publicación de blog relacionada sobre este tema y construí un Cheatsheet HTML5 Autocompletar .

Además de la respuesta de Arnaud Brousseau , una búsqueda de "número de tarjeta" en los archivos del simulador de iOS produce este archivo:

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

Una ejecución rápida de strings de texto revela estas cadenas que sin duda se utilizan para hacer coincidir campos potenciales:

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

y un poco más:

month date m date mo year date y date yr

No se puede ver (con este enfoque ingenuo) ninguna referencia a qué atributos ( id , name , placeholder ...) u otros metadatos (¿etiqueta quizás?) Se comparan realmente con esta lista. Además, con la excepción de "name des karteninhabers", esto es realmente muy orientado al inglés, eso es bastante inusual para Apple en mi humilde opinión.

Descubrí que algo así funciona, pero considero que esta es una solución muy fea, ya que depende del texto que se muestra entre las label etiquetas:

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

No estoy del todo seguro, pero creo que los parámetros del name no son importantes.

Después de investigar un poco con un navegador iOS8 y emulación de Chrome, lo descubrí parcialmente. Conozco algunas soluciones, pero no estoy seguro de si hay otras formas de hacerlo. Deberás agradecer a Apple por la sorprendente falta de documentación sobre esto.

Actualmente, Netflix / Amazon tiene un escaneo de tarjeta de crédito funcionando correctamente. Así que emulé un agente de usuario iOS8 en mi navegador Chrome e inspeccionó el marcado de su campo de número de tarjeta de crédito. Aquí está Netflix:

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

Y aquí está Amazon''s:

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

En ese momento jugué con un formulario servido sobre HTTPS sobre el que tenía control y comencé a establecer atributos para ver qué pasaría. A continuación, "funciona" significa "exploración de tarjeta activada con éxito" y "no funciona" significa "no activó la exploración de tarjeta":

  • name="addCreditCardNumber" => funciona
  • name="cardNumber" => funciona
  • name="cardnumber" => funciona
  • class="cardNumber" => no funciona
  • type="cardNumber" => no funciona
  • id="cardNumber" , id="creditCardNumber" , id="creditCardMonth" , id="creditCardYear" => funciona

Dado que el atributo de name maneja los datos y podría afectar la forma en que funciona el procesamiento de formularios del lado del servidor, recomiendo activar el escaneo de la tarjeta de crédito configurando su id entrada en cardNumber .

Me gustaría vincular a la documentación pertinente ... pero ¡oye! No hay ninguno (al menos, no que yo sepa)

Esto ahora está roto después de actualizar a iOS 8.1.3 esta mañana. Cuando en iOS 8.1.2 todo lo anterior funcionó bien, ahora la opción del teclado para escanear la tarjeta de crédito simplemente no aparece. Aquí está mi código, que funcionó ayer en iOS 8.1.2 y no funciona hoy en 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>

Gracias a @barbazoo, la opción Escanear Tarjeta de Crédito estará disponible en https con un certificado válido (no autofirmado).

Incluso después de utilizar los métodos de autocompletado e identificación descritos anteriormente, tenía una etiqueta en la parte superior de mi página con el valor de Credit / Debit / Gift Card que impedía que iOS ofreciera la opción de escaneo CC. Terminé agregando esta etiqueta encima de mi campo de número CC para engañar a iOS y ofrecerle la opción Scan CC:

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

La opacidad de 0 o un tamaño de fuente de 1pt evita que iOS ofrezca la opción.

No se trata de cuándo , se trata de cómo podemos habilitar esta función en el navegador Safari.

Vamos a hablar sobre lo que sucede cuando se envía un formulario:

  1. Algunos navegadores almacenan todos input valores de input con su atributo de name . Y ofrecerá autocompletar esos campos cuando encuentre los mismos elementos de input name d.

  2. Algunos navegadores buscan solo el atributo autocomplete para ofrecer la finalización automática y,

  3. Algunos otros buscan un atributo como label o name para input elementos de input también.

Ahora, el atributo de autocomplete puede tener un conjunto más grande de valores, incluidos cc-name ( cc-name tarjeta), cc-number , cc-exp , cc-csc (número de seguridad - CVV), etc. (lista completa aquí )

Por ejemplo, podríamos decir a un navegador que, este es el campo de número de tarjeta y debería ofrecer autocomplete cuando sea posible y debería habilitar la función de escanear la tarjeta de crédito como:

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

En general:

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

más detallada ex:

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

Y cada valor de autocompletar es así:

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

Cuando lo codificamos como este navegador, sabemos exactamente qué tipo de valor debe ser poblado en ese campo.

Pero el nombre del navegador como Safari Need o los valores de id o label también deberían configurarse correctamente.

Soporte hasta ahora para los atributos de autocomplete , id y name para los valores de autocompletado.

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

Hay más cosas en juego aquí. Recomiendo encarecidamente este blog al que me referí.

Para los campos de caducidad, según la respuesta de Arnaud, encontré que los campos de caducidad se reconocerían desde cardExpirationYear y cardExpirationMonth en el atributo id .

Esto funcionó cuando el año y el mes son entradas de texto regulares con los ID apropiados. El mes se completa con un número de 2 dígitos y el año con un número de 4 dígitos.

En una prueba rápida con las etiquetas <select>, descubrí que también rellenaba el mes y el año correctos.

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

No sé qué otros valores funcionarán en las etiquetas de opciones.