How to Change PayPal Button Styles in Magento 2

Magento 2 has built-in support for PayPal Smart Buttons, which lets store owners offer an easy checkout process. However, changing how these buttons look isn't simple because some settings are not adjustable in admin.

This guide will show you how to edit PayPal button styles using a plugin, and Magento’s dependency injection system.

Understanding the SmartButtonConfig Class

The Magento\Paypal\Model\SmartButtonConfig class controls PayPal button settings. Here’s a simplified version of the class:

class SmartButtonConfig
{
    private $defaultStyles;

    public function __construct(
        ResolverInterface $localeResolver,
        ConfigFactory $configFactory,
        ScopeConfigInterface $scopeConfig,
        SdkUrl $sdkUrl,
        PaypalConfig $paypalConfig,
        $defaultStyles = []
    ) {
        $this->defaultStyles = $defaultStyles;
    }
}

As you can see, $defaultStyles is private, which means you can’t change it from outside the class. However, since it is injected through the constructor, we can attempt to modify it using Magento’s XML dependency injection.

Changing Button Styles Using Dependency Injection (DI)

Since $defaultStyles is a constructor argument, we should be able to override it using di.xml. Here’s how:

Step 1: Add Custom Styles in di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Paypal\Model\SmartButtonConfig">
        <arguments>
            <argument name="defaultStyles" xsi:type="array">
                <item name="cart" xsi:type="array">
                    <item name="layout" xsi:type="string">vertical</item>
                    <item name="color" xsi:type="string">gold</item>
                    <item name="shape" xsi:type="string">pill</item>
                </item>
            </argument>
        </arguments>
    </type>
</config>

Step 2: Apply the Changes

After modifying di.xml, clear the cache:

bin/magento cache:clean
bin/magento cache:flush

Then, check if the PayPal buttons reflect the new styles. In some cases, DI injection may not work as expected, which is why using a plugin is often more reliable.

Changing Button Styles Using a Plugin

If modifying di.xml does not work, the best approach is to use a plugin to alter the styles dynamically.

Step 1: Create the Plugin Class

<?php
declare(strict_types=1);

namespace Vendor\Module\Plugin\Magento\Paypal\Model;

use Magento\Framework\App\RequestInterface;

class SmartButtonConfigPlugin
{
    public function __construct(
        private RequestInterface $request
    ) {}

    public function afterGetConfig(
        \Magento\Paypal\Model\SmartButtonConfig $subject,
        array $result
    ): array {
        if ($this->isPdp() && isset($result['styles']) && isset($result['styles']['layout']) && $result['styles']['layout'] === 'horizontal') {
            $result['styles']['tagline'] = 'false';
            $result['styles']['height'] = 48;
        }

        return $result;
    }

    private function isPdp(): bool
    {
        return $this->request->getFullActionName() === 'catalog_product_view';
    }
}

In our example we only want to change styles if button is on PDP. You can adjust the plugin to your needs.

Step 2: Register the Plugin in di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Paypal\Model\SmartButtonConfig">
        <plugin name="smart_button_config_plugin" type="Vendor\Module\Plugin\Magento\Paypal\Model\SmartButtonConfigPlugin" />
    </type>
</config>

Step 3: Apply the Changes

Run the following commands to apply the changes:

bin/magento setup:di:compile
bin/magento cache:flush

Then, visit a product page to check if the PayPal button styles have changed.

Conclusion

Magento 2 doesn’t allow direct modification of $defaultStyles in SmartButtonConfig, but there are two ways to update the PayPal button styles:

Using Dependency Injection (DI) – This should work since $defaultStyles is a constructor argument, but in some cases, it may not apply the changes correctly.

Using a Plugin – This is the most reliable method, as it dynamically modifies the button styles after they are retrieved.

If the DI method doesn’t work for you, using a plugin is the recommended approach.

Sebastian Tracz

Senior Magento Developer

Sebastian is a Senior Magento Developer who has worked on eCommerce projects since 2019 and has been with Develo since 2021. Seb’s favourite aspect of web development is impacting clients’ businesses through meticulous detail in development. His favourite aspects of Magento are its flexibility for client growth and its supportive community. His best achievement from his time at Develo so far is writing a top-performing Laravel blog. Outside of work, he is a rockstar in several bands..

Develo is a leading Magento agency and eCommerce web development company based in Birmingham, in the UK, serving clients globally since 2010. We provide our Learn articles to share knowledge of magento web development, web app development and more to the wider web developer community. To extend your team with our white label web developers, collaborate or consult with us on your project contact us here.