Oliver Servín

Custom styling the pay button with Laravel Cashier Paddle

When using Laravel Cashier Paddle, the styling provided for the pay button is not the prettier. Fortunately, Laravel Cashier provides a paddle-button blade component with the option to add custom styling.

Standard Paddle styling.

To disable the standard Paddle styling, you can add the data-theme="none" to the component:

<x-paddle-button :url="$payLink" data-theme="none">
Buy Product
</x-paddle-button>

Then you can add some Tailwind CSS to give it a better look:

<x-paddle-button :url="$payLink" class="w-full bg-green-600 border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500" data-theme="none">
Buy Product
</x-paddle-button>


Interact with API result values as object properties in Laravel


Get relative path with `route()` in Laravel


Chokidar file watcher to auto-run Pest tests


Chaining "Where" conditions using dynamic methods


Model factories with relationships by using magic methods


Show amount to pay in next billing cycle with Laravel Cashier (Stripe)


Tax calculation with Laravel Cashier for Stripe


How to keep in sync your customers details with Stripe in Laravel


Handle Paddle's marketing consent with Laravel


Custom styling the pay button with Laravel Cashier Paddle


Embed Paddle's checkout widget with Laravel Cashier


Weekly auto-reset a Laravel demo app


Remove the personal_access_tokens table on a fresh Laravel App


Deploy Umami analytics with Launcher


Fix Laravel storage:link using Launcher


Launcher: first impressions


Integrating Tiptap in a Laravel-Livewire project


Probando Google Ads con RadioCúbito(Design)


How to run a Ghost blog on Laravel Forge