Skip to content

Instantly share code, notes, and snippets.

@rsolomakhin
Last active July 19, 2022 03:25
Show Gist options
  • Save rsolomakhin/d6d242cbb9306864ada5a29de7ab271e to your computer and use it in GitHub Desktop.
Save rsolomakhin/d6d242cbb9306864ada5a29de7ab271e to your computer and use it in GitHub Desktop.
More restrictive hasEnrolledInstrument() for autofill data

More restrictive hasEnrolledInstrument() for autofill data

Motivation

The implementation of hasEnrolledInstrument() in Chrome 78 and earlier is relaxed in terms of checking for autofill data completeness and validity. For example, if a user's only autofill data is a credit card that has a number and a name on card, then hasEnrolledInstrument() will return true for basic-card, even if the merchant specifies requestShipping: true and requestPayerEmail: true. This results in poor user experience, which may deter merchant adoption.

Goal

The goal of the project is to reduce the usage of the unhappy path for autofill data, so that users see the happy path more often. A happy path shold require only a couple of clicks to authorize a transaction.

const pr = new PaymentRequest(
    [{supportedMethods: 'basic-card'}],
    details,
    {
      requestShipping: true,
      requestPayerEmail: true,
      requestPayerPhone: true,
      requestPayerName: true
    });
// Chrome 78 and earlier requires only a card number and name on
// card for `hasEnrolledInstrument` to be true.
// Chrome 79+ will require that billing address, expiration data,
// shipping address, and contact information must all be valid
// for `hasEnrolledInstrument` to be true.
const hasEnrolledInstrument = await pr.hasEnrolledInstrument();

3rd Party Payment Handlers

This project does not affect 3rd party payment handlers, including those that provide basic-card instruments.

show() Method

Because many websites call directly into pr.show() instead of checking pr.canMakePayment() or pr.hasEnrolledInstrument(), the next phase of the project should be rejecting show() with NotSupportedError for the cases where only autofill instruments are available, but the data is incomplete and invalid (i.e., pr.hasEnrolledInstrument() returns true).

Payment Request Specification

The Payment Request specification is not affected by this project. This project is an implementation detail that is, nevertheless, important for web developers to keep in mind when using Payment Request in Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment