Guides e2e testing of Stripe Checkout flows with test cards, JS-based form detection for hosted/embedded Elements, and automated filling instructions.
From user-testing-agentnpx claudepluginhub ncklrs/claude-chrome-user-testing --plugin user-testing-agentThis skill uses the workspace's default tool permissions.
test-cards.jsonEnables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
This skill provides guidance for testing Stripe checkout flows with any persona. It handles test card data, form detection, and payment-specific narration.
Enable realistic user testing of Stripe payment flows using official test cards, with persona-appropriate reactions to checkout experiences.
Load card data from test-cards.json. Key scenarios:
| Scenario | Card | When to Use |
|---|---|---|
success | 4242...4242 | Happy path checkout |
decline | 4000...0002 | Test error handling |
3ds-required | 4000...3155 | Test 3D Secure flow |
insufficient | 4000...9995 | Test specific decline reason |
amex | 3782...0005 | Test Amex (4-digit CVC) |
Always use these unless testing specific scenarios:
--email flag value, or default to test@example.comWhen redirected to Stripe's hosted checkout:
URL contains: checkout.stripe.com
Indicators:
- Stripe branding visible
- Email field at top
- Card element with card icon
- "Pay" button with amount
When Stripe Elements are embedded in the page:
Look for iframes with:
- name containing "__privateStripeFrame"
- src containing "js.stripe.com"
Common element patterns:
- Single card element (all-in-one)
- Separate: card number, expiry, CVC fields
- Payment Request Button (Apple Pay / Google Pay)
Use browser_evaluate to detect Stripe:
(function() {
// Check for hosted checkout
if (window.location.hostname === 'checkout.stripe.com') {
return { type: 'hosted', detected: true };
}
// Check for embedded Elements
var stripeFrames = document.querySelectorAll('iframe[name*="__privateStripeFrame"]');
if (stripeFrames.length > 0) {
return {
type: 'elements',
detected: true,
frameCount: stripeFrames.length
};
}
// Check for Payment Request Button
var prButton = document.querySelector('[data-testid="payment-request-button"]');
if (prButton) {
return { type: 'payment-request', detected: true };
}
return { detected: false };
})();
Fields appear in the main document - use standard form filling:
browser_type on email fieldElements are in iframes - interaction requires focusing the iframe:
Since card entry should be fast (per user's preference):
1. Get test card from scenario
2. Use browser_fill_form or browser_type to fill all fields quickly
3. No character-by-character typing
4. Submit immediately after filling
Add these to persona narration when testing checkout:
Boomer Tech-Averse:
Boomer Tech-Friendly:
Millennial Tech-Skeptic:
Gen Z Digital Native:
Gen Alpha Tablet Kid:
Impulse Buyer:
Comparison Shopper:
Watch for these and react appropriately:
Note and appreciate these:
When 3ds-required card triggers authentication:
Persona reactions to 3DS:
Add this section to reports when --stripe flag is used:
## Payment Experience
### Checkout Summary
- **Checkout Type**: Stripe Elements (embedded) / Hosted
- **Express Options**: Apple Pay [Yes/No], Google Pay [Yes/No]
- **Guest Checkout**: [Available/Required Account]
- **Test Card Used**: [scenario] ([card number prefix]...)
- **3D Secure**: [Triggered/Not Triggered]
- **Result**: [Payment Successful/Declined/Error]
### Payment Flow Timeline
1. [Time] Reached checkout page
2. [Time] Started filling payment form
3. [Time] Submitted payment
4. [Time] Received confirmation
### Payment Friction Points
- [List issues that slowed or frustrated the payment process]
### Payment Positives
- [List things that made payment smooth or trustworthy]
### Security Perception
- [How secure did the checkout feel to this persona?]
When --stripe flag is active on /user-test or /stripe-test is used: