it-swarm.com.de

Wann ist die Option "Kreditkarte scannen" auf iOS8 Safari verfügbar?

Daher bietet Safari für einige Kreditkartenformulare Scan Credit Card unter iOS8 an.

Meine Frage ist, wie bestimmt Safari, wann diese Option angeboten wird?

Bisher stellte ich fest, dass diese Option bei Amazon und Paypal verfügbar ist, aber keines meiner Kreditkarten-Eingabeformulare konnte dieses Verhalten reproduzieren.

Scan credit card option activation on a form

47
Dávid Kaszás

Nach ein wenig Recherche mit einem iOS8-Browser und der Chrome -Emulation habe ich es teilweise herausgefunden. Ich kenne einige Lösungen, weiß aber nicht genau, ob es noch andere Möglichkeiten gibt. Sie müssen sich bei Apple für den erstaunlichen Mangel an Dokumentation dafür bedanken.

Derzeit funktioniert das Scannen von Kreditkarten bei Netflix/Amazon einwandfrei. Daher habe ich einen iOS8-Benutzeragenten in meinem Browser Chrome emuliert und das Markup des Felds für die Kreditkartennummer überprüft. Hier ist Netflix:

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

Und hier ist Amazon:

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

Zu diesem Zeitpunkt spielte ich mit einem Formular, das über HTTPS bereitgestellt wurde, über das ich die Kontrolle hatte, und begann, Attribute festzulegen, um zu sehen, was passieren würde. Im Folgenden bedeutet "funktioniert" "erfolgreich ausgelöster Kartenscan" und "funktioniert nicht" bedeutet "hat nicht Kartenscan auslösen":

  • name="addCreditCardNumber" => Funktioniert
  • name="cardNumber" => Funktioniert
  • name="cardnumber" => Funktioniert
  • class="cardNumber" => Funktioniert nicht
  • type="cardNumber" => Funktioniert nicht
  • id="cardNumber", id="creditCardNumber", id="creditCardMonth", id="creditCardYear" => Funktioniert

Da das Attribut name Formulardaten festlegt und sich auf die Funktionsweise der serverseitigen Formularverarbeitung auswirken kann, empfehle ich dringend, den Kreditkarten-Scan auszulösen, indem Sie Ihre Eingabe id auf cardNumber setzen.

Ich würde auf die entsprechende Dokumentation verlinken ... aber hey! Es gibt keine (zumindest nicht das ich wüsste)

88

Ich denke, Ihre bessere Wette ist, HTML5 Autocomplete Types für Ihre Eingaben zu verwenden.

Halten Sie sich an die kreditkartenbezogenen Typen, und die meisten modernen Browser erkennen diese Felder automatisch für Sie, einschließlich Mobile Safari und der Funktion "Kreditkarte scannen". Der Vorteil ist, dass Sie auch auf mobilen Geräten immer die richtige Tastatur erhalten.

Beispiel (Anmerkung autocomplete, x-autocompletetype und pattern Attribute):

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

Ich habe auch einen verwandten Blog-Beitrag zu diesem Thema geschrieben und ein HTML5 Autocomplete Cheatsheet erstellt.

22
Ryan McGeary

Zusätzlich zu Arnaud Brousseaus Antwort ergibt eine Suche nach "Kartennummer" in den iOS-Simulatordateien diese Datei:

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

Ein kurzer Durchlauf von strings deckt diese Zeichenfolgen auf, die sicherlich zum Abgleichen potenzieller Felder verwendet werden:

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

und noch ein bisschen weiter:

month
date m
date mo
year
date y
date yr

Kann (bei diesem naiven Ansatz) keine Verweise auf Attribute (id, name, placeholder...) oder andere Metadaten (Label vielleicht?) Erkennen tatsächlich mit dieser Liste verglichen. Auch mit Ausnahme von "name des karteninhabers" ist dies wirklich sehr englisch-orientiert, was für Apple IMHO ziemlich ungewöhnlich ist.

