WebMCP integration with real Stripe checkout

Description and use

Integrating WebMCP with a live eSIM page lets AI agents list plans and start Stripe checkouts using the same APIs as human users.

Problem

Integrating a browser‑based AI tool (WebMCP) with a live eSIM product page to expose real inventory and checkout via Stripe, avoiding toy demos and ensuring consistency between AI and human flows.

Outcome

AI agents can now list eSIM plans and initiate real Stripe checkout sessions directly from the browser, with identical logic for both AI and human users.

Workflow

• 1. Import WebMCP tools component on eSIM catalog page.
• 2. In component’s useEffect, check for document.modelContext.
• 3. Register "list_esim_plans" tool with execute() calling GET /api/v1/esim-catalog.
• 4. Register "buy_esim_plan" tool with execute() POST /api/v1/esim-checkout and redirect to returned checkoutUrl.
• 5. Use AbortController to clean up on component unmount.
• 6. Ensure checkout logic is shared via createEsimCheckoutSession in lib/esim-checkout.ts for consistency.

Evidence

Two tools call the same public JSON endpoints the page itself would use if this were rendered as an API instead of HTML

Source