ここでは、クライアントに入力フォームを組み込み、カード情報のトークン化を行う方法について説明します。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
- カード名義: PAY TARO
チェックアウトは、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 ガイドをご覧ください。
これでトークンを作成するカスタムフォームができました。 あとはここで取得したトークンを用いて支払い処理などを行いましょう。