html smart buttons not working after inserting sandbox client id on <script src=sdk ... I set up smart buttons on my site, and tested it out. After realizing I'm not receiving any payments I found the integration guide where I was able to get my client ID on sandbox. Once I got it I inserted it in my <script src > tag, now not only am I not getting the payment but the buttons are not launching the form now. I need help making these smart buttons work. Can some one please look at my code? <html> <head> <title>Payment</title> <link rel="stylesheet" media="screen and (min-width: 0px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 1000px)" href="medium.css"> <link rel="stylesheet" media="screen and (min-width: 1400px)" href="large.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style type="text/css"> input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } </style> </head> <body> <div id="responsive-block"> <p style="text-align: center; font-size: 20px;">Put your name here:</p> <div id="smart-button-container"> <div style="text-align: center"><label for="description"> </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"> </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> </div> <script src="https://www.paypal.com/sdk/js?client-id=Af1IlBFvduDHptOzJQMuEdNGwcepCLLUlF6I8w9dhVkZnAZByo5eJ0RRVfgeBmaCN6wsugYK82XsAYFG&enable-funding=venmo¤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 (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> </body> </html>
... View more