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