logo

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:

php
'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:

php
'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:

bash
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:

html
<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:

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

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.

If this describes your application, you should inspect Spark's published migrations and update the add_spark_columns_to_users_table migration with the columns that will be used by your application's billable model. For more information on customizing migrations for team billing, checkout our Cookbook documentation.

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
<?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...
    }
}