Loading...
Loading...
> Accept payments and manage subscriptions with Stripe.
When someone buys your product, Fabrk uses Stripe to handle everything securely. Customer clicks Buy, enters payment info on Stripe's checkout page (you never see their card number), Stripe charges the card and notifies your app via webhook, then your app grants access. The key benefit: You never handle sensitive credit card data. Stripe is PCI compliant and handles all the security complexity.
DESC: Go to stripe.com and create an account. It's free to sign up. You won't pay anything until you process real payments.
DESC: In the Stripe Dashboard, go to Developers → API keys. Copy your test keys. Test keys start with sk_test_ and pk_test_. Live keys start with sk_live_ and pk_live_.
DESC: Go to Products in Stripe Dashboard. Create products for each pricing tier (e.g., Starter, Pro, Enterprise). Each product has a price ID like price_1234567890.
DESC: Add these to your .env.local file
1$# Stripe API Keys (test mode - get from https://dashboard.stripe.com/test/apikeys)2$STRIPE_SECRET_KEY="sk_test_your_secret_key" # Server-side only, NEVER expose to browser3$NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_your_publishable_key" # Client-side safe45$# Product Lookup Key (NOT a price ID)6$# Create in Stripe Dashboard: Products → Your Product → Pricing → Lookup key field7$# Lookup keys let you change prices in Stripe without updating code8$NEXT_PUBLIC_STRIPE_PRICE_FABRK="fabrk_purchase" # This is a lookup key, not price_1234567890910$# Optional: Promotion code ID for discounts (if using early adopter offer)11$STRIPE_COUPON_EARLY_ADOPTER="promo_1SVGK4P7kSSEYWlXBq1LtaNM"1213$# Why lookup keys instead of price IDs?14$# - Price IDs (price_1234...) are hardcoded - changing price requires code update15$# - Lookup keys (fabrk_purchase) are flexible - change price in Stripe Dashboard anytime
DESC: Install the Stripe CLI to test webhooks locally. Webhooks notify your app when payments succeed or fail.
1$# Step 1: Install Stripe CLI (one-time setup)2$# macOS:3$brew install stripe/stripe-cli/stripe45$# Windows:6$# Download from https://github.com/stripe/stripe-cli/releases78$# Linux:9$# See https://stripe.com/docs/stripe-cli#install1011$# Step 2: Login to Stripe12$stripe login13$# Opens browser window to authenticate1415$# Step 3: Forward webhooks to your local app16$stripe listen --forward-to localhost:3000/api/webhooks/stripe1718$# Expected output:19$# > Ready! Your webhook signing secret is whsec_abc123def456...20$#21$# Step 4: Copy the webhook secret (starts with whsec_)22$# Add it to .env.local:23$STRIPE_WEBHOOK_SECRET="whsec_abc123def456..."2425$# Leave this terminal window OPEN while developing26$# You'll see webhook events appear here when you test payments
Add this to any pricing card or button
1"use client";23import { useState } from "react";4import { Button } from "@/components/ui/button";56export function CheckoutButton({ priceId, planName }) {7 const [loading, setLoading] = useState(false);89 const handleCheckout = async () => {10 setLoading(true);11 try {12 // Call your checkout API13 const response = await fetch("/api/stripe/checkout", {14 method: "POST",15 headers: { "Content-Type": "application/json" },16 body: JSON.stringify({ priceId }),17 });1819 const { url, error } = await response.json();2021 if (error) {22 alert(error);23 return;24 }2526 // Redirect to Stripe Checkout27 window.location.href = url;28 } catch (err) {29 alert("Something went wrong. Please try again.");30 } finally {31 setLoading(false);32 }33 };3435 return (36 <Button onClick={handleCheckout} disabled={loading}>37 {loading ? "Loading..." : `Get ${planName}`}38 </Button>39 );40}
Let users manage their own subscription
1"use client";23import { Button } from "@/components/ui/button";45export function ManageBillingButton() {6 const handlePortal = async () => {7 const response = await fetch("/api/stripe/portal", {8 method: "POST",9 });1011 const { url } = await response.json();12 window.location.href = url;13 };1415 return (16 <Button variant="outline" onClick={handlePortal}>17 Manage Billing18 </Button>19 );20}
NEVER COMMIT SECRETS TO GIT
CRITICAL: The STRIPE_SECRET_KEY and STRIPE_WEBHOOK_SECRET are highly sensitive. Leaking them gives attackers full access to your Stripe account.
Safe variables: NEXT_PUBLIC_* variables are safe for client-side use. These include pk_test_ (publishable keys) but NOT sk_test_ (secret keys).
Think of webhooks like a doorbell
Common webhook events: checkout.session.completed (someone paid),customer.subscription.deleted (someone cancelled),invoice.payment_failed (payment didn't go through).
Always test payments before going live. Stripe provides test card numbers that simulate different scenarios without charging real money.
Test Card Numbers4242 4242 4242 42424000 0000 0000 00024000 0025 0000 31554000 0000 0000 9995Use any future expiration date, any 3-digit CVC, and any billing ZIP code.
Before accepting real payments: