下記URLからサンドボックス環境を作成します。
https://pay.line.me/jp/developers/techsupport/sandbox/creation?locale=ja_JP
メールアドレスを入力して[Submit]ボタンをクリックします。
設定したメールアドレスにログインするためのIDとパスワードが送られてきます。LINE Pay Home
部分をクリックして、ログインします。
メールに記載されているIDとパスワードでログインします。
左側メニューの決済連動管理にある、連動キー管理をクリックして、メールに記載されているパスワードを入力してから、[確認]ボタンをクリックします。
Channel ID
と Channel Secret Key
の値をそれぞれメモしておきます。
ローカルの環境にプロジェクトを構築して実際の決済処理の動きを確認してみましょう。GitHubからクローンしてきます。
コマンドプロンプトやPowerShellを開いて下記コマンドを実行してください。
> cd %homepath%\Documents
> git clone https://github.com/gaomar/winactor-linepay-local.git
WinActorを起動して、[設定]- [起動ショートカット作成]をクリックします。
ドキュメントフォルダの winactor-linepay-local
フォルダにある callMemo.ums6
ファイルを選択します。
実行オプションは2つ共チェックを入れてください。[作成]ボタンをクリックします。
保存先は winactor-linepay-local
フォルダの直下に保存しておいてください。
ファイル名は callMemo
という名前にしてください。
下記のようにショートカットファイルが作成されていることを確認してください。
下記コマンドを実行してください。
> code winactor-linepay-local
Ctrl + @ を押してターミナルを表示します。
下記コマンドを実行してインストールしてください。
> npm install
必要なモジュールがインストールできたら、プログラムを起動します。
下記コマンドを実行してください。
> node index.js
Server running on 3000
と表示されればOKです。
ngrokがまた未インストールの方は下記コマンドを実行してください。
> npm i -g ngrok
まず、VSCodeでウィンドウを分割します。
インストール済みの方は下記コマンドを実行してngrokを起動してください。
> ngrok http 3000
起動したら発行される https://
側のURLをメモしておきます。
コマンドプロンプトかPowerShellで下記コマンドを実行してください。
別のプロジェクトをダウンロードしてきます。
> git clone https://github.com/gaomar/winactor-linepay-vue.git
> code winactor-linepay-vue
Visual Studio Codeが起動するので、Ctrl + @ を押してターミナルを表示します。
必要なモジュールをインストールします。
Visual Studio Codeのターミナルウィンドウで、下記コマンドを実行してインストールしてください。
> npm install
.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 |
ターミナルに下記コマンドを入力します。
> npm run lambda
Lambda server is listening on 9000 ← これが表示されればOK
ターミナルを分割して、下記コマンドを実行します。
> npm run serve
ChromeブラウザかFirefoxブラウザで下記URLにアクセスします。
LINE Payボタン押下 | LINEアプリでQRコード読み取る | PAY NOWボタン押下 | 決済完了 |
決済が完了するとメモ帳が自動起動して、「LINE Pay 決済完了」と表示されます。