Customize PayPal Buttons

Customize PayPal buttons to match your website’s style and enhance the checkout experience. You can customize the button’s appearance, display multiple payment options, and control the button layout using the PayPal JavaScript SDK.

Key concepts

• Buttons can be styled for their color, shape, size, label, and layout.
• You can show multiple payment methods, such as PayPal, Venmo, and Pay Later, based on buyer location and your configuration.
• You can customize your payment buttons using the style object and SDK script parameters.

Customize button appearance

Add the PayPal JavaScript SDK to your page. Replace YOUR_CLIENT_ID with your PayPal client ID.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>

Render the button in your container and use the style object to adjust its appearance:

Vanilla JS

paypal.Buttons({
  style: {
    color:  'blue',     // Options: 'gold', 'blue', 'silver', 'white', 'black'
    shape:  'pill',     // Options: 'rect', 'pill'
    label:  'pay',      // Options: 'paypal', 'checkout', 'pay', 'buynow'
    height: 40,         // Height in pixels (25-55)
    layout: 'horizontal' // 'horizontal' or 'vertical'
  }
}).render('#paypal-button-container');

React (JS)

import React, { useEffect } from 'react';

declare var paypal: any; // Declare paypal as a global variable

function PayPalButton() {
  useEffect(() => {
    paypal.Buttons({
      style: {
        color: 'blue',
        shape: 'pill',
        label: 'pay',
        height: 40,
        layout: 'horizontal'
      }
    }).render('#paypal-button-container');
  }, []);

  return <div id="paypal-button-container"></div>;
}

export default PayPalButton;

React (TS)

import React, { useEffect } from 'react';

declare var paypal: any; // Declare paypal as a global variable

function PayPalButton() {
  useEffect(() => {
    paypal.Buttons({
      style: {
        color: 'blue',
        shape: 'pill',
        label: 'pay',
        height: 40,
        layout: 'horizontal'
      }
    }).render('#paypal-button-container');
  }, []);

  return <div id="paypal-button-container"></div>;
}

export default PayPalButton;

ES Module

paypal.Buttons({
  style: {
    color: 'blue',
    shape: 'pill',
    label: 'pay',
    height: 40,
    layout: 'horizontal'
  }
}).render('#paypal-button-container');

Common style options

• color: Change the button color to match your brand.
• shape: Choose between rectangular or pill-shaped buttons.
• label: Change the text, such as “Pay”, or “Buy Now”.
• height: Adjust the button height for your layout.
• layout: Show the buttons side by side (horizontal) or stacked (vertical).

For more style options, see the PayPal Button Style Guide in the JavaScript SDK Reference.

Display multiple payment methods

By default, eligible payment methods, such as PayPal and Venmo, are displayed automatically. You can control which methods to show or hide using SDK parameters:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD&enable-funding=venmo,paylater"></script>

• enable-funding: Show additional buttons, such as Venmo or Pay Later.
• disable-funding: Hide specific payment methods.

Example

The following script displays only PayPal and Pay Later:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&enable-funding=paylater&disable-funding=card,venmo"></script>

Button layout and placement

• layout:
  • vertical (default): Stack up to four buttons.
  • horizontal: You can display up to two buttons side by side.

Vanilla JS

paypal.Buttons({
  style: { layout: 'vertical' }
}).render('#paypal-button-container');

React (JS)

import React, { useEffect } from 'react';

declare var paypal: any; // Declare paypal as a global variable

function PayPalButton() {
  useEffect(() => {
    paypal.Buttons({
      style: { layout: 'vertical' }
    }).render('#paypal-button-container');
  }, []);

  return <div id="paypal-button-container"></div>;
}

export default PayPalButton;

React (TS)

import React, { useEffect } from 'react';

declare var paypal: any; // Declare paypal as a global variable

function PayPalButton() {
  useEffect(() => {
    paypal.Buttons({
      style: { layout: 'vertical' }
    }).render('#paypal-button-container');
  }, []);

  return <div id="paypal-button-container"></div>;
}

export default PayPalButton;

ES Module

paypal.Buttons({
  style: { layout: 'vertical' }
}).render('#paypal-button-container');

You can also use standalone payment buttons to place individual payment method buttons in different locations on your page.

Localize button language

By default, PayPal buttons adapt to the buyer’s browser language and location. To force a specific language, use the locale parameter:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&locale=fr_FR"></script>

Advanced customization

• Border radius: Use style.borderRadius to set custom rounding.
• Button container: By default, the button fills its container. You can adjust the container width for responsive layouts.
• Funding source: Use the fundingSource option to render a specific payment method’s button.

You can now customize PayPal Buttons to fit your brand and checkout needs and help create a seamless, professional payment experience.

Resources

• PayPal Button Style Guide
• Standalone buttons