aem_monespace/monaem/templates/reglement/reglement.pt

<metal:block use-macro="main_template">
<div metal:fill-slot="content">

    <div><img src="${request.static_url('monaem:static/img/CA-e-transaction.png')}" class="logo Crédit Agricole" alt="logo Crédit Agricole" /></div>
    <h3>Montant à payer : <span class="text-danger">${layout.to_euro(sum_to_pay)}</span></h3>

    <div class="row">
        <div id="step1"  class="col-md-6">
            <form id="calculate-reglement-form" action="${url}" method="post">
                <h4>1. Choisissez le mode de paiement&nbsp;:</h4>
                <!-- total à payer <= 300 euros ?   -->
                <div class="form-group" tal:condition="sum_to_pay < 300">
                    <div class="radio">
                        <label>
                            <input type="radio" value="1" name="nfois" checked ="checked">Comptant<br />
                            <input type="radio" value="3" name="nfois" disabled>En 3 fois sans frais (à partir de 300&nbsp;€)
                        </label>
                    </div>
                </div>
                <!-- total à payer >= 300 euros ?   -->
                <div class="form-group" tal:condition="sum_to_pay >= 300">
                    <div class="radio">
                        <label>
                        <span tal:condition="nfois == '1'"> 
                            <input type="radio" value="1" name="nfois" checked="checked"> Comptant <br />
                        </span>
                        <span tal:condition="nfois != '1'"> 
                            <input type="radio" value="1" name="nfois"> Comptant <br />
                        </span>
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                        <span tal:condition="nfois == '3'"> 
                            <input type="radio" value="1" name="nfois" checked="checked"> En 3 fois sans frais (à partir de 300&nbsp;€) <br />
                        </span>
                        <span tal:condition="nfois != '3'"> 
                            <input type="radio" value="3" name="nfois"> En 3 fois sans frais (à partir de 300&nbsp;€) <br />
                        </span>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <button class="btn btn-primary" type="submit" name="form.submitted">
                        <span class="glyphicon glyphicon-refresh"></span>&nbsp;Calculer
                    </button>
                    <img src="${request.static_url('monaem:static/img/CB.gif')}" alt="CB logo" title="CB logo" />
                </div>
            </form>
        </div><!-- step1 -->
    </div>  <!-- row 1 -->

    <div class="row">
        <div class="col-md-6" tal:condition="pay_ok">
            <div tal:condition="nfois == '1'">
                <p>Vous avez choisi le mode de <strong>paiement comptant</strong>.</p>
            </div>

            <div tal:condition="nfois == '3'">
                <p>Vous paierez cette facture <strong>en 3 fois sans frais</strong>.</p>

                <table class="table table-striped table-condensed" tal:condition="schedule_dates and schedule_sums">
                    <tr>
                        <th>Echéances</th>
                        <th>Montant prélevé</th>
                    </tr>
                    <tr>
                        <td>${schedule_dates[0]}</td>
                        <td>${layout.to_euro(schedule_sums[0]/100)}</td>
                    </tr>
                    <tr>
                        <td>${schedule_dates[1]}</td>
                        <td>${layout.to_euro(schedule_sums[1]/100)}</td>
                    </tr>
                    <tr>
                        <td>${schedule_dates[2]}</td>
                        <td>${layout.to_euro(schedule_sums[1]/100)}</td>
                    </tr>
                </table>
            </div>
        </div>   <!-- pay_ok -->
    </div>   <!-- row 2 -->

    <div class="row">
        <div id="step2" class="col-md-8" tal:condition="pbx_total > 0">
            <h4>2. Réglez&nbsp;:</h4>
            <p class="text-danger" tal:condition="nfois == '3'">
                Attention, vous ne pouvez pas régler une facture en 3 fois avec une <b>e-carte bleue à usage unique</b>&nbsp;!
            </p>

            <!-- appel systeme PAYBOX  -->
            <form action="${url_paybox}" method="POST">
                <input type="hidden" name="PBX_SITE" value="${pbx_site}" />
                <input type="hidden" name="PBX_RANG" value="${pbx_rang}" />
                <input type="hidden" name="PBX_IDENTIFIANT" value="${pbx_identifiant}" />

                <input type="hidden" name="PBX_TOTAL" value="${pbx_total}" />
                <input type="hidden" name="PBX_DEVISE" value="${pbx_devise}" />
                <input type="hidden" name="PBX_CMD" value="${pbx_cmd}" />
                <input type="hidden" name="PBX_PORTEUR" value="${pbx_porteur}" />
                <input type="hidden" name="PBX_RETOUR" value="${pbx_retour}" />
                <input type="hidden" name="PBX_DATEVALMAX" value="${pbx_datevalmax}" />
                <input type="hidden" name="PBX_REPONDRE_A" value="${pbx_repondre_a}" />
                <input type="hidden" name="PBX_HASH" value="${pbx_hash}" /> 
                <input type="hidden" name="PBX_TIME" value="${pbx_time}" /> 
                <input type="hidden" name="PBX_HMAC" value="${pbx_hmac}" />

                <div class="form-group">
                    <button  class="btn btn-primary" type="submit" id="pay">
                        <span class="glyphicon glyphicon-ok"></span>&nbsp;Procéder au paiement sécurisé
                    </button>
                </div>
            </form>
            
        </div><!-- step2 -->
    </div>  <!-- row 3-->
    <br />
    <br />

<script>
$(document).ready(function () {

    $(".select_bill").change(
        function () {
            if ($(".select_bill:checked").length) {
                $('button#calculate').prop('disabled', false);
            } else {
                $('button#calculate').prop('disabled', true);
            }
    });

});
</script>

<!--  intégrer les macros Google analytics  -->
<div tal:condition="ref == 'PAP'">
    <div metal:use-macro="snippets.macros['pap_stats']"></div>
</div>
<div tal:condition="ref == 'PEM'">
    <div metal:use-macro="snippets.macros['pem_stats']"></div>
</div>
<div tal:condition="ref == 'PAS'">
    <div metal:use-macro="snippets.macros['pas_stats']"></div>
</div>
<div tal:condition="ref == 'PRS'">
    <div metal:use-macro="snippets.macros['prs_stats']"></div>
</div>
<div tal:condition="ref == 'B96'">
    <div metal:use-macro="snippets.macros['b96_stats']"></div>
</div>
</div>
</metal:block>