I am trying to render two PayPal Smart Buttons on my page, they both take different amounts, £50 and £100. Because it uses JavaScript I assume there is an issue whereby the two are clashing and thus only the latter of the two buttons are drawn. Here is my code:

<div id="paypal-button-container-50"></div>
<script src=";currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  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 pleted by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-50');
</script>

<div id="paypal-button-container-100"></div>
<script src=";currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  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 pleted by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-100');
</script>

I know this is wildly inefficient, I have tried using different div id names to no avail, and have also tried using a forEach statement. If anybody could help get the two to render with different values, that would be great.

I am trying to render two PayPal Smart Buttons on my page, they both take different amounts, £50 and £100. Because it uses JavaScript I assume there is an issue whereby the two are clashing and thus only the latter of the two buttons are drawn. Here is my code:

<div id="paypal-button-container-50"></div>
<script src="https://www.paypal./sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  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 pleted by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-50');
</script>

<div id="paypal-button-container-100"></div>
<script src="https://www.paypal./sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
  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 pleted by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container-100');
</script>

I know this is wildly inefficient, I have tried using different div id names to no avail, and have also tried using a forEach statement. If anybody could help get the two to render with different values, that would be great.

• javascript
• html
• paypal

• You only need to load the SDK script once per page. – Preston PHX Commented Jun 9, 2020 at 3:55

4 Answers 4

Try to load the script only once as suggested by Preston PHX. If it did not work, then load the library twice but let the second load with a different namespace "paypal_sdk for example" and use the name of the namespace to render the second button.

<div class="container">
<h2>Pay 50</h2>
<div id = "paypal-button-container-50"></div>
<h2>Pay 100</h2>
<div id = "paypal-button-container-100"></div>
</div>

At the end of your code:

<script src="https://www.paypal./sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory"></script>
<script>
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 pleted by ' + details.payer.name.given_name + '!');
      });
  }
  }).render('#paypal-button-container-50');
 </script>



<script src="https://www.paypal./sdk/js?client-id=xyz&currency=GBP" data-sdk-integration-source="button-factory" 
  data-namespace = "paypal_sdk"></script>
  <script>
  paypal_sdk.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 pleted by ' +             
   details.payer.name.given_name + '!');
      });
  }
  }).render('#paypal-button-container-100');
  </script>

You probably find a solution to this, but for those new and looking for a way to use multiple Paypal Smart Button you can try the following.

<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./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 pleted 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 pleted 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 pleted by ' + details.payer.name.given_name + '!');
            });
        }
    }).render('#paypal-button-container-150');
  }
  myScript.onload = function () {
      firstPriceButton();
      secondPriceButton()
      thirdPriceButton()
  };
</script>

I know that i am late but this really helped me

<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./api/checkout.js"></script>

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

For a plete working example, see below (doesn't work in SO's viewer due to Paypal security restrictions):

<!DOCTYPE html>
<html lang="en">

<body>
    <script src="https://www.paypal./sdk/js?client-id=sb&currency=USD"></script>
        <div class="paypal-button" id="pp-digital" data-price=17.00>1</div>
        <div class="paypal-button" id="pp-hardcopy" data-price=26.00>2</div>
        <script>    
         
        
          document.querySelectorAll('.paypal-button').forEach(function(selector) { 
              console.log(selector.dataset.price) // Show an attribute from the parent div
              console.log(selector.id) // Show the div name from the parent div
              paypal.Buttons({

            // Set up the transaction
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: selector.dataset.price
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Show a success message to the buyer
                    alert('Transaction pleted by ' + details.payer.name.given_name + '!');
                });
            }


        }).render('#' + selector.id);  // Render the button back to the parent div
       });
       
        </script>

</body>

</html>