Customize buttons and messaging

You can easily customize PayPal Smart button styling and PayPal PayLater messaging, styling, and layout on the product page, the checkout page, in the shopping cart, and in the mini cart.

PayPal Smart Buttons

To customize Smart Button styling, create a module with a dependency on Magento_PaymentServicesPaypal.

  1. In the di.xml file, create a new type named Magento\PaymentServicesPaypal\Block\SmartButtons.
  2. In the arguments block, specify one argument named componentConfig and xsi:type="array".
  3. Under this new argument, specify three items named product, cart, and minicart with xsi:type="array".
  4. Under each item, specify a nested item named styles with xsi:type="array".
  5. Reference PayPal’s available styling and apply any desired parameters as nested items.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<type name="Magento\PaymentServicesPaypal\Block\SmartButtons">
        <arguments>
            <argument name="componentConfig" xsi:type="array">
                <item name="product" xsi:type="array">
                    <item name="styles" xsi:type="array">
                        <item name="layout" xsi:type="string">horizontal</item>
                        <item name="color" xsi:type="string">gold</item>
                        <item name="shape" xsi:type="string">rect</item>
                        <item name="label" xsi:type="string">paypal</item>
                        <item name="tagline" xsi:type="boolean">false</item>
                    </item>
                </item>
                <item name="cart" xsi:type="array">
                    <item name="styles" 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">rect</item>
                        <item name="label" xsi:type="string">paypal</item>
                        <item name="tagline" xsi:type="boolean">false</item>
                    </item>
                </item>
                <item name="minicart" xsi:type="array">
                    <item name="styles" 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">rect</item>
                        <item name="label" xsi:type="string">paypal</item>
                        <item name="tagline" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </arguments>
</type>

Sample Smart Buttons customization

PayPal PayLater

To customize the PayPal PayLater messaging, style, and layout, create a module with a dependency on Magento_PaymentServicesPaypal, for the product page, cart, minicart, or checkout page, and then edit the styling of the module.

Create module for product page, cart, and minicart

  1. In the di.xml file, create a new type named Magento\PaymentServicesPaypal\Block\Message.
  2. In the arguments block, specify one argument named componentConfig and xsi:type="array".
  3. Under this new argument, specify three items named product, cart, and minicart with xsi:type="array".

Create module for checkout page

  1. In the di.xml file, create a new type named Magento\PaymentServicesPaypal\Model\SmartButtonsConfigProvider.
  2. In the arguments block, specify one argument named messageStyles and xsi:type="array".

Edit the styling

  1. Under each element (for the product, cart, minicart, or checkout), specify a nested item named styles with xsi:type="array".
  2. Reference PayPal’s available styling and apply any desired parameters as nested items.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<type name="Magento\PaymentServicesPaypal\Block\Message">
        <arguments>
            <argument name="componentConfig" xsi:type="array">
                <item name="product" xsi:type="array">
                    <item name="styles" xsi:type="array">
                        <item name="layout" xsi:type="string">text</item>
                        <item name="logo" xsi:type="array">
                            <item name="type" xsi:type="string">inline</item>
                        </item>
                    </item>
                </item>
                <item name="cart" xsi:type="array">
                    <item name="styles" xsi:type="array">
                        <item name="layout" xsi:type="string">text</item>
                        <item name="logo" xsi:type="array">
                            <item name="type" xsi:type="string">inline</item>
                        </item>
                    </item>
                </item>
                <item name="minicart" xsi:type="array">
                    <item name="styles" xsi:type="array">
                        <item name="layout" xsi:type="string">text</item>
                        <item name="logo" xsi:type="array">
                            <item name="type" xsi:type="string">inline</item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
</type>
<type name="Magento\PaymentServicesPaypal\Model\SmartButtonsConfigProvider">
        <arguments>
            <argument name="messageStyles" xsi:type="array">
                <item name="layout" xsi:type="string">text</item>
                <item name="logo" xsi:type="array">
                    <item name="type" xsi:type="string">inline</item>
                </item>
            </argument>
        </arguments>
    </type>

Sample PayLater customization