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 button, Venmo button, and PayPal pay later offers on different parts of the checkout page, alongside different radio buttons, or on entirely different pages.

Important: Venmo is not supported in the sandbox.

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.

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, speak to your Customer Success Manager (CSM) or contact business customer support

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=test&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=test&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

Note: If you're offering pay later offers or PayPal Credit products, render paypal.FUNDING.PAYLATER and paypal.FUNDING.CREDIT when eligible. Smart 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: