プレイスオブという物件所有者が物件の細かいスペック等を投稿できるサービスを個人で開発しています。最近「物件への投げ銭」機能をPayPalのStandard Checkoutを使って実装したのですが、PayPalを使った記事があまりなかったので少しまとめてみました。

何故PayPalを使ったのか

以前からYouTubeやSNSで物件情報を発信している方が増えているのが気になっていました。
個々のクリエイターをサポートするようなサービスがある一方で、物件をサポートするようなサービスがなかったので、作ってみたら面白いかなという感じです。
ただ、日本よりもアメリカや他国の方がニーズがありそうで、特にアメリカは住宅不動産手数料に関して集団訴訟が20件程度あったり和解案が先月電撃的にまとまったと思えば司法省が独禁法の調査をするかもみたいな訴訟祭りのような状態になっており、今後の状況次第ではアメリカに送金できるような手段があった方が良いかなと思いPayPalを選択しました。

実装のポイント

PayPalのAPIにはStandard CheckoutとAdvanced Checkoutの２つの種類がありました。今回はひとまずStandard Checkoutの方を選択しました。Standard Checkoutだと決済フォームがカスタマイズ出来ないなどのデメリットがありますが、試しに実装するにはこちらで良いかと思います。

Reactを使ったコードサンプル

いろいろなコードサンプルがありましたが、基本的にはこちらのソースコードが一番良かったです:
https://github.com/paypaldev/PayPal-React-FullStack-Standard-Checkout-Sample

追加実装ポイント

外部IDの保持

購入された商品のidなどは、reference_idかcustom_idで保持しました。
https://developer.paypal.com/docs/api/orders/v2/#definition-purchase_unit

不必要な住所欄の削除

shipping_preferenceにNO_SHIPPINGを追加する必要がありました。
https://developer.paypal.com/docs/api/orders/v2/#definition-application_context

Idempotency

https://developer.paypal.com/api/rest/reference/idempotency/　を参考に PayPal-Request-Id　を適宜追加しました。

Webhook

受け取るWebhookの設定やURLはダッシュボードで行えました。イベント一覧は　https://developer.paypal.com/api/rest/webhooks/event-names/
にあります。

ハマったところ

サンドボックスにアクセスできない

開発中にサンドボックス環境にアクセスできなくなることが結構頻発しました。理由は不明ですが、sandbox環境のダッシュボードに再ログインしたりすると治ったりしました。

そもそもログイン出来ない

sandbox環境のダッシュボードにログインができなくなることも結構頻発しました。Cookieを削除すると基本的には再ログイン出来ました。たまにローカルストレージも削除しました。

エラーが出せない

テストカードのエラーが全然出せなくて数時間詰まりました。。。下記の画像のTriggerにある名前をFirst Nameか名前全体に入力するとひとまずエラーが発生しました。
First NameとSur Nameとかに分割したりしたらエラーが出ないです。また、フォームの国によってFirst NameとSur Nameの順番が違うのでそこも注意する必要があります。

エラーが良く分からない

上記のエラーがすべて"INSTRUMENT_DECLINED"になり、フォームの再起動が走り、PayPalの良く分からないフォームが再出現します。ドキュメントは見当たらなかったですが、多分、これはStandard Checkoutの仕様かと思います。

webhookのverifyのやり方が良く分からない

正直webhookのverifyの仕方が良く分かっていないです。こちらにある通り "transmission_id"等7つのパラメーターをverify用のendpointに送信しているのですが。。。
ちなみに、sandbox環境だとverify出来なさそうで、本番でしか確認出来ないのではないかと思われます。
参考:
https://zenn.dev/code_diver/articles/9f625c73ca7873

captureしてもwebhookは使ったほうが良いのか

https://github.com/paypaldev/PayPal-React-FullStack-Standard-Checkout-Sample/blob/main/client/App.jsx#L63　
でonApproveされたあとにサーバー側でcaptureしますが、結局webhookは使ったほうが良いのかほとんど必要ないのか良く分からず。capture出来たけど、数時間後にやっぱり出来なかったみたいなことが多発するならばwebhookはしっかり調査したいと思います。

おわりに

ひとまずStandard Checkoutの使い方はこんな感じかと思います。

なお、この機能の使い方はこちらをご参照下さい:
https://note.com/placeof/n/n62180aef7689