18 Nov 2023
Fix: Laravel Cashier Paddle buttons with Breeze Livewire
This fix works for Laravel Cashier Paddle.
By default, Laravel Cashier Paddle buttons don't work with Laravel Breeze (Livewire) when you navigate (via a href) to the page which contains the button.
The buttons do work if you go directly to the page URL (via the browser URL bar), or refresh after you navigate to the page via a href.
This is because the Cashier docs tell you to include the @paddleJS scripts within the <head> tag on the website.
This is fine usually, but it doesn't work if you use if you use Livewire's wire:navigate function (which Breeze does, if you select Livewire).
But, as the Livewire documentation states:
If two pages include the same <script> tag in the <head>, that script will only be run on the initial page visit and not on subsequent page visits.
This means that the checkout initialiser does not run again when you navigate to a page which contains the checkout button.
However, scripts in the <body> tag are re-evaluated, as the documentation points out.
All you need to do is move the @paddleJS scripts into the body, like so:
Now, everything works as expected!