こんちには。今日はPay.jpについての記事を書きます。
Pay.jpのクレジットカード決済では、2025年3月末までに3Dセキュア（本人認証）への対応が必須 になりました。
過ぎているではないか（泣笑）そんなことすっかり忘れてしまっており、、、、、、、大急ぎで改修に。。。。
私の環境ではLaravel + Pay.jp Checkoutを利用しており、今回「iframe型」で3Dセキュアの導入を行いました。
iframe型は2025年6月に提供されたので、まだあまり経ってないですがPay.jp様はiframe型を推してますな～～～
サブウィンドウは結構クセがあるらしい。
リダイレクト型は難易度高い感じなので、確実にいきたいので、今回は却下。
実装前はドキュメント量に少し身構えていましたが、実際に行ってみるとBladeのscript部分を変更するだけでOKそうだったので意外にサクサクできました。
Pay.jpの3Dセキュアの形式は3種類
やり方は3パターンあるみたいで、Pay.jpが提供している3Dセキュアの形式は以下の3つです。
- iframe型
- サブウィンドウ型
- リダイレクト型
今回は実装が最も容易とされているiframe型を採用していて実装していきます。
クレジット決済が導入できていない人は以下の記事を参考にしてください。
※ただし、3Dセキュアに非対応のため、scriptの書き換えは必要となります。
↓↓↓↓↓↓記事はこちら↓↓↓↓↓↓
まずは3Dセキュアへの仕様変更点｜data属性の変更
3Dセキュア対応前のPay.jpは以下のようなscriptを使用していました。
3Dセキュア導入前
<form action="{{ route('payment') }}" method="post">
@csrf
<script
src="https://checkout.pay.jp/"
class="payjp-button"
data-key="{{ config('payjp.public_key') }}"
data-text="カード情報を入力"
data-submit-text="カードを登録する"
></script>
</form>しかし、新仕様では以下のように すべてdata-●●から→data-payjp-●●に統一されています。
概要ページを詳しく見たい方はこちら↓↓↓↓
https://docs.pay.jp/v1/checkout
data属性を新仕様に変更
<form action="{{ route('payment') }}" method="post">
@csrf
<script
src="https://checkout.pay.jp/"
class="payjp-button"
data-payjp-key="{{ config('payjp.public_key') }}"
data-payjp-text="カード情報を入力"
data-payjp-submit-text="カードを登録する"
></script>
</form>属性名の変更はできましたか？
ですが、これだけでは3Dセキュアは対応していません。まだまだいきますよー
3Dセキュアを有効化するための属性を追加する
3Dセキュアの利用には以下の4属性が必須になります。
emailとphoneはどちらかでいいそうです。
- data-payjp-three-d-secure
- data-payjp-three-d-secure-workflow
- data-payjp-extra-attribute-email
- data-payjp-extra-attribute-phone
以下のコードで4つの属性を追加しました。完成形（iframe型）はこちら↓↓↓↓↓↓
<form action="{{ route('payment') }}" method="post">
@csrf
<script
src="https://checkout.pay.jp/"
class="payjp-button"
data-payjp-key="{{ config('payjp.public_key') }}"
data-payjp-text="カード情報を入力"
data-payjp-submit-text="カードを登録する"
data-payjp-three-d-secure="true"
data-payjp-three-d-secure-workflow="iframe"
data-payjp-extra-attribute-email
data-payjp-extra-attribute-phone
></script>
</form>各属性の意味
data-payjp-three-d-secure
3Dセキュア利用の有無。trueにすると有効化。
pay.jpの概要ページにも記載がありますが
trueの場合は、data-payjp-three-d-secure-workflowも指定されないとエラーとなる。
と、記載あるためdata-payjp-three-d-secure-workflowも追加します。
data-payjp-three-d-secure-workflowの値は、使用する型で変わってきます。
今回私はiframe型なので、data-payjp-three-d-secure-workflow=”iframe”とします。
3Dセキュアでは、メールアドレスまたは電話番号のどちらかが必須になりますので、以下の属性を追加します。
data-payjp-extra-attribute-email
data-payjp-extra-attribute-phone
片方でも構いませんが、私は両方入れています。
実装したのがこちら↓↓↓↓
メールと電話番号が追加されていますね。。。。！
3Dセキュア導入後、本番モードで動作確認したところ、
- 認証メール送信
- ワンタイムパス入力
- iframe内の認証
- 決済完了
すべて正常でした。
メールもこんな感じで届きました↓↓↓↓↓
但し、気になったのがメール内容で金額が11JPYになるという現象が発生して少し焦りました。
色々調べていたらPay.jpから最近お問い合わせが多いと11JPYについて回答されているページがあり内容読んで問題ない事が確認でき、安堵です。
これはPay.jpの仕様らしいです。
Pay.jp公式を引用した文章↓
PAY.JPの仕様として、トークン発行時にカードの有効性確認のため11円のオーソリが発生します。
そのため、PAY JPにカードが登録されると、カードの有効性確認の為に11円程度の支払い処理が行われます。
この11円の支払いは与信枠の確保のみで即時返金を行っており、実際に引き落とされることはありませんのでご安心ください。
ただし、デビットカードやプリペイドカードなど与信枠が無いカードについては、後日返金されますが、残高から実際に引かれるケースがあることをご了承ください。
↓↓↓↓↓11円問題を記載してたページはこちら↓↓↓↓↓
サーバー処理はそのままで動く
Pay.jpのCharge APIは3Dセキュア導入後も特に変更がありません。
そのまま利用できそうな感じですね。
リダイレクト型はサーバー処理の書き換え必須だと思います。また機会があればやってみようと思います。
まとめ：Pay.jpの3Dセキュア対応はiframe型なら想像より簡単
script属性修正が中心
iframe型が最も導入しやすい
3Dセキュア認証で11円が表示されるのは仕様
API（Charge）側のコードは基本変更不要
以上が今回実装した内容となります。
クレジットも実装楽になったなああああああ。関心です。
今後も発信していくので、またぜひ覗きに来てください！！
コメント