# Display other payment methods (/limited-release/commerce-platform/accept-payments/standard/customize/display-other-payment-methods)



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](/sdk/js/reference/).

## Know before you code [#know-before-you-code]

> **Info:** ### Paypal Checkout [#paypal-checkout]
>
> This feature modifies an existing PayPal Checkout integration and uses the following:
>
> * [JavaScript SDK:](/sdk/js/) Adds PayPal-supported payment methods.
> * [Orders REST API:](/api/orders/v2) Create, update, retrieve, authorize, and capture orders.
>
> [Paypal Checkout](/limited-release/commerce-platform/accept-payments/standard/)

> **Info:** ### You need a developer account to get sandbox credentials [#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.
>
> [Dashboard](/dashboard/)
>
> [Read the guide](/sandbox-testing/overview)

> **Info:** ### Explore PayPal APIs with Postman [#explore-paypal-apis-with-postman]
>
> You can use Postman to explore and test PayPal APIs. Learn more in our [Postman guide](/api/rest/postman).

## How it works [#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 [#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.

```javascript lineNumbers
// 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-button-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-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>
```