flectra/addons/payment/views/payment_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<flectra>
    <template id="assets_backend" name="Payment Assets Backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/payment/static/src/less/payment_acquirer.less"/>
        </xpath>
    </template>

    <template id="payment_tokens_list" name="Payment Tokens list">
        <!--
        Variables description:
            - 'submit_txt' the text displayed inside the submit button
            - 'submit_class' the css classes to style the submit button
            - 'icon_class' font awesome class (e.g. 'fa-trash', 'fa-lock')
            - 'form_action' the URI to the page that will handle the form values given for server2server
            - 'pms' the tokens
            - 'checked_pm_id' the payment token that should be checked (for radio buttons)
            - 'mode' can take two values, either 'payment' or 'manage'. 'manage' displays the add a new card and delete buttons. 'payment'
                display a form that is used to pay and send the information to the form action url.
            - 's2s_acquirers' the list of the server2server acquirers
            - 'form_acquirers' the list of the payment acquirers to pay with forms
            - 'verify_validity' if we need to verify if the payment method is valid when adding a new one
            - 'prepare_tx_url' the url of the route which will handle the creation of a transaction for a form base payment (handles if the transaction is form or form_save)
        -->
        <form t-if="s2s_acquirers or pms or form_acquirers" method="post" class="o_payment_form"
                t-att-action="form_action if form_action else '#'"
                t-att-data-success-url="success_url or ''"
                t-att-data-error-url="error_url or ''"
                t-att-data-access-token="access_token or ''"
                t-att-data-partner-id="partner_id"
                t-att-data-callback-method="callback_method or ''">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
            <input type="hidden" t-if="verify_validity==True" name="verify_validity" value="1"/>
            <input type="hidden" t-if="prepare_tx_url" name="prepare_tx_url" t-att-value="prepare_tx_url"/>
            <!-- s2s form submission -->
            <input type="hidden" t-if="access_token" name="access_token" t-att-value="access_token"/>
            <input type="hidden" t-if="success_url" name="success_url" t-att-value="success_url"/>
            <input type="hidden" t-if="error_url" name="error_url" t-att-value="error_url"/>
            <input type="hidden" t-if="callback_method" name="callback_method" t-att-value="callback_method"/>

            <div class="panel panel-default">
                <t t-set="acquirers_count" t-value="(len(s2s_acquirers) if s2s_acquirers else 0) + (len(form_acquirers) if form_acquirers else 0)"/>
                <t t-set="pms_count" t-value="len(pms) if pms else 0"/>
                <t t-foreach="s2s_acquirers" t-as="acq">
                    <div class="panel-body">
                        <label>
                            <t t-if="mode == 'manage'">
                                <input type="radio" t-att-data-acquirer-id="acq.id"
                                    t-att-data-s2s-payment="true"
                                    t-att-data-provider="acq.provider"
                                    name="pm_id" t-attf-value="new_{{acq.id}}"
                                    t-att-class="'hidden' if acquirers_count==1 else ''"
                                    t-att-checked="acquirers_count == 1"/>
                            </t>
                            <t t-else="">
                                <input type="radio" t-att-data-acquirer-id="acq.id"
                                    t-att-data-s2s-payment="true"
                                    t-att-data-provider="acq.provider"
                                    name="pm_id" t-attf-value="new_{{acq.id}}"
                                    t-att-class="'hidden' if (acquirers_count==1 and pms_count==0) else ''"
                                    t-att-checked="acquirers_count==1 and pms_count==0"/>
                            </t>
                            <span class="payment_option_name" t-esc="acq.name"/>
                        </label>
                        <ul class="pull-right list-inline payment_icon_list">
                            <t t-set="i" t-value="0"/>
                            <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
                                <li t-att-class="'' if (i &lt; 3) else 'hidden'">
                                    <span t-field="pm_icon.image_payment_form"
                                        t-options='{"widget": "image", "alt-field": "name"}' />
                                </li>
                                <li t-if="i==3" style="display:block;">
                                    <span class="pull-right more_option text-info">
                                        <a href="#" class="o_payment_form_pay_icon_more" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
                                    </span>
                                </li>
                                <t t-set="i" t-value="i+1"/>
                            </t>
                        </ul>
                    </div>
                    <div t-attf-id="o_payment_add_token_acq_{{acq.id}}" t-attf-class="panel-footer {{'hidden' if(acquirers_count &gt; 1 and pms_count==0 and s2s_acquirers[0]!=acq) else 'hidden' if pms_count &gt;0 else ''}}">
                        <div class="clearfix">
                            <t t-call="{{acq.sudo().get_s2s_form_xml_id()}}">
                                <t t-set="id" t-value="acq.id"/>
                                <t t-set="partner_id" t-value="partner_id"/>
                                <t t-set="return_url" t-value="''"/>
                            </t>
                        </div>
                    </div>
                </t>
                <t t-if="mode == 'payment'" t-foreach="form_acquirers" t-as="acq">
                    <div class="panel-body">
                        <label>
                            <input type="radio" t-att-data-acquirer-id="acq.id"
                                t-att-data-form-payment="true"
                                t-att-data-provider="acq.provider"
                                t-att-class="'hidden' if (acquirers_count==1 and pms_count==0) else ''"
                                t-att-checked="acquirers_count==1 and pms_count==0"
                                name="pm_id" t-attf-value="form_{{acq.id}}"/>
                            <span class="payment_icon_name" t-esc="acq.name"/>
                        </label>
                        <ul class="pull-right list-inline payment_icon_list">
                            <t t-set="i" t-value="0"/>
                            <t t-foreach="acq.payment_icon_ids" t-as="pm_icon">
                                <li t-att-class=" '' if (i &lt; 3) else 'hidden'">
                                    <span t-field="pm_icon.image_payment_form"
                                        t-options='{"widget": "image", "alt-field": "name"}' />
                                </li>
                                <li t-if="i==3" style="display:block;">
                                    <span class="pull-right more_option text-info">
                                        <a href="#" class="o_payment_form_pay_icon_more" data-toggle="tooltip" t-att-title="', '.join([opt.name for opt in acq.payment_icon_ids[3:]])">and more</a>
                                    </span>
                                </li>
                                <t t-set="i" t-value="i+1"/>
                            </t>
                        </ul>
                    </div>
                    <div t-attf-id="o_payment_form_acq_{{acq.id}}" t-attf-class="hidden {{'panel-footer' if acq.save_token == 'ask' else ''}}">
                        <label t-if="acq.save_token == 'ask'"><input type="checkbox" name="o_payment_form_save_token" data-remove-me=""/> Save my payment data</label>
                    </div>
                </t>
                <t t-foreach="pms" t-as="pm">
                    <div class="panel-body">
                        <label>
                            <input t-if="mode == 'payment'" type="radio" name="pm_id" t-att-value="pm.id" t-att-checked="checked_pm_id == pm.id"/>
                            <span class="payment_option_name" t-esc="pm.name"/>
                            <t t-if="pm.verified">
                                <i class="fa fa-check text-success" title="This payment method is verified by our system."></i>
                            </t>
                            <t t-else="">
                                <i class="fa fa-close text-danger" title="This payment method has not been verified by our system."></i>
                            </t>
                        </label>
                        <button t-if="mode == 'manage'" name="delete_pm" t-att-value="pm.id" class="btn btn-primary btn-xs pull-right">
                            <i class="fa fa-trash"></i> Delete
                        </button>
                    </div>
                </t>
            </div>
            <div class="pull-right">
                <button t-if="mode == 'payment'" id="o_payment_form_pay" type="submit" t-att-class="submit_class if submit_class else 'btn btn-primary btn-lg mb8 mt8'">
                    <t t-if="submit_txt">
                        <i t-if="icon_class" t-attf-class="fa {{icon_class}}"/>
                        <t t-esc="submit_txt"/>
                    </t>
                    <t t-else="">
                        <i class="fa fa-lock"> Pay</i>
                    </t>
                </button>
                <button t-if="mode == 'manage' and s2s_acquirers" id="o_payment_form_add_pm" class="btn btn-primary btn-lg mb8 mt8">
                    <i class="fa fa-plus-circle"> Add new card</i>
                </button>
            </div>
        </form>
    </template>
</flectra>