LINE Payは、LINEのユーザーがLINE Pay加盟店のサイトで利用できる決済システムです。
ユーザーがLINE Payを使って支払いをするには、決済を行うサイトがLINE Pay加盟店である必要があります。

LINE Pay の加盟店申請

個人でも加盟店申請できる

LINE Pay の加盟店になるには法人でなくとも大丈夫です。個人で加盟店申請するには、個人事業主として開業届を出して青色申告をしてあればOKです。
LINE Pay 公式の「よくある質問」にも、個人事業主でも加入できると書いてあります。

個人事業主も加入できますか?:よくある質問@LINE Pay

その他、詳しい申請方法は LINE API HANDBOOK の第11章に書いてありますので、ぜひ読んでください!

LINE API HANDBOOK

LINE Payで提供する多様な決済手段(残高、クレジットカード、銀行口座、LINEポイント)と、LINEのユーザー情報(Profile+)を利用することで、決済と注文や配送方法の選択などを簡単に行うことができます。

2-1. Checkout を利用した決済の流れ

Checkout を利用した決済の流れ

1 決済リクエスト

LINE Pay 決済を行う前に、サービスプロバイダーの状態が正常であるかを判断し、決済をリクエストします。
この際、加盟店側は配送方法と送料を照会できるAPI (Inquiry ShippingMethods API) を実装して、LINE Pay 側に提供する必要があります。
リクエスト成功したら、決済完了/払い戻しするまで使用する「取引番号(transactionId)」と、決済を実行する「決済URL(paymentUrl)」が発行されます。

2 承認画面への遷移

「決済URL(paymentUrl)」を利用してユーザーをLINE Pay 決済画面へ遷移させます。

3 ユーザーによる決済方法などの選択・確認

画面が決済URLへ遷移後、ユーザーはLINEアプリの決済画面で注文した商品と決済情報(金額など)を確認し、配送先を指定します。
この際に表示される配送方法は、1 で実装したAPI (Inquiry ShippingMethods API) が提供する配送方法の情報(名称、送料、配送予定日)が表示されます。

4 ユーザーによる決済の承認

ユーザーは配送方法と決済手段を選択し、決済リクエストを承認します。

5 決済リクエスト承認の返却

ユーザーにより決済リクエストが承認されれば、決済リクエスト時に加盟店が指定したconfirmUrl に配送方法と送料の情報が追加されて遷移します。

6 承認実行

加盟店はConfirm API を実行して決済を完了させます。

実際に決済するには加盟店登録が必要ですが、開発して動作を確認するフェーズであればSandbox が利用できます。こちらは下記のURLから申請すると、Sandbox 用のLINE Pay API アカウントが払い出されますので、誰でもすぐに利用できます。

今回のハンズオンでは予めSandbox 環境を準備頂いていますので、下記のステップは不要です。ハンズオン後に、お手元で開発等を行われる際に申請が必要となりますので、ご参照ください。

3-1. LINE Pay Sandboxの申請

Sandbox の申請

こちら からSandbox環境の利用申請ができます。
メールアドレスを入力して「Submit」ボタンを押下するとアカウント情報が払い出されます。

3-2. キー情報の確認

アカウントが払い出されたらLINE Pay コンソール の決済連動管理 > 連動キー管理からChannel ID とChannel Secret Key を確認します。これらの値はLINE Pay のAPI コールに必要になります。
メモしておいてください。
連動キー管理

3-3. 技術ドキュメント

LINE Pay API の詳細な情報は、ここ にあります。

4-1. ngrok を実行する

新規にターミナルまたはコマンドプロンプト(Powershell)を起動して、ngrok を実行する

$ ngrok http 5000

ngrok が起動したら「Forwarding」のURL(HTTPSの方)をメモしておく

