Display other payment methods

DocsCURRENTStandard

Last updated: Apr 26th, 12:06am

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
PayPal Checkout

Complete the steps in Get started to get your sandbox account login information and access token from the Developer Dashboard.

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

JavaScript SDK: Adds PayPal-supported payment methods.

Orders REST API: Create, update, retrieve, authorize, and capture orders.

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.

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

You add marks and radio buttons to your checkout page that show PayPal and other payment options.

Your payer selects a payment method.

Other payment methods are hidden

Show PayPal and other payment methods

Modify the components in your script so they contain buttons and marks.

Create a label for PayPal.

Show the PayPal marks and buttons with the PayPal radio button.

Create a label and radio button for other payment methods.

Add an event listener to check for changes to the radio buttons.

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>