I have followed the instructions to create a paypal button an integrate with my site: https://www.paypal.com/pt/smarthelp/article/FAQ3629 When I click in the button paypal nothing happens. what is missing in this code? The code is: <script type="text/javascript"> function calc() { var amount = document.getElementById("numberOfPeople").value; var amount = parseInt(amount, 10); var menu = document.querySelector('input[name="menu"]:checked').value; if (menu == "Petra") { if (amount < 3) { var total = amount * 70; } ... } } document.getElementById("total").value = total; document.querySelector ( '[name="SQF_MENU"]' ).value = menu; document.querySelector ( '[name="SQF_NUMBER_OF_PERSON"]' ).value = amount; document.querySelector ( '[name="SQF_VALUE_TO_PAY"]' ).value = total; document.querySelector('#smart-button-container #description').value = " menu: "+menu+" Number of persons: "+amount document.querySelector('#smart-button-container #total').value = total; } </script> <div id="calculatePrice"></div> Choose your menu: <form oninput="calc();"> <input type="radio" id="menu" name="menu" value="Petra" > <label for="menu">Petra</label><br> <input type="radio" id="menu" name="menu" value="Andalusia"> <label for="menu">Andalusia</label><br> <input type="radio" id="menu" name="menu" value="1001"> <label for="menu">One thousand and one nights</label><br><br> <br> <label for="numberOfPeople">Specify the number of people:</label><br> <input type="number" id="numberOfPeople" name="numberOfPeople"><br><br> <label for="total">Total price will be:</label><br> <output class="enMoney" id="total" name="total"></output><br><br> </form> <div id="smart-button-container"> <div style="text-align: center"><label for="description">Your order is: </label><output type="text" name="description" id="description" maxlength="127" value=""></div> <div style="text-align: center"><label for="amount">Total </label><output name="amount" type="number" id="amount" value="" ><span> EUR</span></div> <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¤cy=EUR" 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 elArr = [description, amount]; 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(); 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"; } purchase_units[0].description = description.value; purchase_units[0].amount.value = amount.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>
... View more