Help us understand the problem. What is going on with this article?

PayPay決済体験ハンズオン

2020年10月26日にPayPay for DevelopersにてミニアプリAPIがリリースされました。
ミニアプリAPIは加盟店登録しないと利用できませんが、その中にある決済処理のAPIを使って、独自サイトに決済処理を実装することができます。本ハンズオンでは、PayPayで簡単な決済処理を作って体験できます。

事前準備

  • Node.js環境構築
  • Git
  • VSCodeインストール
  • PayPayアプリインストール

GitHubから環境をダウンロードしましょう。

$ cd ~/Documents
$ git clone https://github.com/gaomar/paypay-hands-on.git
$ code paypay-hands-on

オンラインハンズオン資料

自PCの環境を汚したくない方は、下記URLよりお試しください。
https://katacoda.com/gaomar/scenarios/paypay-handson-playground

1. PayPayサンドボックス環境設定

1-1. PayPay for Developersアカウント新規登録

下記URLにアクセスして新規アカウント作成をしてください。

https://miniapps.paypay.ne.jp/account/signup

s100

1-2. APIキーをメモする

ログイン後のホーム画面にAPIキーが表示されているので、 APIキーシークレットキー をそれぞれメモしておきましょう。右上のアカウント部分にマウスカーソルを当てると MERCHANT ID が表示されるのでそれもメモしておきます。

s101

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

2-1. ngrokでURLを発行する

ターミナル2つ起動して下記コマンドを実行します。 8080 ポートと 9000 ポートを開放します。
発行された https 側のURLをメモしておきます。

8080ポート
$ ngrok http 8080 --region jp
9000ポート
$ ngrok http 9000 --region jp

2-2. envファイルを編集する

.env ファイルを開いてください。下記項目を埋めていきます。

項目
VUE_APP_API_KEY ステップ1で取得したAPIキー
VUE_APP_API_SECRET ステップ1で取得したシークレットキー
VUE_APP_MERCHANTID ステップ1で取得したMERCHANT ID
VUE_APP_HOST_NAME https://xxxxxxxxxxxx.jp.ngrok.io
※末尾の 「/」 は要りません
VUE_APP_PAYPAY_FUNCTIONS_URL https://xxxxxxxxxxxx.jp.ngrok.io/.netlify/functions/pay

s200.png

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

VSCodeのターミナルを分割して、下記コマンドをそれぞれ実行してください。

■ ①インストール

$ npm install

■ ②サイトを起動

$ npm run serve

■ ③ファンクション起動

$ npm run lambda

s201.png

2-4. PayPayテストアカウント

サンドボックス環境ではテストアカウントを使います。PayPayアプリを開いて、ログインページの左上にあるPayPayのロゴマークを 7回 タップしてください。
すると、下から 開発者モードでログイン というボタンが表示されます。

s201

テストアカウントはPayPay for Developersページの テストユーザー からお好きなアカウントでログイしてください。

s202

2-4. 動作確認

ngrok 8080ポートで発行URLにアクセスしてください。

https://xxxxxxxxxxxx.jp.ngrok.io

PayPayのロゴをクリックして、表示されたQRコードをPayPayアプリでスキャンして決済してみてください。

(※実際にはお金は減りませんのでご安心ください)

s203

h-takauma
様々なIoT機器の研究開発を行っています。 AWSの研究開発がメインです。LINE API Expert('19〜) 最近はスマートスピーカーに夢中です! 著書「スマートスピーカーアプリ開発入門」https://amzn.to/2o0KGWs
i-enter
「効果」をつねに提供します。スマホアプリ開発No.1の実績。最新のIoTに対応した開発も行います。
https://www.i-enter.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away