skills.rest
flsteven87
flsteven87COMMUNITY
Explore all skills by this author →
GitHub

recur-checkout

Implement Recur checkout flows in modal, embedded, and redirect modes for React and FastAPI apps.

Updated Aug 23, 2026
Search Tags:#react#fastapi#frontend-backend#payments#checkout#subscription#recur
One-click install
npx skills add https://github.com/flsteven87/three_kingdoms_strategy --skill recur-checkout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: recur-checkout
Source: https://github.com/flsteven87/three_kingdoms_strategy/tree/main/.agents/skills/recur-checkout
Command: npx skills add https://github.com/flsteven87/three_kingdoms_strategy --skill recur-checkout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Recur checkout system provides a flexible, multi-mode payment workflow that lets you embed, modal, or redirect users through checkout flows with a consistent API and prefilled data.

Core Features & Use Cases

  • Support for modal, embedded, and redirect checkout modes to fit different app architectures.
  • Pre-filled customer data, event callbacks, and robust error handling for a smooth checkout experience.
  • Server-side checkout sessions and client-side integrations for seamless payment experiences.

Quick Start

Run a Recur checkout integration in your React + FastAPI app by wiring the provided hooks and server endpoints to initiate a checkout flow with a productId and customer details.

Frequently Asked Questions about recur-checkout

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

FAQPage Schema
How do I implement Recur checkout flows in a React and FastAPI application?▼

Embedded Recur checkout renders the payment UI directly within your React application using client-side integration hooks. This mode avoids full-page redirects, keeping the user in-context while the FastAPI backend manages the server-side checkout session.

How do I handle prefilled customer data and callbacks during a subscription checkout?▼

Prefilled customer data is passed when initiating the server-side checkout session, allowing the checkout UI to auto-populate fields. Event callbacks are wired through client integration hooks to capture the checkout result, ensuring robust error handling for both subscriptions and one-time payments.

When should I use redirect mode versus modal mode for handling payments?▼

Redirect mode sends users to a separate Recur checkout page, suitable for simpler app architectures, while modal mode overlays the checkout UI on your current page. Both utilize the same server-side API calls to handle subscriptions and one-time payments.

Does this checkout integration require specific product metadata for one-time payments?▼

Yes, the integration requires product metadata to define the checkout item. Passing a productId and customer details to the FastAPI server endpoints generates a production-ready checkout experience that accurately processes both subscriptions and one-time payments.

Related Skills

Explore More Software Engineering Skills→
mayervcmayervc

movie-app-stripe-payments

Integrate Stripe Checkout Sessions, webhooks, and refunds into a React/TypeScript and Node/Express app.

Community
Advanced
PayRamPayRam
155

payram-webhook-integration

Integrate PayRam webhook handlers for payment and payout event notifications.

Official
Intermediate
engineers-hub-ltd-in-house-projectengineers-hub-ltd-in-house-project

stripe-checkout

Implement Stripe Checkout Sessions and PaymentIntents with webhook handling.

Official
Advanced
aberrantCodeaberrantCode
1

web-payments

Integrate Stripe checkout, subscriptions, and billing into web applications.

Community
Advanced