LIFFとStripe CheckoutでLINE上で使える決済画面を作るよ

LINE上でLINE Pay以外の方法で決済をしたいというクライアント様のご要望があり、LIFFとStripeを絡めたサンプルを作ってみました。この組み合わせはあまり記事が無かったので記録として残しておきます。

今回は、Stripeの決済にLINEのユーザーIDをメタデータとして乗せてみます。
StripeのGithubにあがっていたサンプルをLIFF向けに少し修正しました。

出来上がったもの

デモサイト
LINEが立ち上がります。
テスト用のカード4242-4242-4242-4242を使って決済の流れをご確認頂けます。カード有効期限とCVC、所有者名、メールアドレスは適当でokです。

Herokuの無料プランなので遅いです。⇒Firebaseにお引越ししました。

開発環境

Node.js

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のリポジトリを公開してますので、そちらを落としてみてください。

$ git clone https://github.com/kota-imai/liff-stripe-checkout-sample.git
$ cd liff-stripe-checkout-sample

↓プロジェクトの依存パッケージをダウンロードします

$ npm install

↓プロジェクト内のファイルを2か所、先ほど控えたご自身のIDに書き換えて頂く必要があります。

.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/index.js (1行目)

const liffId = (作成したLIFFアプリのLIFF ID)

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の値もこちらと合わせてください。

決済してみる

↓サーバーを起動します。

npm start

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

宣伝

chrome拡張を公開してます。良かったら使ってみてください