Add Stripe Checkout To Your Replit Apps: Step-By-Step Guide To Checkout Sessions скачать в хорошем качестве

Add Stripe Checkout To Your Replit Apps: Step-By-Step Guide To Checkout Sessions

Learn how to build apps without writing code, here: https://replstack.com In this lesson, we connect our pricing card designs (with monthly and annual toggles) to our Stripe account and create our first checkout session. We integrate the checkout process with Google sign-in to ensure user authentication. Learn how to handle Stripe secrets securely, set up price IDs, and troubleshoot common issues. The next lesson will cover webhooks for finalizing the checkout flow. Perfect for developers looking to streamline their payment process! 00:00 Introduction and Setup Overview 00:17 Integrating Google Sign-In 01:17 Implementing Stripe Checkout 02:03 Handling Stripe Secrets 04:18 Testing the Checkout Flow 05:30 Next lesson: Complete The Flow With Stripe Webhooks PROMPT: Add Stripe Checkout To Existing Pricing Cards GOAL: Implement Stripe-hosted checkout pages for all of our pricing card items. CONTENT: Let's implement Stripe checkout now. The desired flow will be: Non-logged in user clicks on a pricing card button (e.g. the Starter monthly plan); We store that checkout intent (e.g. Starter monthly price_id), but take the user through our existing Google sign-in flow to create an account with Google; The user is added to our database, then the user is immediately redirected to a Stripe checkout page, for the price_id they originally selected on the pricing section; After successful payment, we take the user back to the /dashboard page; We will update the user's plan details after receiving a webhook from Stripe; Ask me for my Stripe secrets using Replit's secure secret management; Use the following ending for the stripe webhook endpoint for the handler: /api/webhook; Ask me for my Webhook signing secret using secure secret management; Price_ids to be connected with respective buttons in the pricing cards are as follows: MONTHLY STARTER PLAN PRICE_ID: ANNUAL STARTER PLAN PRICE_ID: MONTHLY PRO PLAN PRICE_ID: ANNUAL PRO PLAN PRICE_ID: LIFETIME PRICE_ID: IMPLEMENTATION NOTES: Recommended Flow: 1. Click a paid plan on pricing cards (unauthenticated or authenticated) Client sends POST /api/checkout/intent { planSlug }. Server validates planSlug → maps to server-side allowlisted Stripe price_id. Server creates a short-lived CheckoutIntent record (or stores in the session) with fields: intentId, price_id, origin, createdAt, status='pending'. If user is not signed in: respond 303 to your Google OAuth start with callbackUrl=/checkout/continue?intent={intentId}. If user is signed in: respond 303 to /checkout/continue?intent={intentId} directly. 2. Google OAuth callback → /checkout/continue (server route) Requires an authenticated session (if not, bounce to OAuth with the same callbackUrl). Look up the intentId from the query or a signed, httpOnly cookie. Verify: not expired, not used, belongs to the same (now) authenticated user or is unclaimed (then claim it). Create Stripe Checkout Session (server-side) using the trusted price_id, your customer (from user record), mode='subscription', success_url=/checkout/success?session_id={CHECKOUT_SESSION_ID}, cancel_url=/pricing?canceled=1. Mark intent as status='consumed' and save a one-time idempotency key (e.g., userId + intentId). Respond 303 to session.url (Stripe). 3. After payment Provision via webhooks (checkout.session.completed, customer.subscription.updated). Do not rely solely on success_url for provisioning. On success_url route (/checkout/success), server-side verify with Stripe’s API that the session_id belongs to the current user and is paid/complete. Then 303 to /dashboard?upgraded=1 (so the session_id doesn’t linger in history).