Customize the PayPal Buttons

SDKLegacyLast updated: October 12th 2021, @ 6:58:00 pm

There are several style options that you can use to customize your Smart Payment Button. You can also display multiple funding sources to the buyer, when appropriate.

Layout
Color
Shape
Size
Label
Tagline

paypal.Buttons({
  style: {
    layout:  'vertical',
    color:   'blue',
    shape:   'rect',
    label:   'paypal'
  }
}).render('#paypal-button-container');

Layout

Set the style.layout option to determine the button layout when multiple buttons are available:

Value	Description	Layout
`vertical`	Default. Buttons are stacked vertically with a maximum of four buttons. Recommended when: Presenting a dynamic list of payment options on checkout and shopping cart pages. Leveraging Checkout as a full stack payments platform.	Mobile Venmo is available on mobile in U.S. markets only. Web
`horizontal`	Buttons are stacked horizontally with a maximum of two buttons. Recommended when: Placing buttons on a product page, next to the product. Space on the page is limited. Alternative payment options are already provided.	Mobile Venmo is available on mobile in U.S. markets only. Web

Which buttons will I see?

The buttons that display are decided automatically, based on a range of factors, including:

Buyer country
Device type
Funding sources the buyer has opted to see.

As a result, each buyer might see a unique combination of buttons. To prevent certain buttons from displaying, see Disable Funding.

Color

Set the style.color option to one of these values:

Value	Description	Button
`gold`	Recommended People around the world know us for the color gold and research confirms it. Extensive testing determined just the right shade and shape that help increase conversion. Use it on your website to leverage PayPal’s recognition and preference.
`blue`	First alternative If gold does not work for your site, try the PayPal `blue` button. Research shows that people know it is our brand color, which provides a halo of trust and security to your experience.
`silver` `white` `black`	Second alternatives If gold or blue does not work for your site design or aesthetic, try the `silver`, `white`, or `black` buttons. Because these colors are less capable of drawing people’s attention, we recommend these button colors as a second alternative.

Shape

Set the style.shape option to one of these values:

Value	Description	Button
`rect`	Recommended The default button shape.
`pill`	A secondary button shape option.

Size

By default, the button adapts to the size of its container element.

To customize the button width, alter the width of the container element.
To customize the button height, set the style.height option to a value from 25 to 55.

Label

Set the style.label option to one of these values:

Value	Description	Button
`paypal`	Recommended The default option. Displays the PayPal logo.
`checkout`	Displays the PayPal Checkout button.
`buynow`	Displays the PayPal Buy Now button and initializes the checkout flow.
`pay`	Displays the Pay With PayPal button and initializes the checkout flow.
`installment`	Displays the PayPal installment button and offers a specified number of payments during a payment installment period. Note: The `installment` feature is available only in `MX` and `BR`. Set `style.period` to set the number of payments during the installment period: `BR`: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 `en_MX`, `MX`: 3, 6, 9, 12

Tagline

Set the style.tagline to false to disable the tagline text:

Value	Description	Button
`true`	Recommended Display tagline text Default.
`false`	Disable tagline text.