PAY.JP

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

チェックアウトライブラリは https://checkout.pay.jp にホストされているため、script タグを使用して読み込んでください。その際、指定の class 名や属性も記述する必要があります。

<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 必須	あなたの公開鍵(注1)	なし
data-partial	`"true"` (注2)の場合、カード情報フォーム入力完了後に自動的に送信( `form.submit()` )しない	`false`
data-text	カード情報入力フォームを開くボタンのテキスト	`data-partial` が `false` の時「カードで支払う」、`true` の時「カード情報を入力する」
data-submit-text	カード情報入力フォーム内の送信ボタンのテキスト(注3)	`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にセットされる値(注3)	PAY TARO
data-tenant	Marketplace型利用者は指定することを推奨。`data-tenant` を渡すことで指定テナントで利用可能なカードブランドのみ利用可能になる。テナントIDの指定が必要な理由についてはトークン作成時のテナントIDについてを参照。	なし

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

注 2: 論理属性ではありません。属性をセットしない・値をセットしない・無効な値をセット、の場合はデフォルト値が採用されます。

注 3：これらの値は他の値と異なり、ページ読み込み時ではなく、初めて Checkout のモーダルが開かれたタイミングで評価されます。

プレリリース機能

以下は現在プレリリース中の機能となります。
必ずお知らせの「2024年2月以前に 3Dセキュア対応版の利用を開始する場合」をお読みいただいた上でご使用ください。

script タグで読み込む src を "https://checkout.pay.jp/prerelease" にすることでお使いいただけます。

<script
        type="text/javascript"
        src="https://checkout.pay.jp/prerelease"
        class="payjp-button"
        data-payjp-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
>
</script>

属性名接頭辞

現在の属性名は全て 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	メール入力欄を生成する (注4)。値も指定すると初期値となる。（注3,5）	なし
data-payjp-extra-attribute-phone	電話番号入力欄を生成する (注4)。値も指定すると初期値となる。（注3,5）	なし
data-payjp-extra-attribute-phone-code	`data-payjp-extra-attribute-phone` 指定時、電話番号入力欄における国コード( `"JP"` など)のデフォルト値となる。（注3）	JP
data-payjp-three-d-secure	`"true"` (注2)の場合、トークン作成時に3Dセキュアを行う。 `"true"` の場合は `data-payjp-three-d-secure-workflow` も指定されないとエラーとなる。（注3）	false
data-payjp-three-d-secure-workflow	3Dセキュアワークフローを指定する。 subwindow : サブウィンドウ型で自動的に認証を行う redirect : リダイレクト型へ変更	なし (注6)

注 4：入力欄は必須項目ですが、email と phone を同時に生成すると、片方のみが必須項目となります。背景についてはEMV 3Dセキュア導入義務化を参照ください。

注 5：これらの値は、まず document.querySelector() での検索に使用され、見つかればその value を使い、なければ指定値を生の文字列として扱います。

注 6：管理画面でトークン 3Dセキュアを実施するモードが有効になっている場合、このオプションの指定がない場合は redirect がデフォルト値となります。

設定例

全属性の設定例。メールと電話番号の入力欄が生成され、電話番号には初期値がセットされている。

<script
        type="text/javascript"
        src="https://checkout.pay.jp/"
        class="payjp-button"
        data-payjp-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
        data-payjp-partial="true"
        data-payjp-text="モーダルを開く"
        data-payjp-submit-text="カードを登録する"
        data-payjp-token-name="payjp-token"
        data-payjp-previous-token="tok_xxx"
        data-payjp-lang="ja"
        data-payjp-on-created="onSuccess"
        data-payjp-on-failed="onFailed"
        data-payjp-name-placeholder="PAY HANAKO"
        data-payjp-tenant="tenant_id"
        data-payjp-extra-attribute-email
        data-payjp-extra-attribute-phone="05011112222"
        data-payjp-extra-attribute-phone-code="JP"
        data-payjp-three-d-secure="true"
        data-payjp-three-d-secure-workflow="redirect"
>
</script>

電話番号の入力欄を生成し、初期値にページ内で入力された値をセットしたい場合。

<input id="phone" type="text" value="09012345678" />
<script
        type="text/javascript"
        src="https://checkout.pay.jp/"
        class="payjp-button"
        data-payjp-key="pk_test_0383a1b8f91e8a6e3ea0e2a9"
        data-payjp-partial="true"
        data-payjp-extra-attribute-phone="#phone"
>
</script>

プレリリース版更新履歴

プレリリース版に関して、本リリース前に更新された場合にこちらに記載をいたします。
現在の更新内容は下記です。

更新日付	更新サマリー	更新内容
2024/11/14	不具合修正	data-payjp-extra-attribute-email,およびdata-payjp-extra-attribute-phoneを両方指定ではなく片方だけ指定した場合、追加項目のフォームが表示はされるが未入力のままトークン作成が可能となっておりました。必須入力となるよう更新いたしました。

動作環境

Google Chrome(PC, Android)、Safari(macOS, iOS)、Firefox、Microsoft Edge の最新バージョン

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

注意事項

※ トークン作成時の 3Dセキュアは現在プレリリース版でのみ対応しています。必ずお知らせの「2024年2月以前に 3Dセキュア対応版の利用を開始する場合」をお読みいただいた上でご使用ください。

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