Use Radio Buttons

This guide shows how to show or hide the PayPal buttons when a radio button is selected or deselected. This approach is commonly used for a mark integration, where PayPal is presented alongside other funding sources on the page, and the PayPal buttons are shown when the buyer clicks a radio button.

Note: The PayPal script displays a tailored set of buttons to each individual buyer. Many of these buttons do not require the buyer to have a PayPal account.

It is recommended to display the PayPal buttons immediately when landing on the product page or cart page. This helps the buyer easily discover and use the payment methods for which they are eligible.

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.

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

<!-- Use radio buttons for choosing between PayPal and a different payment method -->
<label>
  <input type="radio" name="payment-option" value="paypal" checked>
  Pay with PayPal
  <div id="paypal-marks-container"></div>
</label>
<label>
  <input type="radio" name="payment-option" value="alternate">
  Pay with a different method
</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>