cancel
Showing results for 
Search instead for 
Did you mean: 

Multiple Paypay Smart Buttons on one Page

Options
Go to solution
CoenraadRos
Contributor
Posted on

Hi Everyone,

 

I need so help please ?

 

We're trying to show multiple smart payment buttons on one webpage but without any success.

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Solved

Multiple Paypay Smart Buttons on one Page

Options
Go to solution
CoenraadRos
Contributor

Hi Everyone I eventually manages to show all of the buttons by removing the sdk script and including it only ones in the html body and also putting each button in a body tags.

 

May not be the best way but it worked 🙂

 

<!-- PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=ClientID=subscription" data-sdk-integration-source="button-factory"></script>

 

<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container-1"></div>

<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-5RH36260RX664063ML7LVI6Y'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container-1');
</script>
</body>

 

<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container-2"></div>

<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'blue',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-5RH36260RX664063ML7LVI6Y'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container-2');
</script>

View solution in original post

3 REPLIES 3
Solved

Multiple Paypay Smart Buttons on one Page

Options
Go to solution
CoenraadRos
Contributor

Hi Everyone I eventually manages to show all of the buttons by removing the sdk script and including it only ones in the html body and also putting each button in a body tags.

 

May not be the best way but it worked 🙂

 

<!-- PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=ClientID=subscription" data-sdk-integration-source="button-factory"></script>

 

<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container-1"></div>

<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-5RH36260RX664063ML7LVI6Y'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container-1');
</script>
</body>

 

<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container-2"></div>

<script>
paypal.Buttons({
style: {
shape: 'rect',
color: 'blue',
layout: 'vertical',
label: 'subscribe'
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-5RH36260RX664063ML7LVI6Y'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container-2');
</script>

Multiple Paypay Smart Buttons on one Page

Options
Go to solution
Dave101000
Contributor

@CoenraadRos 

 

Hi, 

 

Could you possibly do a video of how you did it I'm a complete novice and would love to figure out how to implement this so it shows 3 buttons on one page?

 

 

Multiple Paypay Smart Buttons on one Page

Options
Go to solution
Dave101000
Contributor

@CoenraadRos 

 

Q1. I want them in this formation next to each other in different HTML boxes under a shortcode form? [Fig 1 & 2]

 

Q2. The forms for the payment tables have areas on each tab to put the HTML for the buttons in but obviously, they do not show any way of doing this? [Fig 3]

 

Any help would be great Either Q1. way or Q2. way

 

Thanks

 

[Fig 1]

[Fig 2]PayPal Button.PNG

[Fig 3]Change these.PNG

Payment Table - Button Custom HTML.PNG

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.