Chrome Extension

Overview

How it works

1. Claude calls pay_checkout via MCP
2. MCP server creates a virtual card and gets credentials
3. Card details go directly to the extension via WebSocket (LLM never sees the card number)
4. Extension fills every field across all frames (including Stripe iframes)
5. User reviews and clicks Submit

MCP tools

detect_checkout

detect_checkout → { detected: true, fields: { number, cvv, expiry, name } }

pay_checkout

pay_checkout(amount=29.00, currency="usd", context="Vercel Pro")
→ "Card ••••7291 filled into 4 fields. Tell user to review and submit."

fill_card

fill_card(card_id="...") → "Card ••••7291 filled into 4 fields."

Stripe iframe support

• all_frames: true in manifest — content script runs inside Stripe iframes
• chrome.scripting.executeScript with allFrames: true for cross-origin injection
• Per-character keyboard event dispatching (keydown/keypress/keyup) for Stripe’s change detection

Security

• LLM never sees the card — details flow MCP server → WebSocket → extension → form
• Single-use cards — locked to funded amount, auto-close after use
• Submit button left for human — the agent fills, you confirm

Install

1. Download from GitHub
2. Go to chrome://extensions/ → Enable Developer mode → Load unpacked
3. The extension auto-connects to the MCP server when it’s running

Architecture

Claude Code
  ↓ (MCP call: pay_checkout)
MCP Server (agentpay-mcp-server)
  ↓ (creates card via API, gets PAN/CVV)
  ↓ (sends card details via WebSocket on localhost:19821)
Chrome Extension (background.js)
  ↓ (chrome.scripting.executeScript, allFrames: true)
Checkout Form (including Stripe iframes)
  ↓ (fields filled)
  ↓ (user clicks Submit)