Standalone payment buttons

DocsCurrentLast updated: May 27th 2022, @ 10:15:49 am


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 Pay Later button 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 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, 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:

Here's a list of buttons you can render:

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: US and UK merchants, if you're enabling Pay Later or PayPal Credit, render both paypal.FUNDING.PAYLATER and paypal.FUNDING.CREDIT when eligible. Payment buttons render either the Pay Later or PayPal Credit button depending on buyer eligibility.

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, funding eligibility, and marks -->
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
1// Loop over each funding source/payment method
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 automatically added to paypal.getFundingEligibility() as support becomes available for them in the JavaScript SDK.

3. Complete your integration

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

See also

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