This page has moved and will be redirected soon. See Migrated topics for the complete list.

Customize buttons and messaging

Starting with the Payment Services 1.1.0 release, it is possible to customize your buttons and messaging in your Dashboard. Refer to the Configure in the Dashboard topic for more information.

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