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' and invoice.type == 'out_invoice'" 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>


    <!-- duplicata of the template payment.payment_confirmation_status.
        The duplication avoid to break an existing installation in stable version-->
    <template id="payment_confirmation_status">
        <div t-if="payment_tx_id and payment_tx_id.state == 'done'" class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
            <span t-if='payment_tx_id.acquirer_id.done_msg' t-raw="payment_tx_id.acquirer_id.done_msg"/>
            <span t-if='payment_tx_id.acquirer_id.post_msg' t-raw="payment_tx_id.acquirer_id.post_msg"/>
        </div>
        <div t-if="payment_tx_id and payment_tx_id.state == 'pending'" class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
            <span t-if='payment_tx_id.acquirer_id.pending_msg' t-raw="payment_tx_id.acquirer_id.pending_msg"/>
            <span t-if='payment_tx_id.acquirer_id.post_msg' t-raw="payment_tx_id.acquirer_id.post_msg"/>
        </div>
        <div t-if="payment_tx_id and payment_tx_id.state == 'cancel'" class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
            <span t-if='payment_tx_id.acquirer_id.cancel_msg' t-raw="payment_tx_id.acquirer_id.cancel_msg"/>
        </div>
        <div t-if="payment_tx_id and payment_tx_id.state == 'error'" class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
            <span t-if='payment_tx_id.acquirer_id.error_msg' t-raw="payment_tx_id.acquirer_id.error_msg"/>
        </div>
        <div t-if="payment_tx_id and payment_tx_id.state == 'authorized'" class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&amp;times;</button>
            Your payment has been authorized.
            <span t-if='payment_tx_id.acquirer_id.post_msg' t-raw="payment_tx_id.acquirer_id.post_msg"/>
        </div>
    </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="//t[@t-call='account.portal_invoice_success']" position="after">
            <div t-if="invoice.payment_tx_ids and invoice.amount_total and not success and not error" class="o_account_payment_tx_status" t-att-data-invoice-id="invoice.id">
                <t t-call="account_payment.payment_confirmation_status">
                    <t t-set="payment_tx_id" t-value="invoice.payment_tx_id"/>
                </t>
            </div>
        </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, ('?access_token=%s' % (access_token)) if access_token else '')"/>
                        <t t-set="error_url" t-value="'/my/invoices/%s%s' % (invoice.id, ('?access_token=%s' % (access_token)) if access_token else '')"/>
                        <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>
            <div class="panel-body" t-if="existing_token">
                <div class="col-md-offset-3 col-md-6">
                    <i class="fa fa-info"></i> You have credits card registered, you can log-in to be able to use them.
                </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'">
                <span t-if='invoice.payment_acquirer_id.done_msg' t-raw="invoice.payment_acquirer_id.done_msg"/>
                <span t-if='invoice.payment_acquirer_id.post_msg' t-raw="invoice.payment_acquirer_id.post_msg"/>
            </t>
        </xpath>
    </template>
</flectra>