Skip to main content
Stripe is the fastest way to accept payments in your Rocket app. This tutorial walks you through connecting Stripe, creating a pricing page, setting up checkout, handling webhooks, and testing the full payment flow.
You’ll need a Stripe account to follow this tutorial. Free to create - no charges until you process real payments.

​
What you’ll set up

By the end of this tutorial, your app will have:
  • A pricing page with plan options
  • A Stripe Checkout flow for processing payments
  • Webhook handling for payment events (successful charges, subscription changes)
  • Test mode verification before going live

​
Connect Stripe

1

Get your Stripe API keys

Log into your Stripe Dashboard and copy your publishable key and secret key. Make sure you’re in test mode (toggle in the top-right of the Stripe dashboard).You’ll have two pairs of keys:
  • Test keys - for development and testing (start with pk_test_ and sk_test_)
  • Live keys - for real payments (start with pk_live_ and sk_live_)
2

Add keys to your Rocket app

Ask Rocket to set up Stripe integration with your keys:
Rocket will store your secret key securely as an environment variable and configure the Stripe SDK in your app.
Never paste your live secret key directly into a prompt. Use test keys during development. Add live keys through Rocket’s environment variable settings when you’re ready to go live.
3

Create products in Stripe

In your Stripe Dashboard, go to Products and create the plans you want to offer. For example:
  • Free - $0/month
  • Pro - $29/month
  • Enterprise - $99/month
Copy the price ID for each plan (starts with price_). You’ll reference these when building your pricing page.

​
Build a pricing page

Ask Rocket to create a pricing page that displays your plans and links to Stripe Checkout.
Rocket will generate a responsive pricing page with plan cards, feature lists, and checkout buttons.

​
Set up Stripe Checkout

Stripe Checkout is a hosted payment page that handles card input, validation, and compliance for you. Ask Rocket to wire up the checkout flow:
The checkout flow works like this:
  1. User clicks a plan on your pricing page
  2. Your app creates a Stripe Checkout session on the server
  3. User is redirected to Stripe’s hosted payment page
  4. After payment, user returns to your success page
Stripe Checkout handles PCI compliance, card validation, 3D Secure, and local payment methods automatically. You don’t need to build a custom payment form.

​
Handle webhooks

Webhooks let Stripe notify your app when payment events happen - a charge succeeds, a subscription renews, or a payment fails.
1

Create a webhook endpoint

Ask Rocket to add a webhook handler:
2

Get your webhook secret

In the Stripe Dashboard, go to Developers → Webhooks and add an endpoint pointing to your app’s webhook URL. Stripe will give you a webhook signing secret (starts with whsec_).Add this secret as an environment variable in your Rocket app.
3

Configure events

Select the events you want Stripe to send to your webhook:
  • checkout.session.completed - a customer completed payment
  • invoice.payment_succeeded - a subscription renewed
  • invoice.payment_failed - a payment attempt failed
  • customer.subscription.deleted - a subscription was cancelled

​
Test your payment flow

Before going live, test everything end-to-end in Stripe’s test mode.
1

Use test card numbers

Stripe provides test card numbers for different scenarios:Use any future expiration date, any 3-digit CVC, and any billing zip code.
2

Test the full flow

Walk through the complete payment path:
  1. Go to your pricing page
  2. Click a plan’s checkout button
  3. Complete payment with a test card
  4. Verify you land on the success page
  5. Check the Stripe Dashboard to confirm the payment appears
3

Test webhooks locally

Use the Stripe CLI to forward webhook events to your staging environment for testing:
Trigger a test event and verify your webhook handler processes it correctly.
4

Go live

When everything works in test mode:
  1. Switch your Stripe Dashboard to live mode
  2. Replace test API keys with live keys in Rocket’s environment variables
  3. Update your webhook endpoint to use the live webhook secret
  4. Click Launch to deploy your app to production
Double-check that your live secret key is stored as a server-side environment variable, not exposed in client-side code. Run the security checklist before accepting real payments.

​
What’s next?

Security checklist

Ensure API keys and payment flows are locked down.

Launch your site

Test payment flows in staging before going live.

Deploy to the web

Launch your app with payments to a live URL.

Prompting for Build

Write better prompts for app features and integrations.