Standalone payment buttons

DocsCurrent

Last updated: Apr 2nd, 11:40pm

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.

Important: Venmo is not supported in the sandbox.

Note: (UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, speak to your Customer Success Manager (CSM) or contact business customer support.

Know before you code

Required
Checkout

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

JavaScript SDK.

Orders REST API: Create order endpoint

Optional
Explore PayPal APIs with Postman

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

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

Note: (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.

Update JavaScript SDK tag

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

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

Render buttons

You can choose from the following:

Standalone

1// Loop over each payment method
2paypal.getFundingSources().forEach(function(fundingSource) {
3    // Initialize the buttons
4    var button = paypal.Buttons({
5            fundingSource: fundingSource,
6        })
7        // Check if the button is eligible
8    if (button.isEligible()) {
9        // Render the standalone button for that payment method
10        button.render('#paypal-button-container')
11    }
12})

Set of buttons

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

1var FUNDING_SOURCES = [
2        paypal.FUNDING.PAYPAL,
3        paypal.FUNDING.VENMO,
4        paypal.FUNDING.PAYLATER,
5        paypal.FUNDING.CREDIT,
6        paypal.FUNDING.CARD,
7    ]
8    // Loop over each payment method
9FUNDING_SOURCES.forEach(function(fundingSource) {
10    // Initialize the buttons
11    var button = paypal.Buttons({
12            fundingSource: fundingSource,
13        })
14        // Check if the button is eligible
15    if (button.isEligible()) {
16        // Render the standalone button for that payment method
17        button.render('#paypal-button-container')
18    }
19})

Radio buttons

If your integration uses radio buttons, use the paypal.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:

1<!-- Add the JavaScript SDK with buttons, funding eligibility, and marks -->
2<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:

1// Loop over each payment method
2paypal.getFundingSources().forEach(function(fundingSource) {
3    // Initialize the marks
4    var mark = paypal.Marks({
5            fundingSource: fundingSource,
6        })
7        // Check if the mark is eligible
8    if (mark.isEligible()) {
9        // Render the mark for that payment method
10        mark.render('#paypal-mark-container')
11    }
12})

2 divs with buttons

1<!-- This snippet supports rendering separate standalone buttons 
2in different parts of your page with unique payment methods. -->
3    <
4    html >
5    <
6    head >
7    <!-- Add meta tags for mobile and IE -->
8    <
9    meta name = "viewport"
10content = "width=device-width, initial-scale=1" >
11    <
12    meta http - equiv = "X-UA-Compatible"
13content = "IE=edge" / >
14    <
15    div id = "paypal-button"
16style = "float: left;" >
17    <
18    p > Here is the div
19for the PayPal button < /p> <
20    /div> <
21    div id = "venmo-button"
22style = "float: right;"
23title = "Pay with Venmo" >
24    <
25    p > Here is the div
26for the Venmo button < /p> <
27    /div> <
28    script src = "https://www.paypal.com/sdk/js?client-id=test&currency=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card" > < /script> <
29    script >
30    createButton(paypal.FUNDING.PAYPAL);
31createButton(paypal.FUNDING.VENMO);
32
33function createButton(fundingSource) {
34    var config = {
35        fundingSource: fundingSource,
36        createOrder: function(data, actions) {
37            return actions.order.create({
38                purchase_units: [{
39                    "amount": {
40                        "currency_code": "USD",
41                        "value": 1
42                    }
43                }]
44            });
45        },
46        onApprove: function(data, actions) {
47            return actions.order.capture().then(function(details) {
48                alert('Transaction completed by ' + details.payer.name.given_name + '!');
49            });
50        }
51    };
52    var button = paypal.Buttons(config);
53    if (button.isEligible()) {
54        button.render('# ${fundingSource}-button');
55    }
56} <
57/script> <
58/html>

Complete your integration

Return to the Set up standard payments guide to create and capture the order.