PayPal Code Issues

[petitshoo]

Hi,

My client provided me with a PayPal code to include on their website. When I paste it in a Text Element or a Raw Code Element, it is showing the buttons at the top and then a bunch of code at the bottom.

Oddly enough, it works in a modal which I tried in the header, BUT, it doesn’t work in the modal on mobile. And I realized I can’t use it in a modal because PayPal pops up its own modal with this code.

I don’t know if this has something to do with the actual code from PayPal or if I’m not putting it in the page properly.

I’ve included details in the secure note.

Thanks!
Jen

[friech]

Hi Jen,

Thank you for writing in, please add this part on the Page > JS area.

  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: 'pay',
        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 = '</p>
<h3>Thank you for your payment!</h3>
<p>';

          // Or go to another URL:  actions.redirect('thank_you.html');
          
        });
      },

      onError: function (err) {
        console.log(err);
      }
    }).render('#paypal-button-container');
  }
  initPayPalButton();

And this part on a RAW Content element.

<div id="smart-button-container">
	<div style="text-align: center;"><label for="description">Invoice Number (Found on Client Portal) </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">Enter Full or Partial Payment 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">Confirm Invoice Number </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>

Please note that we do not really provide support for any custom scripts here is the forum. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.

Hope it helps,
Cheers!

[petitshoo]

Thanks so much! I had tried dividing it up that way, but didn’t do it quite right. This did it.

Again, appreciate all the help!
Jen

[tristup]

Hi Jen,

Glad that we are able to help you.

Thanks