About autumn-add-payments
Autumn Payments is a skill guide for implementing Autumn payment flows with Stripe checkout. It covers checkout and purchase confirmation, product scenarios, prepaid quantities, and common integration details for React and backend code.
Key features
- 01Checkout and purchase confirmation flows
- 02Handles upgrade, downgrade, and cancellation scenarios
- 03Supports quantities for prepaid products
- 04Guidance for React and backend implementations
- 05Documents common integration pitfalls
Use cases
- 01Building a subscription checkout flow
- 02Showing actions based on a customer's product scenario
- 03Selling seat-based or prepaid products
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ useautumn/ skills --skill autumn-add-paymentsAfter installing, type/autumn-add-paymentsin Claude Code to confirm it loaded.
Details
From the project READMEAutumn 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
Comments
Markdown supported