Standalone payment buttons for partners

DocsCurrentLast updated: November 14th 2022, @ 12:12:19 pm


Add standalone buttons to customize how payment methods show up on your checkout page.

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

Use this integration to show individual, standalone payment buttons for each payment method. For example, show the PayPal button, Venmo button, and PayPal Pay Later offers on different parts of the checkout page, alongside different radio buttons, or on other pages.

Important: Venmo is not supported in the sandbox.

Your standalone payment button integration uses the PayPal JavaScript SDK smart eligibility logic to show only the correct payment buttons for each payer on your checkout page.

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 standard Checkout integration and uses the following:

You can display the following buttons individually:

Payment methodDescription
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<!-- Update 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 payment method
2 paypal.getFundingSources().forEach(function (fundingSource) {
3 // Initialize the buttons
4 var button = paypal.Buttons({
5 fundingSource: fundingSource,
6 })
7 // Check if the button is eligible
8 if (button.isEligible()) {
9 // Render the standalone button for that payment method
10 button.render('#paypal-button-container')
11 }
12 })

Note: New payment methods 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

Learn more about passing parameters to customize your integration by reviewing the JavaScript SDK page.