# Design a subscriptions integration

Learn about the configuration options for a subscriptions integration.

Use this guide to learn the different ways to build your subscriptions integration and follow the links to in-depth, step-by-step guides. You’ll need to consider the following:

- [How you want to charge customers](https://docs.stripe.com/billing/subscriptions/design-an-integration.md#pricing-model)
- [How you want your customers to check out and provide their payment information](https://docs.stripe.com/billing/subscriptions/design-an-integration.md#checkout-options)
- [When you want customers to pay for the subscription](https://docs.stripe.com/billing/subscriptions/design-an-integration.md#select-billing-model)

## Decide how you want to charge customers

Compare the following pricing models and determine how you want to charge your customers for the subscription to your product or service:

| Pricing model | Description | Example |
| --- | --- | --- |
| [Flat rate pricing](https://docs.stripe.com/subscriptions/pricing-models/flat-rate-pricing.md) | Charge customers a flat rate for each service tier. | You offer two service tiers, each with a fixed price:
- Standard: £20 per month or £200 per year
- Pro: £50 per month or £500 per year |
| [Per-seat pricing](https://docs.stripe.com/subscriptions/pricing-models/per-seat-pricing.md) | Charge customers a single rate per user or unit licence. | If you offer the prices from the flat rate example as per-seat licences, a customer pays the following rates for 12 licences:
- Standard: £240 per month or £2,400 per year
- Pro: £600 per month or £6,000 per year |
| [Tiered pricing](https://docs.stripe.com/subscriptions/pricing-models/tiered-pricing.md) | Charge customers a per-seat rate that varies based on tiers of quantity or usage. There are two options:
- **Volume-based pricing**: Charge a single rate based on the tier corresponding to the total quantity or usage for the period.
- **Graduated pricing**: Charge a combination of rates based on the quantity or usage within each tier for the period, one rate per tier. | - **Volume-based pricing**: You offer three tiers:

  - For customers using 1 – 10 seats, you charge £15 per seat for that month.
  - For customers using 11 – 20 seats, you charge £12 per seat for that month.
  - For customers using 21 or more seats, you charge £10 per seat for that month.

  A customer using 18 seats pays 18 x £12 = £216 per month.

  A customer using 25 seats pays 25 x £10 = £250 per month.

- **Graduated pricing**: You offer three tiers:

  - For the first 10 seats that a customer uses, you charge £15 per seat for that month.
  - For the second 10 seats that a customer uses, you charge £12 per seat for that month.
  - For each seat beyond 20 that a customer uses, you charge £10 per seat for that month.

  A customer using 18 seats pays (10 x £15) + (8 x £12) = £150 + £96 = £246 per month.

  A customer using 25 seats pays (10 x £15) + (10 x £12) + (5 x £10) = £150 + £120 + £50 = £320 per month. |
| [Usage-based billing](https://docs.stripe.com/billing/usage-based.md) | Use [Metronome](https://docs.stripe.com/billing/usage-based.md) to configure more complex pricing models based on usage. | Here are some examples of models you can implement using Metronome, based on tracking token usage:
- **Fixed fee and overage pricing**: You charge £100 per month for usage of up to 100 tokens. If a customer uses more than 100 tokens in a month (overage), you also charge £2 for each token used beyond the initial 100.

  A customer that uses 85 tokens in a month pays £100.

  A customer that uses 105 tokens in a month pays £100 + (5 x £2) = £110.

- **Pay as you go pricing**: You charge a fixed rate for usage tracked over a period. You can charge per unit, per package, volume-based or graduated. If you charge £2 per token:

  A customer that uses 85 tokens in a month pays £170.

  A customer that uses 105 tokens in a month pays £210.

- **Credit burndown pricing**: You collect prepayment for your product or service, and allow customers to apply billing credits as they use your product or service. If you collect £100 from each customer at the beginning of the month, and charge £2 per token used:

  A customer that uses 35 tokens in the month has £100 - (35 x £2) = £30 credit remaining at the end of the month.

  A customer that uses 70 tokens in the month runs out of credit after using 50 tokens, and must purchase at least (20 x £2) = £40 in credit before they can use the 20 remaining tokens they need. |

## Decide how customers check out

Compare the following checkout interfaces and determine how you want your customers to provide their payment information for the subscription to your product or service.

| Interface | Description | Example |
| --- | --- | --- |
| **Stripe-hosted page** | Use a [payment page](https://docs.stripe.com/checkout/quickstart.md) that’s pre-built and hosted by Stripe.

Benefits:

- Stripe handles payment method collection and validation.
- Stripe automatically starts the subscription process.

UI customisation: 20 preset fonts, 3 preset border radiuses, custom background and border colour and custom logo | ![](https://b.stripecdn.com/docs-statics-srv/assets/checkout-subs-preview.d409ee79bf1f3280b9dfd3968b314c21.png) |
| **Embedded payment page** | Embed a [payment page](https://docs.stripe.com/checkout/embedded/quickstart.md) that’s prebuilt and hosted by Stripe directly into your site.

Benefits:

- Stripe handles payment method collection and validation.
- Stripe automatically starts the subscription process.

UI customisation: 20 preset fonts, 3 preset border radiuses, custom background and border colour and custom logo | ![](https://b.stripecdn.com/docs-statics-srv/assets/embedded-checkout-form-preview.23a56550b7d522d8437b2beac672410f.png) |
| **Custom payment form** | Build a [custom payment form](https://docs.stripe.com/payments/advanced.md) using UI components that you can integrate on your website.

Benefits:

- Combines Stripe Elements with the front end of your web app.
- Allows you to customise the Payment Element layout to fit your checkout flow.

UI customisation: Customise the look and feel of the payment form with the [Appearance API](https://docs.stripe.com/elements/appearance-api.md). | ![](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png) |
| **Pricing table** | Embed a [pricing table](https://docs.stripe.com/payments/checkout/pricing-table.md) on your website to show pricing information for subscriptions.

Benefits:

- Displays a range of pricing options.
- Redirects to a Stripe-hosted payment page for the checkout flow.

UI customisation: Customise the button layout, text and appearance. | ![](https://b.stripecdn.com/docs-statics-srv/assets/pricing-table-embed.b27a06fcd84b57a8866a8b4b62323fdc.png) |
| **One-click payment button** | Accept payments through [one-click payment buttons](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md) for various payment methods.

Benefits:

- Allows you to add payment buttons without any front-end changes.
- Dynamically sorts payment buttons based on a customer’s location.
- Supports the following payment methods: Link, Apple Pay, Google Pay, PayPal, Klarna and Amazon Pay.

UI customisation: Customise the button layout, text and appearance. | ![](https://b.stripecdn.com/docs-statics-srv/assets/link-in-express-checkout-element.67be6745e5a37c1c09074b0f43763cff.png) |
| **Payment Link** | Create a [payment link](https://docs.stripe.com/payment-links/create.md) that you can share directly with customers. When customers click the payment link, they’re redirected to a Stripe-hosted payment page.1

Benefits:

- Allows you to accept payments using a payment link that you can share as many times as you want.

- Uses your customer’s preferred browser language.

- Supports more than 20 payment methods, including credit and debit cards, Apple Pay and Google Pay.

- Allows you to customise the UI with 20 preset fonts, 3 preset border radiuses, custom background and border colour, and custom logo | ![](https://b.stripecdn.com/docs-statics-srv/assets/payment-link.4f7ea42c63046f6714ffe620059f1a3c.png) |
| **Mobile app** | Use a payment form that’s pre-built and hosted by Stripe [in your mobile app](https://docs.stripe.com/payments/mobile.md).

Benefits:

- Allows you to use a prebuilt sheet or a customisable drop-in component on any screen in your app.
- Supports wallet payments, such as Apple Pay, Google Pay and Link.

UI customisation: Customise the look and feel of the payment form with the [Appearance API](https://docs.stripe.com/elements/appearance-api.md). | ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-landing.35eb3fe43605b2b982353f4bdac95840.png) |

1Payment links aren’t supported for usage-based billing.

## Decide when you want customers to pay

Compare the following models and determine when you want your customers to pay for the subscription to your product or service.

| Billing model | Description |
| --- | --- |
| **Pay upfront** | Require that your customers pay before you provide access to your product or service.

A typical flow looks like this:

1. Your customer chooses their subscription plan.
2. You collect payment information.
3. You provision access to your product or service.
4. You continue to provision access to the customer throughout the subscription lifecycle.
5. After the initial charge, you continue to charge the customer the same fixed price for the same service at regular periods. |
| **Free trial** | Offer your customers a free trial period for your product or service before billing them.

A typical flow looks like this:

1. Your customer chooses their subscription plan.
2. You collect payment information, but don’t charge the customer.
3. You provision access to your product or service for a limited time.
4. When the trial ends, a new billing period starts.
5. Stripe generates an invoice with the price you defined for your service. |
| **Freemium** | Allow customers access to your product or service without requesting payment information.

A typical flow looks like this:

1. Your customer chooses their subscription plan.
2. You provision access to your product or service for a limited time.
3. Before the trial ends, you collect payment information.
4. When the trial ends, a new billing period starts.
5. Stripe generates an invoice with the price you defined for your service. |

## Build your subscriptions integration

| Pricing model | Checkout interface | Billing model | Use case | Instructions |
| --- | --- | --- | --- | --- |
| Flat rate | Payment page or embedded form | Free trial | You want to offer a free trial period for your subscription and collect a payment method to use after the trial ends. Use either a Stripe-hosted page, a Stripe-hosted payment form that’s embedded in your checkout flow, or your custom payment form. | Start a free trial period using a [Stripe-hosted page](https://docs.stripe.com/payments/checkout/free-trials.md?payment-ui=stripe-hosted), an [embedded payment page](https://docs.stripe.com/payments/checkout/free-trials.md?payment-ui=embedded-page) or a [custom payment form](https://docs.stripe.com/payments/checkout/free-trials.md?payment-ui=embedded-components) |
| Usage-based | Payment page, embedded form, or mobile app |  | You want to charge customers based on their usage of your product or service. Collect payment information using either a Stripe-hosted page, a Stripe-hosted payment form that’s embedded in your checkout flow, your custom payment form, or a payment form in your mobile app. | [Set up usage-based billing](https://docs.stripe.com/billing/usage-based.md) |
| Flat rate, per-seat, or tiered | Pricing table | Free trial | You want to display different subscription pricing levels in a pricing table that’s embedded on your website. You can offer a flat rate, per-seat or tiered pricing, or a free trial. After choosing a pricing level, customers can provide their payment information in a prebuilt payment form. | Create and [embed a pricing table](https://docs.stripe.com/payments/checkout/pricing-table.md) on your website |
| Flat rate | Payment link | Pay up front | You want to sell subscriptions for a flat rate, and collect payment information using a payment link that you share with your customers. The payment link redirects to a Stripe-hosted payment page.2 | [Create your subscription](https://docs.stripe.com/no-code/subscriptions.md) and then [create a payment link](https://docs.stripe.com/payment-links/create.md?pricing-model=standard) for your subscription |
| Flat rate | Mobile app | Pay up front | You want to sell subscriptions for a flat rate. Collect payment information using a custom payment form that’s embedded in your mobile app. | Create and embed a payment form in your [iOS app](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=mobile&platform=ios), [Android app](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=mobile&platform=android), or [React Native app](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=mobile&platform=react-native) |
| Flat rate | One-click payment buttons | Pay up front | You want to sell subscriptions for a flat rate. Collect payment information using one-click payment buttons on either a Stripe-hosted payment page, a Stripe-hosted payment form that’s embedded in your checkout flow, or your custom payment form. | [Add one-click payment buttons](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md) on your checkout page |

2Payment links aren’t supported for usage-based billing.