cancel
Showing results for 
Search instead for 
Did you mean: 

Multiple Smart Buttons code in one Page

Options
Marcored
New Community Member
Posted on

Hello PayPal Community,

 

I'm writing to seek your expertise because I`m trying to integrate three Paypal Smart Payment buttons on one page. The code that the wizard generates is the one below, where XXX corresponds to my client ID.

 

I tried copying and pasting the code three times and changing the first line div id container (#paypal-button-container1, #paypal-button-container2 , ecc..) and also the render function target to match it.

 

The console is reporting Uncaught Error: zoid destroyed all components. I tried searching for similar issues but I'm still struggling.

Any tip or suggestion is appreciated, thank you 🙂

 

<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=XXX&currency=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'horizontal',
label: 'buynow',

},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '206.18'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>

15 REPLIES 15

Multiple Smart Buttons code in one Page

Options
Chiranjeevi_L
PayPal Employee

Hi @Marcored,

 

Thank you for contacting PayPal community.

 

Our sincere apologies for the inconvenience caused.

 

I request to initialize the script code only once in your code, to resolve the issue.

 

<script src="https://www.paypal.com/sdk/js?client-id=sb&amp;currency=EUR&amp;locale=de_DE" data-sdk-integration-source="button-factory"></script>

 

Thank you for understanding and patience.

 

Sincerely,

Chiranjeevi

PayPal, Inc. 

 

If this post or any other was helpful, please enrich the community by giving kudos or accepting it as a solution

Multiple Smart Buttons code in one Page

Options
Aki-1278
Contributor
The Buyer party will use this E-Mail Address to sign in to Escrow.com and view the transaction.

Multiple Smart Buttons code in one Page

Options
Bart86
Contributor

Hi. Any solution to this? 
I am stuck with the same problem and it's super frustrating... 

setting up on button itself is hard enough as a non-programmer. Now, I just knew I can only render one button in one page properly. 

 

Having multiple button on one page poses issue. either it doesn't show or it appear out of place.

 

@Marcored @Chiranjeevi_L 

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

On your .render('#paypal-button-container');, just add a comma and call another DIV ID

 

So .render('#paypal-button-container, #otherdiv');

 

Hope that helps

 

D

Multiple Smart Buttons code in one Page

Options
Bart86
Contributor

But how to differentiate the different buttons. Paypal doesn't mention it on the developer documentation. 
also the button code generator generates some "paypal-button-container" every time it generates

Thanks for the response though, but, how...

Multiple Smart Buttons code in one Page

Options
Cliffitt
Contributor

Facts. It appears that the code only reads the last embedded smart button. Anyone from Paypal here to help us out? @Chiranjeevi_L  @JackieDaytona 

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

OK, sorry I did not elaborate for you all (PayPal rubbing off on me LoL)...

 

You need to give each element a unique id, then call render multiple times:

 

Here is the PROPER way to call multiple buttons, Mind you this is in JQuery:

 

      <ul>
         <li data-id="1">Item 1 <div id="button-1"></div></li>
         <li data-id="2">Item 2 <div id="button-2"></div></li>
        <li data-id="3">Item 3 <div id="button-3"></div></li>
       </ul>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    [ '#button-1', '#button-2', '#button-3' ].forEach(function(selector) {        paypal.Button.render({
            // options
        }, selector);
    });
</script>

 

 

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

And if you do not like ID's then here is an example with classes

 

        <div class="paypal-button" data-my-attribute="tree"></div>
        <div class="paypal-button" data-my-attribute="dog"></div>
       <div class="paypal-button" data-my-attribute="car"></div>

       <script src="https://www.paypalobjects.com/api/checkout.js"></script>

        <script>    
document
.querySelectorAll('.paypal-button').forEach(function(selector) { paypal.Button.render({ // options console.log( selector.dataset.myAttribute ); }, selector); }); </script>
Enjoy -D

 

Multiple Smart Buttons code in one Page

Options
Bart86
Contributor

Thanks @JackieDaytona  but is this the "checkout.js" method of integration? 
I am using the Paypal SDK method, and the button code generator doesn't differentiate the buttons, would your script still work?

Haven't Found your Answer?

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