Standalone payment buttons for direct merchants
DocsCurrentLast updated: September 6th 2023, @ 12:43:42 pm
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:
Payment method | Description |
---|---|
paypal.FUNDING.PAYPAL | PayPal |
paypal.FUNDING.CARD | Credit or debit cards |
paypal.FUNDING.PAYLATER | Pay 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.CREDIT | PayPal Credit (US, UK) |
paypal.FUNDING.VENMO | Venmo |
Note: For US and UK merchants: If you're enabling Pay Later or PayPal Credit, show both
paypal.FUNDING.PAYLATER
andpaypal.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:
- Standalone button
- Set of buttons
- Radio buttons
- 2 divs with buttons
1// Loop over each payment method2 paypal.getFundingSources().forEach(function (fundingSource) {3 // Initialize the buttons4 var button = paypal.Buttons({5 fundingSource: fundingSource,6 })7 // Check if the button is eligible8 if (button.isEligible()) {9 // Render the standalone button for that payment method10 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.