WebMCP integration with real Stripe checkout

Описание и применение

Интеграция WebMCP с реальной страницей eSIM позволяет AI‑агенту получать список планов и инициировать платежи через Stripe, используя те же API, что и обычный пользователь.

Задача

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.

Результат

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.

Рабочий процесс

• 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.

Доказательства

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

Источник