Building an eCommerce Store 2/3: Checkout flows

Introduction

Creating an online store requires the management of a lot of moving parts, such as product and price management, checkout flows for your customers, and order fulfillment to name a few.

In this article you’ll learn how to use Stripe Checkout and Payment Links to create seamless and powerful checkout flows for your customers. You can also watch this video with Sia Karamalegos (@TheGreenGreek) and me (@mattling_dev) to learn how to use Checkout with Netlify serverless functions and the Stripe-node client library.

Stripe Checkout - overview

Checkout allows you to provide your customers with a powerful Stripe-hosted checkout page that enables your customers to provide payments quickly and securely. Some core features of Checkout is that it:

• is fully responsive and as such works on both desktop and mobile devices
• is internationalized to more than 25 languages
• includes digital wallets such as Apple Pay and Google Pay right out of the box
• includes many payment methods with no coding required

There’s so much more to Stripe Checkout so I highly recommend reading about even more features here.

Products and Prices

In the previous blog post you learned how to create a pricing model for your business and how to create and manage Products and Prices. Now that you have created those core resources, it’s time to provide a way for your customers to purchase them. Let’s start with Stripe Checkout.

Checkout Sessions

The steps to create a Checkout Session can be broadly described as:

1. Take the Price ID associated with the Product that your customer is purchasing
2. Create a Checkout Session with that Price ID
   • Optionally set other features of checkout such (there are many more):
     • Collect shipping information
     • Automatically calculate and collect tax
     • Collect a customer phone number
     • Add a discount
3. Redirect your customer to the Stripe-hosted checkout page by using the URL attribute which is returned with the Checkout Session created in step 2.
4. Fulfill the order once the user has completed the checkout

Here is the code in Javascript using a Netlify serverless function to create a Checkout Session and redirect the user to Stripe. Each JavaScript file to be deployed as a function must export a handler method:

exports.handler = async function (event, context) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

  const params = new URLSearchParams(event.body);
  const priceId = params.get("price_id");

  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://example.com/success",
    cancel_url: "https://example.com/cancel",
  });

  return {
    statusCode: 303,
    headers: {
      Location: session.url,
    },
  };
};

To learn about building and configuring Netlify serverless functions follow the comprehensive documentation here. You can use this tinydemo to test a working example of a Stripe-hosted checkout.

Once the customer has completed the checkout you can either check the dashboard for successful payments and fulfill the order. Or you can use a webhook endpoint to listen for important events that happen on your account like successful payments and then react automatically, which we highly recommend. We’ll cover using webhook endpoints for fulfillment in the third and final blog post. But if you’re curious you can skip ahead to the 3rd episode of building an eCommerce store with Sia Karamalegos here.

Payment Links

An even simpler way for you to get up and running with payments, literally in minutes, is to provide your customers with Payment Links. Payment Links enable you to create a payment page to sell a product or subscription, and share a link to it with your customers. You can share the link as many times as you want on social media, in emails, or any other channel. Payment Links can be created via the dashboard, so if you'd like to get started with a no-code solution Payment Links allow you to do that by creating them there and manually distributing them.

Creating Payment Links in the dashboard

Creating Payment Links in the dashboard is as simple as navigating to the Product overview page and clicking on the “Create Payment Link” button which is next to a Price listed on that page.

Using the Payment Link UI you can also do things like:

• allow your customers to adjust the quantity of the product they’re purchasing
• allow promotion code usage for discounts
• collect customer addresses and phone numbers
• customize the confirmation and redirection pages for after a successful purchase

You can even preview what your Payment Link page will look like on mobile or desktop by toggling the preview.

Once you’ve created a Payment Link via the dashboard, you can copy it, embed it on your webpage or distribute it as described.

Creating Payment Links via the API

Creating Payment Links is also possible using the Stripe API. This allows you to automate the management of your Payment Links without having to navigate to the dashboard. Here is a simple example in Ruby which creates a Payment Link for my coffee Product / Price, enabling many features:

Stripe::PaymentLink.create({
  line_items: [
    {
      price: 'price_1KgAJtAGCzoAn7ffL22Tx06g',
      quantity: 1,
    },
  ],
  allow_promotion_codes: true,
  billing_address_collection: 'required',
  phone_number_collection: {
    enabled: true,
  },
})

Summary

Using the low-code and no-code payments solutions like Checkout and Payment Links, you can be up and running selling your products in no time. Both solutions offer many benefits like security, conversion optimization, SCA compliance, digital wallets and much more. If you would like support using Stripe Checkout or Payment Links, please don’t hesitate to reach out to our developers at @StripeDev on twitter or join in the conversion on our Discord server.

About the author

Matthew Ling (@mattling_dev) is a Developer Advocate at Stripe. Matt loves to tinker with new technology, adores Ruby and coffee and also moonlighted as a pro music photographer. His photo site is at matthewling.com and developer site is at mattling.dev.

Stay connected

In addition, you can stay up to date with Stripe in a few ways:

📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest