チェックアウトは、<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. というエラーが発生し、トークン作成は行えません。
開発中機能
以下は現在開発中の機能となります。
リリース予定はこちらをご参照ください。
パラメータ名接頭辞の変更
現在のパラメーターは全て data-* の形式で指定していただいておりますが、datasetの一意性に配慮し今後 data-payjp-* 形式での指定を可能にする予定となっております。
以前まで記載していた data-key など、 data-payjp-* ではなく data-* での表現も引き続き利用可能です。
この指定方法のリリース後に data-payjp-key と data-key を指定した場合は、 data-payjp-key のみ利用されます。
追加予定パラメーターの一覧
※前項の通り、 data-payjp-* ではなく data-* での指定も可能です。
| パラメーター名 | 説明 | デフォルト |
|---|---|---|
| data-payjp-extra-attribute-email | メール入力欄を生成する (注1)。値も指定すると初期値となる（注2）。 | なし |
| data-payjp-extra-attribute-phone | 電話番号入力欄を生成する (注1)。値も指定すると初期値となる（注2）。 | なし |
| data-payjp-extra-attribute-phone-code | data-extra-attribute-phone 指定時、電話番号入力欄における国コード( 'JP' など)のデフォルト値となる。 |
'JP' |
| data-payjp-three-d-secure | trueを指定することで、トークン作成時に3Dセキュアを行う。 trueの場合 data-payjp-three-d-secure-workflow も指定されないとエラーとなる。 |
false |
| data-payjp-three-d-secure-workflow | 3Dセキュアワークフローを指定する。 subwindow : サブウィンドウ型で自動的に認証を行う redirect : リダイレクト型へ変更 |
なし |
注1：入力欄は必須項目ですが、emailとphoneを同時に生成すると、片方のみが必須項目となります。背景についてはEMV 3Dセキュア導入義務化を参照ください。
注2：これらの値は、初めてCheckoutのモーダルが開かれたタイミングで、まず document.querySelector() で検索されます。見つかればそのvalueを使います。なければ、指定値を生の文字列として扱います。
動作環境
Google Chrome(PC, Android)、Safari(macOS, iOS)、Firefox、Microsoft Edge の最新バージョン
動作にはブラウザが TLS 1.2 に対応している必要があります。
注意事項
※ トークン作成時の3Dセキュアは現在開発中です。開発中の機能のリリースをお待ちください。
チェックアウトは、HTML ドキュメントの読み込みを起点として決済フォームを構築するため、各種のシングルページアプリケーションフレームワークや Ruby on Rails の Turbolinks 機能など、通常の画面遷移やドキュメント読み込みとは異なる方法を利用する場合に、正しく表示されないことがあります。
この場合は payjp.js を利用して決済フォームを用意することをご検討ください。