Adam

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).

Cashier Paddle head script

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:

Cashier Paddle body script

Now, everything works as expected!