PAY.JPはオンライン決済を提供しています。クレジットカード決済に加え、あらかじめクレジットカードを登録しておくことでカード番号の入力をしなくて済むPAY IDも提供しています。これはオンライン決済の他、リアル店舗や個人間決済でも使えます。
すでにPAY.JPのオンライン決済を導入している場合、すぐにPAY ID決済を組み込めます。
決済画面を表示する
PAY.JPのCheckoutを使った場合、元々の決済フォームは次のようになっているかと思います。 YOUR_PUBLIC_KEY はPAY.JPの管理画面で取得できる公開鍵です。
<form action="/pay" method="post">
:
<script class="payjp-button"
src="https://checkout.pay.jp/"
data-key="YOUR_PUBLIC_KEY">
</script>
</form>
そのscriptタグに要素を一つ追加します。それが data-payjp です（取得方法はこれから説明します）。
<form action="/pay" method="post">
<script class="payjp-button"
src="https://checkout.pay.jp/"
data-key="YOUR_PUBLIC_KEY"
data-payjp="YOUR_CLIENT_ID"> <!-- これを追加 -->
</script>
</form>
OAuthクライアントを作る
管理画面の設定に移動すると、OAuth クライアントという項目があります。このOAuthクライアントを追加します。
Redirect URIは今回の場合は http://localhost/ で構いません。作成した後、OAuthクライアント一覧の中から詳細ボタンを押すとClient IDという項目が確認できます。
これをHTMLフォームのYOUR_CLIENT_IDを書き換えてください。
<form action="/pay" method="post">
<script class="payjp-button"
src="https://checkout.pay.jp/"
data-key="YOUR_PUBLIC_KEY"
data-payjp="YOUR_CLIENT_ID"> <!-- これを書き換えます -->
</script>
</form>
これで準備完了です。
PAY.JPでの処理
そしてボタンを押すとモーダルでPAY.JPの決済フォームが表示されます。テストで行う場合にはテストカード | PAY.JPからテスト用のクレジットカード番号を選んでください。テストの場合、有効期限やCVC、名前は適当で問題ありません。
クレジットカードの他にPAY ID決済が選択できるようになります。なお、テストモードの場合はどんなメールアドレスとパスワードの組み合わせでもログインできます（ただしバリデーションは行われます）。ログインするとあからじめ一枚のクレジットカードと紐付いているのでそのまま決済ができます。
そして処理が完了すると、フォームの送信イベントがすぐに呼ばれます。
サーバでの処理
PAY.JPでクレジットカード番号からトークンに変換されると、その情報は payjp-token という名前でPOSTされてきます。そのまま使うこともできますし、今後繰り返し使っていくのであれば顧客情報と結びつけることもできます。
以下は顧客情報と結びつける場合です（Rubyの場合）。
customer = Payjp::Customer.create( :email => 'example@pay.jp', :card => params['payjp-token'] )
レスポンスであるcustomer.idを自社のデータベースに保存しておきます。こうするとトークンが繰り返し使えるようになります。
実際の決済処理は次のようになります。トークンではなく、customer.id を指定しているのが特徴です。
amount = 1000
Payjp::Charge.create(
:amount => amount,
:currency => 'jpy',
:customer => customer.id,
:description => '決済に関する説明'
)
例えばECコマースのユーザ情報と結びつけることで、二度目以降はクレジットカード番号の入力を不要にできます。
仕組みの違いはHTMLタグの要素追加だけなので、ユーザにとってはカード番号を入力しないで済むという利点が活かせます。すでにPAY.JPでCheckoutを導入されている方はぜひ追加してみてください。