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.

      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>

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