Standalone payment buttons

By default, the payment buttons automatically render all eligible buttons in a single location on your page.

If your use-case permits, you can render individual, standalone payment buttons for each supported payment method. For example, render the PayPal button, Venmo button, and PayPal pay later offers on different parts of the checkout page, alongside different radio buttons, or on entirely different pages.

Even with standalone payment buttons, your integrations take advantage of the smart eligibility logic the PayPal JavaScript SDK provides, meaning only the appropriate buttons for the current buyer automatically display.

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, contact business customer support through paypal.com or by calling 0800 358 7929.

Step 1. Update the 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=sb&components=buttons,funding-eligibility"></script>

2. Render all eligible buttons

Render each of the buttons. You can also render a set of buttons or add the standalone button to an integration that uses radio buttons.

// Loop over each funding source/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 funding source
        button.render('#paypal-button-container');
    }
});

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

Render a set of buttons

If you need a subset of the available buttons, render 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 funding source/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 funding source
        button.render('#paypal-button-container');
    }
});

Tip: We recommend that you render all eligible buttons to ensure buyers have the best possible choice of payment method when making a purchase.

Radio buttons

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

First, update the PayPal script tag to your page, and specify 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=sb&components=buttons,funding-eligibility,marks"></script>

Then, render the Marks component:

// Loop over each funding source/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 standalone mark for that funding source
        mark.render('#paypal-mark-container');
    }
});

3. Complete your integration

Return to the set up standard payments guide to create and capture the order.

4. Funding sources

Note: If you're offering pay later offers or PayPal Credit products, render paypal.FUNDING.PAYLATER and paypal.FUNDING.CREDIT when eligible. Payment buttons render either the pay later or PayPal Credit button depending on the cart amount and buyer eligibility.

Here is a list of buttons you can render:

Funding source Description
paypal.FUNDING.PAYPAL PayPal
paypal.FUNDING.CARD Credit or debit cards
paypal.FUNDING.PAYLATER Pay later
paypal.FUNDING.CREDIT PayPal Credit
paypal.FUNDING.VENMO Venmo

See also

  • JavaScript SDK reference for parameters you can pass to customize your integration.