Skip to main content
The Stripe WebMCP sample opens a Stripe Checkout page, selects a payment method, and fills the form through tools published by the page. Stagehand clicks the Pay button to submit payment.
The checkout flow is currently proposed in stripe-samples/webmcp#5. The setup below checks out the reviewed sample commit because the default branch may still contain the earlier tool-discovery example.

​
Requirements

  • Node.js 24 and pnpm 10.32.1.
  • Google Chrome with WebMCP support. The maintainers tested the sample with Chrome 153; Stagehand enables the required launch flags.
  • A Stripe Checkout URL that exposes WebMCP tools. Use a test-mode payment link and test card data to try the sample.
The sample uses the published Stagehand TypeScript SDK and launches local Chrome. It does not require the shared agent framework integration package or a model-provider API key.

​
Run the sample

1

Clone the Stripe sample

2

Configure Checkout

Edit .env with your Checkout URL, buyer details, shipping address, and test card data. The sample’s .env.example lists the individual fields.
This script clicks Pay and can charge a real card on a live Checkout page. CONFIRM_PURCHASE=yes and MAX_TOTAL_MINOR do not enforce test mode.
3

Run Checkout

The script logs the order before payment, clicks Pay if the total is within the configured limit, then logs the page URL and an order summary. Confirm the payment outcome in Checkout: if the final summary cannot be retrieved, the sample prints the pre-payment summary instead.

​
How it works

The sample discovers tools with page.tools() and invokes them through Stagehand’s WebMCP API.
  1. Poll for select_payment_method and select card.
  2. Read fill_payment_form.inputSchema and send only fields present in that Checkout session. Shipping and billing field names vary by session.
  3. Fill one field per invocation, rediscovering the tool between calls because the form can re-render.
  4. Read get_order_summary and abort if totalAmount exceeds MAX_TOTAL_MINOR.
  5. Click .SubmitButton with a Stagehand locator. The sample’s Checkout flow exposes no Pay tool.
The sample catches errors from individual form-fill calls because a re-render can prevent an invocation from acknowledging a value that was applied. Those errors do not prove that a field was filled successfully; check the form when adapting the flow.

Stripe sample source

Read the complete script and environment configuration.

WebMCP guide

Discover, invoke, and handle results from page-provided tools.