add-stripe

Integrate Stripe checkout, subscriptions, billing, and webhooks into Next.js or React apps.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/atemaguer/bfloat-ide --skill add-stripe-atemaguer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-stripe
Source: https://github.com/atemaguer/bfloat-ide/tree/main/resources/skills/add-stripe
Command: npx skills add https://github.com/atemaguer/bfloat-ide --skill add-stripe-atemaguer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the friction of wiring up Stripe payments by guiding an AI agent through checkout, subscriptions, billing, customer lookup, and webhook handling in a safe, production-ready way.

Core Features & Use Cases

  • Checkout Integration: Create Stripe checkout sessions for one-time purchases or recurring subscriptions.
  • Customer and Billing Logic: Look up or create customers by email, manage connected-account routing, and handle subscription state correctly across dev and production.
  • Dynamic Product Catalogs: Fetch live products and prices at runtime instead of hardcoding price IDs, which is essential for apps that clone test-mode setup into live mode.
  • Webhook Support: Build webhook handlers that verify signatures and react to billing events reliably.
  • Use Case: A SaaS app wants to add a Pro plan with recurring billing, a pricing page, and a webhook-driven subscription flow without manual Stripe setup mistakes.

Quick Start

Ask the assistant to add Stripe checkout, subscriptions, and webhook support to this web app while following the project’s existing framework and environment conventions.

Frequently Asked Questions about add-stripe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Stripe checkout and subscriptions into a Next.js application?

To integrate Stripe checkout and subscriptions into a Next.js application, you can use a guided workflow that creates checkout sessions, manages customer lookup by email, and handles recurring billing state dynamically across development and production environments.

What is the best way to handle Stripe webhooks for billing events in a React SPA?

Handling Stripe webhooks for billing events in a React SPA involves building dedicated endpoints that verify incoming event signatures and reliably react to subscription state changes, ensuring production-ready payment processing without manual setup errors.

How do I fetch Stripe products and prices dynamically instead of hardcoding price IDs?

Fetching Stripe products and prices dynamically requires using MCP-backed runtime helpers to retrieve live catalog data. This approach eliminates hardcoded price IDs and safely supports cloning test-mode setups into live production mode.

Can I route Stripe payments to connected accounts for a SaaS platform?

Yes, you can route Stripe payments to connected accounts for a SaaS platform. The integration supports connected-account routing alongside standard checkout and subscription workflows within your existing Next.js or React project framework.

Does adding Stripe billing require manual customer creation for each new user?

Adding Stripe billing does not require manual customer creation for each user. The workflow automatically looks up or creates customers by email address, correctly managing their subscription and billing state across dev and production environments.

Why should I avoid hardcoding Stripe price IDs when building a pricing page?

You should avoid hardcoding Stripe price IDs when building a pricing page because it creates manual setup friction. Fetching live products and prices at runtime via MCP-backed helpers prevents configuration mistakes and allows seamless test-to-live mode cloning.