payment

odoo-bringout-oca-ocb-payment/payment/static/src/js/checkout_form.js

@@ -0,0 +1,102 @@
+odoo.define('payment.checkout_form', require => {
+    'use strict';
+
+    const publicWidget = require('web.public.widget');
+
+    const paymentFormMixin = require('payment.payment_form_mixin');
+
+    publicWidget.registry.PaymentCheckoutForm = publicWidget.Widget.extend(paymentFormMixin, {
+        selector: 'form[name="o_payment_checkout"]',
+        events: Object.assign({}, publicWidget.Widget.prototype.events, {
+                'click div[name="o_payment_option_card"]': '_onClickPaymentOption',
+                'click a[name="o_payment_icon_more"]': '_onClickMorePaymentIcons',
+                'click a[name="o_payment_icon_less"]': '_onClickLessPaymentIcons',
+                'click button[name="o_payment_submit_button"]': '_onClickPay',
+                'submit': '_onSubmit',
+            }),
+
+        /**
+         * @constructor
+         */
+        init: function () {
+            const preventDoubleClick = handlerMethod => {
+                return _.debounce(handlerMethod, 500, true);
+            };
+            this._super(...arguments);
+            // Prevent double-clicks and browser glitches on all inputs
+            this._onClickLessPaymentIcons = preventDoubleClick(this._onClickLessPaymentIcons);
+            this._onClickMorePaymentIcons = preventDoubleClick(this._onClickMorePaymentIcons);
+            this._onClickPay = preventDoubleClick(this._onClickPay);
+            this._onClickPaymentOption = preventDoubleClick(this._onClickPaymentOption);
+            this._onSubmit = preventDoubleClick(this._onSubmit);
+        },
+
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * Handle a direct payment, a payment with redirection, or a payment by token.
+         *
+         * Called when clicking on the 'Pay' button or when submitting the form.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickPay: async function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            // Check that the user has selected a payment option
+            const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
+            if (!this._ensureRadioIsChecked($checkedRadios)) {
+                return;
+            }
+            const checkedRadio = $checkedRadios[0];
+
+            // Extract contextual values from the radio button
+            const provider = this._getProviderFromRadio(checkedRadio);
+            const paymentOptionId = this._getPaymentOptionIdFromRadio(checkedRadio);
+            const flow = this._getPaymentFlowFromRadio(checkedRadio);
+
+            // Update the tx context with the value of the "Save my payment details" checkbox
+            if (flow !== 'token') {
+                const $tokenizeCheckbox = this.$(
+                    `#o_payment_provider_inline_form_${paymentOptionId}` // Only match provider radios
+                ).find('input[name="o_payment_save_as_token"]');
+                this.txContext.tokenizationRequested = $tokenizeCheckbox.length === 1
+                    && $tokenizeCheckbox[0].checked;
+            } else {
+                this.txContext.tokenizationRequested = false;
+            }
+
+            // Make the payment
+            this._hideError(); // Don't keep the error displayed if the user is going through 3DS2
+            this._disableButton(true); // Disable until it is needed again
+            $('body').block({
+                message: false,
+                overlayCSS: {backgroundColor: "#000", opacity: 0, zIndex: 1050},
+            });
+            this._processPayment(provider, paymentOptionId, flow);
+        },
+
+        /**
+         * Delegate the handling of the payment request to `_onClickPay`.
+         *
+         * Called when submitting the form (e.g. through the Return key).
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onSubmit: function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            this._onClickPay(ev);
+        },
+
+    });
+    return publicWidget.registry.PaymentCheckoutForm;
+});

odoo-bringout-oca-ocb-payment/payment/static/src/js/express_checkout_form.js

@@ -0,0 +1,104 @@
+/** @odoo-module */
+
+import core from 'web.core';
+import publicWidget from 'web.public.widget';
+
+publicWidget.registry.PaymentExpressCheckoutForm = publicWidget.Widget.extend({
+    selector: 'form[name="o_payment_express_checkout_form"]',
+
+    /**
+     * @override
+     */
+    start: async function () {
+        await this._super(...arguments);
+        this.txContext = {};
+        Object.assign(this.txContext, this.$el.data());
+        this.txContext.shippingInfoRequired = !!this.txContext.shippingInfoRequired;
+        const expressCheckoutForms = this._getExpressCheckoutForms();
+        for (const expressCheckoutForm of expressCheckoutForms) {
+            await this._prepareExpressCheckoutForm(expressCheckoutForm.dataset);
+        }
+        // Monitor updates of the amount on eCommerce's cart pages.
+        core.bus.on('cart_amount_changed', this, this._updateAmount.bind(this));
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Return all express checkout forms found on the page.
+     *
+     * @private
+     * @return {NodeList} - All express checkout forms found on the page.
+     */
+    _getExpressCheckoutForms() {
+        return document.querySelectorAll(
+            'form[name="o_payment_express_checkout_form"] div[name="o_express_checkout_container"]'
+        );
+    },
+
+    /**
+     * Prepare the provider-specific express checkout form based on the provided data.
+     *
+     * For a provider to manage an express checkout form, it must override this method.
+     *
+     * @private
+     * @param {Object} providerData - The provider-specific data.
+     * @return {Promise}
+     */
+    async _prepareExpressCheckoutForm(providerData) {
+        return Promise.resolve();
+    },
+
+    /**
+     * Prepare the params to send to the transaction route.
+     *
+     * For a provider to overwrite generic params or to add provider-specific ones, it must override
+     * this method and return the extended transaction route params.
+     *
+     * @private
+     * @param {number} providerId - The id of the provider handling the transaction.
+     * @returns {object} - The transaction route params
+     */
+    _prepareTransactionRouteParams(providerId) {
+        return {
+            'payment_option_id': parseInt(providerId),
+            'reference_prefix': this.txContext.referencePrefix &&
+                                this.txContent.referencePrefix.toString(),
+            'currency_id': this.txContext.currencyId &&
+                           parseInt(this.txContext.currencyId),
+            'partner_id': parseInt(this.txContext.partnerId),
+            'flow': 'direct',
+            'tokenization_requested': false,
+            'landing_route': this.txContext.landingRoute,
+            'access_token': this.txContext.accessToken,
+            'csrf_token': core.csrf_token,
+        };
+    },
+
+    /**
+     * Update the amount of the express checkout form.
+     *
+     * For a provider to manage an express form, it must override this method.
+     *
+     * @private
+     * @param {number} newAmount - The new amount.
+     * @param {number} newMinorAmount - The new minor amount.
+     * @return {undefined}
+     */
+    _updateAmount(newAmount, newMinorAmount) {
+        this.txContext.amount = parseFloat(newAmount);
+        this.txContext.minorAmount = parseInt(newMinorAmount);
+        this._getExpressCheckoutForms().forEach(form => {
+            if (newAmount == 0) {
+                form.classList.add('d-none')}
+            else {
+                form.classList.remove('d-none')
+            }
+        })
+    },
+
+});
+
+export const paymentExpressCheckoutForm = publicWidget.registry.PaymentExpressCheckoutForm;

odoo-bringout-oca-ocb-payment/payment/static/src/js/manage_form.js

@@ -0,0 +1,253 @@
+odoo.define('payment.manage_form', require => {
+    'use strict';
+
+    const core = require('web.core');
+    const publicWidget = require('web.public.widget');
+    const Dialog = require('web.Dialog');
+
+    const paymentFormMixin = require('payment.payment_form_mixin');
+
+    const _t = core._t;
+
+    publicWidget.registry.PaymentManageForm = publicWidget.Widget.extend(paymentFormMixin, {
+        selector: 'form[name="o_payment_manage"]',
+        events: Object.assign({}, publicWidget.Widget.prototype.events, {
+            'click div[name="o_payment_option_card"]': '_onClickPaymentOption',
+            'click a[name="o_payment_icon_more"]': '_onClickMorePaymentIcons',
+            'click a[name="o_payment_icon_less"]': '_onClickLessPaymentIcons',
+            'click button[name="o_payment_submit_button"]': '_onClickSaveToken',
+            'click button[name="o_payment_delete_token"]': '_onClickDeleteToken',
+            'submit': '_onSubmit',
+        }),
+
+        /**
+         * @constructor
+         */
+        init: function () {
+            const preventDoubleClick = handlerMethod => {
+                return _.debounce(handlerMethod, 500, true);
+            };
+            this._super(...arguments);
+            // Prevent double-clicks and browser glitches on all inputs
+            this._onClickDeleteToken = preventDoubleClick(this._onClickDeleteToken);
+            this._onClickLessPaymentIcons = preventDoubleClick(this._onClickLessPaymentIcons);
+            this._onClickMorePaymentIcons = preventDoubleClick(this._onClickMorePaymentIcons);
+            this._onClickPaymentOption = preventDoubleClick(this._onClickPaymentOption);
+            this._onClickSaveToken = preventDoubleClick(this._onClickSaveToken);
+            this._onSubmit = preventDoubleClick(this._onSubmit);
+        },
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * Assign the token to a record.
+         *
+         * @private
+         * @param {number} tokenId - The id of the token to assign
+         * @return {undefined}
+         */
+        _assignToken: function (tokenId) {
+            // Call the assign route to assign the token to a record
+            this._rpc({
+                route: this.txContext.assignTokenRoute,
+                params: {
+                    'access_token': this.txContext.accessToken,
+                    'token_id': tokenId,
+                }
+            }).then(() => {
+                window.location = this.txContext.landingRoute;
+            }).guardedCatch(error => {
+                error.event.preventDefault();
+                this._displayError(
+                    _t("Server Error"),
+                    _t("We are not able to save your payment method."),
+                    error.message.data.message
+                );
+            });
+        },
+
+        /**
+         * Build the confirmation dialog based on the linked records' information.
+         *
+         * @private
+         * @param {Array} linkedRecordsInfo - The list of information about linked records.
+         * @param confirmCallback - The callback method called when the user clicks on the
+         *                          confirmation button.
+         * @return {object}
+         */
+        _buildConfirmationDialog: function (linkedRecordsInfo, confirmCallback) {
+            const $dialogContentMessage = $(
+                '<span>', {text: _t("Are you sure you want to delete this payment method?")}
+            );
+            if (linkedRecordsInfo.length > 0) { // List the documents linked to the token.
+                $dialogContentMessage.append($('<br>'));
+                $dialogContentMessage.append($(
+                    '<span>', {text: _t("It is currently linked to the following documents:")}
+                ));
+                const $documentInfoList = $('<ul>');
+                linkedRecordsInfo.forEach(documentInfo => {
+                    $documentInfoList.append($('<li>').append($(
+                        '<a>', {
+                            href: documentInfo.url,
+                            target: '_blank',
+                            title: documentInfo.description,
+                            text: documentInfo.name
+                        }
+                    )));
+                });
+                $dialogContentMessage.append($documentInfoList);
+            }
+            return new Dialog(this, {
+                title: _t("Warning!"),
+                size: 'medium',
+                $content: $('<div>').append($dialogContentMessage),
+                buttons: [
+                    {
+                        text: _t("Confirm Deletion"), classes: 'btn-primary', close: true,
+                        click: confirmCallback,
+                    },
+                    {
+                        text: _t("Cancel"), close: true
+                    },
+                ],
+            });
+        },
+
+        /**
+         * Search for documents linked to the token and ask the user for confirmation.
+         *
+         * If any such document is found, a confirmation dialog is shown.
+         *
+         * @private
+         * @param {number} tokenId - The id of the token to delete
+         * @return {undefined}
+         */
+        _deleteToken: function (tokenId) {
+            const execute = () => {
+                this._rpc({
+                    route: '/payment/archive_token',
+                    params: {
+                        'token_id': tokenId,
+                    },
+                }).then(() => {
+                    const $tokenCard = this.$(
+                        `input[name="o_payment_radio"][data-payment-option-id="${tokenId}"]` +
+                        `[data-payment-option-type="token"]`
+                    ).closest('div[name="o_payment_option_card"]');
+                    $tokenCard.siblings(`#o_payment_token_inline_form_${tokenId}`).remove();
+                    $tokenCard.remove();
+                    this._disableButton(false);
+                }).guardedCatch(error => {
+                    error.event.preventDefault();
+                    this._displayError(
+                        _t("Server Error"),
+                        _t("We are not able to delete your payment method."),
+                        error.message.data.message
+                    );
+                });
+            };
+
+            // Fetch documents linked to the token
+            this._rpc({
+                model: 'payment.token',
+                method: 'get_linked_records_info',
+                args: [tokenId],
+            }).then(linkedRecordsInfo => {
+                this._buildConfirmationDialog(linkedRecordsInfo, execute).open();
+            }).guardedCatch(error => {
+                this._displayError(
+                    _t("Server Error"),
+                    _t("We are not able to delete your payment method."),
+                    error.message.data.message
+                );
+            });
+        },
+
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * Find the radio button linked to the click 'Delete' button and trigger the token deletion.
+         *
+         * Let `_onClickPaymentOption` select the radio button and display the inline form.
+         *
+         * Called when clicking on the 'Delete' button of a token.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickDeleteToken: function (ev) {
+            ev.preventDefault();
+
+            // Extract contextual values from the delete button
+            const linkedRadio = $(ev.currentTarget).siblings().find('input[name="o_payment_radio"]')[0];
+            const tokenId = this._getPaymentOptionIdFromRadio(linkedRadio);
+
+            // Delete the token
+            this._deleteToken(tokenId);
+        },
+
+        /**
+         * Handle the creation of a new token or the assignation of a token to a record.
+         *
+         * Called when clicking on the 'Save Payment Method' button of when submitting the form.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickSaveToken: async function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            // Check that the user has selected a payment option
+            const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
+            if (!this._ensureRadioIsChecked($checkedRadios)) {
+                return;
+            }
+            const checkedRadio = $checkedRadios[0];
+
+            // Extract contextual values from the radio button
+            const provider = this._getProviderFromRadio(checkedRadio);
+            const paymentOptionId = this._getPaymentOptionIdFromRadio(checkedRadio);
+            const flow = this._getPaymentFlowFromRadio(checkedRadio);
+
+            // Save the payment method
+            this._hideError(); // Don't keep the error displayed if the user is going through 3DS2
+            this._disableButton(true); // Disable until it is needed again
+            $('body').block({
+                message: false,
+                overlayCSS: {backgroundColor: "#000", opacity: 0, zIndex: 1050},
+            });
+            if (flow !== 'token') { // Creation of a new token
+                this.txContext.tokenizationRequested = true;
+                this.txContext.isValidation = true;
+                this._processPayment(provider, paymentOptionId, flow);
+            } else if (this.txContext.allowTokenSelection) { // Assignation of a token to a record
+                this._assignToken(paymentOptionId);
+            }
+        },
+
+        /**
+         * Delegate the handling of the token to `_onClickSaveToken`.
+         *
+         * Called when submitting the form (e.g. through the Return key).
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onSubmit: function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
+
+            this._onClickSaveToken(ev);
+        },
+
+    });
+    return publicWidget.registry.PaymentManageForm;
+});

odoo-bringout-oca-ocb-payment/payment/static/src/js/payment_form_mixin.js

@@ -0,0 +1,533 @@
+odoo.define('payment.payment_form_mixin', require => {
+    'use strict';
+
+    const core = require('web.core');
+    const Dialog = require('web.Dialog');
+
+    const _t = core._t;
+
+    return {
+
+        /**
+         * @override
+         */
+        start: async function () {
+            this.txContext = {}; // Synchronously initialize txContext before any await.
+            Object.assign(this.txContext, this.$el.data());
+            await this._super(...arguments);
+            window.addEventListener('pageshow', function (event) {
+                if (event.persisted) {
+                    window.location.reload();
+                }
+            });
+            this.$('[data-bs-toggle="tooltip"]').tooltip();
+            const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
+            if ($checkedRadios.length === 1) {
+                const checkedRadio = $checkedRadios[0];
+                this._displayInlineForm(checkedRadio);
+                this._enableButton();
+            } else {
+                this._setPaymentFlow(); // Initialize the payment flow to let providers overwrite it
+            }
+        },
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * Disable the submit button.
+         *
+         * The icons are updated to either show that an action is processing or that the button is
+         * not ready, depending on the value of `showLoadingAnimation`.
+         *
+         * @private
+         * @param {boolean} showLoadingAnimation - Whether a spinning loader should be shown
+         * @return {undefined}
+         */
+        _disableButton: function (showLoadingAnimation = true) {
+            const $submitButton = this.$('button[name="o_payment_submit_button"]');
+            const iconClass = $submitButton.data('icon-class');
+            $submitButton.attr('disabled', true);
+            if (showLoadingAnimation) {
+                $submitButton.find('i').removeClass(iconClass);
+                $submitButton.prepend(
+                    '<span class="o_loader"><i class="fa fa-refresh fa-spin"></i>&nbsp;</span>'
+                );
+            }
+        },
+
+        /**
+         * Display an error in the payment form.
+         *
+         * If no payment option is selected, the error is displayed in a dialog. If exactly one
+         * payment option is selected, the error is displayed in the inline form of that payment
+         * option and the view is focused on the error.
+         *
+         * @private
+         * @param {string} title - The title of the error
+         * @param {string} description - The description of the error
+         * @param {string} error - The raw error message
+         * @return {(Dialog|undefined)} A dialog showing the error if no payment option is selected,
+         *                              undefined otherwise.
+         */
+        _displayError: function (title, description = '', error = '') {
+            const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
+            if ($checkedRadios.length !== 1) { // Cannot find selected payment option, show dialog
+                return new Dialog(null, {
+                    title: _.str.sprintf(_t("Error: %s"), title),
+                    size: 'medium',
+                    $content: `<p>${_.str.escapeHTML(description) || ''}</p>`,
+                    buttons: [{text: _t("Ok"), close: true}]
+                }).open();
+            } else { // Show error in inline form
+                this._hideError(); // Remove any previous error
+
+                // Build the html for the error
+                let errorHtml = `<div class="alert alert-danger mb4" name="o_payment_error">
+                                 <b>${_.str.escapeHTML(title)}</b>`;
+                if (description !== '') {
+                    errorHtml += `</br>${_.str.escapeHTML(description)}`;
+                }
+                if (error !== '') {
+                    errorHtml += `</br>${_.str.escapeHTML(error)}`;
+                }
+                errorHtml += '</div>';
+
+                // Append error to inline form and center the page on the error
+                const checkedRadio = $checkedRadios[0];
+                const paymentOptionId = this._getPaymentOptionIdFromRadio(checkedRadio);
+                const formType = $(checkedRadio).data('payment-option-type');
+                const $inlineForm = this.$(`#o_payment_${formType}_inline_form_${paymentOptionId}`);
+                $inlineForm.removeClass('d-none'); // Show the inline form even if it was empty
+                $inlineForm.append(errorHtml).find('div[name="o_payment_error"]')[0]
+                    .scrollIntoView({behavior: 'smooth', block: 'center'});
+            }
+            this._enableButton(); // Enable button back after it was disabled before processing
+            $('body').unblock(); // The page is blocked at this point, unblock it
+        },
+
+        /**
+         * Display the inline form of the selected payment option and hide others.
+         *
+         * @private
+         * @param {HTMLInputElement} radio - The radio button linked to the payment option
+         * @return {undefined}
+         */
+        _displayInlineForm: function (radio) {
+            this._hideInlineForms(); // Collapse previously opened inline forms
+            this._hideError(); // The error is only relevant until it is hidden with its inline form
+            this._setPaymentFlow(); // Reset the payment flow to let providers overwrite it
+
+            // Extract contextual values from the radio button
+            const provider = this._getProviderFromRadio(radio);
+            const paymentOptionId = this._getPaymentOptionIdFromRadio(radio);
+            const flow = this._getPaymentFlowFromRadio(radio);
+
+            // Prepare the inline form of the selected payment option and display it if not empty
+            this._prepareInlineForm(provider, paymentOptionId, flow);
+            const formType = $(radio).data('payment-option-type');
+            const $inlineForm = this.$(`#o_payment_${formType}_inline_form_${paymentOptionId}`);
+            if ($inlineForm.children().length > 0) {
+                $inlineForm.removeClass('d-none');
+            }
+        },
+
+        /**
+         * Check if the submit button can be enabled and do it if so.
+         *
+         * The icons are updated to show that the button is ready.
+         *
+         * @private
+         * @return {boolean} Whether the button was enabled.
+         */
+        _enableButton: function () {
+            if (this._isButtonReady()) {
+                const $submitButton = this.$('button[name="o_payment_submit_button"]');
+                const iconClass = $submitButton.data('icon-class');
+                $submitButton.attr('disabled', false);
+                $submitButton.find('i').addClass(iconClass);
+                $submitButton.find('span.o_loader').remove();
+                return true;
+            }
+            return false;
+        },
+
+        /**
+         * Verify that exactly one radio button is checked and display an error otherwise.
+         *
+         * @private
+         * @param {jQuery} $checkedRadios - The currently check radio buttons
+         *
+         * @return {boolean} Whether exactly one radio button among the provided radios is checked
+         */
+        _ensureRadioIsChecked: function ($checkedRadios) {
+            if ($checkedRadios.length === 0) {
+                this._displayError(
+                    _t("No payment option selected"),
+                    _t("Please select a payment option.")
+                );
+                return false;
+            } else if ($checkedRadios.length > 1) {
+                this._displayError(
+                    _t("Multiple payment options selected"),
+                    _t("Please select only one payment option.")
+                );
+                return false;
+            }
+            return true;
+        },
+
+        /**
+         * Determine and return the online payment flow of the selected payment option.
+         *
+         * As some providers implement both the direct payment and the payment with redirection, the
+         * flow cannot be inferred from the radio button only. The radio button only indicates
+         * whether the payment option is a token. If not, the transaction context is looked up to
+         * determine whether the flow is 'direct' or 'redirect'.
+         *
+         * @private
+         * @param {HTMLInputElement} radio - The radio button linked to the payment option
+         * @return {string} The flow of the selected payment option. redirect, direct or token.
+         */
+        _getPaymentFlowFromRadio: function (radio) {
+            if (
+                $(radio).data('payment-option-type') === 'token'
+                || this.txContext.flow === 'token'
+            ) {
+                return 'token';
+            } else if (this.txContext.flow === 'redirect') {
+                return 'redirect';
+            } else {
+                return 'direct';
+            }
+        },
+
+        /**
+         * Determine and return the id of the selected payment option.
+         *
+         * @private
+         * @param {HTMLInputElement} radio - The radio button linked to the payment option
+         * @return {number} The provider id or the token id or of the payment option linked to the
+         *                  radio button.
+         */
+        _getPaymentOptionIdFromRadio: radio => $(radio).data('payment-option-id'),
+
+        /**
+         * Determine and return the provider of the selected payment option.
+         *
+         * @private
+         * @param {HTMLInputElement} radio - The radio button linked to the payment option
+         * @return {number} The provider of the payment option linked to the radio button.
+         */
+        _getProviderFromRadio: radio => $(radio).data('provider'),
+
+        /**
+         * Remove the error in the provider form.
+         *
+         * @private
+         * @return {jQuery} The removed error
+         */
+        _hideError: () => this.$('div[name="o_payment_error"]').remove(),
+
+        /**
+         * Collapse all inline forms.
+         *
+         * @private
+         * @return {undefined}.
+         */
+        _hideInlineForms: () => this.$('[name="o_payment_inline_form"]').addClass('d-none'),
+
+        /**
+         * Hide the "Save my payment details" label and checkbox, and the submit button.
+         *
+         * The inputs should typically be hidden when the customer has to perform additional actions
+         * in the inline form. All inputs are automatically shown again when the customer clicks on
+         * another inline form.
+         *
+         * @private
+         * @return {undefined}
+         */
+        _hideInputs: function () {
+            const $submitButton = this.$('button[name="o_payment_submit_button"]');
+            const $tokenizeCheckboxes = this.$('input[name="o_payment_save_as_token"]');
+            $submitButton.addClass('d-none');
+            $tokenizeCheckboxes.closest('label').addClass('d-none');
+        },
+
+        /**
+         * Verify that the submit button is ready to be enabled.
+         *
+         * For a module to support a custom behavior for the submit button, it must override this
+         * method and only return true if the result of this method is true and if nothing prevents
+         * enabling the submit button for that custom behavior.
+         *
+         * @private
+         *
+         * @return {boolean} Whether the submit button can be enabled
+         */
+        _isButtonReady: function () {
+            const $checkedRadios = this.$('input[name="o_payment_radio"]:checked');
+            if ($checkedRadios.length === 1) {
+                const checkedRadio = $checkedRadios[0];
+                const flow = this._getPaymentFlowFromRadio(checkedRadio);
+                return flow !== 'token' || this.txContext.allowTokenSelection;
+            } else {
+                return false;
+            }
+        },
+
+        /**
+         * Prepare the params to send to the transaction route.
+         *
+         * For a provider to overwrite generic params or to add provider-specific ones, it must
+         * override this method and return the extended transaction route params.
+         *
+         * @private
+         * @param {string} code - The code of the selected payment option provider
+         * @param {number} paymentOptionId - The id of the selected payment option
+         * @param {string} flow - The online payment flow of the selected payment option
+         * @return {object} The transaction route params
+         */
+        _prepareTransactionRouteParams: function (code, paymentOptionId, flow) {
+            return {
+                'payment_option_id': paymentOptionId,
+                'reference_prefix': this.txContext.referencePrefix !== undefined
+                    ? this.txContext.referencePrefix.toString() : null,
+                'amount': this.txContext.amount !== undefined
+                    ? parseFloat(this.txContext.amount) : null,
+                'currency_id': this.txContext.currencyId
+                    ? parseInt(this.txContext.currencyId) : null,
+                'partner_id': parseInt(this.txContext.partnerId),
+                'flow': flow,
+                'tokenization_requested': this.txContext.tokenizationRequested,
+                'landing_route': this.txContext.landingRoute,
+                'is_validation': this.txContext.isValidation,
+                'access_token': this.txContext.accessToken
+                    ? this.txContext.accessToken : undefined,
+                'csrf_token': core.csrf_token,
+            };
+        },
+
+        /**
+         * Prepare the provider-specific inline form of the selected payment option.
+         *
+         * For a provider to manage an inline form, it must override this method. When the override
+         * is called, it must lookup the parameters to decide whether it is necessary to prepare its
+         * inline form. Otherwise, the call must be sent back to the parent method.
+         *
+         * @private
+         * @param {string} code - The code of the selected payment option's provider
+         * @param {number} paymentOptionId - The id of the selected payment option
+         * @param {string} flow - The online payment flow of the selected payment option
+         * @return {Promise}
+         */
+        _prepareInlineForm: (code, paymentOptionId, flow) => Promise.resolve(),
+
+        /**
+         * Process the payment.
+         *
+         * For a provider to do pre-processing work on the transaction processing flow, or to
+         * define its entire own flow that requires re-scheduling the RPC to the transaction route,
+         * it must override this method.
+         * If only post-processing work is needed, an override of `_processRedirectPayment`,
+         * `_processDirectPayment` or `_processTokenPayment` might be more appropriate.
+         *
+         * @private
+         * @param {string} code - The code of the payment option's provider
+         * @param {number} paymentOptionId - The id of the payment option handling the transaction
+         * @param {string} flow - The online payment flow of the transaction
+         * @return {Promise}
+         */
+        _processPayment: function (code, paymentOptionId, flow) {
+            // Call the transaction route to create a tx and retrieve the processing values
+            return this._rpc({
+                route: this.txContext.transactionRoute,
+                params: this._prepareTransactionRouteParams(code, paymentOptionId, flow),
+            }).then(processingValues => {
+                if (flow === 'redirect') {
+                    return this._processRedirectPayment(
+                        code, paymentOptionId, processingValues
+                    );
+                } else if (flow === 'direct') {
+                    return this._processDirectPayment(code, paymentOptionId, processingValues);
+                } else if (flow === 'token') {
+                    return this._processTokenPayment(code, paymentOptionId, processingValues);
+                }
+            }).guardedCatch(error => {
+                error.event.preventDefault();
+                this._displayError(
+                    _t("Server Error"),
+                    _t("We are not able to process your payment."),
+                    error.message.data.message
+                );
+            });
+        },
+
+        /**
+         * Execute the provider-specific implementation of the direct payment flow.
+         *
+         * For a provider to redefine the processing of the direct payment flow, it must override
+         * this method.
+         *
+         * @private
+         * @param {string} code - The code of the provider
+         * @param {number} providerId - The id of the provider handling the transaction
+         * @param {object} processingValues - The processing values of the transaction
+         * @return {Promise}
+         */
+        _processDirectPayment: (code, providerId, processingValues) => Promise.resolve(),
+
+        /**
+         * Redirect the customer by submitting the redirect form included in the processing values.
+         *
+         * For a provider to redefine the processing of the payment with redirection flow, it must
+         * override this method.
+         *
+         * @private
+         * @param {string} code - The code of the provider
+         * @param {number} providerId - The id of the provider handling the transaction
+         * @param {object} processingValues - The processing values of the transaction
+         * @return {undefined}
+         */
+        _processRedirectPayment: (code, providerId, processingValues) => {
+            // Append the redirect form to the body
+            const $redirectForm = $(processingValues.redirect_form_html).attr(
+                'id', 'o_payment_redirect_form'
+            );
+            // Ensures external redirections when in an iframe.
+            $redirectForm[0].setAttribute('target', '_top');
+            $(document.getElementsByTagName('body')[0]).append($redirectForm);
+
+            // Submit the form
+            $redirectForm.submit();
+        },
+
+        /**
+         * Redirect the customer to the status route.
+         *
+         * For a provider to redefine the processing of the payment by token flow, it must override
+         * this method.
+         *
+         * @private
+         * @param {string} provider_code - The code of the token's provider
+         * @param {number} tokenId - The id of the token handling the transaction
+         * @param {object} processingValues - The processing values of the transaction
+         * @return {undefined}
+         */
+        _processTokenPayment: (provider_code, tokenId, processingValues) => {
+            // The flow is already completed as payments by tokens are immediately processed
+            window.location = '/payment/status';
+        },
+
+        /**
+         * Set the online payment flow for the selected payment option.
+         *
+         * For a provider to manage direct payments, it must call this method from within its
+         * override of `_prepareInlineForm` to declare its payment flow for the selected payment
+         * option.
+         *
+         * @private
+         * @param {string} flow - The flow for the selected payment option. Either 'redirect',
+         *                        'direct' or 'token'
+         * @return {undefined}
+         */
+        _setPaymentFlow: function (flow = 'redirect') {
+            if (flow !== 'redirect' && flow !== 'direct' && flow !== 'token') {
+                console.warn(
+                    `payment_form_mixin: method '_setPaymentFlow' was called with invalid flow:
+                    ${flow}. Falling back to 'redirect'.`
+                );
+                this.txContext.flow = 'redirect';
+            } else {
+                this.txContext.flow = flow;
+            }
+        },
+
+        /**
+         * Show the "Save my payment details" label and checkbox, and the submit button.
+         *
+         * @private
+         * @return {undefined}.
+         */
+        _showInputs: function () {
+            const $submitButton = this.$('button[name="o_payment_submit_button"]');
+            const $tokenizeCheckboxes = this.$('input[name="o_payment_save_as_token"]');
+            $submitButton.removeClass('d-none');
+            $tokenizeCheckboxes.closest('label').removeClass('d-none');
+        },
+
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+
+        /**
+         * Hide all extra payment icons of the provider linked to the clicked button.
+         *
+         * Called when clicking on the "show less" button.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickLessPaymentIcons: ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            // Hide the extra payment icons, and the "show less" button
+            const $itemList = $(ev.currentTarget).parents('ul');
+            const maxIconNumber = $itemList.data('max-icons');
+            $itemList.children('li').slice(maxIconNumber).addClass('d-none');
+            // Show the "show more" button
+            $itemList.find('a[name="o_payment_icon_more"]').parents('li').removeClass('d-none');
+        },
+
+        /**
+         * Display all the payment icons of the provider linked to the clicked button.
+         *
+         * Called when clicking on the "show more" button.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickMorePaymentIcons: ev => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            // Display all the payment icons, and the "show less" button
+            $(ev.currentTarget).parents('ul').children('li').removeClass('d-none');
+            // Hide the "show more" button
+            $(ev.currentTarget).parents('li').addClass('d-none');
+        },
+
+        /**
+         * Mark the clicked card radio button as checked and open the inline form, if any.
+         *
+         * Called when clicking on the card of a payment option.
+         *
+         * @private
+         * @param {Event} ev
+         * @return {undefined}
+         */
+        _onClickPaymentOption: function (ev) {
+            // Uncheck all radio buttons
+            this.$('input[name="o_payment_radio"]').prop('checked', false);
+            // Check radio button linked to selected payment option
+            const checkedRadio = $(ev.currentTarget).find('input[name="o_payment_radio"]')[0];
+            $(checkedRadio).prop('checked', true);
+
+            // Show the inputs in case they had been hidden
+            this._showInputs();
+
+            // Disable the submit button while building the content
+            this._disableButton(false);
+
+            // Unfold and prepare the inline form of selected payment option
+            this._displayInlineForm(checkedRadio);
+
+            // Re-enable the submit button
+            this._enableButton();
+        },
+
+    };
+
+});

odoo-bringout-oca-ocb-payment/payment/static/src/js/post_processing.js

@@ -0,0 +1,142 @@
+odoo.define('payment.post_processing', function (require) {
+    'use strict';
+
+    var publicWidget = require('web.public.widget');
+    var core = require('web.core');
+    const {Markup} = require('web.utils');
+
+    var _t = core._t;
+
+    $.blockUI.defaults.css.border = '0';
+    $.blockUI.defaults.css["background-color"] = '';
+    $.blockUI.defaults.overlayCSS["opacity"] = '0.9';
+
+    publicWidget.registry.PaymentPostProcessing = publicWidget.Widget.extend({
+        selector: 'div[name="o_payment_status"]',
+
+        _pollCount: 0,
+
+        start: function() {
+            this.displayLoading();
+            this.poll();
+            return this._super.apply(this, arguments);
+        },
+        /* Methods */
+        startPolling: function () {
+            var timeout = 3000;
+            //
+            if(this._pollCount >= 10 && this._pollCount < 20) {
+                timeout = 10000;
+            }
+            else if(this._pollCount >= 20) {
+                timeout = 30000;
+            }
+            //
+            setTimeout(this.poll.bind(this), timeout);
+            this._pollCount ++;
+        },
+        poll: function () {
+            var self = this;
+            this._rpc({
+                route: '/payment/status/poll',
+                params: {
+                    'csrf_token': core.csrf_token,
+                }
+            }).then(function(data) {
+                if(data.success === true) {
+                    self.processPolledData(data.display_values_list);
+                }
+                else {
+                    switch(data.error) {
+                    case "tx_process_retry":
+                        break;
+                    case "no_tx_found":
+                        self.displayContent("payment.no_tx_found", {});
+                        break;
+                    default: // if an exception is raised
+                        self.displayContent("payment.exception", {exception_msg: data.error});
+                        break;
+                    }
+                }
+                self.startPolling();
+
+            }).guardedCatch(function() {
+                self.displayContent("payment.rpc_error", {});
+                self.startPolling();
+            });
+        },
+        processPolledData: function (display_values_list) {
+            var render_values = {
+                'tx_draft': [],
+                'tx_pending': [],
+                'tx_authorized': [],
+                'tx_done': [],
+                'tx_cancel': [],
+                'tx_error': [],
+            };
+
+            // group the transaction according to their state
+            display_values_list.forEach(function (display_values) {
+                var key = 'tx_' + display_values.state;
+                if(key in render_values) {
+                    if (display_values["display_message"]) {
+                        display_values.display_message = Markup(display_values.display_message)
+                    }
+                    render_values[key].push(display_values);
+                }
+            });
+
+            function countTxInState(states) {
+                var nbTx = 0;
+                for (var prop in render_values) {
+                    if (states.indexOf(prop) > -1 && render_values.hasOwnProperty(prop)) {
+                        nbTx += render_values[prop].length;
+                    }
+                }
+                return nbTx;
+            }
+                       
+            /*
+            * When the server sends the list of monitored transactions, it tries to post-process 
+            * all the successful ones. If it succeeds or if the post-process has already been made, 
+            * the transaction is removed from the list of monitored transactions and won't be 
+            * included in the next response. We assume that successful and post-process 
+            * transactions should always prevail on others, regardless of their number or state.
+            */
+            if (render_values['tx_done'].length === 1 &&
+                render_values['tx_done'][0].is_post_processed) {
+                    window.location = render_values['tx_done'][0].landing_route;
+                    return;
+            }
+            // If there are multiple transactions monitored, display them all to the customer. If
+            // there is only one transaction monitored, redirect directly the customer to the
+            // landing route.
+            if(countTxInState(['tx_done', 'tx_error', 'tx_pending', 'tx_authorized']) === 1) {
+                // We don't want to redirect customers to the landing page when they have a pending
+                // transaction. The successful transactions are dealt with before.
+                var tx = render_values['tx_authorized'][0] || render_values['tx_error'][0];
+                if (tx) {
+                    window.location = tx.landing_route;
+                    return;
+                }
+            }
+
+            this.displayContent("payment.display_tx_list", render_values);
+        },
+        displayContent: function (xmlid, render_values) {
+            var html = core.qweb.render(xmlid, render_values);
+            $.unblockUI();
+            this.$el.find('div[name="o_payment_status_content"]').html(html);
+        },
+        displayLoading: function () {
+            var msg = _t("We are processing your payment, please wait ...");
+            $.blockUI({
+                'message': '<h2 class="text-white"><img src="/web/static/img/spin.png" class="fa-pulse"/>' +
+                    '    <br />' + msg +
+                    '</h2>'
+            });
+        },
+    });
+
+    return publicWidget.registry.PaymentPostProcessing;
+});

odoo-bringout-oca-ocb-payment/payment/static/src/scss/payment_form.scss

@@ -0,0 +1,62 @@
+.o_payment_form {
+    label > input[type="radio"], input[type="checkbox"]{
+        vertical-align: middle;
+        margin-right: 5px;
+    }
+
+    .payment_option_name {
+        font-size: 14px;
+        font-weight: normal !important;
+        font-family: Helvetica Neue, sans-serif;
+        line-height: 1.3em;
+        color: #4d4d4d;
+    }
+
+    label {
+        font-weight: normal;
+        margin-top: 5px;
+    }
+
+    .card {
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    .card-body {
+        &:not(:first-child) {
+            border-top: 1px solid #dddddd;
+        }
+        padding: 1.14em !important;
+        &.o_payment_option_card:hover {
+            cursor: pointer;
+        }
+    }
+
+    .card-footer {
+        padding: 0.5rem;
+        label {
+            margin-top: 15px;
+        }
+    }
+
+    .card-footer:last-child {
+        border-bottom-right-radius: 10px !important;
+        border-bottom-left-radius: 10px !important;
+    }
+
+    .payment_icon_list {
+        position: relative;
+        li {
+            padding-left: 5px !important;
+            padding-right: 0px !important;
+        }
+
+        .more_option {
+            @include o-position-absolute($right: 10px);
+            font-size:10px;
+        }
+
+        margin-top: 0px !important;
+        margin-bottom: -5px !important;
+    }
+}

odoo-bringout-oca-ocb-payment/payment/static/src/scss/payment_provider.scss

@@ -0,0 +1,20 @@
+.o_form_view {
+    .o_payment_provider_desc {
+        margin-top: 10px;
+        ul {
+            list-style-type: none;
+            padding: 0;
+
+            i.fa {
+                margin-right: 5px;
+
+                &.fa-check {
+                    color: green;
+                }
+            }
+        }
+    }
+    .o_warning_text {
+        color: #f0ad4e;
+    }
+}

odoo-bringout-oca-ocb-payment/payment/static/src/scss/payment_templates.scss

@@ -0,0 +1,3 @@
+div#o_payment_status_alert > p {
+    margin-bottom: 0;
+}

odoo-bringout-oca-ocb-payment/payment/static/src/scss/portal_payment.scss

@@ -0,0 +1,61 @@
+input#cc_number {
+    background-repeat: no-repeat;
+    background-position: center right calc(2.7em);
+}
+
+div.card_placeholder {
+    background-image: url("/payment/static/src/img/placeholder.png");
+    background-repeat: no-repeat;
+    width: 32px;
+    height: 20px;
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    -webkit-transition: 0.4s cubic-bezier(0.455,0.03,0.515,0.955);
+    transition: 0.4s cubic-bezier(0.455,0.03,0.515,0.955);
+    pointer-events: none;
+}
+
+/* if s2s form not in bootstrap_formatting */
+div.o_card_brand_detail {
+    position: relative;
+
+    div.card_placeholder {
+        right: 5px;
+    }
+}
+
+div.amex {
+    background-image: url("/payment/static/src/img/amex.png");
+    background-repeat: no-repeat;
+}
+
+div.diners {
+    background-image: url("/payment/static/src/img/diners.png");
+    background-repeat: no-repeat;
+}
+
+div.discover {
+    background-image: url("/payment/static/src/img/discover.png");
+    background-repeat: no-repeat;
+}
+
+div.jcb {
+    background-image: url("/payment/static/src/img/jcb.png");
+    background-repeat: no-repeat;
+}
+
+div.mastercard {
+    background-image: url("/payment/static/src/img/mastercard.png");
+    background-repeat: no-repeat;
+}
+
+div.visa {
+    background-image: url("/payment/static/src/img/visa.png");
+    background-repeat: no-repeat;
+}
+
+ul.checkout img.rounded {
+    max-width: 100px;
+    max-height: 40px;
+}

odoo-bringout-oca-ocb-payment/payment/static/src/xml/payment_post_processing.xml

@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="payment" xml:space="preserve">
+    <!-- The templates here as rendered by 'post_processing.js', you can also take
+            a look at payment_portal_templates.xml (xmlid: payment_status) for more infos-->
+    <t t-name="payment.display_tx_list">
+        <div>
+            <!-- Error transactions -->
+            <div t-if="tx_error.length > 0">
+                <h1>Failed operations</h1>
+                <ul class="list-group">
+                    <t t-foreach="tx_error" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                An error occurred during the processing of this payment.<br/>
+                                <strong>Reason:</strong> <t t-esc="tx['state_message']"/>
+                            </small>
+                        </a>
+                    </t>
+                </ul>
+            </div>
+            <!-- Pending/Authorized/Confirmed transactions -->
+            <div t-if="tx_done.length > 0 || tx_authorized.length > 0 || tx_pending.length > 0">
+                <h1>Operations in progress</h1>
+                <div class="list-group">
+                    <!-- Done transactions -->
+                    <t t-foreach="tx_done" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                <t t-if="!tx['is_post_processed']">
+                                    <t t-if="tx['operation'] != 'validation'">
+                                        Your payment is being processed, please wait... <i class="fa fa-cog fa-spin"/>
+                                    </t>
+                                    <t t-else="">
+                                        Saving your payment method, please wait... <i class="fa fa-cog fa-spin"/>
+                                    </t>
+                                </t>
+                                <t t-else="">
+                                    <t t-if="tx['operation'] != 'validation'">
+                                        Your payment has been processed.<br/>
+                                        Click here to be redirected to the confirmation page.
+                                    </t>
+                                    <t t-else="">
+                                        Your payment method has been saved.<br/>
+                                        Click here to be redirected to the confirmation page.
+                                    </t>
+                                </t>
+                            </small>
+                        </a>
+                    </t>
+                    <!-- Pending transactions -->
+                    <t t-foreach="tx_pending" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                <t t-if="tx['display_message']">
+                                    <!-- display_message is the content of the HTML field associated
+                                    with the current transaction state, set on the provider. -->
+                                    <t t-out="tx['display_message']"/>
+                                </t>
+                                <t t-else="">
+                                    Your payment is in pending state.<br/>
+                                    You will be notified when the payment is fully confirmed.<br/>
+                                    Click here to be redirected to the confirmation page.
+                                </t>
+                            </small>
+                        </a>
+                    </t>
+                    <!-- Authorized transactions -->
+                    <t t-foreach="tx_authorized" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                <t t-if="tx['display_message']">
+                                    <!-- display_message is the content of the HTML field associated
+                                    with the current transaction state, set on the provider. -->
+                                    <t t-out="tx['display_message']"/>
+                                </t>
+                                <t t-else="">
+                                    Your payment has been received but need to be confirmed manually.<br/>
+                                    You will be notified when the payment is confirmed.
+                                </t>
+                            </small>
+                        </a>
+                    </t>
+                </div>
+            </div>
+            <!-- Draft transactions -->
+            <div t-if="tx_draft.length > 0">
+                <h1>Waiting for operations to process</h1>
+                <ul class="list-group">
+                    <t t-foreach="tx_draft" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                <t t-if="tx['display_message']">
+                                    <!-- display_message is the content of the HTML field associated
+                                    with the current transaction state, set on the provider. -->
+                                    <t t-out="tx['display_message']"/>
+                                </t>
+                                <t t-else="">
+                                    We are waiting for the payment provider to confirm the payment.
+                                </t>
+                            </small>
+                        </a>
+                    </t>
+                </ul>
+            </div>
+            <!-- Cancel transactions -->
+            <div t-if="tx_cancel.length > 0">
+                <h1>Canceled operations</h1>
+                <ul class="list-group">
+                    <t t-foreach="tx_cancel" t-as="tx">
+                        <a t-att-href="tx['landing_route']" class="list-group-item">
+                            <h4 class="list-group-item-heading mb5">
+                                <t t-esc="tx['reference']"/>
+                                <span class="badge text-bg-light float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
+                            </h4>
+                            <small class="list-group-item-text">
+                                This payment has been canceled.<br/>
+                                No payment has been processed.<br/>
+                                <t t-if="tx['state_message']">
+                                    <strong>Reason:</strong> <t t-esc="tx['state_message']"/>
+                                </t>
+                            </small>
+                        </a>
+                    </t>
+                </ul>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="payment.no_tx_found">
+        <div class="text-center">
+            <p>We are not able to find your payment, but don't worry.</p>
+            <p>You should receive an email confirming your payment in a few minutes.</p>
+            <p>If the payment hasn't been confirmed you can contact us.</p>
+        </div>
+    </t>
+
+    <t t-name="payment.rpc_error">
+        <div class="text-center">
+            <p><strong>Server error:</strong> Unable to contact the Odoo server.</p>
+            <p>Please wait ... <i class="fa fa-refresh fa-spin"></i></p>
+        </div>
+    </t>
+
+    <t t-name="payment.exception">
+        <div class="text-center">
+            <h2>Internal server error</h2>
+            <pre><t t-esc="exception_msg"/></pre>
+        </div>
+    </t>
+
+</templates>