PaymentResponse: retry() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The PaymentResponse interface's retry() method makes it possible to ask the user to retry a payment after an error occurs during processing.

This lets your app gracefully deal with situations such as invalid shipping addresses or declined credit cards.

Syntax

js
retry(errorFields)

Parameters

errorFields

An object, with the following properties:

error Optional

A general description of a payment error from which the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment information. error can be provided all by itself to provide only a generic error message, or in concert with the other properties to serve as an overview while other properties' values guide the user to errors in specific fields in the payment form.

paymentMethod Optional

Any payment-method-specific errors which may have occurred. This object's contents will vary depending on the payment method used.

Return value

A Promise which is resolved when the payment is successfully completed. The promise is rejected with an appropriate exception value if the payment fails again.

Typically you will use this by calling show(), then entering a loop or recursive function that checks the PaymentResponse for errors or other reasons to retry the payment request. If a retry is needed, the loop calls retry(), then loops back to check the response when it comes in. The loop exits only when the user either cancels the payment request or the request is successful.

See the example below for a thorough example, but the basic concept, in outline form, is:

  1. Create a new PaymentRequest (new PaymentRequest())

  2. Display the payment request (PaymentRequest.show()

  3. If show() resolves, the returned PaymentResponse describes the requested payment and the options chosen by the user. Continue with the following steps:

    1. Validate the returned response; if there are any fields whose values are not acceptable, call the response's complete() method with a value of "fail" to indicate failure.
    2. If the response's data is valid and acceptable, call complete("success") to finalize the payment and process it.
  4. If show() is rejected, the payment request failed, usually because either there's already one being processed, because the user agent doesn't support any of the specified payment methods, or because of a security issue. See the list of exceptions for show() for further details. Call complete("fail") to close the payment request.

js
async function handlePayment() {
  const payRequest = new PaymentRequest(methodData, details, options);

  try {
    let payResponse = await payRequest.show();

    while (validate(payResponse)) {
      /* let the user edit the payment information,
         wait until they submit */
      await response.retry();
    }
    await payResponse.complete("success");
  } catch (err) {
    /* handle the exception */
  }
}

Examples

js
async function doPaymentRequest() {
  const request = new PaymentRequest(methodData, details, options);
  const response = await request.show();
  await recursiveValidate(request, response);
  await response.complete("success");
}

// Keep validating until the data looks good!
async function recursiveValidate(request, response) {
  const promisesToFixThings = [];
  const errors = await validate(request, response);
  if (!errors) {
    return;
  }
  if (errors.shippingAddress) {
    // "shippingaddresschange" fired at request object
    const promise = fixField(
      request,
      "shippingaddresschange",
      shippingValidator,
    );
    promisesToFixThings.push(promise);
  }
  if (errors.payer) {
    // "payerdetailchange" fired at response object
    const promise = fixField(response, "payerdetailchange", payerValidator);
    promisesToFixThings.push(promise);
  }
  await Promise.all([response.retry(errors), ...promisesToFixThings]);
  await recursiveValidate(request, response);
}

function fixField(requestOrResponse, event, validator) {
  return new Promise((resolve) => {
    // Browser keeps calling this until promise resolves.
    requestOrResponse.addEventListener(event, async function listener(ev) {
      const promiseToValidate = validator(requestOrResponse);
      ev.updateWith(promiseToValidate);
      const errors = await promiseToValidate;
      if (!errors) {
        // yay! fixed!
        event.removeEventListener(event, listener);
        resolve();
      }
    });
  });
}

doPaymentRequest();

Specifications

Specification
Payment Request API
# dom-paymentresponse-retry

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
retry
Chrome – Full support
Chrome 78 (Release date: 2019-10-22)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – No support
Firefox 55 (Release date: 2017-08-08)
disabled
disabled From version 55 users must explicitly set the dom.payments.request.enabled preference to true. To change preferences in Firefox, visit about:config.
disabled From version 55 users must explicitly set the dom.payments.request.supportedRegions preference to A comma-delimited list of one or more 2-character ISO country codes indicating the countries in which to support payments (for example, US,CA).. To change preferences in Firefox, visit about:config.
Opera – Full support
Opera 47 (Release date: 2017-08-09)
footnote Full support
Safari – Full support
Safari 12.1 (Release date: 2019-03-25)
footnote Full support
Chrome Android – Full support
Chrome Android 78 (Release date: 2019-10-22)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 43 (Release date: 2017-09-27)
footnote Full support
Safari on iOS – Full support
Safari on iOS 11.3 (Release date: 2018-03-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 10 (Release date: 2019-08-22)
footnote Full support
WebView Android – Full support
WebView Android 136 (Release date: 2025-04-29)
footnote Full support
WebView on iOS – Full support
WebView on iOS 11.3 (Release date: 2018-03-29)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

See also