Buttons style guide

Customize the payment buttons

DocsCurrentLast updated: January 12th 2022, @ 3:57:45 pm


Checkout offers several style options that you can use to customize the appearance of your buttons. You can also display multiple funding sources to the buyer, when appropriate.

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

Note: (UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, speak to your Customer Success Manager (CSM) or contact business customer support

Layout

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

ValueDescriptionLayout
verticalDefault. 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
horizontalButtons 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. Pay Later offers differ by country and have different buttons. To prevent certain buttons from displaying, see Disable funding in the JavaScript SDK reference.

Color

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

ValueDescriptionButton
goldRecommended
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.
blueFirst 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 blackSecond 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:

ValueDescriptionButton
rectRecommended
The default button shape.
pillA secondary button shape option.

Size

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

  • To customize the button height, set the style.height option to a value from 25 to 55.
  • The width of your button container element must be large enough to fit the payment buttons in your layout. This is necessary for a horizontal button layout.

Label

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

ValueDescriptionButton
paypalRecommended
The default option. Displays the PayPal logo.
checkoutDisplays the Checkout button.
buynowDisplays the PayPal Buy Now button and initializes the checkout flow.
payDisplays the Pay With PayPal button and initializes the checkout flow.
installmentDisplays 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:

Note: Set the style.layout to horizontal for taglines.

ValueDescriptionButton
trueRecommended
Display tagline text
Default.
falseDisable tagline text.

Button placement

If you integrated standard payments, allow room on your checkout page for the Debit or Credit Card button to expand. There is a drop-down form for buyers to complete and if you place the payment buttons too low on the page, buyers might not be able to access all of the credit card fields.