ngrok by @inconshreveable                                                                                                                                                                                                                    (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 28 minutes
Update                        update available (version 2.3.34, Ctrl-U to update)
Version                       2.3.18
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxx.ngrok.io -> http://localhost:5000
Forwarding                    https://xxxxxx.ngrok.io -> http://localhost:5000

5-1. LINE Developers にログイン

LINE Developers にアクセスしてログイン
LINE Developers

5-2. プロバイダーを選択

任意のプロバイダーを選択
プロバイダー選択

プロバイダー未作成の人は画面上の「作成」ボタンを押下して新規作成してください。

5-3. チャネルを新規作成

Botのチャネルを作成

チャネル作成

「Messaging API」 を選択

Messaging API

チャネル情報を入力

チャネル情報を入力して、「入力内容を確認する」ボタンを押下する。

チャネル情報の入力例

チャネルの情報を入力

各種規約に同意してチャネルを作成する

各種規約に同意

6-1. チャネル基本情報画面を開く

作成したチャネルを選択してチャネル基本情報画面を開く

チャネルを選択

6-2. Channel Secret をメモしておく

チャネル基本情報画面に表示されているChannel Secret をメモしておく

CopyChannelSecret

CopyChannelSecret

6-3. チャネルアクセストークン を発行してメモしておく

「Messaging API設定」タブ内にある、チャネルアクセストークンの「発行」ボタンを押下して発行し、メモしておく

GenerateToken

6-4. Webhook 設定

「Webhookの利用」のラジオボタンを有効化する

Webhook

6-5. Webhook URL設定

Webhook URL に4-1 でメモした ngrok のURL + /bot を入力して 更新ボタンを押下する

Webhook URL

6-6. 応答設定

LINE公式アカウント機能 の画面右側にある「編集」リンクを押下して、公式アカウントマネージャー画面を開く

公式アカウントマネージャー画面

応答設定画面を開く

公式アカウントマネージャー画面左の「応答設定」を選択して応答設定画面を開く

応答設定

応答設定を下記のように設定する

応答設定

6-7. 作成したBotのチャネルを友だち登録する

LINE Bot へのQR コードをLINEアプリで読み込んで友だち登録する

BotQRCode

LINE Bot へのQR コードは、LINE Developers の「Messaging API 設定」タブにあります

7-1. git clone

ハンズオン用に適当なディレクトリを作成して、そこへソースコードをgit clone する

クローンできたら、ダウンロードしたディレクトリをVisualStucioCode で開いておく

Mac

$ mkdir ~/line-pay-hands-on && cd ~/line-pay-hands-on
$ git clone https://github.com/sumihiro3/hands-on-line-pay-v3.git
$ cd hands-on-line-pay-v3

Windows

> mkdir c:¥tmp¥line-pay-hands-on
> cd c:¥tmp¥line-pay-hands-on
> git clone https://github.com/sumihiro3/hands-on-line-pay-v3.git
> cd hands-on-line-pay-v3

git clone 出来ない場合はリポジトリ内容をZIPファイルでダウンロード

git clone 出来ない場合は、リポジトリのページにアクセスして、ページ右側の「Clone or download」ボタンを押下、「Download ZIP」ボタンを押下してリポジトリのZIPファイルをダウンロードし、適当なディレクトリに展開してください。

DownloadGitZip

8-1. リッチメニューを作成する

Bot の画面に表示するメニュー(リッチメニュー)の表示設定をします

公式アカウントマネージャーの「ホーム」タブ→「リッチメニュー」を選択し、リッチメニューの「作成」ボタンを押下する

リッチメニュー

8-2. リッチメニューの表示設定

リッチメニューのタイトルと、表示期間を入力する

入力例)

リッチメニュー

8-3. リッチメニューのテンプレート設定

リッチメニューの大きさと、ボタン領域・数を設定する

リッチメニュー

コンテンツ設定 の左側にある「テンプレートを選択」を押下して、リッチメニューのテンプレートタイプを選択する

リッチメニュー

今回は右下にある、サイズ小で、ボタン領域が2つあるテンプレートを選択する

8-5. リッチメニューのアクション設定

