💰 Payment Handler API

Back

What is the Payment Handler API?

The Payment Handler API (part of the Payment Request API) allows web applications to act as payment providers. It enables a streamlined checkout experience by using a standard browser UI for payment rather than custom forms.

Note: The Payment Request API requires HTTPS and a registered payment method. In this demo, we'll use the basic-card method (deprecated in some browsers) or demonstrate the API flow with proper error handling.

🛒 Mini Shop Demo

☕

Coffee

$4.99
🍕

Pizza

$12.99
📚

DevTools Book

$29.99
🎧

Headphones

$79.99

🛒 Shopping Cart

Cart is empty

Event Log

🔧 DevTools: Inspecting Payment Handler

  1. Open DevTools → Application panel
  2. Expand Background services → click Payment Handler
  3. Click the record button (⏺) to start recording payment events
  4. Click "Pay Now" and interact with the browser's payment UI
  5. Watch for payment lifecycle events: request, show, response, complete
  6. Even cancelled payments generate events you can observe!

📝 Practice Exercise

  1. Start recording in the Payment Handler panel
  2. Add items to cart and attempt a payment — observe the payment UI
  3. Click "Check API Support" to verify which payment methods are available
  4. Try cancelling the payment — what events appear?
  5. Look at the Console for detailed payment request/response logs