Build a subscriptions solution for an AI startup with a usage-based pricing model

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.

Before processing live transactions, test your integration with Stripe’s testing tools, including sandboxes and test clocks. Set these up early so you can iterate and tune your integration before going live.

Create a sandbox

First, create a sandbox. Configure the sandbox to match your live mode configuration, so you can test and stage changes on an ongoing basis.

Create a test clock

Next, create a test clock to simulate the forward movement of time in sandbox. As you increment the test clock, resources such as Subscriptions change state and trigger webhook events.

1. In the Stripe Dashboard, go to the test clocks page in the Dashboard.
2. Click + New simulation.
3. In the Create new simulation modal, enter a name for the simulation. You can use this to describe the simulation you’re testing, like Annual renewal or Free trial.
4. Set the frozen time of the clock. This is the starting point for your simulation. You can set this to a time in the future or in the past, but you can only move it forward in time after you set it.

To simulate subscription scenarios, click the Add dropown and select Customer. You only need to enter a name for the customer but for some scenarios, like tax collection and calculation, you need to add other information, like billing and shipping addresses.

Next, click the Add dropown and select Subscription. Configure the subscription to suit your scenario.

You can add additional customers and subscriptions to follow the rest of this guide.

In this example, Alpaca AI charges customers for access to their LLM services by using a fixed fee and overages pricing model, with the following rates:

To implement this model, you create a meter to record the usage, products and prices to represent your service, a customer, and a customer subscription.

Create a meter

メーターは、請求期間中のメーターイベントを集計する方法を指定するものです。メーターイベントは、顧客がシステムで実行するすべてのアクション (API リクエストなど) を表します。メーターは料金に関連付けられており、請求内容の基礎になります。

Alpaca AI の例では、メーターイベントは顧客がクエリで使用するトークンの数です。メーターは 1 カ月あたりのトークンの合計です。

Stripe ダッシュボードまたは API を使用してメーターを設定できます。Stripe CLI で API を使用してメーターを作成するには、Stripe CLI を始める を参照してください。

Create the pricing model

Stripe ダッシュボードまたは API を使用して、商品 とその料金オプションを含む 料金体系モデル を作成します。価格 は、単価、通貨、請求期間を定義します。

Alpaca AI の例では、100 ユニットあたり 0.04 USD の従量制料金で、月ごとに請求を行う商品を作成します。前のステップで作成したメーターを使用します。

次に、100 USD 月額料金を作成します。

To set up a promotion code, you create a coupon and promotion code, then apply the promotion code to a subscription.

Create a coupon

クーポンは、ダッシュボードまたは API で作成します。

Set eligible products

When you make changes to a subscription, Stripe calculates the proration and applies any existing discounts. You can’t discount proration line items further on the invoice that’s generated.

Apply coupons to subscriptions

クーポンを作成したら、サブスクリプションにクーポンを適用して割引を作成します。サブスクリプションを作成する際、または顧客の既存のサブスクリプションを更新する際にクーポンを適用できます。

You can still create a subscription when a customer doesn’t have a stored payment method if no immediate payment is required after you apply coupons to it.

Apply coupons to Checkout

Checkout セッションでサブスクリプションにクーポンを適用する場合、API の discounts パラメーターを設定します。適用された割引でセッションを作成するには、discounts 配列の coupon パラメーターにクーポン ID を渡します。

curl https://api.stripe.com/v1/checkout/sessions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"=card \
  -d "line_items[][price]"=
"{{PRICE_ID}}" \
  -d "line_items[][quantity]"=1 \
  -d mode=subscription \
  -d "discounts[][coupon]"="{{COUPON_ID}}" \
  -d success_url="https://example.com/success" \
  -d cancel_url="https://example.com/cancel"

Use Stripe Elements and the Checkout Sessions API to build a checkout page as part of a fully customized subscriptions integration.

To set up a subscription you need to create a Customer. You can collect address and payment details with the Express Checkout Element. Then, you can use that information to create the subscription with the Checkout Sessions API.

