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

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

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