flectra/addons/account_payment/views/account_portal_templates.xml

<flectra>
    <template id="portal_my_invoices_payment" name="Payment on My Invoices" inherit_id="account.portal_my_invoices">
        <xpath expr="//table[hasclass('o_portal_my_doc_table')]/thead/tr/th[last()]" position="before">
            <th>Status</th>
        </xpath>
        <xpath expr="//t[@t-foreach='invoices']/tr/td[last()]" position="before">
            <td>
                <a t-if="invoice.state == 'open'" t-att-href="'/my/invoices/%s#portal_pay' % invoice.id" alt="Pay Now" class="btn btn-xs btn-primary">
                    <i class="fa fa-arrow-circle-right"/><span class='hidden-xs'> Pay Now</span>
                </a>
            </td>
        </xpath>
    </template>

    <template id="portal_invoice_page_inherit_payment" name="Payment on My Invoices" inherit_id="account.portal_invoice_page">
        <xpath expr="//div[@id='o_portal_account_actions']/a" position="before">
            <t t-set="tx_ids" t-value="invoice.payment_tx_ids.filtered(lambda tx: tx.state in ('pending', 'authorized', 'done'))"/>
            <a t-if="not tx_ids and invoice.state == 'open' and invoice.amount_total"
                    class="btn btn-primary pull-right ml8" href="#portal_pay">
                <i class="fa fa-arrow-circle-right"/> Pay Now
            </a>
            <a t-if="tx_ids and invoice.state != 'paid'"
                    class="btn btn-warning ml8 pull-right" disabled="disabled">
                <i class="fa fa-check-circle"/> Pending
            </a>
            <a t-if="tx_ids and invoice.state == 'paid'"
                    class="btn btn-success ml8 pull-right" disabled="disabled">
                <i class="fa fa-check-circle"/> Paid
            </a>
        </xpath>
        <xpath expr="//div[hasclass('panel-body')]" position="after">
            <div class="panel-body" t-if="not tx_ids and invoice.state == 'open' and invoice.amount_total" id="portal_pay">
                <div t-if="pms or s2s_acquirers or form_acquirers" id="payment_method" class="col-md-offset-3 col-md-6">
                    <h4 class="mb24">Pay with</h4>
                    <t t-call="payment.payment_tokens_list">
                        <t t-set="mode" t-value="'payment'"/>
                        <t t-set="partner_id" t-value="invoice.partner_id.id"/>
                        <t t-set="success_url" t-value="'/my/invoices/%s?%s' % (invoice.id, keep_query())"/>
                        <t t-set="error_url" t-value="'/my/invoices/%s?%s' % (invoice.id, keep_query())"/>
                        <t t-set="access_token" t-value="access_token or ''"/>
                        <t t-set="callback_method" t-value="''"/>
                        <t t-set="form_action" t-value="'/invoice/pay/' + str(invoice.id) + '/s2s_token_tx/'"/>
                        <t t-set="prepare_tx_url" t-value="'/invoice/pay/' + str(invoice.id) + '/form_tx/'"/>
                        <t t-set="submit_txt" t-value="'Pay Now'"/>
                        <t t-set="icon_class" t-value="'fa-lock'"/>
                    </t>
                </div>
            </div>
        </xpath>
    </template>

    <template id="portal_invoice_report" name="Invoice portal page inherit payment" inherit_id="account.portal_invoice_report">
        <xpath expr="//div[@name='customer_address']" position="after">
            <t t-set="tx_ids" t-value="invoice.payment_tx_ids.filtered(lambda tx: tx.state in ('pending', 'authorized', 'done'))"/>
            <t t-if="tx_ids">
                <div>
                    <strong>Transactions</strong>
                </div>
                <div>
                    <t t-foreach="tx_ids" t-as="tx">
                    <div>
                        <span t-esc="tx.reference"/>
                        <span class="text-muted" t-field="tx.create_date"/>
                        <t t-if="tx.state == 'done'">
                            <span class="label label-success orders_label_text_align"><i class="fa fa-fw fa-check"/> Done</span>
                        </t>
                        <t t-if="tx.state != 'done'">
                            <span class="label label-info orders_label_text_align"><i class="fa fa-fw fa-clock-o"/> Waiting</span>
                            <t t-if="tx.state_message"><br /><span t-esc="tx.state_message"/></t>
                        </t>
                    </div>
                    </t>
                </div>
            </t>
        </xpath>
    </template>

    <template id="portal_invoice_error" name="Invoice error display: payment errors"
            inherit_id="account.portal_invoice_error">
        <xpath expr="//t[@name='generic']" position="after">
            <t t-if="error == 'pay_invoice_invalid_doc'">
                There was an error processing your payment: invalid invoice.
            </t>
            <t t-if="error == 'pay_invoice_invalid_doc_state'">
                There was an error processing your payment: invalid invoice state.
            </t>
            <t t-if="error == 'pay_invoice_invalid_token'">
                There was en error processing your payment: invalid credit card ID.
            </t>

            <t t-if="error == 'pay_invoice_tx_amount'">
                There was an error processing your payment: transaction amount issue.<br />
                <t t-if="invoice.payment_tx_id">
                    <t t-esc="invoice.payment_tx_id.amount"/> / <t t-esc="invoice.amount_total"/>
                </t>
            </t>
            <t t-if="error == 'pay_invoice_tx_fail'">
                There was an error processing your payment: transaction failed.<br />
                <t t-if="invoice.payment_tx_id and invoice.payment_tx_id.state_message">
                    <t t-esc="invoice.payment_tx_id.state_message"/>
                </t>
            </t>
            <t t-if="error == 'pay_invoice_tx_state'">
                There was an error processing your payment: transaction issue.<br />
                <t t-if="invoice.payment_tx_id and invoice.payment_tx_id.state_message">
                    <t t-esc="invoice.payment_tx_id.state_message"/>
                </t>
            </t>
            <t t-if="error == 'pay_invoice_tx_confirm'">
                There was an error processing your payment: impossible to validate invoice.
            </t>
            <t t-if="error == 'pay_invoice_tx_token'">
                There was an error processing your payment: issue with credit card ID validation.
            </t>
        </xpath>
    </template>

    <template id="portal_invoice_success" name="Invoice success display: payment success"
            inherit_id="account.portal_invoice_success">
        <xpath expr="//a[hasclass('close')]" position="after">
            <t t-if="success == 'pay_invoice'">
                Invoice successfully paid.
            </t>
        </xpath>
    </template>
</flectra>