1-1. LINE Payのサンドボックス環境を作成する

下記URLからサンドボックス環境を作成します。
https://pay.line.me/jp/developers/techsupport/sandbox/creation?locale=ja_JP

メールアドレスを入力して[Submit]ボタンをクリックします。
s100

1-2. LINE Pay Homeにログインする

設定したメールアドレスにログインするためのIDとパスワードが送られてきます。
LINE Pay Home 部分をクリックして、ログインします。

https://pay.line.me/login/

s101

メールに記載されているIDとパスワードでログインします。

s102

左側メニューの決済連動管理にある、連動キー管理をクリックして、メールに記載されているパスワードを入力してから、[確認]ボタンをクリックします。

s103

1-3. IDとSecret Keyをメモする

Channel IDChannel Secret Key の値をそれぞれメモしておきます。

s104

2-1. GitHubからプロジェクトを取得する

ローカルの環境にプロジェクトを構築して実際の決済処理の動きを確認してみましょう。GitHubからクローンしてきます。
コマンドプロンプトやPowerShellを開いて下記コマンドを実行してください。

> cd %homepath%\Documents
> git clone https://github.com/gaomar/winactor-linepay-local.git

2-2. WinActorのショートカットを作成する

WinActorを起動して、[設定]- [起動ショートカット作成]をクリックします。

s200

ドキュメントフォルダの winactor-linepay-local フォルダにある callMemo.ums6 ファイルを選択します。
実行オプションは2つ共チェックを入れてください。[作成]ボタンをクリックします。

s201

保存先は winactor-linepay-local フォルダの直下に保存しておいてください。
ファイル名は callMemo という名前にしてください。

s202

下記のようにショートカットファイルが作成されていることを確認してください。

s203

2-3. Visual Studio Codeに展開する

下記コマンドを実行してください。

> code winactor-linepay-local

Ctrl + @ を押してターミナルを表示します。

s204

下記コマンドを実行してインストールしてください。

> npm install

2-4. プログラムを実行する

必要なモジュールがインストールできたら、プログラムを起動します。
下記コマンドを実行してください。

> node index.js

Server running on 3000 と表示されればOKです。

s205

2-5. ngrokインストール

ngrokがまた未インストールの方は下記コマンドを実行してください。

> npm i -g ngrok

2-6. ngrok起動

まず、VSCodeでウィンドウを分割します。
インストール済みの方は下記コマンドを実行してngrokを起動してください。

> ngrok http 3000 

s206

起動したら発行される https:// 側のURLをメモしておきます。

s207

3-1. Visual Studio Codeに展開する

コマンドプロンプトかPowerShellで下記コマンドを実行してください。
別のプロジェクトをダウンロードしてきます。

> git clone https://github.com/gaomar/winactor-linepay-vue.git
> code winactor-linepay-vue

Visual Studio Codeが起動するので、Ctrl + @ を押してターミナルを表示します。

3-2. モジュールをインストールする

必要なモジュールをインストールします。
Visual Studio Codeのターミナルウィンドウで、下記コマンドを実行してインストールしてください。

> npm install

3-3. 環境変数にLINE Payの設定をする

.envというファイルに環境変数を設定します。

VUE_APP_LINE_PAY_CHANNEL_ID

1-3で取得した Channel ID

VUE_APP_LINE_PAY_CHANNEL_SECRET

1-3で取得した Channel Secret Key

VUE_APP_WINACTOR_URL

2-6で取得したngrokのURL

s300

3-4. プログラムを実行する

ターミナルに下記コマンドを入力します。

> npm run lambda
Lambda server is listening on 9000 ← これが表示されればOK

ターミナルを分割して、下記コマンドを実行します。

> npm run serve

s301

ChromeブラウザかFirefoxブラウザで下記URLにアクセスします。

http://localhost:8080/

s302-1

s302-2

s302-3

s302-4

LINE Payボタン押下

LINEアプリでQRコード読み取る

PAY NOWボタン押下

決済完了

決済が完了するとメモ帳が自動起動して、「LINE Pay 決済完了」と表示されます。

s303