Error when using code for Smart Paypal Button
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am getting the below error when pasting the code for the Paypal Smart Button Form into my Invoicing Message Body. Any thoughts as to what is causing this? Below this error, I've also pasted the code I am using.
Uncaught ReferenceError: paypal is not defined
https://merhaut.com/web?debug#id=47998&view_type=form&model=account.invoice&action=210&menu_id=110:25 Traceback: ReferenceError: paypal is not defined at initPayPalButton (eval at <anonymous> (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:370:213), <anonymous>:25:5) at eval (eval at <anonymous> (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:370:213), <anonymous>:97:3) at eval (<anonymous>) at https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:370:213 at Function.globalEval (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:370:233) at jQuery.fn.init.domManip (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:730:306) at jQuery.fn.init.append (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:716:295) at jQuery.fn.init.<anonymous> (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:725:23) at jQuery.access (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:599:21) at jQuery.fn.init.html (https://merhaut.com/web/content/388489-96c0ca6/web.assets_common.js:722:309)
<div id="smart-button-container"> <div style="text-align: center"><label for="description">Invoice Number </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">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"> </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¤cy=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 (details) { alert('Transaction completed by ' + details.payer.name.given_name + '!'); }); }, onError: function (err) { console.log(err); } }).render('#paypal-button-container'); } initPayPalButton(); </script>
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- paypal buttons can't show in PayPal Payments Standard
- Sandbox testing has beaten me !! in Sandbox Environment
- Customising Paypal Checkout Button in PayPal Payments Standard
- recurring payments when price maybe changed and price have 2 decimal point in REST APIs
- PayPal Buttons not visible in Sandbox Environment