【シリーズリンク】

#	内容
1	PayPay for Developers へサインアップ
2	PayPay API について
3	サンプルアプリケーション　←今回
4	加盟店登録

前回の続きです。今回は前回紹介した PayPay API(SDK) を使って決済・確認・返金に対応可能なアプリケーションのサンプルを作りましたので、その使い方を紹介します。　またこのサンプルアプリケーションには実際の決済を行うための加盟店登録（次回紹介予定）時の審査に必要な使い方ページや、特定商取引法に基づく表記のページも含めています。そのため、売りたいものやサービスが既にある場合は商品を自分のものに入れ替え、使い方ページや特定商取引法に基づく表記のページを自分のものに書き換えることで審査に使うこともできると思っています。


【サンプルアプリケーションを動かすための準備】
PayPay 決済のサンプルアプリケーションを手元で動かす上で大きく３つ、前提条件となる準備作業が必要です。

（１）Node.js
以下で紹介するサンプルアプリケーションは Node.js を使って実装されています（もう少し詳しく言うと Node.js + Express + EJS を使って実装したサーバーサイドアプリケーションで、jQuery や Bootstrap を使って UI を作っています。まあ昔ながらのシンプルな構成になっていると思ってください）。

このサンプルアプリケーションを手元の PC で動かすには Node.js がインストールされている必要があります（他のライブラリなどはサンプルアプリケーション側に用意されています）。既にインストール済みであれば先に進んでください。インストールできていない場合は公式サイトを参照し、自分の環境向けの Node.js をインストールしておいてください。

（２）PostgreSQL
前回のブログエントリでも紹介しましたが、サンプルアプリケーションは（返金などに対応するため）決済トランザクションをデータベースに記録します。そのデータベースが必要なんですが、本サンプルアプリケーションでは PostgreSQL を使う想定で記述されています。個人的にはデータベースは Docker 環境で用意するのがいいと思っていますが、なんらかの方法で PostgreSQL にアクセスできるような環境を用意しておいてください。

ちなみに Docker がインストール済みであれば以下のコマンドで PostgreSQL データベース（データベース名は mydb 、コンテナ名は mypostgres）を動かすことができます：

$ docker run -d --name mypostgres -p 5432:5432 -e POSTGRES_USER=admin -e POSTGRES_PASSWORD=password -e POSTGRES_DB=mydb postgres

また以下のコマンドを追加で実行して、 mydb にトランザクション記録用テーブルである transactions を定義します：

$ docker container exec -it mypostgres psql -h localhost -U admin -d mydb

mydb=# create table if not exists transactions ( id varchar(100) not null primary key, order_id varchar(50) not null, amount int default 0, currency varchar(10) default '', created bigint default 0 );

mydb=# \q

このような PostgreSQL データベースと transactions テーブルが用意されている前提で以下を説明します。


（３）PayPay アプリ
またこのサンプルアプリケーションを使って（テスト環境で）商品を購入したり、購入した商品の返金対応をしたりするのですが、そのためにはスマホにインストールされた PayPay アプリが必要です。普段自分が使っている PayPay アプリでもできないことはないのですが、（環境切替が面倒だと思うので）できればアプリケーション試験用に普段使っているものとは別のスマホに PayPay アプリをインストールしておくのがいいと思います。



【サンプルアプリケーションを動かしてみる】
サンプルアプリケーションのソースコードはこちらから取得できます（zip でダウンロード＆展開、または git clone）：
https://github.com/dotnsf/paypayapi-sample

ソースコード展開後、とりあえず初回だけ必要なライブラリのインストール作業を済ませておきます：

$ cd paypayapi-sample

$ npm install

（正しく実行できると node_modules というフォルダが作られます）

次に動作設定ファイル .env を編集します。適当なエディタ（メモ帳でも可）で .env というファイルを開いて、以下の内容を入力して保存します：

DATABASE_URL=postgres://admin:password@localhost:5432/mydb
PGSSLMODE=disable
ADMIN_ID=user
ADMIN_PW=pass
PAYPAY_API_KEY=（PAYPAY API キーの値）
PAYPAY_API_SECRET=（PAYPAY API シークレットの値）
PAYPAY_MERCHANT_ID=（PAYPAY 加盟店 ID の値）
PAYPAY_REDIRECT_URL=http://localhost:8080/paypay/redirect

DATABASE_URL は前提準備で作った PostgreSQL データベースへの URL 、ADMIN_USER と ADMIN_PASS は管理者用画面にアクセスする際の ID とパスワード（この例だと ID が user で、パスワードは pass）を指定します。

そして PAYPAY_API_KEY と PAYPAY_API_SECRET は初回 PayPay for Developers に申し込んで取得した API キーとシークレットの値、PAYPAY_MERCHANT_ID は加盟店 ID です。それぞれ自分の環境で調べた値を指定してください（自分で取得した値を入れないと意味なくなります）：



最後に（これは編集せずにそのままでも動きますが）このサンプルアプリケーションで扱う商品の一覧ファイル items.json を必要に応じて編集します：

