PAYMENTS / LESSON 03

Stripe Payments and Checkout.

One-time payments, subscriptions, payment links and Stripe Checkout

Written by Andrew Lee JenkinsPublished Oct 5, 20266 min readFree lesson

Types of Payments

Stripe supports a bunch of payment types. Here are the ones you'll actually use.

These snippets run on your server, never in the browser. Install Stripe's library with npm install stripe, put your secret key in .env as STRIPE_SECRET_KEY, and create the stripe client the examples below use.

Example

import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

One-Time Payments

Plain old purchases. Buy a product, pay once, done.

Example

// Create a checkout session for a one-time purchase
const session = await stripe.checkout.sessions.create({
  line_items: [{
    price_data: {
      currency: 'usd',
      product_data: {
        name: 'Premium Template',
      },
      unit_amount: 2900, // $29.00 in cents
    },
    quantity: 1,
  }],
  mode: 'payment',
  success_url: 'https://yourapp.com/success',
  cancel_url: 'https://yourapp.com/cancel',
})

Subscriptions

Recurring payments, like $10/month or $99/year.

Example

// Create a subscription checkout
const session = await stripe.checkout.sessions.create({
  line_items: [{
    price: 'price_1234', // Your subscription price ID
    quantity: 1,
  }],
  mode: 'subscription',
  success_url: 'https://yourapp.com/success',
  cancel_url: 'https://yourapp.com/cancel',
})

Stripe takes care of the boring stuff for you.

Charging customers each month/year
Sending payment receipts
Retrying failed payments
Cancellations and refunds

Payment Links

The EASIEST option, and you don't need any code at all! Create a link in the Stripe dashboard and share it. Perfect for simple cases.

Stripe Checkout

The fastest way to add payments is Stripe Checkout. It's a complete payment page that's already built for you.

Step 1. User Clicks Pay

Your app sends the user over to Stripe's checkout page.

Step 2. Stripe Handles Everything

The checkout page collects the payment info, checks it, and processes the payment.

Step 3. User Returns

After paying (or bailing), the user lands back in your app.

And that checkout page comes loaded.

Works on mobile and desktop
Supports many payment methods automatically
Handles 3D Secure and other security requirements
Translates to the user's language

Loading the lesson…

Loading activities…