Mystery behind scan a new card on Chrome Android

[karmakoder]

With chrome on Android, been trying to find a way to implement "scan a new card" pop-up that shows up on iOS devices when you focus on credit card field. Is there a special name tag that can be used to make this happen in Chrome on Android?
A working example of this is present on m.staples.com website on their checkout page.

Any help would be greatly appreciated.

[Anton Vayvod]

Out of top of my head I'd assume it's a feature of WKWebView / Safari on iOS which would mean it doesn't need to be implemented by Chrome to work on iOS. There might be no direct analogue implementation on Android.

Are you looking to implement it in Chrome on Android or for a way to have a better experience for your mobile website on Android?

If the latter, you could look at PaymentRequest API I guess: https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev+unsubscribe@chromium.org.

[Jason Liu]

+jdonnelly

[Justin Donnelly]

This feature does not currently exist in Chrome for iOS. We strongly encourage developers to annotate their forms with autocomplete attributes as described in this article. This will ensure that users can autofill the form with their existing data or save newly entered data. But scanning with the camera is only available on Android.

 

[karmakoder]

As much as I have read, the scan a new card option may not be possible on Chrome Browser running on an Android device. But then wondering how it staples has been able to make it work on their m.staples.com site. See attached. Scanning through their html, it doesnt feel like they are using any custom js library to achieve this either. But I could be wrong.
Thx for help though guys.

Cheers,
Vinil

On Friday, December 2, 2016 at 1:52:58 PM UTC-5, Justin Donnelly wrote:

This feature does not currently exist in Chrome for iOS. We strongly encourage developers to annotate their forms with autocomplete attributes as described in this article. This will ensure that users can autofill the form with their existing data or save newly entered data. But scanning with the camera is only available on Android.

 

On Fri, Dec 2, 2016 at 10:41 AM, Jason Liu <jaso...@chromium.org> wrote:

+jdonnelly

On Fri, Dec 2, 2016 at 10:38 AM, Anton Vayvod <ava...@chromium.org> wrote:

Out of top of my head I'd assume it's a feature of WKWebView / Safari on iOS which would mean it doesn't need to be implemented by Chrome to work on iOS. There might be no direct analogue implementation on Android.

Are you looking to implement it in Chrome on Android or for a way to have a better experience for your mobile website on Android?

If the latter, you could look at PaymentRequest API I guess: https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/

On Fri, Dec 2, 2016 at 1:24 PM, karmakoder <vinil.b...@gmail.com> wrote:

With chrome on Android, been trying to find a way to implement "scan a new card" pop-up that shows up on iOS devices when you focus on credit card field. Is there a special name tag that can be used to make this happen in Chrome on Android?
A working example of this is present on m.staples.com website on their checkout page.

Any help would be greatly appreciated.

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev

---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev...@chromium.org.

[Rouslan Solomakhin]

Chrome on Android has credit card scanner in both autofill and PaymentRequest. For autofill, Chrome must detect your input field to be credit card number for this option to show up. Try this form:

<form name="my-form-name" id="my-form-id" action="https://my-website.com/cc-submit" method="post">

  Credit card number: <input autofocus="" type="text" name="CCNo"><br>

  Name on card: <input type="text" name="name"><br>

  Expiry Date: <select name="CCExpiresMonth">

    <option value="01">01</option>

    <option value="02">02</option>

    <option value="03">03</option>

    <option value="04">04</option>

    <option value="05">05</option>

    <option value="06">06</option>

    <option value="07">07</option>

    <option value="08">08</option>

    <option value="09">09</option>

    <option value="10">10</option>

    <option value="11">11</option>

    <option value="12">12</option>

  </select>

  /

<select name="CCExpiresYear">

    <option value="2016">2016</option>

    <option value="2017">2017</option>

    <option value="2018">2018</option>

    <option value="2019">2019</option>

    <option value="2020">2020</option>

    <option value="2021">2021</option>

    <option value="2022">2022</option>

    <option value="2023">2023</option>

  </select>

  <br>

  CVC: <input name="cvc">

<br>

  <input type="reset" value="Reset">

  <input type="submit" value="Submit">

</form>

Be sure to host this form over HTTPS.

PaymentRequest credit card editor also has a scanner starting in Chrome 56. See example code here:  https://googlechrome.github.io/samples/paymentrequest/credit-cards/

[.]

Somehow I cannot reproduce the screenshot any more. Anyone can confirm? Thanks!

[Rouslan Solomakhin]

Not clear what you mean. Please elaborate.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/41a60841-2473-4e9d-908e-e2b0c6d897c6%40chromium.org.