Checkout

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

チェックアウトライブラリは https://checkout.pay.jp にホストされているので、scriptタグを利用して読み込んで下さい。 その際、パラメーターを指定する必要があります。

以下は例となります。

<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
  data-submit-text="トークンを作成する"
  data-partial="true">
</script>

以下が上記コードの結果です。

scriptタグを埋め込んだ位置に青いボタンが生成されます。 同時に <input type="hidden" name="payjp-token"> というコードも生成され、ここにカード情報入力後、生成されたトークンがセットされます。

パラメーター

パラメータ名 説明 デフォルト
class 必須 ‘payjp-button’を設定(この値はページ内で他で使用しないでください) なし
data-key 必須 あなたの公開鍵(注) なし
data-payjp PAY.JPで発行したOAuth Client IDを入れると、カード番号を入力することなく決済が可能なPAY ID決済を利用できるようになる なし
data-partial trueの場合、カード情報フォーム入力完了後に自動的に送信( form.submit() )しない false
data-text カード情報入力フォームを開くのボタンのテキスト data-partialfalse の時「カードで支払う」、true の時 「カード情報を入力する」
data-submit-text カード情報入力フォーム内の送信ボタンのテキスト data-partialfalse の時「カードで支払う」、true の時「カード情報を入力する」
data-token-name 作成されたトークンがセットされるinput name(hidden) payjp-token
data-color 廃止されました
data-previous-token エラーにより画面に戻ってきた場合などに、再入力をさせないために作成済みのトークンを入れるパラメーター( data-partialtrue の場合のみ機能する ) なし
data-lang メッセージなどの表示言語( jaen が指定可能) ja
data-on-created トークンの作成に成功したときに、PAY.JPサーバーからのレスポンスを引数に呼び出される関数名を指定。関数はチェックアウトを読み込むscriptタグよりも前に定義してください。 なし
data-on-failed トークンの作成に失敗したときに、ステータスコードを第一引数、エラーオブジェクトを第二引数として呼び出される関数名を指定。data-partialがtrueの場合のみ関数が呼び出されます。 なし
data-name-placeholder カード名義のplaceholderにセットされる値 TARO YAMADA
data-tenant Marketplace型利用者は指定が必要。data-tenant を渡すことで指定テナントで利用可能なカードブランドのみ利用可能になる。テナントIDの指定が必要な理由についてはPAY.JP Platform チェックアウト・モバイルSDK(Marketplace)を参照。 なし

注. 誤って秘密鍵を入れて公開してしまった場合は、必ず管理画面からAPIキーの更新を行って下さい。秘密鍵を入れて動作させた場合、Sending credit card numbers directly to the API is generally unsafe. Use Checkout or payjp.js. というエラーが発生し、トークン作成は行えません。

動作環境

Chrome(PC, Android), Safari(mac, iOS), Firefox, Edge の最新バージョン

動作にはブラウザがTLS 1.2に対応している必要があります。

注意事項

チェックアウトは、HTMLドキュメントの読み込みを起点として決済フォームを構築するため、各種のシングルページアプリケーションフレームワークやRuby on Railsのturbolinks機能など、 通常の画面遷移やドキュメント読み込みとは違う方法を利用する場合に、正しく表示されないことがあります。 この場合は payjp.js を利用して決済フォームをご用意いただくことをご検討ください。