cancel
Showing results for 
Search instead for 
Did you mean: 

automatic javascript function inserted into input value amount

Options
Rednuts72
Contributor
Posted on

Hello,

I've got a problem of integration of smart button with used an inserted automatic javascript function to input value in input name="amountInput" id="amount".

 

the code is the following :

 

<script>
var VarPrixCmde = "";
function click_valider_prix()
{
// VarPrixCmde = '<%= Lbl_Title_Prix.Text %>';
//document.forms[0].amountInput.value = parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2);

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

initPayPalButton();
}

</script>

<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=AUSG2LR2a9n4b6TJT1BmJ_BLzzTMe0HBLxeGMzlhFgF0jVrCL3jTM9AWRfat..." data-sdk-integration-source="button-factory"></script>

<script >
function initPayPalButton() {
var VarNumProduitCmde = '<%= Lbl_Cmde.Text %>';
//var VarPrixCmde = '<%= Lbl_Title_Prix.Text %>';
//var VarPrixCmde = "10,55";
var VarIntituléCmde = '<%= Lbl_Title_Produit.Text %>';
document.forms[0].invoiceid.value = VarNumProduitCmde;
document.forms[0].descriptionInput.value = VarIntituléCmde;
//document.forms[0].amountInput.value = parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2);
//document.forms[0].custom.value = VarNumProduitCmde;
// document.forms[0].os1.value = VarNumProduitCmde;

//var SelectWrapper = require('select-wrapper');
//var mySelect = new SelectWrapper(by.id('os0'));

//mySelect.selectByValue('4');
//document.forms[0].os0.selected = '5 EUROS €5,50 EUR';
//mySelect.selectByValue('5 EUROS €5,50 EUR');

/* for( i=0 ; i < document.forms[0].os0.length ; i++){
if ( document.forms[0].os0.options[i].value == '5 EUROS €5,50 EUR' ){
document.forms[0].os0.options[i].selected = true;
} */

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";
}
//(amount.value.length < 1)
if (VarPrixCmde.replace(',','.').value == parseFloat('<%= Lbl_Title_Prix.Text %>'.replace(',','.'), 10).toFixed(2))
//if (VarPrixCmde.Value == '<%= Lbl_Title_Prix.Text %>')
/{
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>

 

thanks you for your solution.

 

marc-antoine yonga

2 REPLIES 2

automatic javascript function inserted into input value amount

Options
Rednuts72
Contributor

the problem of this automatic javascript function is that the value amount is updated but the yellow paypal smart button is not operational. the process to go to the payment following page is blocked with no error message.

 

thanks you for your solution.

 

marc-antoine <removed>

automatic javascript function inserted into input value amount

Options
Rednuts72
Contributor

when the value of amountInput is put automaticly by javascript function the yellow button paypal is blocked and when i put (insert) the value manually into the amountInput balise, the yellow button paypal is functionnal.

 

thanks you for your solution.

Haven't Found your Answer?

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