Display other payment methods

DocsCurrentLast updated: May 27th 2022, @ 10:15:49 am


Display other payment methods to your buyers.

Know before you code

This client- and server-side feature modifies an existing checkout integration integration and uses the following:

Show other payment methods

If you present other funding sources alongside PayPal, you can create an uncluttered user interface using marks and radio buttons to dynamically display the funding source only when the user selects it.

To show or hide the PayPal buttons dynamically when radio buttons are clicked:

  1. Add the marks component when setting up the SDK, using components=buttons,marks.
  2. Create multiple radio buttons, one for PayPal, and one for each of the other funding sources you want to display.
  3. Render the PayPal marks next to the PayPal radio button, and other marks next to the other radio buttons.
  4. If the buyer selects the PayPal radio button, dynamically show the PayPal buttons and hide the other funding sources.
  5. If the buyer selects a different radio button, dynamically show that funding source.

Sample PayPal JavaScript SDK code

<!-- 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-buttons-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-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>