[
  {
    "name": "商品Ａ",
    "imageurl": "/item-a.png",
    "amount": 500,
    "currency": "JPY"
  },
  {
    "name": "商品Ｂ",
    "imageurl": "/item-b.png",
    "amount": 1000,
    "currency": "JPY"
  },
  {
    "name": "商品Ｃ",
    "imageurl": "/item-c.png",
    "amount": 1200,
    "currency": "JPY"
  }
]

デフォルトの items.json では JSON 配列フォーマットで３つの商品が記載されています。各商品ごとに商品名、商品画像 URL 、価格とその通貨単位（"JPY" は「日本円」です）が指定されているので、必要に応じて内容を書き換えたり、商品を追加削除してください。

ちなみに商品画像はリモートにある画像を使う場合はその URL を、手元にある画像の場合は public/ フォルダ以下にコピーしておくとサンプルのような記述が使えます。

ここまで完了していると実際にサンプルアプリケーションを動かすことができます。動かすには以下のコマンドを実行します（ちなみに実行終了は Ctrl+C です）：

$ node app

実行中のサンプルアプリケーションにアクセスするには、同じ PC でブラウザを開き、http://localhost:8080/ にアクセスします。

下のような、３つ（items.json を変更した場合は変更内容によって変わります）の商品が縦に並んでいる画面になれば起動成功です。items.json で指定した商品が商品名、画像、価格が反映されて "Buy" というボタンを一緒に表示されています：



実際に商品を購入する前に、概説ページと特定商取引法に基づく表記ページを確認します（管理者画面は後述します）。それぞれ画面上部のリンクから遷移できます：

（概説ページ）


（特定商取引法に基づく表記ページ）



どちらもここでは実質的に意味のないサンプルですが、実際の決済を行う際に必要な加盟店登録（次のブログで紹介予定）時には必要なページ（のサンプル）です。加盟店登録を行う際は同様のページを自分のショップ向けにカスタマイズして用意する必要があることを意識して内容を理解してください。


【テストアカウントで PayPay アプリにログイン】
改めて商品ページに戻り、今度はどれか１つを実際に購入してみましょう。そのために購入時に備えてスマホの PayPay アプリにログインしておきます。　ただ通常の（自分が普段使っている）PayPay アカウントでログインするのではなく、PayPay for Developers でテスト用に提供されているアカウントで（仮想のお金で）ログインします。　そのための手順を紹介しますが、可能であれば普段自分が使っているスマホではなく、（持っていればですが）別のスマホで以下の手順を実行することをお勧めします。

まず PayPay for Developers にログインし、ダッシュボードのテストユーザータブを開きます。すると３つのテストアカウントがあるので、どれか一つのユーザーネームとパスワード（下図では見えていませんが、目のアイコンをクリックすると表示されます）を確認しておきます（残金が少ない場合はこの画面からチャージもできます）：




このテストユーザーを使って PayPay アプリに Developer アカウントでログインします。Developer アプリにログインするにはアプリケーションを開いて（ログイン中の場合はログアウトして）、ログイン／新規登録画面内 PayPay ロゴの上部を７回連続でタップします：



（途中からカウントダウンが表示されます）



７回タップすると以下のような画面になります。「PayPay for Developers のアカウントでログイン」をクリックします：



すると（テストモードでの）ログイン画面に切り替わります。ここで先ほど確認したテストユーザーの ID（電話番号）を入力します：



パスワードも該当する電話番号のパスワードを入力してログインします：



ログイン後の画面はスクリーンショットが撮影できないため文章のみでの説明になります。Developer モードでのログインができたことを確認してください。


【テストアカウントの PayPay アプリで決済】
ではテストアカウントの PayPay アプリで、サンプルアプリケーションの商品を購入してみましょう。

改めて購入する商品（下図の例では「商品Ａ」）のアクション列にある "Buy" ボタンをクリックします：



確認メッセージが表示されるので、間違いでなければ "OK" ボタンをクリック



すると PayPay の QR コード画面に転送されます（ここでは前回紹介した内容の「ユースケース１　ウェブ決済」機能を使っています）。この QR コードを PayPay アプリで「スキャンして支払い」します：



アプリ側で支払いするとサンプルアプリの画面も支払い完了時の画面に切り替わり、、、



しばらくすると元の画面に再転送されます。これで決済できています。



始めてやってみると不思議に感じるかもしれませんが、これで支払いは（今回の場合はテストユーザー用の仮想のお金で）完了しています。　他の商品も含めて何度か決済してみてください。


【管理画面と返金対応】
ユーザーの決済までの手順は（普段使っている PayPay アプリでの決済手順と比べてもほぼ同じだと思うので）分かりやすかったのではないかと思いました。これで支払いが完了して、（このサンプルアプリの場合は）そのトランザクションが記録されています。

最後に管理者としての管理画面にもアクセスしてみます。トップ画面右上の「管理画面」リンクをクリックします（または http://localhost:8080/admin にアクセスします）：



