Standalone payment buttons

DocsCurrentPartnerStandard

Last updated: Oct 30th, 9:14am

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.

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.

Know before you code

Required
Standard Checkout

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

Standard Checkout

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
1

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>
    2

    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 buttonsfunding-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>
              3

              Complete your integration

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

              See also

              Optional
              JavaScript SDK

              Learn more about passing parameters to customize your integration by reviewing the JavaScript SDK page.

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