15
jcaron

Dank @barbazoo ist die Option "Kreditkarte scannen" über https mit einem gültigen (nicht selbst signierten) Zertifikat verfügbar.

10
Dávid Kaszás

Bei den Ablauffeldern stellte ich basierend auf der Antwort von Arnaud fest, dass die Ablauffelder daran erkannt werden, dass sich cardExpirationYear und cardExpirationMonth im Attribut id befinden.

Dies funktionierte, wenn Jahr und Monat reguläre Texteingaben mit den entsprechenden IDs sind. Der Monat wird als zweistellige Zahl und das Jahr als vierstellige Zahl angegeben.

In einem kurzen Test mit <select> -Tags stellte ich fest, dass auch der richtige Monat und das richtige Jahr angegeben wurden.

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

Ich weiß nicht, welche anderen Werte in den Options-Tags funktionieren.

7
Eric

Es geht nicht um wann , es geht um wie wir diese Funktion aktivieren können Safari-Browser.

Sprechen wir einfach darüber, was passiert, wenn ein Formular gesendet wird:

  1. Einige Browser speichern alle input Werte mit dem name Attribut. Und es wird angeboten, diese Felder automatisch zu vervollständigen, wenn es auf dieselben named input -Elemente stößt.

  2. Einige Browser suchen nur nach autocomplete Attributen, um die automatische Vervollständigung zu ermöglichen.

  3. Einige andere suchen auch nach einem Attribut wie label oder name für input Elemente.

Jetzt kann das autocomplete-Attribut eine größere Menge von Werten enthalten, einschließlich cc-name (Kartenname), cc-number, cc-exp, cc-csc (Valorennummer - CVV) usw. (vollständige Liste hier )

Zum Beispiel könnten wir einem Browser sagen, dass dies ein Kartennummernfeld ist und es autocomplete bieten sollte, wenn dies möglich ist, und es sollte die Funktion zum Scannen von Kreditkarten aktivieren als:

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

Allgemein:

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

detaillierter ex:

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

Und jeder Autocomplete-Wert sieht folgendermaßen aus:

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

Wenn wir es wie diesen Browser codieren, wissen Sie genau, welche Art von Wert in diesem Feld eingetragen werden soll.

Aber Browser wie Safari brauchen name oder id oder label Werte sollten auch richtig gesetzt werden.

Bisherige Unterstützung für die Attribute autocomplete, id und name zur automatischen Vervollständigung von Werten.

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

Hier spielen sich noch mehr Dinge ab. Ich kann es nur empfehlen Blog Ich habe verwiesen.

1
Asim K T

Selbst nach der Verwendung der oben beschriebenen Autocomplete- und ID-Methoden hatte ich oben auf meiner Seite eine Beschriftung mit dem Wert Credit / Debit / Gift Card das iOS daran gehindert hat, die Scan CC-Option anzubieten. Schließlich habe ich dieses Label über meinem CC-Nummernfeld hinzugefügt, um iOS dazu zu bringen, die Option "CC scannen" anzubieten:

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

Eine Deckkraft von 0 oder eine Schriftgröße von 1 Punkt verhindert, dass iOS diese Option anbietet.

0
Chewmieser

Dies ist nach dem Upgrade auf iOS 8.1.3 heute Morgen nun alles kaputt. Unter iOS 8.1.2 funktionierten alle oben genannten Funktionen einwandfrei. Jetzt wird die Tastaturoption zum Scannen der Kreditkarte einfach nicht mehr angezeigt. Hier ist mein Code, der gestern unter iOS 8.1.2 und heute unter iOS 8.1.3 nicht funktioniert:

<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

Ich habe festgestellt, dass so etwas funktioniert, halte dies jedoch für eine sehr hässliche Lösung, da es vom tatsächlich angezeigten Text zwischen den Tags label abhängt:

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

Ich bin nicht ganz sicher, aber ich denke, dass name -Parameter nicht wichtig sind.

0
gklka