Multiple subscription buttons

DOCSCurrent

Last updated: Aug 15th, 7:34am

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.

1<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.

1<div id="paypal-button-container"></div> // A unique ID for each button
2    <script>
3      paypal.Buttons({
4        createSubscription: function(data, actions) {
5          return actions.subscription.create({
6            'plan_id': 'YOUR-PLAN-ID'
7          });
8        },
9        onApprove: function(data, actions) {
10          alert(data.subscriptionID);
11        }
12      }).render('#paypal-button-container');
13</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.

1<!DOCTYPE html>
2
3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
6  <style>
7    body {
8      display: flex;
9      direction: 'column';
10    }
11
12    .column {
13      border: 1px solid #ccc;
14      margin: 20px;
15      padding: 20px;
16    }
17
18    p {
19      text-align: center;
20      margin-bottom: 50px;
21    }
22
23  </style>
24</head>
25
26<body>
27  <script src="https://www.paypal.com/sdk/js?CLIENT-ID=AUwAEZzkXUVAhmO10ESMB7i9jBlp9PlvrpgX1RGo5APTKMKFSRBNmCW98BxjzhAyDU0sIslCMdeOsDm3&vault=true&intent=subscription">
28  </script><!-- Replace CLIENT-ID with your client ID -->
29  <div class="column">
30    <p>
31      BASIC PLAN<br />$5 per month
32    </p>
33    <div id="paypal-button-container-P-89K58960WT101463BMA2QTGQ"></div> <!-- Replace with your plan ID -->
34  </div>
35
36  <script>
37    paypal.Buttons({
38      createSubscription: function(data, actions) {
39        return actions.subscription.create({
40          'plan_id': 'P-89K58960WT101463BMA2QTGQ' // Replace with your plan ID
41        });
42      },
43      onApprove: function(data, actions) {
44        alert('You have successfully subscribed to ' + data.subscriptionID); // Optional message given to subscriber
45      }
46    }).render('#paypal-button-container-P-89K58960WT101463BMA2QTGQ'); // Renders the PayPal button. Replace with your plan ID
47
48  </script>
49
50  <div class="column">
51    <p>
52      PREMIUM PLAN<br />$10 per month
53    </p>
54    <div id="paypal-button-container-P-8D325842DA922762MMA2QT6Q"></div> <!-- Replace with your plan ID -->
55  </div>
56  <script>
57    paypal.Buttons({
58      createSubscription: function(data, actions) {
59        return actions.subscription.create({
60          'plan_id': 'P-8D325842DA922762MMA2QT6Q' // Replace with your plan ID
61        });
62      },
63      onApprove: function(data, actions) {
64        alert('You have successfully subscribed to ' + data.subscriptionID); // Optional message given to subscriber
65      }
66    }).render('#paypal-button-container-P-8D325842DA922762MMA2QT6Q'); // Replace with your plan ID
67
68  </script>
69</body>
70
71</html>