LIFFとStripe Checkoutで決済画面を作るときの個人的Tips

LIFFとは

LIFF（LINE Front-end Framework）とは、LINEのアプリ上で動くWebアプリのプラットフォームのことです。LIFFを使用するとLINEのユーザー情報を取得したり、トークルームにメッセージを送ったりできます。

1. LINEログインのユーザー情報を使う

特にサブスクリプション決済をする場合は、各ユーザーの支払いステータスを追うため、認証機能の実装が必要になります。LIFFを使うとユーザーはすでにLINEにログインしている状態なので、LINEログインのユーザー情報を使用できます。

getDecodedIDToken()という関数で、ユーザーの表示名、プロフィール画像のURL、メールアドレスなどの情報を取得できます。
https://developers.line.biz/ja/reference/liff/#get-decode-id-token

メールアドレスの取得は、チャネル毎に申請が必要となります。
LINE Developersから申請した後、LIFFのemailスコープを有効にしてください。

2. 決済時のメールアドレス入力を省く

Stripe.jsからCheckoutを生成する時に、上で取得したメールアドレスをcustomerEmailというパラメータに渡すとCheckout画面のメールアドレス欄にPrefillされた状態でリダイレクトされます。
https://stripe.com/docs/js/checkout/redirect_to_checkout

ユーザーの入力の手間を減らしてコンバージョン率を高めましょう。

stripe.redirectToCheckout({
  lineItems: [{price: '<YOUR_PRICE_ID>', quantity: 1}],
  mode: 'subscription',
  successUrl: `${location.href}/success?id={CHECKOUT_SESSION_ID}`,
  cancelUrl: `${location.href}/cancel`,
+ customerEmail: email, // LINEから取得したメールアドレス
  clientReferenceId: userId,
  locale: "ja",
  submitType: "pay"
})

3. LINEのユーザーIDをStripeのリソースに紐づける

Checkoutセッションの生成時にclientReferenceIdというパラメータにユーザーIDを渡すことで、CheckoutオブジェクトにLINEのユーザーIDを乗せることができます。

stripe.redirectToCheckout({
  lineItems: [{price: '<YOUR_PRICE_ID>', quantity: 1}],
  mode: 'subscription',
  successUrl: `${location.href}/success?id={CHECKOUT_SESSION_ID}`,
  cancelUrl: `${location.href}/cancel`,
  customerEmail: email,
+ clientReferenceId: userId,  // LINEのユーザーID
  locale: "ja",
  submitType: "pay"
})

サーバーサイドでCheckout セッションを生成する場合は、クライアント(LIFF)側でIDトークンを取得してサーバーに送り、サーバー側でトークン検証をしてプロフィール情報を取得する実装にしてください。
-> LIFFアプリおよびサーバーでユーザー情報を使用する | LINE Developers

LINEのユーザーとStripeのCustomerリソースの紐づけをするときは以下のような手順で可能です。

• Webhookハンドラーを設置してcheckout.session.completedイベントを処理
• clientReferenceId からLINEのユーザーIDを取得
• Search API で同一のユーザーIDを持ったCustomerリソースがすでに作成されているかチェック
• なければCustomerリソースを新しく作成

または、LINE MessagingAPIのWebhookでFollowイベント（友だち追加時）を受け取れるので、そのときにStripe側に対応するCustomerを作ってもいいと思います。この方法はユーザーとStripeのCustomerを１対１で作ることができて理想的ではありますが、無料ユーザー分もCustomerができてしまうので管理が少し大変になります。
-> フォローイベントについて

Customer作成のタイミング別のメリットデメリットはStripe社の岡本さんの記事がとても分かりやすいので、そちらをご参照下さい。

4. CheckoutのURLを独自ドメインに変更する

オプションで月額10ドル課金するとCheckoutの決済画面を独自ドメインに変更できます。
デフォルトは checkout.stripe.com です
-> カスタムドメインを使用する | Stripe のドキュメント

5. ボットリンク機能を有効にする

ボットリンク機能を有効にすることで、LIFFアプリの権限要求時に公式アカウントの友だち登録を促します。決済機能を付けたいLINE公式アカウントと紐づけることでMessaging APIを使って販促を行えます。
-> LINEログインしたときにLINE公式アカウントを友だち追加する（ボットリンク） | LINE Developers

サンプルアプリ

• サンプルアプリ(LINEが立ち上がります)
• ソースコード(GitHub)

まとめ

サブスクリプションの支払いステータス管理には会員登録やログインが必須になります。
そこで、LIFFを併せて使用することで会員登録・ログインをシームレスにできる & LINEログインのユーザー情報を使う ことができます。
LIFFとStripeはとても相性が良いので、ぜひ試してみて下さい😆