Hello.

I found myself with this error while trying to integrate a widget for my PaymentProvider and I have no idea where it could come from since I wasn't even aware what zoomOdoo was until this error.

Odoo Client Error
UncaughtPromiseError > TypeError
Uncaught Promise > this.$(...).zoomOdoo is not a function
Occured on localhost:8069 on 2025-05-20 13:56:17 GMT
TypeError: this.$(...).zoomOdoo is not a function
    start@http://localhost:8069/web/assets/1/e02ac72/web.assets_frontend.min.js:9011:1491
    OdooClass.extend/</prototype[name]<@http://localhost:8069/web/assets/1/e02ac72/web.assets_frontend.min.js:3243:516
    attachTo/<@http://localhost:8069/web/assets/1/e02ac72/web.assets_frontend.min.js:6397:13
    

Do you have any idea what could have caused it ?

Since this error appeared while I was troubleshooting a .js file, which should integrate the widget in a view, I'll post the .js and the view too.

The .js file :

/** @odoo-module **/
console.log("payment_form.js loaded");
import paymentForm from '@payment/js/payment_form';

paymentForm.include({

    // #=== DOM MANIPULATION ===#
    _processPayment: function (providerCode) {

            console.log("_processPayment en route :  " + providerCode);

            var self = this;
            if (providerCode !== 'monext') {
                return this._super.apply(this, arguments);
            }

            var txRef = this.$('input[name="reference"]').val();
            if (!txRef) {
                this.displayError({ message: "Référence de transaction introuvable." });
                return Promise.reject();
            }

            return this._rpc({
                route: 'checkout/payments/sessions',
                params: { txRef: txRef },
            }).then(function (result) {
                var token = result.token;
                if (!token) {
                    self.displayError({ message: "Token Monext introuvable." });
                    return Promise.reject();
                }

                if (!document.querySelector('script[src*="widget-min.js"]')) {
                    var script = document.createElement('script');
                    script.src = 'https://homologation-payment.cdn.payline.com/cdn/scripts/widget-min.js';
                    script.onload = function () {
                        console.log("Script Monext chargé avec succès.");
                        self._renderMonextWidget(token);
                    };
                    script.onerror = function () {
                        console.error("Erreur lors du chargement du script Monext.");
                    }
                    document.head.appendChild(script);
                } else {
                    self._renderMonextWidget(token);
                }

                return Promise.resolve();
            }).catch(function (error) {
                self.displayError({ message: "Erreur lors de la récupération du token." });
                return Promise.reject();
            });
        },

    _renderMonextWidget: function (token) {
            // Créer le widget Monext
            // 1. Supprimer l'ancien widget s'il existe
            // 2. Créer un nouveau div pour le widget
            // 3. Ajouter le div au DOM
            var container = document.getElementById('PaylineWidgetContainer');
            if (!container) {
                console.error("PaylineWidgetContainer not found in DOM.");
                return;
            }

            var oldWidget = document.getElementById('PaylineWidget');
            if (oldWidget) oldWidget.remove();

            var widgetContainer = document.createElement('div');
            widgetContainer.id = 'PaylineWidget';
            widgetContainer.setAttribute('data-token', token);
            widgetContainer.setAttribute('data-template', 'column');
            widgetContainer.setAttribute('data-embeddedredirectionallowed', 'false');

            if (!this.el) {
                console.error("this.el is undefined or null.");
            } else {
                console.log("this.el exists:", this.el);
            }

            this.el.appendChild(widgetContainer);

            if (!document.getElementById('PaylineWidget')) {
                console.log("Le widget Monext n'a pas pu être créé.");
            } else {
                console.log("Le widget Monext a été créé avec succès.");
            }
        },

  })

The view :

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="payment_monext_templates" name="Monext Retail's Payment Form" inherit_id="payment.form">
        <xpath expr="//form[@id='o_payment_form']" position="inside">
            <t t-call-assets="web.assets_frontend" t-js="true"/>
            <div id="PaylineWidgetContainer">
                <!-- payment_form.js charge le widget içi-->
            </div>
        </xpath>
    </template>
</odoo>

I am working with Odoo Community on-premise with version 18.

Thank you in advance.