cancel
Showing results for 
Search instead for 
Did you mean: 

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

Yes since the only thing happening is a render is being called with in the DOM 2 or 3 times depending on how many buttons you want.  Also my script is from the PP site, just modified for my pages using JQuery.  Also I am using REST API v2 Client Side, but server side should work that same since it's all in the DOM.

Multiple Smart Buttons code in one Page

Options
vinyljunkie
Member

Did you @Marcored find a solution?

I am still struggling here, even if my containers have unique IDs, the script doesn't work or if it works I have only one set of smart buttons for 1 item.

Is it important where the script is in the body?

Thanks for some more help. @JackieDaytona 

Cheers,

Kay

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

let me write it for ya

 

Some of it will be in JQuery as well

 

Give me a day or two

Multiple Smart Buttons code in one Page

Options
JackieDaytona
Contributor

Here it is, did not test but should work:

 

<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>
Hope that helps

D


Multiple Smart Buttons code in one Page

Options
Novashock
New Community Member

Don't know if you find a solution or not, but this works for me.

 

<div id="paypal-button-container-50"></div>
<div id="paypal-button-container-100"></div>
<div id="paypal-button-container-150"></div>
<script>
  var url = "https://www.paypal.com/sdk/js?client-id=xyz&currency=GBP";
  var myScript = document.createElement('script');
  myScript.setAttribute('data-sdk-integration-source', 'button-factory');
  myScrip.src=url;
  document.head.appendChild(myScript);
  
  function FirstPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '50'
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-50');
  };
  
  function SeconPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '100'
                    }
                }]
            });
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-100');
  };
  
  function thirdPriceButton(){
    paypal.Buttons({
        style: {
            shape: 'rect',
            color: 'black',
            layout: 'vertical',
            label: 'paypal',

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

 

Multiple Smart Buttons code in one Page

Options
RoFe7633
New Community Member

The code that Novashock supplied does work when you fix the spelling errors of the functions and variables as well as put your actual PayPal credentials in it.

The function names must match the names used in the onload function.

 

<script>
var url = "https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=CAD";
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: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',

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

function secondPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',

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

function thirdPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',

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

Haven't Found your Answer?

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