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>
