チェックアウトは <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-partial | trueの場合、カード情報フォーム入力完了後に自動的に送信( form.submit() )しない |
false |
| data-text | カード情報入力フォームを開くのボタンのテキスト | data-partialが false の時「カードで支払う」、true の時 「カード情報を入力する」 |
| data-submit-text | カード情報入力フォーム内の送信ボタンのテキスト | data-partialが false の時「カードで支払う」、true の時「カード情報を入力する」 |
| data-token-name | 作成されたトークンがセットされるinput name(hidden) | payjp-token |
| data-color | 廃止されました | |
| data-previous-token | エラーにより画面に戻ってきた場合などに、再入力をさせないために作成済みのトークンを入れるパラメーター( data-partial が true の場合のみ機能する ) |
なし |
| data-lang | メッセージなどの表示言語( ja と en が指定可能) |
ja |
| data-on-created | トークンの作成に成功したときに、PAY.JPサーバーからのレスポンスを引数に呼び出される関数名を指定。関数はチェックアウトを読み込むscriptタグよりも前に定義してください。 | なし |
| data-on-failed | トークンの作成に失敗したときに、ステータスコードを第一引数、エラーオブジェクトを第二引数として呼び出される関数名を指定。data-partialがtrueの場合のみ関数が呼び出されます。 | なし |
| data-name-placeholder | カード名義のplaceholderにセットされる値 | PAY TARO |
| data-tenant | Marketplace型利用者は指定することを推奨。data-tenant を渡すことで指定テナントで利用可能なカードブランドのみ利用可能になる。テナントIDの指定が必要な理由についてはトークン作成時のテナントIDについてを参照。 |
なし |
注. 誤って秘密鍵を入れて公開してしまった場合は、必ず管理画面から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 を利用して決済フォームをご用意いただくことをご検討ください。