Standalone payment buttons for direct merchants

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

By default, all eligible payment buttons display 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:

• PayPal JavaScript SDK.
• Orders v2 API - Create order endpoint.

• Use Postman to explore and test PayPal APIs.

You can display the following buttons individually:

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// 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    })

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.