管理者画面へアクセスするためのユーザー名とパスワードの入力を求められるので、自分で .env に設定した内容（ADMIN_USER と ADMIN_PASS の内容）を入力してログインします：



管理画面へのログインに成功すると以下のような画面になり、過去のトランザクション（取引）一覧（下図では１件だけ）が表示されます。トランザクションの詳細を表示するには該当レコードの "info" ボタンをクリックします：



すると以下のようなダイアログが表示され、トランザクションの現在の状態が表示されます（日付や決済額などの情報が確認できます）。トランザクションのステータスはダイアログの最上部に表示されます（下図では "COMPLETED" になっていて、決済が完了していることを意味しています）。なお、ここでは前回紹介した内容の「ユースケース２　ウェブ決済状況確認」機能を使っています：




最後に返金対応をシミュレートしてみましょう。もしこのトランザクションを実行したユーザー（お客様）から、「クーリングオフを理由に返金してほしい」という要望があった場合に（法律的にはクーリングオフは消費者の権利なので条件を満たしている限り対応しないわけにはいかないのですが）具体的に返金するにはどうすればよいか、というシミュレーションです。

返金対応をする上で重要なのは「どの取引に対して返金処理をすればよいのか？」を明確にするということです。トランザクションの履歴は管理画面に残っていることが確認できるのですが、この一覧の中のどのトランザクションに対して返金対応すればよいか、を正確に知る必要があるのです。

そのためにはまず利用者（お客様）から取引番号を伝えてもらう必要があります。以下の手順を利用者に伝えた上で、「返金を希望する PayPay 決済の取引番号を調べて送ってほしい」と伝えます。

利用者からみた取引番号の調べ方は以下の通りです。なお、PayPay アプリのスクショは撮れないようになっているので、以下は PayPay アプリの操作の様子を別のスマホで撮影した写真を添付します。またこの PayPay アプリは PayPay for Developers のテスト用アカウントでログインしているので、その旨のメッセージが画面上部に表示されています。


まず利用者に PayPay アプリにログインした状態で開いてもらいます：



ここから「取引履歴」と書かれた部分をタップして、過去の取引履歴を表示してもらいます：



直近の取引の履歴が表示されます。ここから返金を希望する取引を選んでタップしてもらい、



返金対象の取引の画面が表示されます。ここで更に「詳細を見る」と書かれた箇所をタップしてもらうと、



詳細情報が展開されます。その中に「取引番号」と書かれた箇所があります。返金対応にはこの情報が必要なので、取引番号の内容を伝えてもらってください：



返金対象の取引番号が分かったら、改めてサンプルアプリの管理画面を開き、トランザクション一覧で order id がその取引番号になっているトランザクションを見つけます（下図の例だとトランザクションが１件しかないので簡単に見つかりますが、数多くあった場合はソートなどして見つけてください）。これで返金対象トランザクションが分かりました：



返金対象トランザクションが分かったら、このトランザクションの返金対応を実施します。なお返金対応はアンドゥができない点に注意してください。また、ここでは前回紹介した内容の「ユースケース３　返金対応」機能を使って実装しています。

対象トランザクションの右側にある "Refund" ボタンをクリックします：



最初の確認画面が表示されます。対象トランザクションが一致しているか確認して OK をクリック：



返金処理には必ず理由を入力する必要があります。返金理由を記載して OK をクリック：



返金処理前の最後の確認画面が表示されます。内容を確認し、この内容での返金を実行する場合は OK をクリックします：



実行結果が表示されます。画面内に返金理由や paymentId（order id）、返金額などの情報が表示されています：



再度、管理画面が表示されます。ここで返金したトランザクションのステータスを再確認してみます。該当トランザクションの "info" ボタンをクリックします：



すると（正しく返金が実行されていれば） "REFUNDED" というタイトルのダイアログが表示され、返金理由なども表示されます。無事に返金できていたようでした：



ここまでできていれば、利用者の PayPay アプリ側にも返金されています。PayPay アプリの取引履歴を確認すると返金されていることが確認できるはずです：



サンプルアプリケーションと PayPay アプリ（とテストユーザー）を使った購入と、購入内容の確認、そして返金対応の手順が確認できました。ここまで確認すると、返金対応するには過去の（取引番号含めた）取引履歴の情報が残っていないと難しいのでデータベースに記録する必要があった、というのもなんとなく理解いただけるのではないかと思います。


管理機能や返金処理まで実装し、更に加盟店登録時に必要な概要ページや特定商取引法に基づく表記ページまで含まれたサンプルアプリは我ながら珍しいと思うので、これを参考に（商品や見た目をカスタマイズすれば）返金機能まで対応した PayPay ショップサイトを比較的容易に作れるのではないかと思っています。よかったら是非カスタマイズして使ってください。


次回はこのシリーズの最終回の予定です。これまでは PayPay for Developers アカウントのテストユーザーを使ったアプリ動作確認を紹介してきましたが、次回は PayPay に加盟店登録を行い、本当に（テストユーザー以外でも）PayPay 決済が可能になるような手続きを紹介する予定です。

タグ ：

#paypay

#api

#sdk

#nodejs