チェックアウトは、<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-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. というエラーが発生し、トークン作成は行えません。
動作環境
Google Chrome(PC, Android)、Safari(macOS, iOS)、Firefox、Microsoft Edge の最新バージョン
動作にはブラウザが TLS 1.2 に対応している必要があります。
注意事項
※ トークン作成時の3DセキュアはCheckoutライブラリではご利用いただけません。payjp.jsをご利用ください。
チェックアウトは、HTML ドキュメントの読み込みを起点として決済フォームを構築するため、各種のシングルページアプリケーションフレームワークや Ruby on Rails の Turbolinks 機能など、通常の画面遷移やドキュメント読み込みとは異なる方法を利用する場合に、正しく表示されないことがあります。
この場合は payjp.js を利用して決済フォームを用意することをご検討ください。