PayPal

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

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

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

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

  1. こちらに書いてある内容の、1.から4.をVaultを使って実装します。この時、Transaction::saleの代わりにCustomer::createを使って決済自体はされないようにします。

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

決済ボタンをログインボタンのように見せる設定
paypal.Button.render({
   style: {
     label: 'paypal',
     size:  'medium',    // small | medium | large | responsive
     shape: 'rect',     // pill | rect
     color: 'blue',     // gold | blue | silver | black
     tagline: false
   },
   commit: false, // Change 'Pay Now' button to 'Continue'

image.png

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

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

※事前承認決済を使った場合は、ログイン後の決済はCustomer IDを使ってTransaction::saleのみで実行できるため、ワンクリック決済のような利便性の高い決済を実現できます。

通常の都度決済を使った実装

  1. こちらに書いてある内容の、1.から3.をCheckoutとして実装します。4.のTransaction::saleは呼ばないようにしてください。(呼ぶと決済が行われてしまいます)

  2. 以降の実装は事前承認決済と同じです。

※通常決済を使った場合は、ログイン後の決済にはもう一度API決済の実装が必要になりますが、セッションが有効な場合は決済時のログイン操作がスキップされるので利便性が増します。

その他

ボタンのカスタマイズやJavaScriptの動作についてはcheckout.jsの動的デモで試すことができます。