• Hello all,
    I have a Paypal business account and from there I create a smart button for receiving variable amount payment. When I pasted that code (in a block custom html) in a page, the paypal button shows up when we see it in block html preview but when we go for page preview or publish the changes, then paypal button is not visible. Only the amount text field and description field is visible.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Kindly provide the link to the page where you placed the button so we can take a look for you.

    Thread Starter sanayache

    (@sanayache)

    I have placed the code here on my page https://sancheya.com/donate/

    The button with variable price was created from https://www.paypal.com/buttons/smart

    It creates a code which is as follows:

    <div id="smart-button-container">
        <div style="text-align: center"><label for="description">Name  </label><input type="text" name="descriptionInput" id="description" maxlength="127" value=""></div>
          <p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
        <div style="text-align: center"><label for="amount">Amount </label><input name="amountInput" type="number" id="amount" value="" ><span> USD</span></div>
          <p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a price</p>
        <div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid"> </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" value="" ></div>
          <p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
        <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
      </div>
      <script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
      <script>
      function initPayPalButton() {
        var description = document.querySelector('#smart-button-container #description');
        var amount = document.querySelector('#smart-button-container #amount');
        var descriptionError = document.querySelector('#smart-button-container #descriptionError');
        var priceError = document.querySelector('#smart-button-container #priceLabelError');
        var invoiceid = document.querySelector('#smart-button-container #invoiceid');
        var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
        var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
    
        var elArr = [description, amount];
    
        if (invoiceidDiv.firstChild.innerHTML.length > 1) {
          invoiceidDiv.style.display = "block";
        }
    
        var purchase_units = [];
        purchase_units[0] = {};
        purchase_units[0].amount = {};
    
        function validate(event) {
          return event.value.length > 0;
        }
    
        paypal.Buttons({
          style: {
            color: 'gold',
            shape: 'rect',
            label: 'paypal',
            layout: 'vertical',
            
          },
    
          onInit: function (data, actions) {
            actions.disable();
    
            if(invoiceidDiv.style.display === "block") {
              elArr.push(invoiceid);
            }
    
            elArr.forEach(function (item) {
              item.addEventListener('keyup', function (event) {
                var result = elArr.every(validate);
                if (result) {
                  actions.enable();
                } else {
                  actions.disable();
                }
              });
            });
          },
    
          onClick: function () {
            if (description.value.length < 1) {
              descriptionError.style.visibility = "visible";
            } else {
              descriptionError.style.visibility = "hidden";
            }
    
            if (amount.value.length < 1) {
              priceError.style.visibility = "visible";
            } else {
              priceError.style.visibility = "hidden";
            }
    
            if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
              invoiceidError.style.visibility = "visible";
            } else {
              invoiceidError.style.visibility = "hidden";
            }
    
            purchase_units[0].description = description.value;
            purchase_units[0].amount.value = amount.value;
    
            if(invoiceid.value !== '') {
              purchase_units[0].invoice_id = invoiceid.value;
            }
          },
    
          createOrder: function (data, actions) {
            return actions.order.create({
              purchase_units: purchase_units,
            });
          },
    
          onApprove: function (data, actions) {
            return actions.order.capture().then(function (orderData) {
    
              // Full available details
              console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
    
              // Show a success message within this page, e.g.
              const element = document.getElementById('paypal-button-container');
              element.innerHTML = '';
              element.innerHTML = '<h3>Thank you for your payment!</h3>';
    
              // Or go to another URL:  actions.redirect('thank_you.html');
              
            });
          },
    
          onError: function (err) {
            console.log(err);
          }
        }).render('#paypal-button-container');
      }
      initPayPalButton();
      </script>

    Between I noticed that the button with fixed price and single select list do not have this issue. This means, that the variable price button code has some issue.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Paypal smart button code not working properly’ is closed to new replies.