Pay.jpでカード情報非通過対応を実装してみた

経緯

CakePHP3で構築され、既にPay.jpを使った決済システムを使っているサイトに対し
Pay.jpから「カード情報非通過対応のお願い」が届きました。
http://payjp-announce.hatenablog.com/entry/2017/11/10/182738

これまでもカード情報をデータベースでは保持しておらず非通過対応は施していたのですが
サーバーサイドでの処理もやめてね。とのことでしたので、対応した内容を記録していきます。

やること

Pay.jp側でいくつかやり方を用意してくれています。
今回は「チェックアウト」処理で進めます。

Viewの編集

これまではカード情報を入力するフォームを用意していたのですが、これを消しました。
新たにPay.jpで用意されている以下のソースに置き換えます。

payment.ctp

<form action="/pay" method="post">
  <script src="https://checkout.pay.jp/" class="payjp-button" data-key=""></script>
</form>

これだけで画面にはクレジットカードを入力するボタンが表示され、クリックすると
カード情報ダイアログが表示、入力をして送信までしてくれます。

非常に便利ですね！！

カスタマイズ

リファレンスに書いてある通りにやればできるようになります笑
https://pay.jp/docs/checkout

payment.ctp

<form action="/payment" method="post">
    <script src="https://checkout.pay.jp/" 
            class="payjp-button" 
            data-text="カード情報を追加する" 
            data-submit-text="カード情報を追加する" 
            data-key="<?= $payjp_publickey ?>">
    </script>
</form>                    

このような感じで必要なパラメータを追加してください。
data-keyは必須項目になります。

上記の状態ではダイアログでsubmit処理が走ることになります。
(/paymentにpostされます)

もし、ダイアログ入力後に元の画面に戻って他の項目の入力などを続ける場合や
一括でsubmit処理を行う場合はパラメータに以下を追加します。

data-partial=true

カード情報のトークンを使用する場合、input type="hidden" name="payjp-token"に
トークン情報が入っているのでそれを使用します。

最後に

ここで送信されるカード情報のレスポンスはカード情報のトークン情報ということです。
これだけでは顧客情報や決済情報とは紐づかないことに注意してください。

カード情報トークンを使った決済処理のやり方も紹介できるといいですかね。
以上、リファレンスを見てわかることをダラダラと書いてみました笑