353 lines
12 KiB
JavaScript
353 lines
12 KiB
JavaScript
// Create the Card Fields Component and define callbacks MSIN-3855 checkout
|
|
|
|
const cardField = paypal.CardFields({
|
|
|
|
createOrder: function (data) {
|
|
setProcessing(true);
|
|
console.log("create_order start");
|
|
console.log(data.paymentSource);
|
|
|
|
|
|
const cardNumber = data.number;
|
|
const cardType = detectCardType(cardNumber);
|
|
|
|
|
|
|
|
var postData = {request_type: 'create_order', payment_source: data.paymentSource};
|
|
return fetch("/paypal_advanced/paypal_checkout_init.php", {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
|
|
setProcessing(false);
|
|
console.log(result.msg);
|
|
console.log(result.status);
|
|
console.log(result.data.id);
|
|
if (result.status == 1) {
|
|
console.log("create_order statut ok");
|
|
return result.data.id;
|
|
} else {
|
|
|
|
console.log("erreur create_order");
|
|
let errorMessage = result.msg;
|
|
let translatedErrorMessage = translateErrorMessage(errorMessage);
|
|
resultMessage(`${translatedErrorMessage}`);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
},
|
|
onApprove: function (data) {
|
|
setProcessing(true);
|
|
|
|
console.log("onApprove");
|
|
const {orderID} = data;
|
|
var postData = {request_type: 'capture_order', order_id: orderID};
|
|
return fetch('/paypal_advanced/paypal_checkout_init.php', {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
// Redirect to success page
|
|
if (result.status == 1) {
|
|
console.log("capture_order");
|
|
window.location.href = "/paiement_update.php?checkout_ref_id=" + result.ref_id;
|
|
} else {
|
|
|
|
|
|
console.log("erreur capture order");
|
|
let errorMessage = result.msg;
|
|
let translatedErrorMessage = translateErrorMessage(errorMessage);
|
|
resultMessage(`${translatedErrorMessage}`);
|
|
|
|
}
|
|
setProcessing(false);
|
|
});
|
|
},
|
|
onError: function (error) {
|
|
console.error('Erreur lors du traitement du paiement', error);
|
|
},
|
|
});
|
|
|
|
// Render the PayPal Button for PayPal account payments MSIN-3856
|
|
paypal.Buttons({
|
|
style: {
|
|
shape: 'rect',
|
|
color: 'gold',
|
|
layout: 'vertical',
|
|
label: 'paypal',
|
|
height: 40, // Hauteur du bouton
|
|
size: 'responsive' // Option pour rendre le bouton responsive
|
|
},
|
|
// Custom onClick event handler
|
|
onClick: function (data, actions) {
|
|
// Perform your custom logic here
|
|
console.log('PayPal button clicked!');
|
|
|
|
let isValid = true;
|
|
|
|
|
|
var $termes = $('input.chk_termes[type=checkbox]:not(:checked)');
|
|
|
|
if (!$termes.length) {
|
|
isValid = true;
|
|
|
|
} else {
|
|
|
|
|
|
var str_alert = "<?php afficheTexte('terme_accepter') ?>";
|
|
|
|
setTimeout(function () {
|
|
alert(str_alert);
|
|
}, 1000);
|
|
return actions.reject();
|
|
}
|
|
|
|
|
|
// Example: Validate a form, show a message, or track the event
|
|
|
|
if (!isValid) {
|
|
// Prevent the payment flow if the form is not valid
|
|
console.log('Reject the payment and prevent the flow');
|
|
return actions.reject(); // Reject the payment and prevent the flow
|
|
} else {
|
|
console.log('Continue with the payment flow');
|
|
return actions.resolve(); // Continue with the payment flow
|
|
}
|
|
},
|
|
|
|
|
|
createOrder: function (data) {
|
|
console.log("create_order paypal js");
|
|
|
|
var postData = {request_type: 'create_order', payment_source: 'paypal'};
|
|
return fetch("/paypal_advanced/paypal_checkout_init.php", {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
|
|
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
|
|
setProcessing(false);
|
|
if (result.status == 1) {
|
|
console.log("create_order paypal ok");
|
|
return result.data.id;
|
|
|
|
} else {
|
|
console.log("erreur create_order pay pal");
|
|
|
|
let errorMessage = result.msg;
|
|
let translatedErrorMessage = translateErrorMessage(errorMessage);
|
|
resultMessage(`${translatedErrorMessage}`);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
,
|
|
onApprove: function (data, actions) {
|
|
|
|
const orderID = data.orderID;
|
|
console.log("onApprove paypal");
|
|
return actions.order.capture().then(function (details) {
|
|
// Retrieve the transaction ID
|
|
const transactionID = details.purchase_units[0].payments.captures[0].id;
|
|
|
|
|
|
// finalise la transaction
|
|
|
|
var postData = {
|
|
payeremail: details.payer.email_address,
|
|
payername: details.payer.name.surname + details.payer.name.given_name,
|
|
request_type: 'fin_paypal',
|
|
payment_source: 'paypal',
|
|
order_id: orderID,
|
|
transaction_id: transactionID,
|
|
order_status: details.status
|
|
};
|
|
return fetch("/paypal_advanced/paypal_checkout_init.php", {
|
|
method: "POST",
|
|
headers: {'Accept': 'application/json'},
|
|
body: encodeFormData(postData)
|
|
})
|
|
.then((res) => {
|
|
|
|
|
|
return res.json();
|
|
})
|
|
.then((result) => {
|
|
resultMessage("<?php afficheTexte('preloader_wait', 1, 0, 1);?> ");
|
|
setProcessing(false);
|
|
if (result.status == 1) {
|
|
console.log("result.ref_id");
|
|
console.log(result.ref_id);
|
|
window.location.href = "/paiement_update.php?checkout_ref_id=" + result.ref_id;
|
|
// return result.data.id;
|
|
|
|
} else {
|
|
console.log("erreur fin paypal");
|
|
|
|
let errorMessage = result.msg;
|
|
let translatedErrorMessage = translateErrorMessage(errorMessage);
|
|
resultMessage(`${translatedErrorMessage}`);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
onError: function (err) {
|
|
console.error('An error occurred during the transaction', err);
|
|
}
|
|
}).render('#paypal-button-container');
|
|
|
|
// Render each field after checking for eligibility
|
|
if (cardField.isEligible()) {
|
|
|
|
const nameField = cardField.NameField({
|
|
placeholder: "<?php echo afficheTexte('checkout_nomsurlacarte', 0)?>" // Translate placeholder
|
|
});
|
|
nameField.render("#card-name-field-container");
|
|
|
|
|
|
const numberField = cardField.NumberField({
|
|
placeholder: "<?php echo afficheTexte('checkout_ccnumber', 0)?>" // Translate placeholder
|
|
});
|
|
numberField.render("#card-number-field-container");
|
|
|
|
|
|
const cvvField = cardField.CVVField({
|
|
placeholder: "<?php echo afficheTexte('checkout_cvv', 0)?>" // Translate placeholder
|
|
});
|
|
cvvField.render("#card-cvv-field-container");
|
|
|
|
const expiryField = cardField.ExpiryField({
|
|
placeholder: "<?php echo afficheTexte('checkout_cexpiryField', 0)?>" // Translate placeholder
|
|
});
|
|
|
|
|
|
expiryField.render("#card-expiry-field-container");
|
|
|
|
// Add click listener to submit button and call the submit function on the card-number-field-container component
|
|
// checkout
|
|
document
|
|
.getElementById("card-field-submit-button")
|
|
.addEventListener("click", () => {
|
|
let isValid = true;
|
|
|
|
|
|
var $termes = $('input.chk_termes[type=checkbox]:not(:checked)');
|
|
|
|
if (!$termes.length) {
|
|
isValid = true;
|
|
|
|
} else {
|
|
isValid = false;
|
|
var str_alert = "<?php afficheTexte('terme_accepter') ?>";
|
|
|
|
/*if ($termes.data('pop_up') == 'location_policy') {
|
|
str_alert = $("#chk_location_policy").data('msg') + "\n" + str_alert;
|
|
}*/
|
|
|
|
alert(str_alert);
|
|
}
|
|
|
|
if (!isValid) {
|
|
|
|
return; // Stop further execution if validation fails
|
|
}
|
|
// verifie si cheques
|
|
checkboxValue = $('#chk_pai_6').val()
|
|
console.log("type paiement");
|
|
console.log(checkboxValue);
|
|
if (checkboxValue == 6) {
|
|
grecaptcha.ready(function () {
|
|
grecaptcha.execute('<?php echo RECAPTCHA_SITE_KEY; ?>', {action: 'achat'}).then(function (token) {
|
|
document.getElementById('g-recaptcha-response').value = token;
|
|
console.log("checkboxValue == 6 js");
|
|
$("#frm_panier").submit();
|
|
$('body').css('cursor', 'wait');
|
|
});
|
|
});
|
|
}
|
|
|
|
cardField.submit().then(() => {
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.log("erreur bouton paiement");
|
|
|
|
let str = error.message;
|
|
let result = str.substring(str.indexOf('.') + 1);
|
|
let resultObject = JSON.parse(result);
|
|
let description = resultObject.details[0].description;
|
|
console.log(description);
|
|
let errorMessage = description;
|
|
let translatedErrorMessage = translateErrorMessage(errorMessage);
|
|
|
|
resultMessage(`${translatedErrorMessage}`);
|
|
return;
|
|
});
|
|
|
|
|
|
});
|
|
} else {
|
|
// Hides card fields if the merchant isn't eligible
|
|
document.querySelector("#checkout-form").style = "display: none";
|
|
}
|
|
|
|
const encodeFormData = (data) => {
|
|
var form_data = new FormData();
|
|
|
|
for (var key in data) {
|
|
form_data.append(key, data[key]);
|
|
}
|
|
return form_data;
|
|
}
|
|
|
|
// Show a loader on payment form processing
|
|
const setProcessing = (isProcessing) => {
|
|
if (isProcessing) {
|
|
document.querySelector(".overlay").classList.remove("hidden");
|
|
} else {
|
|
document.querySelector(".overlay").classList.add("hidden");
|
|
}
|
|
|
|
}
|
|
|
|
// Display status message
|
|
const resultMessage = (msg_txt) => {
|
|
const messageContainer = document.querySelector("#paymentResponse");
|
|
|
|
messageContainer.classList.remove("hidden");
|
|
messageContainer.textContent = msg_txt;
|
|
|
|
setTimeout(function () {
|
|
messageContainer.classList.add("hidden");
|
|
messageContainer.textContent = "";
|
|
}, 5000);
|
|
return;
|
|
}
|
|
|
|
// fin paypal adv
|