Stripeが面倒なのでAutumnを活用してSaaSの決済を実装してみた

Stripeはクレジットカード決済サービスとしては最も有名でもはやスタンダードとなっています。

しかし、Stripeは機能が多いぶん、仕様やドキュメントがかなり複雑で見づらく、慣れるまではなかなか難しいです。

ただ単にサブスク決済を実装したいという場合には、Stripeのドキュメントを読むのはかなり面倒です。

そこで、今回はStripe決済の実装をラクにしてくれるAutumnを活用して決済を実装してみました。

Autumnとは

Autumnは、Stripe決済の実装をラクにしてくれるサービスです。とくにSaaSのサブスクリプション決済に特化しています。

https://useautumn.com/

たとえば、いくつかのプランを用意して、それぞれのプランの利用量が決まっている場合、プランごとにかんたんに制限をかけられる機能があります。

Stripeでの登録は必須ですが、StripeのシークレットキーをAutumnに設定するだけで、あとはAutumnのドキュメントに従って実装するだけです。

裏側のStripeの決済はAutumnが管理してくれます。

Autumnの特徴

• シンプル
• 簡単
• SaaS向けの機能だけがそろっていて便利
• 基本的にはCheckout, Check, Track, Billing Portalの4つの関数でSaaS向けの決済を実装できる
• StripeのWebhook管理が不要

実装方法

1. 環境変数の設定

Autumnのシークレットキーを環境変数に設定します。

AUTUMN_SECRET_KEY=am_sk_live_example

am_sk_live_exampleは、あなたが取得したAutumnのシークレットキーに置き換えてください。

2. プランの設定

Stripeを使う場合でも同じことをしますが、Autumnのほうがだいぶラクです。

Autumnは autumn.config.ts にプランを設定します。

（configファイルを作らなくても、AutumnのWeb管理画面でも設定できます。個人的にはそのほうがラクでした。）

configファイルは以下のステップで作成します。

1. CLI

npx atmn init

これで autumn.config.ts が作成されます。

2. configファイルを編集する

私はクレジット制にしたかったので以下のように書きました。

import { feature, featureItem, pricedFeatureItem, priceItem, product } from "atmn";
 
// Features
export const credits = feature({
  id: "credits",
  name: "Credits",
  type: "single_use",
});
 
// Products
export const free = product({
  id: "free",
  name: "Free Plan",
  items: [
    featureItem({
      feature_id: aiCredits.id,
      included_usage: 3,
      interval: "day",
    }),
  ],
});
 
export const lite = product({
  id: "lite",
  name: "Lite Plan",
  items: [
    priceItem({
      price: 550,
      interval: "month",
    }),
 
    featureItem({
      feature_id: aiCredits.id,
      included_usage: 100,
      interval: "day",
    }),
  ],
});

3. configファイルをデプロイする

npx atmn push

これでプランがデプロイされます。

なお、既にAutumnのWeb管理画面でプランを作成している場合は、npx atmn pull を実行すると、Web管理画面のプランをローカルのconfigファイルに反映させることができます。

3. 決済をおこなう

Autumnは autumn.checkout で決済URLを取得して返すことができます。

import { Autumn } from "autumn-js";
 
const autumn = new Autumn({ secretKey: "am_sk_..." });
 
const { data } = await autumn.checkout({
  customer_id: "user_id_or_workspace_id",
  product_id: "lite",
});

あとはクライアントでそのURLにリダイレクトさせるだけです。

4. 利用可能かどうかをチェックする

autumn.check で利用可能かどうかをチェックできます。

import { Autumn as autumn } from "autumn-js";
 
// check feature access
const { data } = await autumn.check({
  customer_id: "user_id_or_workspace_id",
  feature_id: "credits",
});
if (!data.allowed) {
  console.log("No more credits!");
  return;
}

5. 利用量を計測する

autumn.track で利用量を記録できます。

AI相談.comでは、AI生成が成功した場合に autumn.track を呼び出して利用量を計測しています。

import { Autumn as autumn } from "autumn-js";
 
await autumn.track({
  customer_id: "user_id_or_workspace_id",
  feature_id: "credits",
  value: 1,
});

6. 請求管理ページ（カスタマーポータル）を表示する

autumn.customers.billingPortal で請求管理ページ（カスタマーポータル）のURLを取得して返すことができます。

import { Autumn as autumn } from 'autumn-js';
 
const { data } = await autumn.customers.billingPortal('user_id_or_workspace_id', {
  return_url: 'https://example.com/account'
});
 
const billingPortalUrl = data.url;

あとはクライアントでそのURLにリダイレクトさせるだけです。