Multiple subscription buttons

Create multiple subscribe buttons on your website

DocsCurrentLast updated: October 6th 2021, @ 7:10:14 pm


While offering subscription services, it is common to let your buyers choose a subscription plan from multiple plans that are available on a single page of your website.

How it works

Offer more than one subscription plan to your buyers. For example, you can show a basic subscription plan priced at $5 per month and a premium subscription plan priced at $10 per month on your website, with one button for each plan.

Example of multiple subscription buttons

1. Modify Javascript SDK code

Modify the Javascript SDK code to render multiple buttons on a single webpage.

Add the SDK script before the first PayPal button div. To ensure that the SDK does not render multiple times on your webpage, add the SDK script only once on your web page.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&vault=true&intent=subscription"></script>

2. Add an ID for each button

Add a unique container HTML ID for each button code.

Tip: PayPal recommends that you keep the container ID the same as the plan ID.

<div id="paypal-button-container"></div> // A unique ID for each button
    <script>
      paypal.Buttons({
        createSubscription: function(data, actions) {
          return actions.subscription.create({
            'plan_id': 'YOUR_PLAN_ID'
          });
        },
        onApprove: function(data, actions) {
          alert(data.subscriptionID);
        }
      }).render('#paypal-button-container');
</script>

Example

This sample creates two plans with different amounts:

  • Basic plan priced at $5 per month with plan ID P-89K58960WT101463BMA2QTGQ.
  • Premium plan priced at $10 per month with plan ID P-8D325842DA922762MMA2QT6Q.
<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
  <style>
    body {
      display: flex;
      direction: 'column';
    }

    .column {
      border: 1px solid #ccc;
      margin: 20px;
      padding: 20px;
    }

    p {
      text-align: center;
      margin-bottom: 50px;
    }

  </style>
</head>

<body>
  <script src="https://www.paypal.com/sdk/js?client-id=AUwAEZzkXUVAhmO10ESMB7i9jBlp9PlvrpgX1RGo5APTKMKFSRBNmCW98BxjzhAyDU0sIslCMdeOsDm3&vault=true&intent=subscription">
  </script><!-- Replace with your client ID -->
  <div class="column">
    <p>
      BASIC PLAN<br />$5 per month
    </p>
    <div id="paypal-button-container-P-89K58960WT101463BMA2QTGQ"></div> <!-- Replace with your plan ID -->
  </div>

  <script>
    paypal.Buttons({
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          'plan_id': 'P-89K58960WT101463BMA2QTGQ' // Replace with your plan ID
        });
      },
      onApprove: function(data, actions) {
        alert('You have successfully created subscription ' + data.subscriptionID); // Optional message given to subscriber
      }
    }).render('#paypal-button-container-P-89K58960WT101463BMA2QTGQ'); // Renders the PayPal button. Replace with your plan ID

  </script>

  <div class="column">
    <p>
      PREMIUM PLAN<br />$10 per month
    </p>
    <div id="paypal-button-container-P-8D325842DA922762MMA2QT6Q"></div> <!-- Replace with your plan ID -->
  </div>
  <script>
    paypal.Buttons({
      createSubscription: function(data, actions) {
        return actions.subscription.create({
          'plan_id': 'P-8D325842DA922762MMA2QT6Q' // Replace with your plan ID
        });
      },
      onApprove: function(data, actions) {
        alert('You have successfully created subscription ' + data.subscriptionID); // Optional message given to subscriber
      }
    }).render('#paypal-button-container-P-8D325842DA922762MMA2QT6Q'); // Replace with your plan ID

  </script>
</body>

</html>

Step result

You now have two subscription plans with payment buttons for each. You can use this code to create additional subscription buttons, as needed.