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スコープを有効にしてください。
<a href="https://gyazo.com/5bb6e9ae9bb85a79e784514ed8e2bef3"><img src="https://i.gyazo.com/5bb6e9ae9bb85a79e784514ed8e2bef3.png" alt="Image from Gyazo" width="484"/></a>


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


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

```diff_Javascript
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"
})
```

<img width="400" alt="mojikyo45_640-2.gif" src="https://i.gyazo.com/cc9a3334c8a6a204d2842e41375f85a4.png">

## 3. LINEのユーザーIDをStripeのリソースに紐づける
Checkoutセッションの生成時に`clientReferenceId`というパラメータにユーザーIDを渡すことで、CheckoutオブジェクトにLINEのユーザーIDを乗せることができます。

```diff_Javascript
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"
})
```

:::note
サーバーサイドでCheckout セッションを生成する場合は、クライアント(LIFF)側でIDトークンを取得してサーバーに送り、サーバー側でトークン検証をしてプロフィール情報を取得する実装にしてください。
-> [LIFFアプリおよびサーバーでユーザー情報を使用する | LINE Developers](https://developers.line.biz/ja/docs/liff/using-user-profile/#use-user-info-on-server)
<a href="https://gyazo.com/82b1b30634a7d5d29a8e6f2ec5ebc1df"><img src="https://i.gyazo.com/82b1b30634a7d5d29a8e6f2ec5ebc1df.png" width="80%" alt="Image from Gyazo" width="556"/></a>
:::

LINEのユーザーとStripeのCustomerリソースの紐づけをするときは以下のような手順で可能です。
- Webhookハンドラーを設置して`checkout.session.completed`イベントを処理
- clientReferenceId からLINEのユーザーIDを取得
- [Search API](https://stripe.com/docs/api/customers/search) で同一のユーザーIDを持ったCustomerリソースがすでに作成されているかチェック
- なければCustomerリソースを新しく作成

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

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

https://qiita.com/hideokamoto/items/4e1c64da1dd227b09733

## 4. CheckoutのURLを独自ドメインに変更する
オプションで月額10ドル課金するとCheckoutの決済画面を独自ドメインに変更できます。
デフォルトは `checkout.stripe.com` です
-> [カスタムドメインを使用する | Stripe のドキュメント](https://stripe.com/docs/payments/checkout/custom-domains)

## 5. ボットリンク機能を有効にする
ボットリンク機能を有効にすることで、LIFFアプリの権限要求時に公式アカウントの友だち登録を促します。決済機能を付けたいLINE公式アカウントと紐づけることでMessaging APIを使って販促を行えます。
-> [LINEログインしたときにLINE公式アカウントを友だち追加する（ボットリンク） | LINE Developers](https://developers.line.biz/ja/docs/line-login/link-a-bot/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/e27f2f95-9150-70e8-6097-6f4819fd2aeb.png)

## サンプルアプリ

- [サンプルアプリ(LINEが立ち上がります)](https://liff.line.me/1655194342-9oALq1yA)
- [ソースコード(GitHub)](https://github.com/kota-imai/LIFF-Stripe-Checkout-demo)

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