はじめに
皆様、 PayPay は使われてますでしょうか?
2018年10月から始まったQRコード決済サービスですが、QRコード決済の先駆けだった Origami Pay(オリガミペイ) をソフトバンクグループの資本力により退け、業界トップシェアとなっており、PayPayのロゴとQRコードがいたるところで目に入ります。
となるとPayPayの決済機能を実装したいという要望があるわけで、少し前に PayPay API を使った決済機能を実装したので、記憶を辿りながら記事を書いていこうと思います。
前提条件
Laravelの初期構築手順は省きます。バージョンは以下の通りです。
-
PHP 8.2
-
Laravel 10.10
PayPay for Developers
まずは PayPay for Developers に登録します。
https://developer.paypay.ne.jp/
登録が完了すると、クライアントID(APIキー)、加盟店ID、シークレットを確認できます。
また、テストユーザーも用意されています。
機能実装1
では、実装を始めていきます。必要なパッケージ・ファイルを用意します。
パッケージのインストール
PayPay API を実装するためのPHP用SDKを使います。
GitHub - paypay/paypayopa-sdk-php: With PayPay's Payment SDK, you can build a custom Payment checkout process to suit your unique business needs and branding guidelines
With PayPay's Payment SDK, you can build a custom Payment checkout process to suit your unique business needs and branding guidelines - paypay/paypayopa-sdk-php
https://github.com/paypay/paypayopa-sdk-php
以下のコマンドを実行してパッケージをインストールします。
.env
にクライアントID(APIキー)、加盟店ID、シークレットを記載します。
config/services.php
から、 .env
の設定値を読みます。
Controller
以下のコマンドを実行してコントローラーを作成します。
payment()
関数を用意します。処理は後ほど記載します。
View
決済送信と決済完了のビューを用意します。
resources/views/paypay/payment.blade.php
を作成。決済金額を入力して送信をするだけの必要最低限のものです。
resources/views/paypay/complete.blade.php
を作成。決済完了時に表示します。
Route
routes/web.php
を以下のように変更します。
migration
決済情報を保存するためのテーブルを作成します。コマンドを実行して、マイグレーションファイルを生成します。
以下のようなカラムを用意します。こちらも必要最低限です。
マイグレーションファイルを実行します。
Model
Orderモデル
を作成します。
モデルファイルを生成したら、以下のように追記してください。
機能実装2
必要なファイルやパッケージの準備ができたので、PayPay決済のための処理を実装していきます。
app/Http/Controllers/PayPayController.php
に以下を追記してください。
payment(Request $request)
にPayPay決済用QRコードのリンクを生成する処理を実装します。
処理についてコード内のコメントで補足しておくので、ご確認ください。
ここまでの処理で、PayPayの決済が可能になります。
http://localhost/paypay にアクセスして、金額を入力し、決済ボタンを押すことで、PayPayの決済用ページに遷移します。
テストユーザーのユーザーネーム(電話番号)とパスワードを入力して決済を済ませてください。
※ テストユーザーの認証情報は PayPay for Developers のダッシュボードで確認できます
PayPay決済が完了し、機能実装1で作成した決済完了ページに遷移すれば問題なく実装できています。
機能実装3
PayPayの決済ページに遷移後、ユーザーが決済したか判定する必要があるため、決済成功時のWebhookのエンドポイントを準備します。
NGROK準備
Webhookのリクエストをローカル環境で受け取るため、 ngrok
を使用します。
インストールや設定方法は以下の記事でわかりやすくまとめていただいているので、参考にしてください。
https://biz.addisteria.com/ngrok-windows/
ngrok
を実行すると、 https://35b8-153-221-229-228.ngrok-free.app
を通じて、ローカル環境と接続ができます。
※ ドメインは起動するたびに変わります
Webhookのリクエストを受けた際の処理
app/Http/Controllers/PayPayController.php
に webhook(Request $request)
関数を追加します。
routes/api.php
にルーティングを追加します。
Webhookで叩かれるリクエストのHTTPメソッドは POST
です。
最終的にエンドポイントは以下のようになります。ドメイン部分は ngrok
を起動するたびに変わるので注意ください。
https://35b8-153-221-229-228.ngrok-free.app/api/paypay/webhook
※ api.php
にルーティングを記載しているので、パスに /api
が入ります
エンドポイント設定
PayPay for Developers でWebhookのURLを設定します。
https://developer.paypay.ne.jp/settings
決済トランザクション通知Webhook
にURLを入力して、保存ボタンを押してください。
これで実装完了です。
動作確認
機能実装2と同じ手順で、 http://localhost/paypay から決済処理を行います。
orders
テーブルを確認して、 is_payment
が true
になっていれば正しく処理できています。
処理がうまくいかない場合
💡
まずは、Webhookで叩かれたリクエストが届いているか確認してください。ngrokのコンソールにリクエストのログが出ていなければ、WebhookのURL設定が間違っている可能性が高いです。
まとめ
最後までお読みいただきありがとうございます。
PayPay決済の実装いかがったでしょうか?SDKもあるので、比較的簡単に実装できるかと思います。
私が一番苦戦したのは、実装ではなく、本番環境で使うための加盟店申請でした。加盟店申請から10日後に返信が来て、申請は却下されました笑
そして、一度却下されたアカウント(メールアドレス)での再申請はできないという…
二度目の申請で加盟店登録できましたが、再申請の承認も10日ほど要しました。
また、本番環境用のWebhookはダッシュボードから設定できず、登録申請を出さなければなりません。
そのため、本番公開前に慌てないよう、加盟店登録や本番環境の設定は早めに済ませることをおすすめします。
では、また次回の記事で。