Multiple subscription buttons

Create multiple subscribe buttons on your website

DocsCurrentLast updated: June 20th 2023, @ 12:08:42 pm

You can let your buyers choose a subscription plan from multiple plans available from a single page of your website.

Two sets of subscription buttons where a basic plan is $5 and a premium plan is $10

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. Add the SDK script only once on your web page ensure that the SDK doesn't render multiple times on your webpage.

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

2. Add ID for each button

Add a unique container HTML id for each button code.

Tip: Use the same ID for the container ID that you used for 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 2 different plans:

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 CLIENT-ID 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 subscribed to ' + 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 subscribed to ' + data.subscriptionID); // Optional message given to subscriber
      }
    }).render('#paypal-button-container-P-8D325842DA922762MMA2QT6Q'); // Replace with your plan ID

  </script>
</body>

</html>