Display other payment methods

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

1. You add marks and radio buttons to your checkout page that show PayPal and other payment options.
2. Your payer selects a payment method.
3. Other payment methods are hidden.

Show PayPal and other payment methods

1. Modify the components in your script so they contain buttons and marks.
2. Create a label for PayPal.
3. Show the PayPal marks and buttons with the PayPal radio button.
4. Create a label and radio button for other payment methods.
5. Add an event listener to check for changes to the radio buttons.
6. 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>