cancel
Showing results for 
Search instead for 
Did you mean: 

smart button is blocked after inserted automatic value into input name amountInput

Options
Rednuts72
Contributor
Posted on

Hello,

 

I'm integrate smart button into my web application "jobersplace".

 

I add javascript code to update 3 values automaticly by a javascript function. The problem is with the balise input name="amountInpunt", the value is automaticly updated but the yellow paypal button is blocked.

 

If I insert into input name="amountInput" a value manually, the button is operational.

 

See a part of the code :

 

<div style="position: absolute; top: 534px; left: 620px;">

<div id="smart-button-container">
<table>
<tr>
<td>
<div style="text-align: center"><label for="description">title / titre / article </label><input type="text" name="descriptionInput" id="description" maxlength="227"></div>
</td>
<td>
<p id="descriptionError" style="visibility: hidden; color:red; text-align: center;">Please enter a description</p>
</td>
</tr>
<tr>
<td>
<div style="text-align: center"><label for="amount">produit / payer (buy) </label><input name="amountInput" type="number" id="amount" onmousedown="return true;" onselectstart="return true;"><span> EUR</span></div>
</td>
<td>
<input id="input_1" type="button" value="prix validation" onclick="click_valider_prix()"></input>
</td>
<td>
<p id="priceLabelError" style="visibility: hidden; color:red; text-align: center;">Please enter a regular price</p>
</td>
</tr>
<tr>
<td>
<div id="invoiceidDiv" style="text-align: center; display: none;"><label for="invoiceid">commande numéro </label><input name="invoiceid" maxlength="127" type="text" id="invoiceid" ></div>
</td>

<p id="invoiceidError" style="visibility: hidden; color:red; text-align: center;">Please enter an Invoice ID</p>
</td>
</tr>
<tr>
<td>
<div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
</td>
</tr>
</table>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo&currency=EUR" data-sdk-integration-source="button-factory"></script>
</script>

<script>

function click_valider_prix()
{
VarPrixCmde = '<%= Lbl_Title_Prix.Text %>';
document.getElementById("amount").value = parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2);

}

function Func_NumCmde()

{
var VarNumProduitCmde = '<%= Lbl_Cmde.Text %>';
var VarPrixCmde = '<%= Lbl_Title_Prix.Text %>';
var VarIntituléCmde = '<%= Lbl_Title_Produit.Text %>';
document.forms[0].invoiceid.value = VarNumProduitCmde;
document.forms[0].descriptionInput.value = VarIntituléCmde;

}

</script>

<script >

function initPayPalButton() {
var VarNumProduitCmde = '<%= Lbl_Cmde.Text %>';
var VarPrixCmde = '<%= Lbl_Title_Prix.Text %>';

 

var VarIntituléCmde = '<%= Lbl_Title_Produit.Text %>';
document.forms[0].invoiceid.value = VarNumProduitCmde;
document.forms[0].descriptionInput.value = VarIntituléCmde;

 

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');
amount.value = parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2);


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.replace(',','.').value != parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2).value) {
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>

 

well, I hope that you find a solution that this problem to update balise input "amountInput" automaticly and valid click button.

 

Truly yours.

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.