Hello,
Firstly I'd like to thank OP for posting this question and NovaShock for answering.
I'd like to post my own solution for posting multiple subscription buttons on a single page which only works because of NovaShocks contribution.
<div id="paypal-button-container-FIRSTPLANIDHERE"></div>
<div id="paypal-button-container-SECONDPLANIDHERE"></div>
<div id="paypal-button-container-THIRDPLANIDHERE"></div>
<script>
var url = "https://www.paypal.com/sdk/js?client-id=CLIENTIDHERE&vault=true&intent=subscription";
var myScript = document.createElement('script');
myScript.setAttribute('data-sdk-integration-source', 'button-factory');
myScript.src=url;
document.head.appendChild(myScript);
function firstPriceButton(){
paypal.Buttons({
style: {
shape: 'pill',
color: 'white',
layout: 'vertical',
label: 'subscribe',
},
createSubscription: function(data, actions) {
return actions.subscription.create({
/* Creates the subscription */
plan_id: 'FIRSTPLANIDHERE'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#FIRSTPLANIDHERE'); // Renders the PayPal button
};
function secondPriceButton(){
paypal.Buttons({
style: {
shape: 'pill',
color: 'white',
layout: 'vertical',
label: 'subscribe',
},
createSubscription: function(data, actions) {
return actions.subscription.create({
/* Creates the subscription */
plan_id: 'SECONDPLANIDHERE'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#paypal-button-container-SECONDPLANIDHERE'); // Renders the PayPal button
};
function thirdPriceButton(){
paypal.Buttons({
style: {
shape: 'pill',
color: 'white',
layout: 'vertical',
label: 'subscribe',
},
createSubscription: function(data, actions) {
return actions.subscription.create({
/* Creates the subscription */
plan_id: 'THIRDPLANIDHERE'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID); // You can add optional success message for the subscriber here
}
}).render('#paypal-button-container-THIRDPLANIDHERE'); // Renders the PayPal button
}
myScript.onload = function () {
firstPriceButton();
secondPriceButton()
thirdPriceButton()
};
</script>
