PaymentRequest.canMakePayment

The PaymentRequest.canMakePayment() method of the PaymentRequest interface indicates whether the PaymentRequest object can make a payment before calling show(). It returns a Promise resolves to true if the user agent supports any of the payment methods supplied to the constructor, and false otherwise. if this method is called too often, the spec allows the user agents to return a promise rejected with a DOMException.

Syntax

PaymentRequest.canMakePayment()
    .then( boolean => { ... })
    .catch( error => { ... })

Returns

A Promise to a Boolean that resolves to true if the user agent supports any of the payment methods supplied in the PaymentRequest constructor.

Parameters

None

Examples

In the following example, is excerpted from a demo that asynchronously builds a PaymentRequest object for both Android Pay and credit cards. It wraps the call to canMakePayment() in feature detection, and calls an appropriate callback depending on the resolution of the Promise.

  
async function initPaymentRquest() {
  const details = {
    total: {
      label: "Total",
      amount: {
        currency: "USD",
        value: "0.00",
      },
    },
  };

  const supportsApplePay = new PaymentRequest(
    { supportedMethods: "https://apple.com/apple-pay" },
    details
  ).canMakePayment();

  // Supports Apple Pay?
  if (await supportsApplePay) {
    // show Apple Pay logo, for instance
    return;
  }

  // Otherwise... let's see if we can use basic card
  const supportsBasicCard = await new PaymentRequest(
    [{ supportedMethods: "basic-card" }],
    details
  ).canMakePayment();

  if (supportsBasicCard) {
    // show basic card support
    return;
  }

  // Otherwise, make payments using HTML form element
}

Specifications

Browser CompatibilityUpdate compatibility data on GitHub

See Also

• PaymentRequest.show()