# Standalone payment buttons (/limited-release/commerce-platform/accept-payments/standard/customize/standalone-payment-buttons)



Add standalone buttons to customize how payment methods show up on your checkout page.

By default, all eligible payment buttons display in a single location on your page.

Use this integration to show individual, standalone payment buttons for each payment method. For example, show the PayPal button, Venmo button, and PayPal Pay Later offers on different parts of the checkout page, alongside different radio buttons, or on other pages.

Your standalone payment button integration uses the PayPal JavaScript SDK smart eligibility logic to show only the correct payment buttons for each payer on your checkout page.

> **Warning:** **Important:** Venmo is not supported in the sandbox.

## PayPal Credit in UK markets [#paypal-credit-in-uk-markets]

**Note for UK merchants:** Credit is a regulated activity in the UK.

Before integrating a PayPal Credit button for use in the UK, you need to have:

* Authorization to act as a credit broker.
* A credit agreement with PayPal.

For more information, contact your Customer Success Manager (CSM) or [business customer support](https://www.paypal.com/uk/webapps/mpp/contact-us).

## 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:** ### 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).

## Supported buttons [#supported-buttons]

You can display the following buttons individually:

| Payment method            | Description                                                                                                                        |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `paypal.FUNDING.PAYPAL`   | PayPal                                                                                                                             |
| `paypal.FUNDING.CARD`     | Credit or debit cards                                                                                                              |
| `paypal.FUNDING.PAYLATER` | Pay Later (US, UK), Pay in 4 (AU), 4X PayPal (France), Paga en 3 plazos (Spain), Paga in 3 rate (Italy), Später Bezahlen (Germany) |
| `paypal.FUNDING.CREDIT`   | PayPal Credit (US, UK)                                                                                                             |
| `paypal.FUNDING.VENMO`    | Venmo                                                                                                                              |

> **Info:** **Note for US and UK merchants:** If you're enabling Pay Later or PayPal Credit, show both `paypal.FUNDING.PAYLATER` and `paypal.FUNDING.CREDIT` when eligible. Depending on payer eligibility, payment buttons render either the Pay Later or PayPal Credit button.

## 1. Update JavaScript SDK tag [#1-update-javascript-sdk-tag]

Update the JavaScript SDK tag on your page to specify the `buttons` and `funding-eligibility` components:

```javascript lineNumbers
<!-- Update the JavaScript SDK with buttons and funding eligibility -->
<script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility"></script>
```

## 2. Render buttons [#2-render-buttons]

You can choose from the following:

### Standalone [#standalone]

```javascript lineNumbers
// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})
```

### Set of buttons [#set-of-buttons]

If you need a subset of the available buttons, show them using the following code:

```javascript lineNumbers
var FUNDING_SOURCES = [
        paypal.FUNDING.PAYPAL,
        paypal.FUNDING.VENMO,
        paypal.FUNDING.PAYLATER,
        paypal.FUNDING.CREDIT,
        paypal.FUNDING.CARD,
    ]
    // Loop over each payment method
FUNDING_SOURCES.forEach(function(fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
            fundingSource: fundingSource,
        })
        // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that payment method
        button.render('#paypal-button-container')
    }
})
```

### Radio buttons [#radio-buttons]

If your integration uses [radio buttons](/v5/checkout/show-payment-method), use the [`paypal.Marks`](/sdk/js/reference/#link-marks) component in standalone mode to display the correct mark for each payment method you offer.

**1. Add components**

Update the PayPal script tag to your page, and add the `buttons`, `funding-eligibility`, and `marks` components:

```javascript lineNumbers
<!-- Add the JavaScript SDK with buttons, funding eligibility, and marks -->
<script src = "https://www.paypal.com/sdk/js?client-id=test&components=buttons,funding-eligibility,marks" > < /script>
```

**2. Show Marks component**

Use this code to show the `Marks` component:

```javascript lineNumbers
// Loop over each payment method
paypal.getFundingSources().forEach(function(fundingSource) {
    // Initialize the marks
    var mark = paypal.Marks({
            fundingSource: fundingSource,
        })
        // Check if the mark is eligible
    if (mark.isEligible()) {
        // Render the mark for that payment method
        mark.render('#paypal-mark-container')
    }
})
```

**2 divs with buttons**

```javascript lineNumbers
<!-- This snippet supports rendering separate standalone buttons
in different parts of your page with unique payment methods. -->
    <
    html >
    <
    head >
    <!-- Add meta tags for mobile and IE -->
    <
    meta name = "viewport"
content = "width=device-width, initial-scale=1" >
    <
    meta http - equiv = "X-UA-Compatible"
content = "IE=edge" / >
    <
    div id = "paypal-button"
style = "float: left;" >
    <
    p > Here is the div
for the PayPal button < /p> <
    /div> <
    div id = "venmo-button"
style = "float: right;"
title = "Pay with Venmo" >
    <
    p > Here is the div
for the Venmo button < /p> <
    /div> <
    script src = "https://www.paypal.com/sdk/js?client-id=test&currency=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card" > < /script> <
    script >
    createButton(paypal.FUNDING.PAYPAL);
createButton(paypal.FUNDING.VENMO);

function createButton(fundingSource) {
    var config = {
        fundingSource: fundingSource,
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    "amount": {
                        "currency_code": "USD",
                        "value": 1
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    };
    var button = paypal.Buttons(config);
    if (button.isEligible()) {
        button.render('# ${fundingSource}-button');
    }
} <
/script> <
/html>
```

> **Info:** **Note:** New payment methods are automatically added to `paypal.getFundingEligibility()` as support becomes available for them in the JavaScript SDK.

## 3. Complete your integration [#3-complete-your-integration]

Return to the [Set up PayPal Checkout](/limited-release/commerce-platform/accept-payments/standard/) guide to create and capture the order.

## See also [#see-also]

> **Info:** ### JavaScript SDK [#javascript-sdk]
>
> Learn more about passing parameters to customize your integration by reviewing the JavaScript SDK page.
>
> [JavaScript SDK](/sdk/js/configuration/)