Reference


The Connect with PayPal button comes uses the Identity API that includes built-in properties to ensure a consistent design and experience for all PayPal Partners.

To ensure that your users experience the high-quality experience they have come to expect from PayPal, we encourage all our partners to employ the standard versions of the button.

Button options

To implement this on your app or site go to the PayPal Connect with PayPal Button Builder.

Customizations

To create your own customized version of the button, follow the guidelines here:

When using Connect with PayPal to enable account creation and login, we recommend using Connect with PayPal or Continue with PayPal because that most accurately reflects the purpose of the button. Since Connect with PayPal is the label we use for our default button, putting it on your customized button results in high recognition which drives higher conversion. Depending on the context of your website, Continue or Login can also work.

Font

You can choose the font, font weight, and kerning that fits your app or website style, but keep in mind that easy legibility is always important. The smallest size we recommend is 13 pt and Sans-serif typography.

Color and contrast

Keep in mind that color has immediate impact. The more quickly users can tell what your button is and what brand it represents, the more confident they will be to use it and the more seamless their experience on your website will be.

We recommend button background colors of gray #EEEEEE and the PayPal accessible blue #0070BA. Since PayPal is a well-known and trusted brand around the world, using these colors enhances the brand recognition users are looking for.

Color and Contrast

To ensure good contrast and legibility, use white font color on dark backgrounds and black font color on light backgrounds. If you decide to use other colors that are more appropriate for your app or site, always choose a combination of colors that fit within accessibility parameters.

For best results always put the button over white or light backgrounds.

Size and shape

Always use an appropriate size for your button based on the devices and context of the user's action. For example, on mobile apps always use the button close to the thumb position and be sure it is big enough to be tapped. Keep in mind that larger buttons tend to lead to higher conversion rates.

Size and Shape

These are the minimum sizes you can use for padding and margins. If needed, you can scale the size upwards, but you should always consider balancing the proportion of all of the elements.

We recommend using the pill-shaped button because it is associated with the PayPal brand and will lead to faster recognition by users, but you can use any button shape that works for your app or site's context. A square shape button is also available for easy implementation.

PayPal icon monogram

Use the correct PayPal icon from PayPal Logo and Marks. The PayPal icon is available in various sizes for button scaling, but the proportions and typography style must stay consistent with the ones described on the original button.

Use only the approved PayPal icon or other brand assets for this purpose.

Use the version of the PayPal icon that matches with the color on your button, If you are using a colored button, use the white version. If you are using a white button, use the colored version of the PayPal icon.

Don't use any other icon or an outdated version or custom variations as it can give the impression that your app is outdated or untrustworthy.

Examples

Do Don't
test
Do1

You can increase the size of the margins (left/right) to adjust to your implementation)
Do not change the aspect ratio of the elements.

dont5

Never change the alignment and the position of the elements within the button.

dont1

Do not reduce the minimum size of the padding.

dont3

dont2

Do not stretch any of the elements on the button. The elements should always maintain their proportions.
do2

Although we do not recommend changing the color of the button, you can do that if it results in a more accessible button for your site.
Do not change the background color on the colored version of the button.

dont4
do3

Although we do not recommend changing the shape, you can customize it to one that makes sense with your site as long as you always maintain the minimum sizes for paddings and margins.

In context messaging

Including messaging next to your button can add more context and clarity on what is going to happen next and the actions the button will trigger.

It is good to reassure users that your app won’t actually see or do any money transactions on their behalf and will never share anything private without their consent or being notified.

Examples of in context messages:

We don’t share your money transaction history.

We'll never transact anything without your permission.

Examples of benefits statements:

Connect with PayPal pre-fills your shipping address and preferred payment method while offering all the security of PayPal.

Some examples:

Context message

Next

Integrate