web-dev-qa-db-ja.com

iOS8 Safariでクレジットカードのスキャンオプションを使用できるのはいつですか？

そのため、Safariはいくつかのクレジットカードフォームを使用してiOS8でスキャンクレジットカード機能を提供します。

私の質問は、Safariはこのオプションを提供するタイミングをどのように決定するのですか？

これまでのところ、このオプションはAmazonとPaypalで利用可能であることがわかりましたが、私のクレジットカード入力フォームはどれもこの動作を再現できませんでした。

Scan credit card option activation on a form

iossafariios8credit-card
47
Dávid Kaszás

IOS8ブラウザーとChromeエミュレーションを使用した少しの調査の後、私は部分的にそれを見つけました。いくつかの解決策を知っていますが、他の方法があるかどうかは確かではありません。これに関するドキュメントが驚くほど不足しているAppleに感謝する必要があります。

現在、Netflix/Amazonにはクレジットカードスキャンが正常に機能しています。そこで、ChromeブラウザーでiOS8ユーザーエージェントをエミュレートし、クレジットカード番号フィールドのマークアップを検査しました。Netflixは次のとおりです。

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

そして、ここにAmazonの：

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

その時点で、HTTPSを介して提供されるフォームをいじり、それを制御し、何が起こるかを確認するために属性を設定し始めました。以下では、「動作する」は「カードスキャンが正常にトリガーされた」ことを意味し、「動作しない」は「did notトリガーカードスキャン」を意味します。

  • name="addCreditCardNumber" =>動作
  • name="cardNumber" =>動作
  • name="cardnumber" =>動作
  • class="cardNumber" =>動作しません
  • type="cardNumber" =>動作しません
  • id="cardNumber"、id="creditCardNumber"、id="creditCardMonth"、id="creditCardYear" =>動作

name属性はフォームデータを駆動し、サーバー側のフォーム処理の動作に影響を与える可能性があるため、入力idをcardNumberに設定してクレジットカードスキャンをトリガーすることを強くお勧めします。

関連するドキュメントにリンクします...しかし、ちょっと！ noneがあります（少なくとも、私が知っていることではありません）

88
Arnaud Brousseau

入力に HTML5オートコンプリートタイプ を使用することをお勧めします。

クレジットカードに関連するタイプに固執すると、モバイルサファリや「クレジットカードのスキャン」機能など、最新のブラウザのほとんどがこれらのフィールドを自動的に認識します。ボーナスは、モバイルデバイスでも常に正しいキーボードを取得できることです。

例（注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 を作成しました。

22
Ryan McGeary

Arnaud Brousseau's 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。

15
jcaron

@barbazooのおかげで、有効な（自己署名ではない）証明書を使用してhttps経由で[クレジットカードのスキャン]オプションを利用できます。

10
Dávid Kaszás

有効期限フィールドについては、Arnaudの回答に基づいて、cardExpirationYearおよびcardExpirationMonth属性にあるidから有効期限フィールドが認識されることがわかりました。

これは、年と月が適切な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>

オプションタグで他の値が機能するかどうかはわかりません。

7
Eric

whenではなく、howでこの機能を有効にできますSafariブラウザー。

フォームが送信されたときに何が起こるかについて話しましょう：

  1. 一部のブラウザは、input属性を持つすべてのname値を保存します。そして、同じnamed input要素に出会ったとき、それらのフィールドをオートコンプリートすることを提案します。

  2. 一部のブラウザは、オートコンプリートを提供するためにautocomplete属性のみをスキャンし、

  3. 他のいくつかは、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]">

より詳細な例：

<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 私は紹介しました。

1
Asim K T

上記のオートコンプリートおよびIDメソッドを使用した後でも、ページの上部に値Credit / Debit / Gift Cardのラベルがあり、iOSでスキャンCCオプションを提供できませんでした。最終的に、このラベルをCC番号フィールドの上に追加して、iOSをスキャンしてCCのスキャンオプションを提供するようにしました。

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

不透明度0、またはフォントサイズ1ptの場合、iOSはオプションを提供できません。

0
Chewmieser

今朝、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>
0
user2528675

私はこのようなものが機能することを発見しましたが、labelタグ間の実際の表示テキストに依存するため、これは非常にveryい解決策であると考えています。

<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パラメーターは重要ではないと思います。

0
gklka