LINE上でLINE Pay以外の方法で決済をしたいというクライアント様のご要望があり、LIFFとStripeを絡めたサンプルを作ってみました。この組み合わせはあまり記事が無かったので記録として残しておきます。
今回は、Stripeの決済にLINEのユーザーIDをメタデータとして乗せてみます。
StripeのGithubにあがっていたサンプルをLIFF向けに少し修正しました。
出来上がったもの
デモサイト
テスト用のカード4242-4242-4242-4242を使って決済の流れをご確認頂けます。カード有効期限とCVC、所有者名、メールアドレスは適当でokです。
Herokuの無料プランなので遅いです。LINEが立ち上がります
開発環境
Node.js v11.13.0
LINE側の設定
まずはLINE Developersからチャンネルを作成します。LINEログインのチャンネルにLIFFアプリを登録していきます。
認証するときに必要ですので、Scopeのopenidにチェックを入れることをお忘れなく。
エンドポイントURLはひとまず適当で大丈夫です（後から直せます）
チャネルIDとLIFF IDを控えておいてください。
LIFF IDはLIFFアプリ作成後に付与されます。
Stripe側の設定
次にStripeのダッシュボードから定期支払いの商品を作成します。
詳細欄の商品ID（prod_XXXXXX）と料金欄の価格ID（price_XXXXXXXX）、ホーム画面で確認できる公開可能キー（pk_XXXXXXX）とシークレットキー（sk_XXXXXXX）を控えておいてください。
サーバーの設置
コードはGitHubのリポジトリを公開してますので、そちらを落としてみてください。
↓まずはプロジェクトの依存パッケージをダウンロードします
npm install
↓プロジェクト内のファイルを2か所、先ほど控えたご自身のIDに書き換えて頂く必要があります。
今回は使用しませんのでWebhook Secretはそのままで大丈夫です
.env
# Stripe keys
STRIPE_PUBLISHABLE_KEY=(Stripeの公開可能キー)
STRIPE_SECRET_KEY=(Stirpeのシークレットキー)
# Required to run webhook
# See README on how to use the Stripe CLI to setup
STRIPE_WEBHOOK_SECRET=whsec_1234
# Checkout options
DONATION_PRODUCT_ID=(作成した定期支払い商品のID)
SUBSCRIPTION_PRICE_ID=(価格ID)
# ex.https://amabot-payment.herokuapp.com
DOMAIN=(デプロイ先のドメイン)
# Environment variables
STATIC_DIR=client
# LINE
CHANNEL_ID=(LINE Developersで設定したチャネルID)
client/liff.js (1行目)
constliffId=(作成したLIFFアプリのLIFFID)LINEのユーザー情報の取り扱いに注意！！
クライアント側で取得したユーザー情報をサーバーに送ることは公式で禁止されています。
今回はクライアント側でIDトークンを発行して、サーバーサイドでトークンの検証を行いユーザー情報を取得するようにしました。
https://developers.line.biz/ja/docs/liff/using-user-profile/
https://developers.line.biz/ja/reference/line-login/#verify-id-token
最後にLINE DevelopersのLIFFアプリ詳細からエンドポイントURLをご自身のものに書き換えます。
ここが厄介なのですが、LIFFアプリのエンドポイントURLはhttpsでないと登録できないのでご注意ください。
ローカルでデバックする際はngrok経由で動きを確認する方が多いようですね。
私はそのままherokuにデプロイしてしまいました。
なお、.envファイルのDOMAINの値もこちらと合わせてください。
サーバー起動
↓サーバーを起動します。
node server.js
LIFFアプリのURLを開くと決済画面が立ち上がるかと思います。
決済してからStripeのダッシュボードを確認してみると、、
処理が成功しています。メタデータのユーザーIDも登録されてました！
参考にしたサイト
あまり情報がなかったので公式ドキュメント中心です
https://developers.line.biz/ja/reference/line-login/
https://developers.line.biz/ja/docs/liff/using-user-profile/
https://stripe.com/docs/api/checkout/sessions/create
https://support.stripe.com/questions/using-metadata-with-checkout-sessions