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.
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:
Y aquí está Amazon’s:
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)
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
):
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.
Gracias a @barbazoo, la opción Escanear Tarjeta de Crédito estará disponible en https con un certificado válido (no autofirmado).
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 tags
No sé qué otros valores funcionarán en las tags de opciones.
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:
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.
Algunos navegadores buscan solo el atributo autocomplete
para ofrecer la finalización automática y,
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:
En general:
más detallada ex:
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 se debe llenar en ese campo.
Pero el nombre del navegador como Safari Need o los valores de id
o label
también deberían configurarse correctamente.
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í.
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
tags:
AutoFill test AutoFill test
revision 4
No estoy del todo seguro, pero creo que los parámetros del name
no son importantes.
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:
Scan credit card using iOS 8
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:
La opacidad de 0 o un tamaño de fuente de 1pt evita que iOS ofrezca la opción.