Use when you have a written implementation plan to execute in a separate session with review checkpoints
npx skills add useautumn/skills
Or install specific skill: npx add-skill https://github.com/useautumn/skills/tree/master/autumn/add-payments
# Description
Skill for adding Stripe checkout and payment flows using Autumn.
# SKILL.md
name: autumn-add-payments
description: Skill for adding Stripe checkout and payment flows using Autumn.
Autumn Payments
Always consult docs.useautumn.com for code examples and latest API.
Autumn handles Stripe checkout, upgrades, downgrades, and cancellations automatically.
Quick Reference
Payment Flow
checkout- Returns Stripe URL (new) or preview data (returning customer)attach- Confirms purchase when card already on file
Checkout Result
| Field | Description |
|---|---|
url |
Stripe checkout URL (null if card on file) |
product |
Target product with scenario |
current_product |
Customer's current product |
lines |
Invoice line items |
total |
Amount in major currency units |
currency |
Currency code |
Product Scenarios
| Scenario | Meaning | Action |
|---|---|---|
new |
Not subscribed | Subscribe |
active |
Current plan | Current Plan |
scheduled |
Scheduled | Already Scheduled |
upgrade |
Higher tier | Upgrade |
downgrade |
Lower tier | Downgrade |
renew |
Cancelled | Renew |
React Implementation
import { useCustomer, usePricingTable } from "autumn-js/react";
const { checkout, attach } = useCustomer();
const { products } = usePricingTable();
// Checkout flow
const data = await checkout({ productId: "pro" });
if (data.url) {
window.location.href = data.url; // New customer
} else {
// Show confirmation dialog, then:
await attach({ productId: "pro" });
}
// Cancel
const { cancel } = useCustomer();
await cancel({ productId: "pro" });
// Or downgrade to free:
await attach({ productId: "free" });
Backend Implementation
import { Autumn } from "autumn-js";
const autumn = new Autumn({ secretKey: process.env.AUTUMN_SECRET_KEY });
// Checkout
const { data } = await autumn.checkout({ customer_id, product_id: "pro" });
if (data.url) return redirect(data.url);
// Attach (after user confirms)
await autumn.attach({ customer_id, product_id: "pro" });
// Get products with scenarios
const { data: productsData } = await autumn.products.list({ customer_id });
Prepaid Pricing
For seat-based or prepaid products, pass quantities:
await autumn.checkout({
customer_id,
product_id: "credits_pack",
options: [{ feature_id: "credits", quantity: 500 }],
});
Button Text Pattern
function getButtonText(product: Product): string {
const { scenario, properties } = product;
if (properties?.has_trial) return "Start Trial";
if (scenario === "active") return "Current Plan";
const text = { upgrade: "Upgrade", downgrade: "Downgrade", new: "Subscribe" };
return text[scenario] ?? "Enable";
}
Common Gotchas
- URL field - It's
data.url, notdata.checkout_url - Don't build custom logic - Use
products.listfor scenarios - Proration automatic - Autumn handles upgrade/downgrade proration
- Cancel via free - Prefer attaching free plan over hard cancel
- Success URL - Pass
success_urlto redirect after Stripe checkout
Resources
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.