PayPal Checkout

Standalone Buttons

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

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

Note: Even with standalone 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.

Step 1. Update the script tag

Update the PayPal script tag on your page to specify the buttons and funding-eligibility components:

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

Step 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 PayPal 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.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 PayPal 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');
    }
});

Complete your integration

Continue following the steps for a basic Smart Payment Buttons integration to set up and finalize transactions.

Funding sources

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.CREDIT PayPal Credit
paypal.FUNDING.VENMO Venmo
paypal.FUNDING.SEPA SEPA-Lastschrift
paypal.FUNDING.BANCONTACT Bancontact
paypal.FUNDING.EPS eps
paypal.FUNDING.GIROPAY giropay
paypal.FUNDING.IDEAL iDEAL
paypal.FUNDING.MYBANK MyBank
paypal.FUNDING.P24 Przelewy24
paypal.FUNDING.SOFORT Sofort