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:
- PayPal JavaScript SDK
- Orders REST API - Create order endpoint
You can display the following buttons individually:
Funding source | 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<!-- 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:
- Standalone button
- Set of buttons
- Radio buttons
- 2 divs with buttons
1// Loop over each funding source2paypal.getFundingSources().forEach(function (fundingSource) {3// Initialize the buttons4var button = paypal.Buttons({5fundingSource: fundingSource,6})7// Check if the button is eligible8if (button.isEligible()) {9// Render the standalone button for that funding source10button.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.