カード情報のトークン化

ここでは、ブラウザに入力フォームを組み込み、カード情報のトークン化を行う方法について説明します。PAY.JPでは、トークン化を行うフォームライブラリとして、チェックアウトとpayjp.jsという2種類のライブラリを提供しています。 それぞれの大きな特徴は次のとおりです。

チェックアウト:

  • デザイン済みの決済フォーム
  • カード情報のバリデーション機能
  • <script> タグ一行で実装可能

payjp.js:

  • カード情報のトークン化のみに特化
  • デザインや挙動を好きなものにカスタマイズ可能

自分のサービスに合わせて好きなライブラリを利用してください。

基本

カード情報をトークン化する処理は次のステップで行われます。

  • チェックアウトやpayjp.jsで生成されたフォームにカード情報を入力し送信
  • 入力されたカード情報は直接PAY.JPサーバーへ送られ、PAY.JPは一意のトークンを返す
  • サーバーサイドでトークンを受け取り、トークンを使った各種処理を行う(支払い処理、顧客へカードを紐付けるなど)

認証は pk_ から始まるパブリックキーを <script> タグ内にセットして行われます。sk_ から始まるものはサーバーサイドで用いるためのシークレットキーになるので、決して公開しないよう取扱いに注意してください。

チェックアウト

チェックアウトでは <script> タグを1行記述するだけで、 デザインされた決済フォーム、カード情報のバリデーション、カード情報のトークン化を行うフォームを生成することができます。

チェックアウトを試してみたい方は、下記の「カード情報を入力する」をクリックして下記の情報を入力し、「トークンを作成する」を押してください。

  • カード番号: 4242424242424242
  • 有効期限: 1220
  • CVC: 123
  • カード名義: YUI ARAGAKI

作成されたトークン:

チェックアウトは、HTMLで下記のようなコードを書くだけでフォームが生成されます。

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

data-key には各ユーザーのパブリックキーを入力します。この例では、/paypayjp-token パラメーターの値としてトークンを送信しています。 サーバ側では、PAY.JPで作られたトークンを受け取り、支払い処理や顧客にカード情報を紐付けたり、必要な処理を行います。

$ curl "https://api.pay.jp/v1/charges" \
  -u "sk_test_c62fade9d045b54cd76d7036": \
  -d "amount=400" \
  -d "currency=jpy" \
  -d "card=作成したトークン"

トークンを使ってカードを所有する顧客を作成したり、あなたの用途に合わせてさまざまな使い方ができます。

$ curl "https://api.pay.jp/v1/customers" \
  -u "sk_test_c62fade9d045b54cd76d7036": \
  -d "card=作成したトークン"

チェックアウトリファレンスを見る

カスタムフォーム

チェックアウトのようにデザインされたフォームが必要ない場合、payjp.jsを使うことで、好きなデザインや挙動でトークン化を行うフォームを組み込めます。 payjp.jsは、チェックアウトのようなUIやバリデーションの機能はもたずに、カード情報のトークン化のみに特化したライブラリです。

下記は実際の payjp.js を用いたサンプルページです。

payjp.js サンプルページ

「サンプルのカードを使う」をクリックし送信を行うと、チェックアウトと同様にトークンが作成されます。(サンプルコードのソースはこちら)

以下、payjp.js使ったフォームの組み込みについて、実際のコードを交えて説明します。(コードはjqueryの利用を前提としたサンプルになっています。)

まず最初に <script> タグからpayjp.jsを読み込み、ご自身の公開キーをセットします。

<script type="text/javascript" src="https://js.pay.jp/"></script>
<script type="text/javascript">Payjp.setPublicKey('pk_test_0383a1b8f91e8a6e3ea0e2a9');</script>

次に表示するフォームをHTMLで記述します。

<form method="POST" action="/pay" id="charge-form">
  <span class="charge-errors"></span>

  <h4>支払い</h4>
  <label>カード番号</label>
  <input type="text" class="number" name="number" maxlength="16" placeholder="カード番号">

  <label>CVC</label>
  <input type="text" class="cvc" name="cvc" maxlength="3" placeholder="CVC">

  <label>有効期限</label>
  <input type="text" class="exp_month" name="exp_month" maxlength="2" placeholder="月">
  <input type="text" class="exp_year" name="exp_year" maxlength="4" placeholder="年">

  <button type=submit">送信</button>
</form>

最後に、submitボタンが押された時にトークンを作成する処理を書きます。トークン作成は Payjp.createToken というメソッドを使って行います。

<script type="text/javascript">
(function() {
  var form = $("charge-form"),
      number = form.find('input[name="number"]'),
      cvc = form.find('input[name="cvc"]'),
      exp_month = form.find('select[name="exp_month"]'),
      exp_year = form.find('input[name="exp_year"]');

  $("#charge-form").submit(function() {
    form.find("input[type=submit]").prop("disabled", true);

    var card = {
        number: number.value,
        cvc: cvc.value,
        exp_month: exp_month.value,
        exp_year: exp_year.value
    };
    Payjp.createToken(card, function(s, response) {
      if (response.error) {
        form.find('.payment-errors').text(response.error.message);
        form.find('button').prop('disabled', false);
      }
      else {
        $(".number").removeAttr("name");
        $(".cvc").removeAttr("name");
        $(".exp_month").removeAttr("name");
        $(".exp_year").removeAttr("name");

        var token = response.id;

        form.append($('<input type="hidden" name="payjpToken" />').val(token));
        form.get(0).submit();
      }
    });
  });
})();
</script>

これでトークンを作成するカスタムフォームができました。あとはここで取得したトークンを用いて支払い処理などを行いましょう。

payjp.jsリファレンスを見る

支払い処理のチュートリアルへ