PayPal Checkout

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.

Unless absolutely necessary, it is recommended to not hide the PayPal buttons behind the click of a radio button. Instead, it is recommended to display the PayPal buttons immediately when landing on the product page or cart page. This helps the buyer easily discover the payment methods for which they are eligible.

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

  1. Create multiple radio buttons, one for PayPal, and one for each of the other funding sources you want to display.
  2. Display the PayPal Mark next to the PayPal radio button, and other marks next to the other radio buttons.
  3. If the buyer selects the PayPal radio button, dynamically show the PayPal buttons and hide the other funding sources.
  4. If the buyer selects a different radio button, dynamically show that funding source.
<!-- 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">
  <img src="alternate-mark.png" alt="Pay with alternate payment method">
</label>

<div id="paypal-button-container"></div>
<div id="alternate-button-container">
  <button>Pay with alternate method</button>
</div>

<script>
  // Render the PayPal buttons
  paypal.Buttons().render('#paypal-button-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-button-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-button-container')
            .style.display = 'none';
        }
      });
    });

  // Hide non-PayPal button by default
  document.body.querySelector('#alternate-button-container')
    .style.display = 'none';
</script>
Feedback