Sell subscriptions as a SaaS startup

Before integrating with Stripe, you must create a Stripe account.

1. Create an account by entering your email address, full name, country, and creating a password.
2. Fill out your business profile.
3. In the Dashboard, click Verify your email. A verification email is sent to your email address.
4. Verify your email address.

Create products and set prices in the Dashboard.

1. Create a test product in the Dashboard.

2. Enter the product and price details:

   • Name: Enter “Plus”
   • Price: Enter “8”
   • Currency: Select USD

3. Upload a test product image.

4. Select Recurring.

5. Click Add test product.

To accept payments, build an integration with Stripe-hosted Checkout, a prebuilt payment page.

Before you begin

Refer to the Stripe-hosted Checkout quickstart as you go through this step. You can download the example app or open it in VS Code.

Set up your server

Your server communicates with the Stripe API to initialize the checkout process, but Stripe actually securely hosts the actual payment form. Setting up your server varies by programming language, but typically involves installing the Stripe library, configuring your API keys, and implementing the endpoints needed to create Checkout Sessions and handle post-payment processes.

1. Open the Quickstart, and select React for the front end, and Node for the back end.
2. Install the Stripe Node library.
3. Create a Checkout Session. A Checkout Session is a server-side object in Stripe that defines a payment flow for a customer. The endpoint path must match the action attribute of your checkout button.
4. Define a product to sell. Add the test product (“Plus”) you created earlier in the Dashboard. After you set the test product, you get a price ID value, which your front end needs to pass when creating a Checkout Session needs
5. Choose a payment mode. To initiate recurring payments with subscriptions, set the mode to subscription.
6. Supply success and cancel URLs. Stripe redirects your customer to these pages after they complete or cancel a payment. Host these pages on your site.
7. Redirect your customer to the URL for the Checkout page. This is the URL returned in the Checkout Session response.

Create your checkout page

This is a page on your site that shows the customer a summary of their order before they proceed to complete payment. They can review and modify their selections if needed.

1. Add an order preview page.
2. Add a checkout button. This is the button the customer clicks on the order preview page that redirects them to the Stripe-hosted payment page.

Test your checkout page

1. Add “proxy”: "<http://localhost:4242>” to your package.json file during local development.
2. Run npm start and go to http://localhost:3000/checkout.
3. In your checkout page, enter the test card 4242424242424242 to submit a test payment as a customer.
4. (Optional) To sign up for a Link account, select Save my information for faster checkout. You can test Link as the payment method to see the checkout flow for a returning customer.

Learn how to add payment methods, trial periods, and set up a customer portal.

Customize payment page

You can apply custom branding to Checkout. In the Dashboard, go to Branding settings to:

• Upload a logo or icon
• Customize the background color, button color, font, and shapes for the page

Add payment methods

In the Payment methods page in the Dashboard, enable the payment methods you want to accept from your customers. Checkout supports several payment methods, and also uses dynamic payment methods

This means Stripe handles the logic for dynamically displaying the most relevant eligible payment methods to each customer to maximize conversion. Stripe only shows customers the payment methods they’re eligible to use, based on factors like their location or if the payment method supports subscriptions.

Add trial periods

Configure a Checkout Session to add a free trial to your customer’s subscription by passing one of the following parameters:

• subscription_data.trial_period_days, the length (in days) of your free trial.
• subscription_data.trial_end, a Unix timestamp representing the end of the trial period.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d mode=subscription \
  --data-urlencode success_url="https://example.com/success" \
  --data-urlencode cancel_url="https://example.com/cancel" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}" \
  -d "line_items[0][quantity]"=1 \
  -d "subscription_data[trial_period_days]"=30

Add a customer portal

Your customers manage their existing subscriptions and invoices in a customer portal. Use the Dashboard to create the portal. At a minimum, make sure to configure it so that customers can update their payment methods.

To monitor subscriptions for your Stripe-hosted Checkout integration, you can set up an endpoint to listen to specific webhook events that occur throughout the subscription lifecycle.

Set up a webhook endpoint

1. Create a webhook endpoint on your server to receive event notifications from Stripe.

2. In the Dashboard, register this endpoint in your webhook settings.

3. Implement webhook signature verification for security using your webhook secret. If you don’t know your STRIPE_WEBHOOK_SECRET key, go to the destination details view of the Webhooks tab in Workbench to view it.

4. In Workbench, select the events you want.

5. Enter the endpoint’s name, URL, and description in the Dashboard.

6. Monitor the following events at minimum (for more events, see Subscription webhooks):

   Event name	Description	Your response
   checkout.session.completed	Sent when a customer successfully completes the Checkout Session, informing you of a new purchase.	Use entitlements to provision the subscription.
   invoice.paid	Sent each billing period when a payment succeeds.	For monthly billing, continue to provision the subscription each month as you receive invoice.paid events. Examine the event type and parse the payload of each event object. Store the subscription.id and customer.id event objects in your database for verification purposes.
   invoice.payment_failed	Sent each billing period if there’s an issue with your customer’s payment method.	Notify your customer and direct them to the customer portal to update their payment method.

Set the billing cycle

You can explicitly set a subscription’s billing cycle anchor to a fixed date (for example, the 1st of the next month) when creating a Checkout Session. The billing cycle anchor determines the first full invoice date, when customers are billed the full subscription amount. For example, a monthly subscription created on May 15 with an anchor on June 1 is first initially billed on May 15, then always on the 1st of the month.

To configure a billing cycle anchor, set the subscription_data.billing_cycle_anchor parameter when you create a Checkout Session in subscription mode. The anchor must be a future UNIX timestamp before the next natural subscription billing date.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}" \
  -d "line_items[0][quantity]"=1 \
  -d mode=subscription \
  --data-urlencode success_url="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" \
  -d "subscription_data[billing_cycle_anchor]"=1611008505

If the billing cycle anchor is during a session’s active period and a customer attempts payment after it has passed, Checkout displays and charges for the full period starting with the billing cycle anchor instead of the prorated period before the billing cycle anchor.

To learn more, see Set the billing cycle date.

1. In the Dashboard, open your Account settings.
2. Enter your business type, tax details, business details, personal verification information, and customer-facing information (for example, a statement descriptor).
3. Add bank details to confirm where your money will be paid out.
4. Set up two-step authentication to secure your account.
5. You can optionally add automatic tax collection or revenue-based climate donations.
6. Review the information you entered, and click Agree and submit.
7. After you activate your profile, Stripe updates you from sandbox mode to live mode.

Learn more about activating your Stripe account.