Standalone payment buttons

Add standalone buttons to customize how payment methods show up on your checkout page.

By default, all eligible payment buttons display in a single location on your page.

Use this integration to show individual, standalone payment buttons for each payment method. For example, show the PayPal button, Venmo button, and PayPal Pay Later offers on different parts of the checkout page, alongside different radio buttons, or on other pages.

Your standalone payment button integration uses the PayPal JavaScript SDK smart eligibility logic to show only the correct payment buttons for each payer on your checkout page.

Important: Venmo is not supported in the sandbox.

PayPal Credit in UK markets

Note for UK merchants: Credit is a regulated activity in the UK.

Before integrating a PayPal Credit button for use in the UK, you need to have:

Authorization to act as a credit broker.
A credit agreement with PayPal.

For more information, contact your Customer Success Manager (CSM) or business customer support.

Know before you code

Explore PayPal APIs with Postman

You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.

PayPal Checkout

This feature modifies an existing PayPal Checkout integration and uses the following:

JavaScript SDK: Adds PayPal-supported payment methods.
Orders REST API: Create, update, retrieve, authorize, and capture orders.

PayPal Checkout

Supported buttons

You can display the following buttons individually:

Payment method, Description
Payment method	Description
`paypal.FUNDING.PAYPAL`	PayPal
`paypal.FUNDING.CARD`	Credit or debit cards
`paypal.FUNDING.PAYLATER`	Pay Later (US, UK), Pay in 4 (AU), 4X PayPal (France), Paga en 3 plazos (Spain), Paga in 3 rate (Italy), Später Bezahlen (Germany)
`paypal.FUNDING.CREDIT`	PayPal Credit (US, UK)
`paypal.FUNDING.VENMO`	Venmo

Note for US and UK merchants: If you're enabling Pay Later or PayPal Credit, show both paypal.FUNDING.PAYLATER and paypal.FUNDING.CREDIT when eligible. Depending on payer eligibility, payment buttons render either the Pay Later or PayPal Credit button.

1. Update JavaScript SDK tag

Update the JavaScript SDK tag on your page to specify the buttons and funding-eligibility components:

<!-- Update the JavaScript SDK with buttons and funding eligibility -->
<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility"></script>

2. Render buttons

You can choose from the following:

Standalone

// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})

Set of buttons

If you need a subset of the available buttons, show them using the following code:

var FUNDING_SOURCES = [
        paypal.FUNDING.PAYPAL,
        paypal.FUNDING.VENMO,
        paypal.FUNDING.PAYLATER,
        paypal.FUNDING.CREDIT,
        paypal.FUNDING.CARD,
    ]
    // Loop over each payment method
FUNDING_SOURCES.forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})

Radio buttons

If your integration uses radio buttons, use the paypal.Marks component in standalone mode to display the correct mark for each payment method you offer.

1. Add components

Update the PayPal script tag to your page, and add the buttons, funding-eligibility, and marks components:

<!-- Add the JavaScript SDK with buttons, funding eligibility, and marks -->
<script src = "https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility,marks" > < /script>

2. Show Marks component

Use this code to show the Marks component:

// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the marks
    var mark = paypal.Marks({
            fundingSource: fundingSource,
        })
        // Check if the mark is eligible
    if (mark.isEligible()) {
        // Render the mark for that payment method
        mark.render('#paypal-mark-container')
    }
})

2 divs with buttons

<!-- This snippet supports rendering separate standalone buttons
in different parts of your page with unique payment methods. -->
    <
    html >
    <
    head >
    <!-- Add meta tags for mobile and IE -->
    <
    meta name = "viewport"
content = "width=device-width, initial-scale=1" >
    <
    meta http - equiv = "X-UA-Compatible"
content = "IE=edge" / >
    <
    div id = "paypal-button"
style = "float: left;" >
    <
    p > Here is the div
for the PayPal button < /p> <
    /div> <
    div id = "venmo-button"
style = "float: right;"
title = "Pay with Venmo" >
    <
    p > Here is the div
for the Venmo button < /p> <
    /div> <
    script src = "https://www.paypal.com/sdk/js?client-id=test&currency=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card" > < /script> <
    script >
    createButton(paypal.FUNDING.PAYPAL);
createButton(paypal.FUNDING.VENMO);

