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

![https___qiita-image-store.s3.amazonaws.com_0_71113_9a76fa60-ccff-afc6-b374-1a7a444c4a8b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/65f14c9d-3b19-8aed-2eaa-215701ff4598.png)

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

今回は、Stripeの決済にLINEのユーザーIDをメタデータとして乗せてみます。
[StripeのGithub](https://github.com/stripe-samples/checkout-subscription-and-add-on)にあがっていたサンプルをLIFF向けに少し修正しました。

## 出来上がったもの

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

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





## 開発環境


Node.js




## LINE側の設定

まずは[LINE Developers](https://developers.line.biz/ja/) からチャンネルを作成します。LINEログインのチャンネルにLIFFアプリを登録していきます。

認証するときに必要ですので、Scopeのopenidにチェックを入れることをお忘れなく。
エンドポイントURLはひとまず適当で大丈夫です（後から直せます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/60fcb064-2f13-fe6a-c229-2f0eea1330c5.png)


**チャネルID**と**LIFF ID**を控えておいてください。
LIFF IDはLIFFアプリ作成後に付与されます。



## Stripe側の設定

次に[Stripe](https://dashboard.stripe.com/dashboard)のダッシュボードから定期支払いの商品を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/eb27953a-b718-4237-08be-862f6741eb78.png)
詳細欄の**商品ID**（prod_XXXXXX）と料金欄の**価格ID**（price_XXXXXXXX）、ホーム画面で確認できる**公開可能キー**（pk_XXXXXXX）と**シークレットキー**（sk_XXXXXXX）を控えておいてください。



## サーバーの設置

コードは[GitHubのリポジトリ](https://github.com/kota-imai/liff-stripe-checkout-sample)を公開してますので、そちらを落としてみてください。

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

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

```
$ npm install
```

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

**.env**

```.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行目)**

```javascript
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のダッシュボードを確認してみると、、


![20200728093917.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594998/47bf7881-9853-bc57-c420-a4592150150b.jpeg)
処理が成功しています。メタデータのユーザー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拡張を公開してます。良かったら使ってみてください

https://chrome.google.com/webstore/detail/simple-aws-launcher/odbbkogjmgpmdfindgkngoojldhephif?hl=en