import React, { useRef, useState, useEffect } from "react"; import Button from '@mui/material/Button'; import { getCookie } from 'react-use-cookie'; import { DataGrid, GridToolbar, frFR } from '@mui/x-data-grid'; import axios from "axios"; import Box from '@mui/material/Box'; import InputLabel from '@mui/material/InputLabel'; import InputAdornment from '@mui/material/InputAdornment'; import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField'; import AccountCircle from '@mui/icons-material/AccountCircle'; import PhoneIcon from '@mui/icons-material/Phone' import EmailIcon from '@mui/icons-material/Email' import HomeIcon from '@mui/icons-material/Home' import { useHistory } from "react-router-dom"; import OrderConfirmation from "./OrderConfirmation"; import { IoAddCircleOutline } from "react-icons/io5"; import MyPaymentMethode from "./PaymentMethode"; import img_visa_mastercard from "./../mysy_img/visa_mastercard.png" import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png"; import img_paypal from "./../mysy_img/paypal.png" import moment from "moment"; import { CardElement, useStripe, useElements, } from '@stripe/react-stripe-js'; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; import { PaymentElement } from '@stripe/react-stripe-js'; const stripePromise = loadStripe('pk_test_51LUUfAAbmaEugrFTI25uZBD3IFjbtaL6jUfRV83diDf7nco8worna4NGKhMHbPP71WCwT5EHFRdDNatxPrJWwgZ300kgH5EO4p'); function CheckOut(props) { const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [menu, setmenu] = useState("default"); const [fields1desabled, setfields1desabled] = useState(true); const [periode, setperiode] = useState("Mensuel"); const [testval, settestval] = useState(); const [gotocheckout, setgotocheckout] = useState("0"); const [currentpack, setcurrentpack] = useState(props.packs); const [periodicity, setperiodicity] = useState(props.periodicity); const [packprice, setpackprice] = useState(props.mypackprice); const [getpackproducts, setgetpackproducts] = useState(); const scrollDiv = useRef(null); const [okcommande, setokcommande] = useState(); const stripe = useStripe(); const elements = useElements(); // recuperation et gestion du token utilisateur const history = useHistory(); const stored_part = getCookie('tokenmysypart'); if (!stored_part || stored_part.length <= 0) { history.push("/PartnerLogin"); } function RecordData() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_account/"; var nom = document.getElementsByName("nom")[0].value; var vat_num = document.getElementsByName("vat_num")[0].value; var telephone = document.getElementsByName("telephone")[0].value; var email = document.getElementsByName("email")[0].value; var adr_street = document.getElementsByName("adr_street")[0].value; var adr_zip = document.getElementsByName("adr_zip")[0].value; var adr_city = document.getElementsByName("adr_city")[0].value; var adr_country = document.getElementsByName("adr_country")[0].value; formData.append('token', stored_part); formData.append('invoice_vat_num', vat_num); formData.append('invoice_nom', nom); formData.append('invoice_adr_street', adr_street); formData.append('invoice_adr_city', adr_city); formData.append('invoice_adr_zip', adr_zip); formData.append('invoice_adr_country', adr_country); formData.append('invoice_email', email); formData.append('invoice_telephone', telephone); fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { console.log('Success:', result['message'], "result['status'] = ", result['status']); setmyApiResponse(result['status']); setResult(result['message']); if (String(result['status']) == String("true")) { settestval(true); desablefield1(); } }) .catch((error) => { console.error('Error:', error); setmyApiResponse("false"); }); }; function desablefield1() { setfields1desabled(true); document.getElementsByName("nom")[0].disabled = true; //document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("telephone")[0].disabled = true; //document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("email")[0].disabled = true; // document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_street")[0].disabled = true; //document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_zip")[0].disabled = true; //document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_city")[0].disabled = true; //document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("adr_country")[0].disabled = true; //document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; document.getElementsByName("vat_num")[0].disabled = true; //document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1"; } const [stripe_account_id, setstripe_account_id] = useState("aaa"); const [stripe_paymentmethod_id, setstripe_paymentmethod_id] = useState(); function getCurrentUserData() { settestval('d'); // ==> Do not delete setaddfacturationinfo_api(""); setaddfacturationinfo_response(""); setokcommande(""); const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/"; formData.append('token', stored_part); axios.post(url, formData).then(res => { if (res.data.status != "False") { //console.log(" In getCurrentUserData res.data.status = " + res.data.status); //console.log(" In getCurrentUserData res.data.message = " + res.data.message); setmyApiResponse("True"); setResult(res.data.message); var mylocaltraining = JSON.parse(res.data.message); if (mylocaltraining) { setstripe_account_id(mylocaltraining.stripe_account_id); setstripe_paymentmethod_id(mylocaltraining.stripe_paymentmethod_id); if (mylocaltraining.invoice_vat_num) { document.getElementsByName("vat_num")[0].value = mylocaltraining.invoice_vat_num; document.getElementsByName("vat_num")[0].disabled = true; document.getElementsByName("vat_num")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_nom) { document.getElementsByName("nom")[0].value = mylocaltraining.invoice_nom; document.getElementsByName("nom")[0].disabled = true; document.getElementsByName("nom")[0].style.backgroundColor = "#ECEFF1"; } if (mylocaltraining.invoice_adr_street) { var tmp_val = mylocaltraining.invoice_adr_street; document.getElementsByName("adr_street")[0].value = mylocaltraining.invoice_adr_street; document.getElementsByName("adr_street")[0].disabled = true; document.getElementsByName("adr_street")[0].style.backgroundColor = "#ECEFF1"; if (tmp_val.trim().length <= 0 && (String(props.packs).toLowerCase() !== String("decouverte"))) { document.getElementsByName("adr_street")[0].style.borderColor = "#FF0000"; setokcommande("ko"); } } else { if (String(props.packs).toLowerCase() !== String("decouverte")) { document.getElementsByName("adr_street")[0].style.backgroundColor = "#FF0000"; setokcommande("ko"); } } if (mylocaltraining.invoice_adr_city) { document.getElementsByName("adr_city")[0].value = mylocaltraining.invoice_adr_city; document.getElementsByName("adr_city")[0].disabled = true; document.getElementsByName("adr_city")[0].style.backgroundColor = "#ECEFF1"; if (mylocaltraining.invoice_adr_city.trim().length <= 0) { document.getElementsByName("adr_city")[0].style.borderColor = "#FF0000"; setokcommande("ko"); } } else { if (String(props.packs).toLowerCase() !== String("decouverte")) { document.getElementsByName("adr_city")[0].style.backgroundColor = "#FF0000"; setokcommande("ko"); } } if (mylocaltraining.invoice_adr_zip) { document.getElementsByName("adr_zip")[0].value = mylocaltraining.invoice_adr_zip; document.getElementsByName("adr_zip")[0].disabled = true; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#ECEFF1"; if (mylocaltraining.invoice_adr_zip.trim().length <= 0) { document.getElementsByName("adr_zip")[0].style.borderColor = "#FF0000"; setokcommande("ko"); } } else { if (String(props.packs).toLowerCase() !== String("decouverte")) { document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FF0000"; setokcommande("ko"); } } if (mylocaltraining.invoice_adr_country) { document.getElementsByName("adr_country")[0].value = mylocaltraining.invoice_adr_country; document.getElementsByName("adr_country")[0].disabled = true; document.getElementsByName("adr_country")[0].style.backgroundColor = "#ECEFF1"; if (mylocaltraining.invoice_adr_country.trim().length <= 0) { document.getElementsByName("adr_country")[0].style.borderColor = "#FF0000"; setokcommande("ko"); } } else { if (String(props.packs).toLowerCase() !== String("decouverte")) { document.getElementsByName("adr_country")[0].style.backgroundColor = "#FF0000"; setokcommande("ko"); } } if (mylocaltraining.invoice_email) { document.getElementsByName("email")[0].value = mylocaltraining.invoice_email; document.getElementsByName("email")[0].disabled = true; document.getElementsByName("email")[0].style.backgroundColor = "#ECEFF1"; if (mylocaltraining.invoice_email.trim().length <= 0) { document.getElementsByName("email")[0].style.borderColor = "#FF0000"; setokcommande("ko"); } } else { if (String(props.packs).toLowerCase() !== String("decouverte")) { document.getElementsByName("email")[0].style.backgroundColor = "#FF0000"; setokcommande("ko"); } } if (mylocaltraining.invoice_telephone) { document.getElementsByName("telephone")[0].value = mylocaltraining.invoice_telephone; document.getElementsByName("telephone")[0].disabled = true; document.getElementsByName("telephone")[0].style.backgroundColor = "#ECEFF1"; } desablefield1(); } } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("False"); //setmyApimyApiMessage("") } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setmyApiResponse("False"); //setmyApimyApiMessage("") }) } function enablefieds1() { setaddfacturationinfo_api(""); setaddfacturationinfo_response(""); setokcommande("ko"); setfields1desabled(false); document.getElementsByName("nom")[0].disabled = false; document.getElementsByName("nom")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("telephone")[0].disabled = false; document.getElementsByName("telephone")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("email")[0].disabled = false; document.getElementsByName("email")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_street")[0].disabled = false; document.getElementsByName("adr_street")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_zip")[0].disabled = false; document.getElementsByName("adr_zip")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_city")[0].disabled = false; document.getElementsByName("adr_city")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("adr_country")[0].disabled = false; document.getElementsByName("adr_country")[0].style.backgroundColor = "#FFFFFF"; document.getElementsByName("vat_num")[0].disabled = false; document.getElementsByName("vat_num")[0].style.backgroundColor = "#FFFFFF"; } const [addpayementcheckout, setaddpayementcheckout] = useState(); function menu_paymentmethode() { setaddpayementcheckout("addpaymentmethode"); //alert("kk"); } function get_production_service_by_pack() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/get_product_service/"; formData.append('token', stored_part); formData.append('pack_name', props.packs); axios.post(url, formData).then(res => { if (res.data.status != "False") { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("True"); setResult(res.data.message); setgetpackproducts(res.data.message); } else { //console.log(" In test res.data.status = " + res.data.status); //console.log(" In test res.data.message = " + res.data.message); setmyApiResponse("False"); setgetpackproducts(""); } }).catch((error) => { console.warn('Not good man :( mysearchtext = '); setmyApiResponse("False"); setgetpackproducts(""); //setmyApimyApiMessage("") }) } const [paymentmode, setpaymentmode] = useState([]); const [paymentmodeapi, setpaymentmodeapi] = useState([]); function GetPayementMode(event) { var form = new FormData(); //form.append("token","K3cw63eKokKSbV4spjQ48SUNnfy80yrXfA"); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_payement_mode/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { console.log('### GetPayementMode : Success:', data['message'], "data['status'] = ", data['status']); if (String(data['status']) === String("False") || !data['message'][0] || Object.keys(data['message'][0]).length === 0 ) { //console.log("erreur rrrr:" + data['status']) setpaymentmodeapi("False"); setokcommande("ko"); } else { setpaymentmodeapi("True"); setpaymentmode(data['message']); initpayement_front(); if (scrollDiv.current) { scrollDiv.current.scrollIntoView({ behavior: "smooth" }); } } }).catch((error) => { console.error('Error:', error); setpaymentmodeapi("false"); setokcommande("ko"); }); } useEffect(() => { getCurrentUserData(); get_production_service_by_pack(); GetPayementMode(); window.scrollTo(0, 0); }, []); const [orderid, setorderid] = useState(); const [apiorderid, setapiorderid] = useState(); const [apiorderidmessage, setapiorderidmessage] = useState(); function Ordervalidation() { //alert(" confirmation ok"); if (String(nb_formations) === "0") { alert(" Vous devez choisir un nombre de formation "); document.getElementById('div_nb_formation').style.color = "red"; document.getElementById('div_ttc').style.color = "red"; return; } var form = new FormData(); const stored_cookie = getCookie('tokenmysypart'); form.append("token", stored_cookie); form.append("periodicite", periodicity); //form.append("prix_ttc", "1"); //form.append("prix_ht", "1"); form.append("discount", "0"); form.append("pack", currentpack); /* /!\ : Important, il faut preciser le nombre d'article envoyé avec ceci : form.append("nb_product", nb_article); */ form.append("nb_product", "1"); if (String(props.packs).toLowerCase() === String("decouverte")) { form.append("end_date", moment(moment()).add(15, 'days').format("DD/MM/YYYY")); } var prod_service = "" getpackproducts.map((service) => ( prod_service = prod_service + " -- " + JSON.parse(service).designation )) //alert("prod_ser = " + prod_service); form.append("0", JSON.stringify({ "code": currentpack, "prix": packprice, "comment": "nc", "qty": nb_formations, "pack_products": prod_service })); //form.append("1", JSON.stringify({ "code": "art_supp", "prix": "120", "comment": "nc" })); var myurl = process.env.REACT_APP_API_URL + "myclass/api/createOrder/"; fetch(myurl, { method: 'POST', body: form, }) .then((data) => data.json()) .then((data) => { console.log('Success:', data['message'], "data['status'] = ", data['status'], "ORDER ID = ", data['order_id']); if (String(data['status']) === String("true")) { setorderid(data['order_id']); setapiorderid("1"); setmenu("ordervalide"); setpaymentmodeapi(""); setpaymentmode(""); setgotocheckout(""); if (parseFloat(packprice) > 0) finalize_abonnement(); } else { setapiorderid("0"); setapiorderidmessage(data['message']); } }).catch((error) => { console.error('Error:', error); setapiorderid("0"); }); } const [paymentadded, setpaymentadded] = useState(""); const [menumodepayement, setmenumodepayement] = useState(""); function menu_cb() { setmenumodepayement("cb"); } function menu_sepa() { setmenumodepayement("sepa"); } const [invoiceAdressOK, setinvoiceAdressOK] = useState(); function checkInvoicingField() { var nom = document.getElementsByName("nom")[0].value; var vat_num = document.getElementsByName("vat_num")[0].value; var telephone = document.getElementsByName("telephone")[0].value; var email = document.getElementsByName("email")[0].value; var adr_street = document.getElementsByName("adr_street")[0].value; var adr_zip = document.getElementsByName("adr_zip")[0].value; var adr_city = document.getElementsByName("adr_city")[0].value; var adr_country = document.getElementsByName("adr_country")[0].value; if (nom.trim().length <= 0) { alert("Information de facturation incomplete : Le nom "); setinvoiceAdressOK(false); return; } if (email.trim().length <= 0) { alert("Information de facturation incomplete : L'email "); setinvoiceAdressOK(false); return; } if (adr_street.trim().length <= 0) { alert("Information de facturation incomplete : L'adresse "); setinvoiceAdressOK(false); return; } if (adr_zip.trim().length <= 0) { alert("Information de facturation incomplete : Le code postal "); setinvoiceAdressOK(false); return; } if (adr_city.trim().length <= 0) { alert("Information de facturation incomplete : La ville "); setinvoiceAdressOK(false); return; } if (adr_country.trim().length <= 0) { alert("Information de facturation incomplete : Le pays "); setinvoiceAdressOK(false); return; } } const [addfacturationinfo_api, setaddfacturationinfo_api] = useState(""); const [addfacturationinfo_response, setaddfacturationinfo_response] = useState(""); function RecordData_infoFacturation() { const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/update_partner_account/"; var nom = document.getElementsByName("nom")[0].value; var vat_num = document.getElementsByName("vat_num")[0].value; var telephone = document.getElementsByName("telephone")[0].value; var email = document.getElementsByName("email")[0].value; var adr_street = document.getElementsByName("adr_street")[0].value; var adr_zip = document.getElementsByName("adr_zip")[0].value; var adr_city = document.getElementsByName("adr_city")[0].value; var adr_country = document.getElementsByName("adr_country")[0].value; formData.append('token', stored_part); formData.append('invoice_vat_num', vat_num); formData.append('invoice_nom', nom); formData.append('invoice_adr_street', adr_street); formData.append('invoice_adr_city', adr_city); formData.append('invoice_adr_zip', adr_zip); formData.append('invoice_adr_country', adr_country); formData.append('invoice_email', email); formData.append('invoice_telephone', telephone); if (nom.trim().length <= 0) { alert("Information de facturation incomplete : Le nom "); setinvoiceAdressOK(false); return; } if (email.trim().length <= 0) { alert("Information de facturation incomplete : L'email "); setinvoiceAdressOK(false); return; } if (adr_street.trim().length <= 0) { alert("Information de facturation incomplete : L'adresse "); setinvoiceAdressOK(false); return; } if (adr_zip.trim().length <= 0) { alert("Information de facturation incomplete : Le code postal "); setinvoiceAdressOK(false); return; } if (adr_city.trim().length <= 0) { alert("Information de facturation incomplete : La ville "); setinvoiceAdressOK(false); return; } if (adr_country.trim().length <= 0) { alert("Information de facturation incomplete : Le pays "); setinvoiceAdressOK(false); return; } fetch( url, { method: 'POST', body: formData, } ) .then((response) => response.json()) .then((result) => { console.log('Success:', result['message'], "result['status'] = ", result['status']); setaddfacturationinfo_api(result['status']); if (String(result['status']) === String("true")) { setaddfacturationinfo_response(result['message']); setfields1desabled(true); setokcommande(""); } else { setaddfacturationinfo_response(""); setfields1desabled(false); } }) .catch((error) => { console.error('Error:', error); setaddfacturationinfo_api("false"); setaddfacturationinfo_response(""); }); }; // Gestion payement Stripe const [price_ch, setprice_ch] = useState("price_1LpyndAbmaEugrFTKZAAkm72"); const [customer_ch, setcustomer_ch] = useState(); const [subscriptionData, setSubscriptionData] = useState(null); const [payement_id, setpayement_id] = useState(); const [clientSecret_id, setclientSecret_id] = useState(); const [paymentIntent, setPaymentIntent] = useState(); function initpayement_front() { //alert("debut initpayement_front price_ch = " + price_ch); createSubscription(price_ch); } const createSubscription = async (priceId) => { var cust_strip_id = ""; //---- const formData_tpm = new FormData(); const url_tmp = process.env.REACT_APP_API_URL + "myclass/api/get_partner_account/"; formData_tpm.append('token', stored_part); fetch(url_tmp, { method: 'POST', body: formData_tpm, }).then((data) => data.json()) .then((data) => { //console.log(" GRRRRRRRRRR data.message = " + data.message); //console.log(" statusstatus data.status = " + data.status); if (String(data['status']) === String("true")) { var mylocaltraining = JSON.parse(data.message); if (mylocaltraining) { cust_strip_id = mylocaltraining.stripe_account_id; var myurl = process.env.REACT_APP_API_URL + "myclass/api/create-subscription/"; var form = new FormData(); form.append("customerid", cust_strip_id); form.append("priceid", price_ch); fetch(myurl, { method: 'POST', body: form, }).then((data) => data.json()) .then((data) => { //console.log(' #### subscription_id:', data['subscription_id'], ' ### payment_intent_client_secret:', data['payment_intent_client_secret'], "data['Status'] = ", data['status'],); if (String(data['status']) === String("true")) { //console.log(" subscriptionId = " + subscriptionId + " -- et clientSecret = " + clientSecret); setclientSecret_id(data['payment_intent_client_secret']); setpayement_id(data['subscription_id']); //setSubscriptionData(data['subscription_id'], data['payment_intent_client_secret'] ); //alert(" subscriptionId = " + data['subscription_id'] + " -- et clientSecret = " + data['payment_intent_client_secret']); } }).catch((error) => { console.log('Error:', error.message); }); } } }).catch((error) => { console.log('Error:', error.message); }); //-- }; const [payement_ok, setpayement_ok] = useState(); const [amount_captured, setamount_captured] = useState(); function finalize_abonnement() { //alert("Finalization de l'abonnement "); // Initialize an instance of stripe. const handleSubmit_ch = async (e) => { // Get a reference to a mounted CardElement. Elements knows how // to find your CardElement because there can only ever be one of // each type of element. const cardElement = elements.getElement(CardElement); // Use card Element to tokenize payment details //alert(' clientSecret_id = ' + clientSecret_id) let { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret_id, { payment_method: { card: cardElement, billing_details: { name: "cherif test MYSY", } } }); if (error) { // show error and collect new card details. alert(error.message); console.log(error.message); return; } else { //alert(" OKK paymentIntent = " + paymentIntent); console.log(paymentIntent); setPaymentIntent(paymentIntent); //alert(" debut conformation cmd "); Ordervalidation(); } } const handleSubmit_MySy_Back = async (e) => { var myurl = process.env.REACT_APP_API_URL + "myclass/api/confirm_payment/"; var form = new FormData(); form.append("stripe_payment_id", payement_id); form.append('token', stored_part); fetch(myurl, { method: 'POST', body: form, }).then((data) => data.json()) .then((data) => { //console.log(' #### status:', data['status'], ' -- payement_id:', data['payement_id'], " -- amount_captured = ", data['amount_captured'],); if (String(data['status']) === String("true")) { setpayement_ok("1"); setamount_captured(data['amount_captured']); setPaymentIntent("1"); } else { setpayement_ok("0"); } }).catch((error) => { console.log('Error:', error.message); setpayement_ok("0"); }); } //handleSubmit_ch(); handleSubmit_MySy_Back(); } // Fing gestion stripe const [nb_formations, setnb_formations] = useState("0"); const change_nb_formations = event => { let valeur = event.target.value; if (String(props.packs).toLowerCase() === String("decouverte")) { setnb_formations("1"); } else { setnb_formations(event.target.value); } document.getElementById('div_nb_formation').style.color = "#104277"; document.getElementById('div_ttc').style.color = "#104277"; } return (
{String(apiorderid) === String("0") &&
Impossible de créer la commande.
{apiorderidmessage}
} {String(menu) === String("default") &&

Récapitulatif de votre commande

Produits et Services
Vous avez choisi un pack : {String(props.packs).toLocaleUpperCase()} : {getpackproducts && String(getpackproducts).length > 0 && getpackproducts.map((service) => (
    {JSON.parse(service).designation}
))}
Detail prix
Periodicité :
{periodicity}
Prix unitaire :
{packprice} €
Nombre de formations :
{(String(props.packs).toLowerCase() !== String("decouverte")) &&
} {(String(props.packs).toLowerCase() === String("decouverte")) &&
1
}
TVA :
{packprice * nb_formations * 0.2} €
Discount :
0 €
Total TTC :
{packprice * nb_formations * 1.2} €
 
{String(props.packs).toLowerCase() === String("decouverte") &&
* Offre valable jusqu'au
{moment(moment()).add(15, 'days').format("DD/MM/YYYY")}
 
}

Detail de Facturation
{String(addfacturationinfo_api) === String("true") && String(addfacturationinfo_response).length > 3 &&
La modification ete prise en compte
} {String(addfacturationinfo_api) === String("false") || String(addfacturationinfo_response) === String("0") &&
Impossible de modifier les informations de facturation
} :not(style)': { m: 1 }, width: '100%', }}> ), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" />
), }} variant="standard" /> ), }} variant="standard" />
), }} variant="standard" />
{fields1desabled == false &&
} {fields1desabled == true && }
Mode de Paiement
{String(paymentmodeapi) === String("True") &&
{paymentmode && String(paymentmode).length > 0 && paymentmode.map((payment) => (
      Type carte : {(JSON.parse(payment).brand)}
      Nom carte : {(JSON.parse(payment).nom_carte)}
      Num carte : XXXXXX{(JSON.parse(payment).last4)}
      Expiration : {(JSON.parse(payment).exp_month)}/{(JSON.parse(payment).exp_year)}
      Date Creation : {(JSON.parse(payment).createdatetime)}
     
))}
{/*payement_id &&

Subscribe

{clientSecret_id &&
setpaymentmode = {paymentmode}
}
les info de payement stocké sont : {paymentmode}

Try the successful test card: 4242424242424242.

Try the test card that requires SCA: 4000002500003155.

Use any future expiry date, CVC,5 digit postal code


{paymentIntent &&

PAYEMENT OK REDIRECTION VERS LA PAGE OK

}
*/} {paymentmode && String(paymentmode).length > 0 && paymentmode.map((payment) => (
    {String(JSON.parse(payment).type) === String("sepa") &&
    Prelevement SEPA
  • BIC : {JSON.parse(payment).bic}
  • IBAN : {(JSON.parse(payment).iban).substring(0, 10)}XXX
  • Titulaire du compte : {JSON.parse(payment).nom_compte}
  • Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
  • } {String(JSON.parse(payment).type) === String("cb") &&
    Prelevement Carte Bancaire
  • Num carte : {(JSON.parse(payment).num_carte).substring(0, 4)}XXXXXXXXX
  • Date expiration : {JSON.parse(payment).date_exp_carte}
  • Titulaire de la carte : {JSON.parse(payment).nom_carte}
  • Dernière mise à jour : {(JSON.parse(payment).date_update).substring(0, 10)}
  • }
))} {!paymentmode || String(paymentmode).length <= 0 && String(props.packs).toLocaleLowerCase() !== "decouverte" &&
Vous n'avez pas de mode de Paiement enregistré

Ajouter un mode de paiement
{String(addpayementcheckout) === String("addpaymentmethode") &&
{String(paymentadded) === String("1") &&
Le mode de Paiement a été correctement ajouté
} {String(paymentadded) === String("0") &&
{result}
}
Prélèvement par carte bancaire
{String(menumodepayement) === String("cb") &&
Carte Bancaire
 
:not(style)': { m: 1 }, width: '100%', }}>
}
 

Prélèvement par virement SEPA
{String(menumodepayement) === String("sepa") &&
:not(style)': { m: 1 }, width: '100%', }}>
}
 

}
} {!paymentmode || String(paymentmode).length <= 0 && String(props.packs).toLocaleLowerCase() === "decouverte" &&
Vous n'avez pas de mode de Paiement enregistré

Ajouter un mode de paiement
{String(addpayementcheckout) === String("addpaymentmethode") &&
{String(paymentadded) === String("1") &&
Le mode de Paiement a été correctement ajouté
} {String(paymentadded) === String("0") &&
{result}
}
Prélèvement par carte bancaire
{String(menumodepayement) === String("cb") &&
Carte Bancaire
 
:not(style)': { m: 1 }, width: '100%', }}>
}
 

Prélèvement par virement SEPA
{String(menumodepayement) === String("sepa") &&
:not(style)': { m: 1 }, width: '100%', }}>
}
 

}
}
} {String(paymentmodeapi) === String("False") && (String(props.packs).toLowerCase() !== String("decouverte")) &&
Impossible de recuperer votre mode de payment
} {(String(props.packs).toLowerCase() === String("decouverte")) &&
Abonnement decouverte : Gratuit 15 jours
}
{(String(okcommande) !== String("ko") || (String(props.packs).toLowerCase() === String("decouverte"))) && } {String(okcommande) === String("ko") && (String(props.packs).toLowerCase() !== String("decouverte")) && }
} {String(menu) === String("ordervalide") && String(apiorderid) === String("1") &&
}
); } export default CheckOut;