Standalone payment buttons

DocsCurrentLast updated: March 31st 2023, @ 7:55:03 am


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

You can also show individual, standalone payment buttons for each payment method. For example, display the PayPal, Venmo, and Pay Later buttons on different parts of the checkout page using radio buttons.

Important: Venmo is not available to test in the sandbox.

Even when you integrate standalone payment buttons, the integration uses eligibility logic to display buttons tailored to the current payer.

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

Know before you code

This feature modifies an existing checkout integration and uses the following:

You can display the following buttons individually:

Funding sourceDescription
paypal.FUNDING.PAYPALPayPal
paypal.FUNDING.CARDCredit or debit cards
paypal.FUNDING.PAYLATERPay 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.CREDITPayPal Credit (US, UK)
paypal.FUNDING.VENMOVenmo

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:

1<!-- Add the JavaScript SDK with buttons and funding eligibility -->
2<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:

  1. Standalone button
  2. Set of buttons
  3. Radio buttons
  4. 2 divs with buttons
1// Loop over each funding source
2paypal.getFundingSources().forEach(function (fundingSource) {
3// Initialize the buttons
4var button = paypal.Buttons({
5fundingSource: fundingSource,
6})
7// Check if the button is eligible
8if (button.isEligible()) {
9// Render the standalone button for that funding source
10button.render('#paypal-button-container')
11}
12})

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

3. Complete your integration

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

See also

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