Buttons style guide
Last updated: Sept 16th, 10:24am
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.
1paypal.Buttons({2style: {3 layout: 'vertical',4 color: 'blue',5 shape: 'rect',6 label: 'paypal'7}8}).render('#paypal-button-container');9}10})
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:
|
Mobile Web |
horizontal |
Buttons are stacked horizontally with a maximum of two buttons. Recommended when:
|
Mobile Web |
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 from25
to55
.
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 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.
Set style.period to set the number of payments during the installment period:
|
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. |