Welcome!
PayPay x LIFF ハンズオン
この教材について
この教材はPayPay x LIFFの決済処理を実際に体験することができるハンズオンです。
START SENARIO ボタンを押して、はじめましょう！
Congratulations!
You've completed the scenario!
Scenario Rating
Your environment is currently being packaged as a Docker container and the download will begin shortly. To run the image locally, once Docker has been installed, use the commands
cat scrapbook_gaomar_paypay-liff-handson-playground_container.tar | docker loaddocker run -it /gaomar_paypay-liff-handson-playground:Oops!! Sorry, it looks like this scenario doesn't currently support downloads. We'll fix that shortly.
Steps
PayPay x LIFF ハンズオン
Step 1 - PayPayサンドボックス環境設定
1-1. PayPay for Developersアカウント新規登録
下記URLにアクセスして新規アカウント作成をしてください。
https://miniapps.paypay.ne.jp/account/signup
1-2. APIキーをメモする
ログイン後のホーム画面にAPIキーが表示されているので、 APIキー と シークレットキー をそれぞれメモしておきましょう。右上のアカウント部分にマウスカーソルを当てると MERCHANT ID が表示されるのでそれもメモしておきます。
Step 2 - LIFF IDを作成しよう
2-1. 新規チャネルを作成する
LINE DeveloperページへアクセスしてLINEログインしてください。
https://developers.line.biz/ja/
まだプロバイダー設定してない方は「新規プロバイダー作成」をクリックします。
プロバイダー名はお好きなものを入力して、「作成」ボタンをクリックします。
「LINEログイン」をクリックします。
各種項目を埋めていきます。
| 項目 | 値 |
|---|---|
| ①チャネル名 | PayPay-LIFF |
| ②チャネル説明 | PayPay-LIFF |
| ③アプリタイプ | チェックを2つ入れる |
| ④メールアドレス | ご自身のメールアドレスを入力 |
チェックを入れてから［作成］ボタンをクリックします。
2-2. LIFF IDを作成する
LIFF タブをクリックして、［追加］ボタンをクリックします。
アプリ名とサイズを設定します。
| 項目 | 値 |
|---|---|
| ①LIFFアプリ名 | PayPay-LIFF |
| ②サイズ | お好きなものを選択 |
続いて他の設定も行います。
| 項目 | 値 |
|---|---|
| ③エンドポイントURL | https://[[HOST_SUBDOMAIN]]-8080-[[KATACODA_HOST]].environments.katacoda.com/ こちらのURLを貼り付ける |
| ④Scope | profile にチェックを入れる |
| ⑤ボットリンク機能 | Off を選択 |
［追加］ボタンをクリックします。
LIFFのIDが生成されるので値をメモしておきます。
Step 3 - LINE Botと友だちになろう
3-1. Messaging APIのチャネルを作成する
LINE Developerのページから新規チャネル作成をクリックします。
Messaging API をクリックします。
各種項目を埋めていきます。
| 項目 | 値 |
|---|---|
| ①チャネル名 | PayPay-Bot |
| ②チャネル説明 | PayPay-Bot |
| ③大業種 | 個人 |
| ④小業種 | 個人（その他） |
| ⑤メールアドレス | あなたのメールアドレスを入力してください |
2つのチェックを入れて、［作成］ボタンをクリックします。
［同意する］ボタンをクリックします。
3-2. リッチメニューを設定する
リッチメニューを設定します。設定は別のページで行うので、 LINE Official Account Manager のリンクをクリックします。
［ホーム］- ［リッチメニュー］をクリックして、［作成］ボタンをクリックします。
LIFFタイトルと日付を設定します。
| 項目 | 値 |
|---|---|
| ①タイトル | LIFFメニュー |
| ②表示期間 | 2020/01/01 00:00 〜 2029/12/31 00:00 |
［テンプレートを選択］ボタンをクリックします。
テンプレートは左下の物を選択して、［選択］ボタンをクリックします。
アクションの設定をします。
| 項目 | 値 |
|---|---|
| ①タイプ | リンク |
| ②URL | 2-2で生成されたLIFFのURLを指定する 例）https://liff.line.me/xxxxxxxxxx-xxxxxxxx |
| ③アクションラベル | LIFFを開く |
3-3. 背景画像を作成する
［画像を作成］ボタンをクリックします。
メニューからテキストや背景色を設定してそれらしいボタン画像を作成します。 ボタンが出来たら［適用］ボタンをクリックします。
画像を保存する必要が特に無いので、［適用］ボタンをクリックします。
［保存］ボタンをクリックします。
3-4. ボットと友だちになる
作ったボットと友だちになりましょう。
LINE Developerのページを開いて、Messaging API設定をクリックします。 そこに表示されているQRコードをLINEアプリから読み取って友だちになります。
［追加］ボタンをクリックします。
Step 4 - プログラムを実行する
4-1. envファイルを編集する
IDEタブをクリックしてVSCodeを起動します。
example/.env ファイルを開いてください。下記項目を埋めていきます。
| 項目 | 値 |
|---|---|
| VUE_APP_API_KEY | ステップ1で取得したAPIキー |
| VUE_APP_API_SECRET | ステップ1で取得したシークレットキー |
| VUE_APP_MERCHANTID | ステップ1で取得したMERCHANT ID |
| VUE_APP_LIFF_ID | ステップ2で取得したLIFF ID |
| VUE_APP_HOST_NAME | https://[[HOST_SUBDOMAIN]]-8080-[[KATACODA_HOST]].environments.katacoda.com/ |
| VUE_APP_PAYPAY_FUNCTIONS_URL | https://[[HOST_SUBDOMAIN]]-9000-[[KATACODA_HOST]].environments.katacoda.com/.netlify/functions/pay |
4-2. プログラムを実行する
下記コマンドをそれぞれ実行してください。
■サイトを起動
npm run serve
■ファンクション起動
cd example
npm run lambda
4-3. PayPayテストアカウント
サンドボックス環境ではテストアカウントを使います。PayPayアプリを開いて、ログインページの左上にあるPayPayのロゴマークを 7回 タップしてください。
すると、下から 開発者モードでログイン というボタンが表示されます。
テストアカウントはPayPay for Developersページの テストユーザー からお好きなアカウントでログイしてください。
4-4. 動作確認
リッチメニューの「決済開始」をクリックします。LIFFの認証画面が表示されるので、「許可する」をクリックします。
決済開始をクリックします。PayPayのロゴをクリックすると自動的にPayPayアプリが起動します。支払うをタップして決済を行ってください。決済完了後、自動的にLINEアプリに戻ります。 （※実際にはお金は減りませんのでご安心ください）
