カード情報のトークン化

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

  • チェックアウト:
    • デザイン済みのWeb決済フォーム
    • カード情報のバリデーション機能
    • <script> タグ一行で実装可能
  • payjp.js:
    • Web向け
    • カード情報のトークン化のみに特化
    • デザインや挙動を好きなものにカスタマイズ可能
  • iOS SDK:
    • iOS向け
    • カード情報のトークン化
    • ApplePayをつかった支払い
  • Android SDK:
    • Android向け
    • カード情報のトークン化

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

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

基本

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

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

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

チェックアウト

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

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

  • カード番号: 4242424242424242
  • 有効期限: 12/30
  • 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=作成したトークン"

Checkoutリファレンスを見る

カスタムフォーム

チェックアウトのようにデザインされたフォームが必要ない場合、payjp.jsを使うことで、好きなデザインや挙動でトークン化を行うフォームを組み込むことができます。

詳しくはpayjp.js ガイドをご覧ください。


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

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