カード情報のトークン化

このページでは、クライアントに入力フォームを組み込み、カード情報のトークン化を行う方法について説明します。PAY.JP では、トークン化を行うフォームライブラリとして、以下のライブラリを提供しています。それぞれの主な特徴は次のとおりです。

自分のサービスに合わせて最適なライブラリを選んでください。

以下では、チェックアウトと payjp.js について詳しく説明します。他のライブラリについては、それぞれのドキュメントをご覧ください。

基本的な流れ

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

認証は、pk_ から始まる公開鍵を <script> タグ内にセットして行います。sk_ から始まる秘密鍵は、サーバーサイドで使用するためのものなので、公開しないよう取り扱いに注意してください。

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

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

作成されたトークン:

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

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

data-key には、各ユーザーの公開鍵を入力します。この例では、/pay に payjp-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 ガイドをご覧ください。

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