automatic javascript function inserted into input value amount
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Labels:
-
PayPal HTML Buttons
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- smart button is blocked after inserted automatic value into input name amountInput in PayPal Payments Standard
- PayPal JSON Response Object Transaction ID in REST APIs
- Subscription and Smart Buttons on Same Page - Need to load different SDKs in SDKs
- Can't set state of sandbox user for testing sales tax? in Sandbox Environment