Oliver Servín

Now Twitter Github Contact


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>
Styling disabled.

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>
Styling with Tailwind CSS.

Subscribe to get by email future posts or grab the RSS feed.


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)


Introducing RadioCúbito Wordful – a simple blogging package for Laravel


How to run a Ghost blog on Laravel Forge


Building an Open Source project in 2021