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
