Laravel Cashierの3Dセキュア支払い確認ページを日本語化する
はじめに
Laravel Cashierを使用してStripeの3Dセキュア対応を実装する際、支払い確認ページが英語表示となっています。本記事では、この確認ページを日本語化する方法について解説します。
本ブログでは3Dセキュアの支払い確認ページの日本語化のみの内容となっていますので、前段の3Dセキュアの対応については別途対応が必要です。
それについては、以下の記事などが参考になると思います。
前提条件
- Laravel 8.x以上
- Laravel Cashier 13.x以上
- PHP 7.4以上
- Composer
結論から
結論からお伝えすると、Cachierが表示しているページのbladeは、vendor/laravel/cashier/resources/views配下にあります。
これらを自身のビューに配置すれば好きに修正が可能となります。
1. Cachierのテンプレートをコピー
# 確認ページのビューをコピー
php artisan vendor:publish --tag=cashier-views
resources/views/vendor/cashierディレクトリにbladeファイルがコピーされます。
2. テンプレートを修正
ご自身のレイアウトを適用したり、テキストの内容を変更したりしてください。
実装方法
ここからは日本語化に向けて詳細な手順を示します。
Cashierが提供する支払い確認ページは、vendor/laravel/cashier/resources/views配下にあります。
これをカスタマイズするために、まずはviewファイルをプロジェクトにコピーする必要があります。
以下はCashierのGithubにあるbladeですが、内容はこのbladeファイルと同じかと思います。
1. ビューファイルのコピー
# 確認ページのビューをコピー
php artisan vendor:publish --tag=cashier-views
このコマンドを実行すると、resources/views/vendor/cashierディレクトリにbladeファイルがコピーされます。
私の場合は以下３ファイルが配置されました。
- checkout.blade.php
- payment.blade.php
- receipt.blade.php
3Dセキュアの確認で使用されているのはpayment.blade.phpです。
他2ファイルは不要だと思いますので削除していただいて構わないです。
実装によっては使用されている場合もあるかと思いますので、必要に応じてメンテナンスしてください。
2. 支払い確認ページの日本語化
resources/views/vendor/cashier/payment.blade.phpを編集します。
特に困る部分はないですが、タグはそのままで、テキスト表示される部分を適宜修正していきます。
extendsを用いてレイアウトを適用する場合の注意点としては、
payment.blade.phpはvue.jsを使用しているため、レイアウトに含まれていない場合は、別途読み込んであげるか、専用のレイアウトを作成して適用するようにしましょう。
また、cssはtailwindを用いているため、普段bootstrapを用いている場合はclassの指定が異なるので注意が必要でしょう。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
・・・略・・・
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
注意点
-
言語ファイルの活用
- コピーしてきたbladeファイルでは直接テキストを記述していますが、
resources/langディレクトリに言語ファイルを作成し、翻訳キーを使用することをお勧めします。
- コピーしてきたbladeファイルでは直接テキストを記述していますが、
-
アップデート時の対応
- Cashierのアップデート時にビューファイルが更新される可能性があります。
- 重要な更新がある場合は、カスタマイズしたビューファイルも適宜更新する必要があります。
まとめ
vendor:publishを使うことでCashierの支払い確認ページをプロジェクトにコピーして、
日本語化することができます。
これで3Dセキュアの対応はバッチリ、と思いましたが、3Dセキュア確認の最中にエラーが発生するとサブスクリプションの状態が「未完了」となり、次の決済がうまく動いていないので、また別の機会に解決策をブログにしたいと思います
Discussion