Display other payment methods
Last updated: Sept 25th, 4:58pm
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
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.
You need a developer account to get sandbox credentials
PayPal uses the following REST API credentials, which you can get from the developer dashboard:
- Client ID: Authenticates your account with PayPal and identifies an app in your sandbox.
- Client secret: Authorizes an app in your sandbox. Keep this secret safe and don't share it.
Explore PayPal APIs with Postman
You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.
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.
1// Add the PayPal JavaScript SDK with both buttons and marks components2<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks"></script>3// Render the radio buttons and marks4<label>5 <input type="radio" name="payment-option" value="paypal" checked>6 <img src="paypal-mark.jpg" alt="Pay with PayPal">7</label>8<label>9 <input type="radio" name="payment-option" value="alternate">10 <div id="paypal-marks-container"></div>11</label>12<div id="paypal-button-container"></div>13<div id="alternate-button-container">14 <button>Pay with a different method</button>15</div>16<script>17 // Render the PayPal marks18 paypal.Marks().render('#paypal-marks-container');19 // Render the PayPal buttons20 paypal.Buttons().render('#paypal-button-container');21 // Listen for changes to the radio buttons22 document.querySelectorAll('input[name=payment-option]')23 .forEach(function (el) {24 el.addEventListener('change', function (event) {25 // If PayPal is selected, show the PayPal button26 if (event.target.value === 'paypal') {27 document.body.querySelector('#alternate-button-container')28 .style.display = 'none';29 document.body.querySelector('#paypal-button-container')30 .style.display = 'block';31 }32 // If alternate funding is selected, show a different button33 if (event.target.value === 'alternate') {34 document.body.querySelector('#alternate-button-container')35 .style.display = 'block';36 document.body.querySelector('#paypal-button-container')37 .style.display = 'none';38 }39 });40 });41 // Hide non-PayPal button by default42 document.body.querySelector('#alternate-button-container')43 .style.display = 'none';44</script>