PayPal 決済画面をソーシャルログインのように使う方法

PayPalのREST APIには、IndentityというOpenID Connectに準拠した、いわゆるソーシャルログイン向けのAPIがあります。
このAPIを使えば会員サイトの登録やログインに応用できますが、決済とは別の実装をする必要があります。

もう少し手軽に同様の機能を提供する方法として、PayPalのAPI決済の一部を応用した方法があるので、それをご紹介します。

事前承認決済を使った実装方法

1. こちらに書いてある事前承認決済を使って実装します。

2. ログイン画面のように見せるために以下のようにカスタマイズします。

決済ボタンをログインボタンのように見せるカスタマイズの例

<script src="https://paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&commit=false&disable-funding=credit,card"></script>
// Show a Continue button, not Pay Now.
// Hide other payment methods (e.g. cards)
...
paypal.Buttons({
      style: {
        layout:  'vertical',
        color:   'blue',
        shape:   'rect',
        label:   'paypal',
        tagline: false  // No sub messages
      },   
  ...

3.ユーザーがログインした後の情報をJavaScriptで入手します。
こちらの**「PayPalアカウントの個人情報や配送先住所を取得する方法」**に書いてある方法で、ログインしたユーザーの個人情報や住所情報を取得します。

4.上記の情報を会員情報と紐付けて次回のログインなどに応用します。

※事前承認決済を使った場合は、ログイン後の決済はサーバーサイドのAPI呼び出しのみでできるため、ワンクリック決済のような利便性の高い決済を実現できます。