LINE Pay APIを手軽に試してみた

はじめに

@nkjmさんのある記事の影響を受けて自分もLINE PayのAPIを試してみました。LINE APIとは何か、その導入方法とは？についての内容は最初に示したリンク先がかなり詳細に書いてあるので省きます。APIを使ったサンプルコードもリンク先の記事のものを使いました。
なのでコードの詳細は記事を見てもらうとして、私の方では以下の２つだけ変更してもう少し気軽に使ってみました。

• ngrokでデプロイ環境なしでhttpsサーバーを立てた
• 直接LIFFに組み込んでリッチメニューから決済画面を起動してみた

ngrokでhttpsサーバーを立ててみた

ngrokについての解説などは既にいくつか記事があります。とりあえず簡単に説明するとFirebaseとかAWS,Herokuにデプロイしなくてもhttpsのサーバーがローカルで立てられるツールです。導入方法はいくつかあるみたいですが、npmにもあるのでそこから

npm install ngrok -g

でインストールしてしまえばすぐに使えます。起動方法も、

ngrok http 5000

と打ってしまえば一発です。そしたら↓のような感じの結果が表示されます。

Session Status                online
Session Expires               7 hours, 36 minutes
Update                        update av9 minutes ersion 2.3.34, Ctrl-U to update)
Version                       2.3.27Region                        United States (us)Web Interface                 http://127.0.0.1:4040
Forwarding                    http://XXXXX.ngrok.io -> http://localhost:5000
Forwarding                    https://XXXXX.ngrok.io -> http://localhost:5000

とりあえず必要なのは一番下のhttps://XXXXX.ngrok.ioです。このURLを獲得したら、この記事の内容で設定した環境変数を少しいじります。

/.env

LINE_PAY_CHANNEL_ID=YOUR ID
LINE_PAY_CHANNEL_SECRET=YOUR SECRET
LINE_PAY_CONFIRM_URL=https://XXXXX.ngrok.io/pay/confirm

LINE_PAY_CONFIRM_URLにさっき取得したURL＋/pay/confirmのものを設定します。後、記事の方ではLINE_PAY_HOSTNAME=プロキシのホスト名を設定していましたが、テストしてみるだけだったら今回は不要です。

リッチメニューから決済画面のLIFFを呼び出す。

リッチメニューからLIFFの起動については偶々書いた記事がありました。参考にしてみてください。
ただ、この記事だとリッチメニューの登録をcurlでコマンド打ってやってましたが（この頃あまりLINE APIよくわかってなかった）、別にLINE Official Acount Managerというところからサイト上のGUIでできるのでそっちの方が楽だと思います。また、リッチメニューの登録には画像が必要になります。特にこだわりなければ適当に作ったものを置いておくので使ってください。サイズは2500*1686です。

動作結果

最初はこんな感じでリッチメニューが立ち上がります（なんとも雑）。

メニューをタップしてLIFFが起動して決済方法の選択画面に移ります（といってもLINE Payのみ）。

LINE Payを選んで決済画面に移ります。LIFF上だと最初からログインされているので楽ですね。

決済に成功したらこんな感じの画面になります。

最後に

LINE Payを実際に導入する場合は加盟店の登録が必要になるみたいですが（こちらを参照）、Sandbox（要はテスト環境）で使うだけなら特に面倒な手続きはいりません（こちらを参照）。
今回は購入するものを「チョコレート」とハードコーディングしていましたが、折角なのでUI上のメッセージのやり取りから買い物かごリストを作るとかやってみたいですね。