クレジットカード情報をトークン化するpayjp.jsの使い方

2018年03月に迫ったPCI DSS準拠に向けて、クレジットカード情報をいかに所持せずに決済処理を提供するかが必要になっています。(via カード情報非保持化対応のお願い - PAY.JP Announcement )

PAY.JPのチェックアウトボタンを付けるだけでクレジットカード番号をトークン化できますが、よりカスタマイズしたフォームで自社サイトと親和性高く提供したいと考える方も多いでしょう。

そこで使えるのがpayjp.jsになります。Webブラウザ上でクレジットカード番号を入力してもらい、それをトークン化する流れをJavaScriptで提供する機能です。

payjp.jsの準備

payjp.jsは以下のJavaScriptコードを追加するだけで利用できます。

<script type="text/javascript" src="https://js.pay.jp/"></script>

クレジットカード番号入力フォームの用意

次にクレジットカード番号を入力する項目を用意します。これはHTMLで直接記述します。この時、カード番号/有効期限(年および月)は必須です。処理としてはトークン作成処理になりますので、請求先住所やカード保有者といった情報も送信できます。

<form>
  <div class="form-group">
    <label for="inputCardNumber">カード番号</label>
    <input type="text" class="form-control" id="card_number" placeholder="カード番号">
  </div>
  <div class="form-group">
    <label for="inputCVV">CVV/セキュリティコード</label>
    <input type="text" class="form-control" id="cvv" placeholder="CVV">
  </div>
  <div class="form-group">
    <label for="inputExp">有効期限</label>
    <div class="row">
      <div class="col-md-6">
        <input type="text" class="form-control" id="exp_year" placeholder="年">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" id="exp_month" placeholder="月">
      </div>
    </div>
  </div>
  <button id="token">トークン化</button>
</form>
<!-- 今回はHTML上に結果を表示します -->
生成されたトークン:<div id="card_token"></div>

JavaScriptでの処理

そしてボタンを押したタイミングなどでJavaScriptの処理を実行します。 payjp.js の処理としては公開鍵の設定( setPublicKey )とトークンの生成( createToken )くらいしか処理はいりません。

// DOM読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', (e) => {
  // payjp.jsの初期化
  Payjp.setPublicKey('YOUR_PUBLIC_KEY');
  
  // ボタンのイベントハンドリング
  const btn = document.getElementById('token');
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    
    // カード情報生成
    const card = {
      number: document.getElementById('card_number').value,
      cvc: document.getElementById('cvv').value,
      exp_month: document.getElementById('exp_month').value,
      exp_year: document.getElementById('exp_year').value
    };
    
    // トークン生成
    Payjp.createToken(card, (status, response) => {
      if (status === 200) {
        // 出力(本来はサーバへ送信)
        document.getElementById('card_token').innerHTML = response.card.id;
      }
    });
  });
}, false);

実際に処理を行ってみると、ボタンを押したタイミングで PAY.JP のサーバにクレジットカード情報を送信し、結果としてトークンなどの情報を受け取っているのが分かります。

f:id:goofmint:20171125183207g:plain

後はこのトークンをサーバに送信し、課金額と一緒に決済処理を行えば良いでしょう。

payjp.js を使うことでクレジットカード入力画面の自由度は飛躍的に高まります。サーバへクレジットカード番号が送られないのでPCI DSSへの対応も不要です。ぜひ使ってみてください。

payjp.js | PAY.JP