import React, { useState, useEffect } from "react"; import Button from '@mui/material/Button'; import img_visa_mastercard from "./../mysy_img/visa_mastercard.png" import img_paypal from "./../mysy_img/paypal.png" import axios from "axios"; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import { useHistory } from "react-router-dom"; import { getCookie } from 'react-use-cookie'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import OutlinedInput from '@mui/material/OutlinedInput'; import moment from 'moment' import img_logo_stripe from "./../mysy_img/logo-stripe-secure.png"; function PaymentMethode(props) { const [menu, setmenu] = useState("cb"); const [myApiResponse, setmyApiResponse] = useState(""); const [result, setResult] = useState(""); const [paymentadded, setpaymentadded] = useState(""); const [nom_carte, setnom_carte] = useState(""); const [num_carte, setnum_carte] = useState(""); const [date_exp, setdate_exp] = useState(""); const [cvv, setcvv] = useState(""); function menu_sepa() { setmenu("sepa"); } function menu_cb() { setmenu("cb"); } function handleChange1(prop) { return (event) => { setValuesPass1({ ...valuesPass1, [prop]: event.target.value }); }; } function handleChange2(prop) { return (event) => { setValuesPass2({ ...valuesPass2, [prop]: event.target.value }); }; } const [currentpawdvisible, setcurrentpawdvisible] = useState(false); const [currentpawdvisible2, setcurrentpawdvisible2] = useState(false); const handleClickShowPassword_current_pwd = () => { var filtre2_value = document.getElementsByName("pwd")[0].value; if (currentpawdvisible == false) { document.getElementsByName("pwd")[0].type = "text"; setcurrentpawdvisible(true); } else if (currentpawdvisible == true) { document.getElementsByName("pwd")[0].type = "password"; setcurrentpawdvisible(false); } }; const handleClickShowPassword_current_pwd2 = () => { var filtre2_value = document.getElementsByName("secret")[0].value; if (currentpawdvisible2 == false) { document.getElementsByName("secret")[0].type = "text"; setcurrentpawdvisible2(true); } else if (currentpawdvisible2 == true) { document.getElementsByName("secret")[0].type = "password"; setcurrentpawdvisible2(false); } }; const [values, setValues] = React.useState({ password: '', showPassword: false, }); const [valuesPass1, setValuesPass1] = React.useState({ password1: '', showPassword1: false, }); const [valuesPass2, setValuesPass2] = React.useState({ password2: '', showPassword2: false, }); // 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() { if (!document.getElementsByName("cgp")[0].checked) { alert(" Vous devez avoir lu les conditions de paiement. Merci."); return; } const formData = new FormData(); const url = process.env.REACT_APP_API_URL + "myclass/api/add_payement_mode/"; var pwd = document.getElementsByName("pwd")[0].value; var secret = document.getElementsByName("secret")[0].value; formData.append('token', stored_part); formData.append('type', String(menu)); formData.append('pwd', pwd); formData.append('secret', secret); if (String(menu) === String("cb")) { var nom_carte = document.getElementsByName("nom_carte")[0].value; var num_carte = document.getElementsByName("num_carte")[0].value; var date_exp_carte = document.getElementsByName("date_exp")[0].value; var cvv_carte = document.getElementsByName("cvv")[0].value; formData.append('nom_carte', nom_carte); formData.append('num_carte', num_carte); formData.append('date_exp_carte', date_exp_carte); formData.append('cvv_carte', cvv_carte); } else if (String(menu) === String("sepa")) { var nom_compte = document.getElementsByName("nom_compte")[0].value; var iban = document.getElementsByName("num_iban")[0].value; var bic = document.getElementsByName("bic")[0].value; formData.append('nom_compte', nom_compte); formData.append('iban', iban); formData.append('bic', bic); } 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")) { setpaymentadded("1"); window.scrollTo({ top: 0, behavior: "smooth", }); } else if (String(result['status']) === String("Err_Connexion")) { alert('Erreur: ' + result['message']); history.push("/Connexion"); } else { setpaymentadded("0"); } }) .catch((error) => { console.error('Error:', error); setmyApiResponse("false"); setpaymentadded("0"); }); }; const [mynote, setmynote] = useState(""); function CheckCardNumber(e) { const val = e.target.value; if (!isNaN(val) && String(val).length <= 16) { setmynote(val); } else { document.getElementById("num_carte").value = mynote; } } const [dateexp, setdateexp] = useState(""); function Onleave_expdate_exp(e) { var val = document.getElementById("date_exp").value if (!moment(val, 'MM/YY', true).isValid()) { setdateexp(""); alert("La date " + val + " n'est pas valide") } return; } function Checkdate_expdate_exp(e) { const val = e.target.value; if (String(val).length < 6) { setdateexp(val); } if (String(val).length == 6) { const regex = /^\d{2}\/\d{2}$/; const found = dateexp.match(regex); if (!found) { alert(" pas bon "); } } if (String(val).length > 6) { document.getElementById("date_exp").value = dateexp; } } useEffect(() => { //console.log(" props.mypaymentmode = " + props.mypaymentmode); var num_carte = "XXXX" + JSON.parse(props.mypaymentmode).last4; setnum_carte(num_carte); var exp_data = JSON.parse(props.mypaymentmode).exp_month + "/" + JSON.parse(props.mypaymentmode).exp_year; setdate_exp(exp_data); window.scrollTo({ top: 0, behavior: "smooth", }); }, []); return (
{String(paymentadded) === String("1") &&
Le mode de Paiement a été correctement ajouté
} {String(paymentadded) === String("0") &&
{result}
}
Prélèvement par carte bancaire
{String(menu) === String("cb") &&
Carte Bancaire
 
  :not(style)': { m: 1 }, width: '100%', }}>
}
 

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

Pour confirmer le changement, veuillez entrer votre mot de passe et votre clé sécrete
  :not(style)': { m: 1 }, width: '100%', }}> Mot de passe {currentpawdvisible ? : } } label="Mot de passe" inputProps={{ autoComplete: 'new-password', }} /> Clé secrete {currentpawdvisible2 ? : } } label="Clé secrete" />
Conditions de paiement
Veuillez vérifier la liste ci-dessous pour vous assurer que votre prélèvement automatique s'effectue avec succès.
  • Vous devez activer le prélèvement automatique auprès de votre banque.
  • Vous devez avoir des fonds suffisants sur votre compte au moment de chaque prélèvement.
  • Vous ne devez pas contester le prélèvement de la part de Zervant ou Stripe (notre service de paiement partenaire) auprès de votre banque.
  • Si votre prélèvement est contesté, pour toute raison, nous vous enverrons immédiatement une nouvelle facture, incluant les frais de contestation qui nous sont facturés par la banque (en général 8€ par contestation). Nous vous demanderons également de confirmer votre moyen de paiement dans les 7 jours.
  • Dans l'absence de confirmation de moyen de paiement après la première contestation, ou qu'un autre moyen est contesté, nous enlèverons l'option de prélèvement automatique pour votre compte, et vous demanderons d'utiliser une carte de paiement.
); } export default PaymentMethode;