On this page
No Headings
Last updated: June 16, 2026
Use radio buttons to present other funding sources alongside PayPal.
You can also use marks to automatically show images for all PayPal payment options, such as PayPal, Venmo, Pay Later, and debit and credit cards. For more information, see Marks.
This feature modifies an existing PayPal Checkout integration and uses the following:
PayPal Checkout
PayPal uses the following REST API credentials, which you can get from the developer dashboard:
Read Get started with PayPal APIs for more information.
You need a combination of PayPal and third-party tools:
Use Postman to explore and test PayPal APIs.
You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.
marks and radio buttons to your checkout page that show PayPal and other payment options.components in your script so they contain buttons and marks.marks and buttons with the PayPal radio button.// Add the PayPal JavaScript SDK with both buttons and marks components
<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks"></script>
// Render the radio buttons and marks
<label>
<input type="radio" name="payment-option" value="paypal" checked>
<img src="paypal-mark.jpg" alt="Pay with PayPal">
</label>
<label>
<input type="radio" name="payment-option" value="alternate">
<div id="paypal-marks-container"></div>
</label>
<div id="paypal-button-container"></div>
<div id="alternate-button-container">
<button>Pay with a different method</button>
</div>
<script>
// Render the PayPal marks
paypal.Marks().render('#paypal-marks-container');
// Render the PayPal buttons
paypal.Buttons().render('#paypal-button-container');
// Listen for changes to the radio buttons
document.querySelectorAll('input[name=payment-option]')
.forEach(function (el) {
el.addEventListener('change', function (event) {
// If PayPal is selected, show the PayPal button
if (event.target.value === 'paypal') {
document.body.querySelector('#alternate-button-container')
.style.display = 'none';
document.body.querySelector('#paypal-button-container')
.style.display = 'block';
}
// If alternate funding is selected, show a different button
if (event.target.value === 'alternate') {
document.body.querySelector('#alternate-button-container')
.style.display = 'block';
document.body.querySelector('#paypal-button-container')
.style.display = 'none';
}
});
});
// Hide non-PayPal button by default
document.body.querySelector('#alternate-button-container')
.style.display = 'none';
</script>