220 lines
7.6 KiB
HTML
220 lines
7.6 KiB
HTML
{% load i18n sekizai_tags %}
|
|
|
|
{% addtoblock "js" %}
|
|
<script type="text/javascript">
|
|
var popup;
|
|
var timer;
|
|
var log = true;
|
|
var dgfip_url = 'https://www.tipi.budget.gouv.fr/tpa/paiement.web';
|
|
var saisie = 'M';
|
|
|
|
// for logging purposes
|
|
if (window.XMLHttpRequest) {
|
|
xmlhttp = new XMLHttpRequest();
|
|
} else {
|
|
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
|
|
}
|
|
|
|
function reinit() {
|
|
document.getElementById('refdet_error').style.display='none';
|
|
document.getElementById('montant_error').style.display='none';
|
|
document.getElementById('mel_error').style.display='none';
|
|
}
|
|
|
|
function checkLen(element,y) {
|
|
if (y.length==element.maxLength) {
|
|
var next=element.tabIndex;
|
|
if (next<document.forms["tipi"].length) {
|
|
document.forms["tipi"].elements[next].focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
function checkpopup() {
|
|
if(popup.closed) {
|
|
document.getElementById('wip').style.display='none';
|
|
document.forms['tipi'].reset();
|
|
clearInterval(timer);
|
|
}
|
|
}
|
|
|
|
function call_tipi() {
|
|
var params = {'refdet': function(id) {
|
|
var idpiece = document.getElementById('idpiece').value.trim();
|
|
var idligne = document.getElementById('idligne').value.trim();
|
|
var idpiece_padding = '';
|
|
var idligne_padding = '';
|
|
var exer = params.exer('exer');
|
|
if (!idpiece || isNaN(idpiece)) {
|
|
document.getElementById('refdet_error').style.display='inline';
|
|
return false;
|
|
}
|
|
|
|
if (!idligne || isNaN(idligne)) {
|
|
document.getElementById('refdet_error').style.display='inline';
|
|
return false;
|
|
}
|
|
|
|
for (var i=0;i<8-idpiece.length;i++)
|
|
idpiece_padding += '0';
|
|
idpiece = idpiece_padding + idpiece;
|
|
|
|
for (var i=0;i<6-idligne.length;i++)
|
|
idligne_padding += '0';
|
|
idligne = idligne_padding + idligne;
|
|
|
|
if (saisie == 'T')
|
|
return "999900000000999999";
|
|
else
|
|
return exer + idpiece + idligne;
|
|
}, 'montant': function(id) {
|
|
var euros = document.getElementById(id + '_euros').value.trim();
|
|
var cents = document.getElementById(id + '_cents').value.trim();
|
|
if (euros && cents) {
|
|
if (isNaN(euros) && isNaN(cents)) {
|
|
document.getElementById(value + '_error').style.display='inline';
|
|
return false;
|
|
}
|
|
return parseInt(euros) * 100 + parseInt(cents);
|
|
}
|
|
document.getElementById(id + '_error').style.display='inline';
|
|
return false;
|
|
}, 'mel': function(id) {
|
|
var mel = document.getElementById(id).value.trim();
|
|
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
if(re.test(mel))
|
|
return mel;
|
|
document.getElementById(id + '_error').style.display='inline';
|
|
return false;
|
|
}, 'exer': function(id) {
|
|
var exer = document.getElementById(id).value.trim();
|
|
if (isNaN(exer)) {
|
|
document.getElementById('refdet_error').style.display='inline';
|
|
return false;
|
|
}
|
|
if (saisie == 'T')
|
|
return "9999";
|
|
else
|
|
return exer;
|
|
}};
|
|
var tipi_url = dgfip_url + '?saisie=' + saisie + '&numcli=' + document.getElementById('numcli').value;
|
|
var log_url = '/?saisie=' + saisie + '&numcli=' + document.getElementById('numcli').value;
|
|
var url_params = '&';
|
|
reinit();
|
|
|
|
for (var field in params) {
|
|
var valid = params[field](field);
|
|
if(!valid) {
|
|
return false;
|
|
} else {
|
|
if (document.getElementById(field + '_error'))
|
|
document.getElementById(field + '_error').style.display='none';
|
|
url_params += field + '=' + valid + '&';
|
|
}
|
|
}
|
|
var url = tipi_url;
|
|
url = tipi_url + url_params;
|
|
log_url = log_url + url_params;
|
|
if (log) {
|
|
xmlhttp.open('GET', log_url, true);
|
|
xmlhttp.send();
|
|
}
|
|
popup = window.open(url, 'tipi', 'height=800, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, directories=no, status=no');
|
|
document.getElementById('wip').style.display='block';
|
|
timer = setInterval(checkpopup, 400);
|
|
return false;
|
|
}
|
|
</script>
|
|
{% endaddtoblock %}
|
|
{% addtoblock "css" %}
|
|
<style>
|
|
#tipi_block {
|
|
position: relative;
|
|
}
|
|
#tipi_block ul {
|
|
padding-left: 1em;
|
|
}
|
|
#tipi_block li {
|
|
list-style-type: none;
|
|
margin-bottom: .3em;
|
|
padding: .2em 0;
|
|
}
|
|
#tipi_block li label {
|
|
float: left;
|
|
width: 11.5em;
|
|
}
|
|
#tipi_block li label:after {
|
|
content: ':';
|
|
margin-left: .5em;
|
|
}
|
|
#tipi_block li input[type=text], #tipi_block li input[type=email] {
|
|
border: 1px solid #bbb;
|
|
}
|
|
#tipi_block .error {
|
|
color: #f00;
|
|
font-size:.8em;
|
|
display: none;
|
|
}
|
|
#tipi_block #wip {
|
|
position: absolute;
|
|
background: #fff;
|
|
opacity: .8;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
{% endaddtoblock %}
|
|
|
|
|
|
<div class="block">
|
|
<h2 style="">Paiement en ligne</h2>
|
|
|
|
<p style=""><em>Vous pouvez payer ici les factures émises par Montpellier Méditerranée Métropole (service Téléalarme, déchets verts,...)</em></p>
|
|
|
|
<p style="">Après avoir rempli les champs du formulaire ci-dessous et cliqué sur le bouton "Payer", vous serez redirigé vers le serveur de paiement sécurisé de la direction générale des finances publiques sur lequel vous pourrez finaliser votre paiement grâce à votre carte bancaire. Vous recevrez ensuite un courriel de confirmation de la transaction.</p>
|
|
<div id="tipi_block">
|
|
<div id="wip">
|
|
<h3>{% trans "Paiement en cours..." %}</h3>
|
|
</div>
|
|
<form name='tipi'>
|
|
<ul>
|
|
<li>
|
|
<label>{% trans "Identifiant collectivité" %}</label>
|
|
<select id="numcli">
|
|
<option value="005955">005955</option>
|
|
<option value="005956">005956</option>
|
|
<option value="005957">005957</option>
|
|
<option value="006483">006483</option>
|
|
<option value="006484">006484</option>
|
|
<option value="006485">006485</option>
|
|
</select>
|
|
</li>
|
|
<li>
|
|
<label>{% trans "Réference titre" %}</label>
|
|
<input type='text' id='exer' maxlength=4 size=4 tabindex="2" onkeyup="checkLen(this, this.value)" /> -
|
|
<input type='text' id='idpiece' maxlength=8 size=7 tabindex="3" onkeyup="checkLen(this, this.value)" /> -
|
|
<input type='text' id='idligne' maxlength=5 size=4 tabindex="4" onkeyup="checkLen(this, this.value)" />
|
|
<span class="error" id="refdet_error">{% trans "numéro invalide" %}</span>
|
|
</li>
|
|
<li>
|
|
<label>{% trans "Montant" %}</label>
|
|
<input type='text' id='montant_euros' size="4" maxlength="4" placeholder="0000" tabindex="5" onkeyup="checkLen(this, this.value)" /> ,
|
|
<input type='text' id='montant_cents' size="2" maxlength="2" placeholder="00" tabindex="6" onkeyup="checkLen(this, this.value)" value="00" /> €
|
|
<span class="error" id="montant_error">{% trans "montant invalide" %}</span>
|
|
</li>
|
|
<li>
|
|
<label>{% trans "Votre courriel" %}</label>
|
|
<input type='email' id='mel' {% if request.user.email %}value="{{ request.user.email }}" {% else %}placeholder="{% trans "nom@domaine.com" %}"{% endif %} />
|
|
<span class="error" id="mel_error">{% trans "courriel invalide" %}</span></li>
|
|
<li>
|
|
<input type='button' value='{% trans "Payer" %}' onclick='call_tipi()'/>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
</div>
|