Checkout

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

チェックアウトライブラリは https://checkout.pay.jp にホストされているので、このドメインを読み込んで使います:

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

パラメーター

パラメータ名 説明 デフォルト
data-key 必須 あなたのパブリックキー なし
data-payjp PAY.JPで発行したOAuth Client IDを入れると、カード番号を入力することなく決済が可能なPAY ID決済を利用できるようになる なし
data-partial trueとセットすると、カード情報フォーム入力後に自動的に送信(自動的なトークン作成)しない false
data-text カード情報入力フォームを開くのボタンのテキスト data-partialfalse の時「カードで支払う」、true の時 「カード情報を送信する」
data-submit-text カード情報入力フォーム内の送信ボタンのテキスト data-partialfalse の時「カードで支払う」、true の時「カード情報を送信する」
data-token-name 作成されたトークンがセットされるinput name(hidden) payjp-token
data-color 廃止されました フォームに表示されるアイコンなどの色を16進数(例 #198fcc)で指定する
data-previous-token エラーにより画面に戻ってきた場合などに、再入力をさせないために作成済みのトークンを入れるパラメーター なし
data-lang メッセージなどの表示言語( jaen が指定可能) ja
data-on-created トークンの作成に成功したときに、PAY.JPサーバーからのレスポンスを引数に呼び出される関数名を指定 なし
data-on-failed トークンの作成に失敗したときに、ステータスコードを第一引数、エラーオブジェクトを第二引数として呼び出される関数名を指定 なし
data-name-placeholder カード名義のplaceholderにセットされる値 TARO YAMADA

HTML内に下記のコードを埋め込むとフォームが生成されます:

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
  data-on-created="onCreated"
  data-text="支払う"
  data-submit-text="支払う"
  data-partial="true">
</script>

ブラウザで開くと、「支払う」という青いボタンが表示されると思います。このとき <input type="hidden" name="payjp-token"> というコードも上記の <script> タグの下に生成されています。これはブラウザ上で生成されたトークンがセットされるhiddenパラメーターとして扱われます。