# Customization

# Branding

Although Spark's billing portal is intended to be an isolated part of your application that is entirely managed by Spark, you can make some small customizations to the branding logo and color used by Spark.

To customize the logo used at the top left of the Spark billing portal, you may specify a configuration value for the brand.logo configuration item within your application's config/spark.php configuration file. This configuration value should contain an absolute path to the SVG file of the logo you would like to use:

'brand' => [
    'logo' => realpath(__DIR__.'/../public/img/logo.svg'),
],

SVG Sizing

You may need to adjust the size and width of your SVG logo by modifying its width in the SVG file itself.

# Brand Color

To customize the color used as the background color of the button elements within the Spark billing portal, you may specify a value for the brand.color configuration item within your application's config/spark.php configuration file. This configuration value should be a valid hex code or correspond to a background color offered by the Tailwind CSS framework (opens new window):

'brand' => [
    'color' => 'bg-indigo-600',

    // Or...

    'color' => '#c5b358',
],

# Font

To customize the font used by the Spark billing portal, you should export Spark's views using the vendor:publish Artisan command:

php artisan vendor:publish --tag=spark-views

Next, within the resources/views/vendor/spark/app.blade.php template, you may define your own font-sans CSS class at the bottom of the templates head section:

<head>
    <!-- ...... -->

    <style>
        .font-sans {
            font-family: 'Your Custom Font';
        }
    </style>
</head>

# Localization

You may localize / translate all of the text within the Spark billing portal. To publish the Spark localization file, you may use the vendor:publish Artisan command:

php artisan vendor:publish --tag=spark-lang

This command will publish a resources/lang/spark/en.json file containing translation keys and values for the English language. You may copy this file and translate it to the language of your choice. For more information on how to use Laravel's translation features, please consult the Laravel localization documentation (opens new window).

# Migrations

Most commonly, applications bill individual users for monthly and yearly subscription plans. However, your application may choose to bill some other type of model, such as a team, organization, band, etc.

In that case, you should add Spark::ignoreMigrations() in the register method of your application's App\Providers\SparkServiceProvider class:

use Spark\Spark;

class SparkServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        Spark::ignoreMigrations();

        // ...
    }
}

Next, you should publish the Spark migrations by running the vendor:publish Artisan command:

php artisan vendor:publish --tag="spark-migrations"

Finally, you should inspect the published migrations and update the 2019_05_03_000001_add_spark_columns_to_users_table.php file to add the columns needed by Spark to the table that will be used by your application's billable model.

# Webhooks

Spark and Cashier automatically handle subscription cancellations for failed charges and other common Stripe webhook events. However, if you have additional webhook events you would like to handle, you may do so by listening to the WebhookReceived event that is dispatched by Cashier.

First, you should create a listener for the event. Then, inside of the listener's handle method, you will receive the WebhookReceived event which contains the event payload. You may inspect this event's payload to determine if the given listener should handle the underlying Stripe event:

<?php

namespace App\Listeners;

use Laravel\Cashier\Events\WebhookReceived;

class StripeEventListener
{
    /**
     * Handle the event.
     */
    public function handle(WebhookReceived $event): void
    {
        if ($event->payload['type'] !== 'customer.subscription.updated') {
            return;
        }

        // Handle the incoming event...
    }
}

Next, the listener should be registered in your application's App\Providers\EventServiceProvider class:

use App\Listeners\StripeEventListener;
use Laravel\Cashier\Events\WebhookReceived;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event handler mappings for the application.
     *
     * @var array
     */
    protected $listen = [
        WebhookReceived::class => [
            StripeEventListener::class,
        ],
    ];