ユーザーがリッチメニューを押下した際の挙動を設定する

今回は、各領域選択時にテキストメッセージが送信されるように設定する

左側の領域選択時に「アイテム」、右側領域選択時に「カート」というテキストメッセージが送信されるよう、下記のように設定する

リッチメニュー

8-6. リッチメニューの背景画像設定

リッチメニュー領域に表示させる画像を設定する

コンテンツ設定 の左側にある「背景画像をアップロード」を押下して、画像をアップロードする

リッチメニュー

リッチメニュー用の画像は、サンプルプログラムの images/RichMenu.png を利用する

8-7. リッチメニューの保存

すべて設定できていれば、画面したの「保存」ボタンが有効化されるので、ボタンを押下して設定を保存する

リッチメニュー

LINE アプリでBot を表示すると、画面下にリッチメニューが表示されます

9-1. プログラムに必要なモジュールをインストール

$ npm install

9-2. メモしておいた設定を、設定ファイルに記入する

.env_sample ファイルを.env にリネーム し、.env ファイルに設定を記入する

LINE_PAY_CHANNEL_ID=XXXXXXX
LINE_PAY_CHANNEL_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXX
LINE_PAY_USE_CHECKOUT=true
LINE_BOT_CHANNEL_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
LINE_BOT_ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
APP_HOST_NAME=xxxxxxxx.ngrok.io

9-3. プログラムを起動

ターミナルまたはコマンドプロンプトにて、サンプルプログラムをclone (または展開)したディレクトリに移動する。

Mac

$ npm run debug

Windows

> npm run windowsDebug

10-1. LINE Profile+ とは

あらかじめLINE に登録しておいたプロフィール情報を外部のサイトやLINE の関連サイトで利用できるサービスのこと。
LINE Pay のCheckout では、配送先を指定する際に利用できます。

個々のサービスでの登録ではなく、LINE Checkout などを利用したサービスで共通して利用できる情報となるので、煩わしい入力が不要となります。

10-2. LINE Profile+ の設定方法

LINE アプリの「ホーム」→「設定(歯車アイコン)」→「プロフィール」→「LINE Profile+」と遷移すると設定画面が表示されます。

LINE Profile+

上記のLINE Profile+ 画面が表示されるので「はじめる」をタップして、必要な情報を入力します。

LINE Profile+

11-1. 商品を選択する

LINE アプリで作成したBot のトーク画面を開く

リッチメニュー

画面下部のリッチメニューで、左側の「商品を見る」を選択すると商品一覧が表示される

商品一覧

任意の商品の個数を選択すると、カートに投入される

カート

複数の商品をカートに投入し、まとめて決済することもできる

11-2. LINE Pay 決済を体験

カートにある「レジに進む」ボタンを押下すると決済が始まる

カート

「レジに進む」ボタンを押下するとLINE Pay の決済リクエストAPI が実行される

レジが表示されるので、「LINE Pay で決済」ボタンを押下すると、決済リクエストAPI で返された「決済URL(paymentUrl)」のページ(LINE Pay の決済画面)にアクセスする

レジ

LINE Pay の決済画面では選択した商品が表示される

複数選択した場合は、それぞれの数量と金額も表示される

決済画面

また、画面中ほどでお届け先が設定できる

初期値として、LINE Profile+ で設定した氏名などが予め入力されている

お届け先

お届け先の下では配送方法が選択できる

ここに表示されている配送方法は、Inquiry ShippingMethods API を実装することで、加盟店側が配送先や購入品に応じて任意の配送方法を表示することができる

配送方法

配送情報などが問題なければ「XX円を支払う」ボタンを押下して最終確認へ進む

決済承認

内容を確認して「決済」ボタンを押下して決済を承認する

決済完了

決済完了

決済が完了すると、サーバーサイドのConfirm URL へWebhook が送信される

承認実行(confirm API)を行うと決済が完了し、トーク画面へメッセージを送信します(Push API)

決済完了