Display other payment methods

DocsCurrentSDKDirect merchant

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

Required
Standard Checkout

This feature modifies an existing standard Checkout integration and uses the following:

Standard Checkout

Required
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.
DashboardRead the guide

Optional
Explore PayPal APIs with Postman

You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.

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.
    1// Add the PayPal JavaScript SDK with both buttons and marks components
    2<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks"></script>
    3// Render the radio buttons and marks
    4<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 marks
    18 paypal.Marks().render('#paypal-marks-container');
    19 // Render the PayPal buttons
    20 paypal.Buttons().render('#paypal-button-container');
    21 // Listen for changes to the radio buttons
    22 document.querySelectorAll('input[name=payment-option]')
    23 .forEach(function (el) {
    24 el.addEventListener('change', function (event) {
    25 // If PayPal is selected, show the PayPal button
    26 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 button
    33 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 default
    42 document.body.querySelector('#alternate-button-container')
    43 .style.display = 'none';
    44</script>

    We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies