Display other payment methods
DocsCurrentLast updated: March 16th 2023, @ 11:23:55 am
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.
Know before you code
This client- and server-side feature modifies an existing checkout integration and uses the following:
- JavaScript SDK
- Orders REST API - Create order endpoint
Use Postman to explore and test PayPal APIs.
How it works
- You add
marks
and radio buttons to your checkout page that show PayPal and other payment options. - Your payer selects a payment method.
- Other payment methods are hidden.
Show PayPal and other payment methods
- Modify the
components
in your script so they containbuttons
andmarks
. - Create a label for PayPal.
- Show the PayPal
marks
andbuttons
with the PayPal radio button. - Create a label and radio button for other payment methods.
- Add an event listener to check for changes to the radio buttons.
- Show and hide payment options based on the payer's selection.
Sample JavaScript SDK code
<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks"></script>
<script>
<label>
<input type="radio" name="payment-option" value="paypal" checked>
<div id="paypal-marks-container"></div>
</label>
<label>
<input type="radio" name="payment-option" value="alternate">
Pay with a different payment method
</label>
<div id="paypal-buttons-container"></div>
<div id="alternate-button-container">
<button>Pay now</button>
</div>
paypal.Marks().render('#paypal-marks-container');
paypal.Buttons().render('#paypal-buttons-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-buttons-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-buttons-container')
.style.display = 'none';
}
});
});
// Hide non-PayPal button by default
document.body.querySelector('#alternate-button-container')
.style.display = 'none';
</script>