Set up Stripe

Install the Stripe client of your choice:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

And then install the Stripe CLI. The CLI provides webhook testing and you can run it to make API calls to Stripe. This guide shows how to use the CLI to set up a pricing model.

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

その他のインストールオプションについては、Stripe CLI を使ってみるをご覧ください。

Create a Customer

Stripe では各サブスクリプションに対して 顧客が必要です。 アプリケーションのフロントエンドで、ユーザーから必要な情報を収集し、それをバックエンドに渡します。

住所の詳細を収集する必要がある場合は、Address Element を使用することで顧客の配送先住所または請求先住所を収集できます。Address Element の詳細については、Address Element ページをご覧ください。

<form id="signup-form">
  <label>
    Email
    <input id="email" type="email" placeholder="Email address" value="test@example.com" required />
  </label>

  <button type="submit">
    Register
  </button>
</form>

const emailInput = document.querySelector('#email');

fetch('/create-customer', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: emailInput.value,
  }),
}).then(r => r.json());

サーバー上で、Stripe Customer オブジェクトを作成します。

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}} \
  -d "shipping[address][city]"=Brothers \
  -d "shipping[address][country]"=US \
  -d "shipping[address][line1]"="27 Fredrick Ave" \
  -d "shipping[address][postal_code]"=97712 \
  -d "shipping[address][state]"=CA \
  -d "shipping[name]"={{CUSTOMER_NAME}} \
  -d "address[city]"=Brothers \
  -d "address[country]"=US \
  -d "address[line1]"="27 Fredrick Ave" \
  -d "address[postal_code]"=97712 \
  -d "address[state]"=CA

Enable payment methods

デフォルトでは、Stripe は 決済手段設定 を使用して、Express Checkout Element で有効になっている決済手段を決定します。payment_method_types 属性を使用して、Checkout Session で特定の決済手段を設定することもできます。

サポートされている決済手段

決済手段タイプ card を使用すると、Apple Pay と Google Pay が自動的に有効になります。Link を使用する場合は、必ず card 決済手段タイプも渡します。

Create the Checkout Session

On the back end of your application, define an endpoint that creates the session for your front end to call. You need the price ID of the subscription the customer is signing up for—your front end passes this value.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription

Initialize Checkout

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}

<div id="checkout-container"></div>

Set up a trial period

To offer a free 7-day trial period of your service, pass in trial_period_days when you create the Checkout Session.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d ui_mode=custom \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d return_url={{RETURN_URL}} \
  -d mode=subscription \
  -d "subscription_data[trial_period_days]"=7

Set up Stripe Elements

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckout({
  clientSecret
});

Create and mount the Express Checkout Element

Express Checkout Element には、HTTPS 接続を介して決済情報を Stripe に安全に送信する iframe が含まれています。導入を機能させるには、決済ページのアドレスの先頭を https://, ではなく http://, にする必要があります。

<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');

Collect customer details and display line items

サーバーで作成した Checkout Session によって、項目、合計金額、利用可能な決済手段が自動的に決定されます。Express Checkout Element はこの情報を使用して、適切なインターフェイスを表示します。

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}

expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

Submit the payment

<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

To set up your back-end logic, you need to set up an endpoint that can listen for webhook events sent by Stripe. These events are triggered whenever the status in Stripe changes, such as subscriptions creating new invoices. In your application, set up an HTTP handler to accept a POST request containing the webhook event, and verify the signature of the event.

During development, use the Events tab in Workbench to monitor and filter events.

For production, set up a webhook endpoint URL in the Dashboard, or use the Webhook Endpoints API.

See Subscription events for more details about subscription-specific webhooks.

Grant customers access to your service upon successful payment. In most cases, you can provision access to you service when:

• You receive the invoice.paid event.
• The subscription status is active. You can check the status in the Subscriptions page in the Dashboard or by using the API to retrieve the subscription and checking the status field.

For more details about subscription-specific webhooks, Subscription events.

Test your integration before going live.

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.