function createButton(fundingSource) {
    var config = {
        fundingSource: fundingSource,
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    "amount": {
                        "currency_code": "USD",
                        "value": 1
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    };
    var button = paypal.Buttons(config);
    if (button.isEligible()) {
        button.render('# ${fundingSource}-button');
    }
} <
/script> <
/html>

Note: New payment methods are automatically added to paypal.getFundingEligibility() as support becomes available for them in the JavaScript SDK.

3. Complete your integration

Return to the Set up PayPal payments guide to create and capture the order.

PayPal Credit in UK markets

Note for UK merchants: Credit is a regulated activity in the UK.

Before integrating a PayPal Credit button for use in the UK, you need to have:

Authorization to act as a credit broker.
A credit agreement with PayPal.

For more information, contact your Customer Success Manager (CSM) or business customer support.

Know before you code

Explore PayPal APIs with Postman

You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.

PayPal Checkout

This feature modifies an existing PayPal Checkout integration and uses the following:

JavaScript SDK: Adds PayPal-supported payment methods.
Orders REST API: Create, update, retrieve, authorize, and capture orders.

PayPal Checkout

Supported buttons

You can display the following buttons individually:

Payment method, Description
Payment method	Description
`paypal.FUNDING.PAYPAL`	PayPal
`paypal.FUNDING.CARD`	Credit or debit cards
`paypal.FUNDING.PAYLATER`	Pay Later (US, UK), Pay in 4 (AU), 4X PayPal (France), Paga en 3 plazos (Spain), Paga in 3 rate (Italy), Später Bezahlen (Germany)
`paypal.FUNDING.CREDIT`	PayPal Credit (US, UK)
`paypal.FUNDING.VENMO`	Venmo

1. Update JavaScript SDK tag

Update the JavaScript SDK tag on your page to specify the buttons and funding-eligibility components:

<!-- Update the JavaScript SDK with buttons and funding eligibility -->
<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility"></script>

2. Render buttons

You can choose from the following:

Standalone

// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})

Set of buttons

If you need a subset of the available buttons, show them using the following code:

var FUNDING_SOURCES = [
        paypal.FUNDING.PAYPAL,
        paypal.FUNDING.VENMO,
        paypal.FUNDING.PAYLATER,
        paypal.FUNDING.CREDIT,
        paypal.FUNDING.CARD,
    ]
    // Loop over each payment method
FUNDING_SOURCES.forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})

Radio buttons

If your integration uses radio buttons, use the paypal.Marks component in standalone mode to display the correct mark for each payment method you offer.

1. Add components

Update the PayPal script tag to your page, and add the buttons, funding-eligibility, and marks components:

<!-- Add the JavaScript SDK with buttons, funding eligibility, and marks -->
<script src = "https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility,marks" > < /script>

2. Show Marks component

Use this code to show the Marks component:

// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the marks
    var mark = paypal.Marks({
            fundingSource: fundingSource,
        })
        // Check if the mark is eligible
    if (mark.isEligible()) {
        // Render the mark for that payment method
        mark.render('#paypal-mark-container')
    }
})

2 divs with buttons

<!-- This snippet supports rendering separate standalone buttons
in different parts of your page with unique payment methods. -->
    <
    html >
    <
    head >
    <!-- Add meta tags for mobile and IE -->
    <
    meta name = "viewport"
content = "width=device-width, initial-scale=1" >
    <
    meta http - equiv = "X-UA-Compatible"
content = "IE=edge" / >
    <
    div id = "paypal-button"
style = "float: left;" >
    <
    p > Here is the div
for the PayPal button < /p> <
    /div> <
    div id = "venmo-button"
style = "float: right;"
title = "Pay with Venmo" >
    <
    p > Here is the div
for the Venmo button < /p> <
    /div> <
    script src = "https://www.paypal.com/sdk/js?client-id=test&currency=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card" > < /script> <
    script >
    createButton(paypal.FUNDING.PAYPAL);
createButton(paypal.FUNDING.VENMO);

function createButton(fundingSource) {
    var config = {
        fundingSource: fundingSource,
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    "amount": {
                        "currency_code": "USD",
                        "value": 1
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    };
    var button = paypal.Buttons(config);
    if (button.isEligible()) {
        button.render('# ${fundingSource}-button');
    }
} <
/script> <
/html>

Note: New payment methods are automatically added to paypal.getFundingEligibility() as support becomes available for them in the JavaScript SDK.

3. Complete your integration

Return to the Set up PayPal payments guide to create and capture the order.

Standalone payment buttons

PayPal Credit in UK markets

Know before you code

Explore PayPal APIs with Postman

PayPal Checkout

Supported buttons

1. Update JavaScript SDK tag

2. Render buttons

Standalone

Set of buttons

Radio buttons

3. Complete your integration

See also

JavaScript SDK

On this page

On this page

On this page

Standalone payment buttons

PayPal Credit in UK markets

Know before you code

Explore PayPal APIs with Postman

PayPal Checkout

Supported buttons

1. Update JavaScript SDK tag

2. Render buttons

Standalone

Set of buttons

Radio buttons

3. Complete your integration

See also

JavaScript SDK

On this page

On this page

Standalone payment buttons

On this page

On this page

On this page

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more

Standalone payment buttons

On this page

On this page