Standalone payment buttons
Last updated: Oct 30th, 9:14am
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.
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.
PayPal Credit in UK markets
Note for UK merchants: Credit is a regulated activity in the UK.
Before integrating a PayPal Credit button for use in the UK, you need to have:
- Authorization to act as a credit broker.
- A credit agreement with PayPal.
For more information, contact your Customer Success Manager (CSM) or business customer support.
Know before you code
Standard Checkout
This feature modifies an existing standard Checkout integration and uses the following:
- JavaScript SDK: Adds PayPal-supported payment methods.
- Orders REST API: Create, update, retrieve, authorize, and capture orders.
Explore PayPal APIs with Postman
You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.
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>
Set of buttons
If you need a subset of the available buttons, show them using the following code:
1var FUNDING_SOURCES = [2 paypal.FUNDING.PAYPAL,3 paypal.FUNDING.VENMO,4 paypal.FUNDING.PAYLATER,5 paypal.FUNDING.CREDIT,6 paypal.FUNDING.CARD,7 ]8 // Loop over each payment method9FUNDING_SOURCES.forEach(function(fundingSource) {10 // Initialize the buttons11 var button = paypal.Buttons({12 fundingSource: fundingSource,13 })14 // Check if the button is eligible15 if (button.isEligible()) {16 // Render the standalone button for that payment method17 button.render('#paypal-button-container')18 }19})
Radio buttons
If your integration uses radio buttons, use the paypal.Marks
component in standalone mode to display the correct mark for each payment method you offer.
1. Add components
Update the PayPal script tag to your page, and add the buttons
, funding-eligibility
, and marks
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,marks" > < /script>
Use this code to show the Marks
component:
1// Loop over each payment method2paypal.getFundingSources().forEach(function(fundingSource) {3 // Initialize the marks4 var mark = paypal.Marks({5 fundingSource: fundingSource,6 })7 // Check if the mark is eligible8 if (mark.isEligible()) {9 // Render the mark for that payment method10 mark.render('#paypal-mark-container')11 }12})
1<!-- This snippet supports rendering separate standalone buttons2in different parts of your page with unique payment methods. -->3 <4 html >5 <6 head >7 <!-- Add meta tags for mobile and IE -->8 <9 meta name = "viewport"10content = "width=device-width, initial-scale=1" >11 <12 meta http - equiv = "X-UA-Compatible"13content = "IE=edge" / >14 <15 div id = "paypal-button"16style = "float: left;" >17 <18 p > Here is the div19for the PayPal button < /p> <20 /div> <21 div id = "venmo-button"22style = "float: right;"23title = "Pay with Venmo" >24 <25 p > Here is the div26for the Venmo button < /p> <27 /div> <28 script src = "https://www.paypal.com/sdk/js?client-id=test¤cy=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card" > < /script> <29 script >30 createButton(paypal.FUNDING.PAYPAL);31createButton(paypal.FUNDING.VENMO);3233function createButton(fundingSource) {34 var config = {35 fundingSource: fundingSource,36 createOrder: function(data, actions) {37 return actions.order.create({38 purchase_units: [{39 "amount": {40 "currency_code": "USD",41 "value": 142 }43 }]44 });45 },46 onApprove: function(data, actions) {47 return actions.order.capture().then(function(details) {48 alert('Transaction completed by ' + details.payer.name.given_name + '!');49 });50 }51 };52 var button = paypal.Buttons(config);53 if (button.isEligible()) {54 button.render('# ${fundingSource}-button');55 }56} <57/script> <58/html>
Complete your integration
Return to the Set up standard payments guide to create and capture the order.
See also
JavaScript SDK
Learn more about passing parameters to customize your integration by reviewing the JavaScript SDK page.