サンプルを使ってPAY.JPのオンライン決済を学ぶ

機能紹介

PAY.JPではJavaScriptを使ってクレジットカード番号の一時的トークンを生成して決済する仕組みがあります。シーケンス図で表すと次のようになります。

f:id:goofmint:20171108144326p:plain

この仕組みを使った利点としては、サービス事業者（ECサイトを運営している企業など）がクレジットカード番号を知らずにオンライン決済を提供できることです。クレジットカード番号が事業者のサーバを通過する仕組みを提供する場合、2018年3月までにPCI DSSの対応が必要になります。これはセキュリティ基準としてハードルが非常に高いです。

PAY.JPのチェックアウトを使う場合、クレジットカード番号が事業者のサーバを通過せずに済むので、PCI DSSの対応が求められず、安全かつ簡単に決済を導入することができます。今回はRuby/Sinatraを使ったサンプルを基に、実装方法を紹介します。

決済画面を表示する

まず最初に決済を行う画面を表示します。この時必要になるのはPAY.JPの公開キーです。これは設定画面のAPIキーの中で確認できます。これを下記HTMLの YOUR_PUBLIC_KEY と書き換えます（コード1）。

<form action="/pay" method="post">
  <article>
    <label>1000円のお支払い</label>
  </article>
  
  <script class="payjp-button"
    src="https://checkout.pay.jp/"
    data-key="YOUR_PUBLIC_KEY">
  </script>
</form>

コード1

f:id:goofmint:20171108144507p:plain

なお、formタグの /pay は自社のWebサイトの決済処理用のURLになります。

この状態でWebページを表示すると カードで支払う ボタンが表示されます。

f:id:goofmint:20171108144526p:plain

PAY.JPでの処理

そしてボタンを押すとモーダルでPAY.JPの決済フォームが表示されます。テストで行う場合にはテストカード | PAY.JPからテスト用のクレジットカード番号を選んでください。テストの場合、有効期限やCVC、名前は適当で問題ありません。

f:id:goofmint:20171108144539p:plain

そして処理が完了すると、フォームのイベントである POST /pay がすぐに呼ばれます。

サーバでの処理

PAY.JPでクレジットカード番号からトークンに変換されると、その情報は payjp-token という名前でPOSTされてきます。そのまま使うこともできますし、今後繰り返し使っていくのであれば顧客情報と結びつけることもできます。

以下は顧客情報と結びつける場合です。

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コマースのユーザ情報と結びつけることで、二度目以降はクレジットカード番号の入力を不要にできます。

なお、このSinatraのサンプルコードはpayjp/payjp-exampleにアップロードされています。実装時の参考にしてください。