Clients are having trouble using the Paypal buttons integrated onto my website.

[lovingthepnw03]

When they choose the Paypal button they are taken to a blank screen. I'm using Google Chrome.

Here is the code I copied and pasted from PayPal:

<div id="smart-button-container">
<div style="text-align: center"><label for="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=AdiowFKAFSY6_cqZxY8G9oi3c-0h6pK8xeM8oq-tK_XXCKHIdRxiW__7sdwq..." 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: 'silver',
shape: 'pill',
label: 'checkout',
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>

[Tom_Carlisle]

There are a few problems with the sample code posted, but I think the main issue was that it was loading the PayPal JS code in a way that the library is not initialized before the rest of the code on the page tries to use the 'paypal' variable. 

There were some other errors, as it seems the "description" input box had been cut from the code, and hence that was undefined.  Thus, that was solved by adding these few lines.  Of course, another way to solve would have been to not refer to the description in the function(s) passed to PayPal in the call backs:

To get the script to fully load before the "paypal" variable is used, you can solve that a few ways. One way is to force the page to wait for the library to load, as is described in the marked answer on this stack overflow question: 
https://stackoverflow.com/questions/66307168/paypal-not-defined-when-customizing-own-src-for-script-... 

Another way would be to load it on a page that comes before checkout. 

Aside from those things, and some re-formatting, that really is all that was needed. 

But I also want to explain how these problems can be troubleshot. In my experience, when a page doesn't load everything you expect, it is almost always because of a problem, such as an undefined object referenced. You can open your browser's developer tools to view the console, which will give you some clues. In this case, amongst the stack dump that is logged, I saw mentions of "Paypal is undefined". 

Once that was fixed, the page still didn't load, but now it was mentioning "description is undefined". 

Once that was fixed, the sample page worked. Without the dev tools, I'd just be guessing -- and probably blaming PayPal's side. LOL. 

Note, I was trying to post updated code, using the code tags, but apparently these forums do not allow HTML code. If that is the case, it makes this forum virtually useless. 

I get that it is because people post and try to embed malicious links, but that isn't what I was doing. The board software should know to escape the embedded HTML so it doesn't actually run in the viewers browser.