web-dev-qa-db-fra.com

Quand l'option Scanner la carte de crédit est-elle disponible sur iOS8 Safari?

Safari propose donc Scanner la carte de crédit sur iOS8 avec certains formulaires de carte de crédit.

Ma question est, comment Safari détermine-t-il quand offrir cette option?

Jusqu'à présent, j'ai trouvé que cette option est disponible sur Amazon et Paypal, mais aucun de mes formulaires de saisie de carte de crédit n'a pu reproduire ce comportement.

Scan credit card option activation on a form

iossafariios8credit-card
47
Dávid Kaszás

Après un peu de recherche avec un navigateur iOS8 et une émulation Chrome je l'ai compris partiellement. Je connais certaines solutions, mais je ne sais pas avec certitude s'il existe d'autres façons de le faire. Vous devrez remercier Apple pour le manque incroyable de documentation à ce sujet.

Actuellement, Netflix/Amazon a un scan de carte de crédit qui fonctionne correctement. J'ai donc émulé un agent utilisateur iOS8 dans mon Chrome et inspecté le balisage de leur champ de numéro de carte de crédit. Voici Netflix:

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

Et voici Amazon:

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

À ce stade, j'ai joué avec un formulaire servi sur HTTPS sur lequel j'avais le contrôle et j'ai commencé à définir des attributs pour voir ce qui allait se passer. Ci-dessous, "fonctionne" signifie "analyse de carte déclenchée avec succès" et "ne fonctionne pas" signifie "n'a pas pas déclenché l'analyse de carte":

  • name="addCreditCardNumber" => fonctionne
  • name="cardNumber" => fonctionne
  • name="cardnumber" => fonctionne
  • class="cardNumber" => ne fonctionne pas
  • type="cardNumber" => ne fonctionne pas
  • id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear" => fonctionne

Étant donné que l'attribut name génère les données de formulaire et peut avoir un impact sur le fonctionnement du traitement de formulaire côté serveur, je recommande fortement de déclencher l'analyse des cartes de crédit en définissant votre entrée id sur cardNumber.

Je voudrais lier à la documentation pertinente ... mais bon! Il y a aucun (au moins, pas que je sache)

88
Arnaud Brousseau

Je pense que votre meilleur pari est d'utiliser Types de saisie semi-automatique HTML5 sur vos entrées.

Restez fidèle aux types de cartes de crédit, et la plupart des navigateurs modernes reconnaîtront automatiquement ces champs pour vous, y compris Mobile Safari et la fonction "Scanner la carte de crédit". Le bonus est que vous obtiendrez toujours le bon clavier sur les appareils mobiles.

Exemple (notez autocomplete, x-autocompletetype et pattern attributs):

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

J'ai également écrit un article de blog connexe sur ce sujet et créé un Cheatsheet HTML5 Autocomplete .

22
Ryan McGeary

En plus de réponse d'Arnaud Broussea , une recherche de "numéro de carte" dans les fichiers du simulateur iOS donne ce fichier:

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

Une course rapide de strings dessus révèle ces chaînes qui sont certainement utilisées pour faire correspondre les champs potentiels:

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

et un peu plus loin:

month
date m
date mo
year
date y
date yr

Je ne vois pas très bien (avec cette approche naïve) les références aux attributs (id, name, placeholder...) ou autres métadonnées (étiquette peut-être?) effectivement comparé à cette liste. De plus, à l'exception du "nom des karteninhabers", c'est vraiment très orienté anglais, ce qui est assez inhabituel pour Apple IMHO.

15
jcaron

Grâce à @barbazoo, l'option Scanner la carte de crédit sera disponible sur https avec un certificat valide (non auto-signé).

10
Dávid Kaszás

Pour les champs d'expiration, basé sur la réponse d'Arnaud, j'ai trouvé que les champs d'expiration seraient reconnus par cardExpirationYear et cardExpirationMonth étant dans l'attribut id.

Cela a fonctionné lorsque l'année et le mois sont des entrées de texte normales avec les ID appropriés. Le mois est composé d'un nombre à 2 chiffres et l'année d'un nombre à 4 chiffres.

Lors d'un test rapide à l'aide de balises <select>, j'ai constaté qu'il remplissait également le mois et l'année corrects.

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

Je ne sais pas quelles autres valeurs fonctionneront dans les balises d'option.

7
Eric

Il ne s'agit pas de quand , il s'agit de comment nous pouvons activer cette fonctionnalité dans Navigateur Safari.

Parlons simplement de ce qui se passe lorsqu'un formulaire est soumis:

  1. Certains navigateurs stockent toutes les valeurs input avec son attribut name. Et il vous proposera de remplir automatiquement ces champs lorsqu'il rencontrera les mêmes éléments named input.

  2. Certains navigateurs recherchent uniquement l'attribut autocomplete pour proposer la saisie semi-automatique et,

  3. Certains autres recherchent également un attribut comme label ou name pour input éléments.

Désormais, l'attribut autocomplete peut avoir un plus grand ensemble de valeurs, notamment cc-name (Nom de la carte), cc-number, cc-exp, cc-csc (Numéro de sécurité - CVV) etc. (liste complète ici )

Par exemple, nous pourrions dire à un navigateur que c'est le champ du numéro de carte et qu'il devrait offrir autocomplete lorsque cela est possible et qu'il devrait activer la fonction de numérisation de carte de crédit comme:

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

En général:

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

ex plus détaillé:

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

Et chaque valeur de saisie semi-automatique va comme ceci:

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

Lorsque nous le codons comme ce navigateur, nous savons exactement quel type de valeur doit être renseigné dans ce champ.

Mais un navigateur comme un safari a besoin de name ou id ou label les valeurs doivent également être définies correctement.

Jusqu'à présent, prise en charge des attributs autocomplete, id et name pour les valeurs de saisie semi-automatique.

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

Il y a plus de choses en jeu ici. Je recommande fortement ceci blog J'ai fait référence.

1
Asim K T

Même après avoir utilisé les méthodes de saisie semi-automatique et d'identification décrites ci-dessus, j'avais une étiquette en haut de ma page avec la valeur Credit / Debit / Gift Card qui a empêché iOS de proposer l'option Scan CC. J'ai fini par ajouter cette étiquette au-dessus de mon champ de numéro CC pour inciter iOS à offrir l'option Scan CC:

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

Une opacité de 0 ou une taille de police de 1 pt empêche iOS d'offrir cette option.

0
Chewmieser

Tout est maintenant cassé après la mise à niveau vers iOS 8.1.3 ce matin. Lorsque sur iOS 8.1.2, tout ce qui précède fonctionnait très bien - maintenant, l'option clavier pour numériser la carte de crédit n'apparaît tout simplement pas. Voici mon code, qui a fonctionné hier sur iOS 8.1.2 et ne fonctionne pas aujourd'hui sur 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

J'ai trouvé que quelque chose comme ça fonctionne, mais je considère cela comme une solution très moche, car cela dépend du texte réellement affiché entre les balises 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>

Je ne suis pas tout à fait sûr, mais je pense que les paramètres name ne sont pas importants.

0
gklka