v149 · Web APIs · Payments

Live Checkout Flow

A realistic checkout page backed by a same-origin payment handler. Each scenario calls PaymentRequest.show() and branches on the actual DOMException.name returned by the browser.

Payment handler setup

Install the handler before pressing Pay. The payment request itself must be triggered by the Pay button.
Merchant Checkout Page
Developer Reference Book$39.99
Chrome 149 Sticker Pack$4.99
Shipping$3.50
Total$48.48
Payment handler response to request:
Merchant Page Response
Pick a scenario and click Pay to see the error-handling logic.
Payment Successful
Order confirmed. Sending confirmation email…
Returned to Cart
No problem — your cart is still waiting. Continue shopping or try a different payment method.
Payment Handler Error
The payment handler reported an internal error. Trying fallback payment method…
Run a payment attempt to inspect raw err.message and parsed payload.
// Waiting for payment attempt…

the branching logic

try {
  const response = await request.show();
  await response.complete('success');
  // → payment succeeded

} catch (err) {
  if (err.name === 'AbortError') {
    // User deliberately cancelled — don't retry, respect their choice
    showReturnToCartMessage();

  } else if (err.name === 'OperationError') {
    // Internal payment handler failure — NOT user intent
    // Chrome 149: handler can now throw this explicitly
    logError(err.message);
    tryFallbackPaymentMethod();  // retry with different method

  } else {
    // Unexpected error — surface generically
    showGenericError();
  }
}

see also