i am creating building new module to integrate payment provider in odoo and im facing issue with the inline payment form 

i created the template xml file 

and it suppose to work out but i keep get this error 
web.assets_frontend_lazy.min.js:3935 TypeError: Cannot read properties of null (reading 'setAttribute')

    at Class._processRedirectFlow (web.assets_frontend_lazy.min.js:8443:270)

    at web.assets_frontend_lazy.min.js:8441:2978

    at async Class._initiatePaymentFlow (web.assets_frontend_lazy.min.js:8441:2837)

    at async Class._initiatePaymentFlow (web.assets_frontend_lazy.min.js:9063:1)

    at async Class._submitForm (web.assets_frontend_lazy.min.js:8441:213)

    at async Class._submitForm (web.assets_frontend_lazy.min.js:8674:1)

handleError @ web.assets_frontend_lazy.min.js:3935

(anonymous) @ web.assets_frontend_lazy.min.js:3942Understand this errorAI


the module is for odoo 18 

and this is the payment_transaction.py code 

from odoo import fields, models, api, _
from odoo.exceptions import ValidationError
import logging
import hmac
import hashlib
import binascii

_logger = logging.getLogger(__name__)


class PaymentTransactionMoamalatLibya(models.Model):
    _inherit = 'payment.transaction'

    moamalat_secure_hash = fields.Char(string="Moamalat Secure Hash", readonly=True)

    @api.model
    def create(self, vals_list):
        """Generate secure hash at transaction creation time."""
        records = super().create(vals_list)
        for record in records:
            if record.provider_id.code == 'moamalat_libya':
                trx_date_time = fields.Datetime.now().strftime("%Y%m%d%H%M")
                amount_cents = int(record.amount * 1000)
                provider = record.provider_id
                secure_hash = record._generate_secure_hash(
                    amount=amount_cents,
                    merchant_reference=record.reference,
                    trx_date_time=trx_date_time,
                    secret_key=provider.moamalat_secret_key,
                    merchant_id=provider.moamalat_merchant_id,
                    terminal_id=provider.moamalat_terminal_id,
                )
                record.moamalat_secure_hash = secure_hash
                _logger.info("Moamalat transaction created with secure hash: %s", secure_hash)
        return records

    def _generate_secure_hash(self, amount, merchant_reference, trx_date_time, secret_key, merchant_id, terminal_id):
        """Compute the SHA-256 HMAC secure hash."""
        try:
            secret_key_decoded = binascii.unhexlify(secret_key)
        except (binascii.Error, TypeError) as e:
            raise ValidationError(_("Invalid Secret Key format for Moamalat.")) from e

        hash_string = (
            f"Amount={amount}&DateTimeLocalTrxn={trx_date_time}&MerchantId={merchant_id}"
            f"&MerchantReference={merchant_reference}&TerminalId={terminal_id}"
        )
        hashed = hmac.new(secret_key_decoded, hash_string.encode('utf-8'), hashlib.sha256)
        secure_hash = hashed.hexdigest().upper()
        _logger.info("Generated Moamalat Secure Hash: %s", secure_hash)
        return secure_hash

    def prepare_lightbox_data(self):
        """Prepare data for the Lightbox config."""
        self.ensure_one()
        amount_cents = int(self.amount * 1000)
        trx_date_time = fields.Datetime.now().strftime("%Y%m%d%H%M")

        return {
            'MID': self.provider_id.moamalat_merchant_id,
            'TID': self.provider_id.moamalat_terminal_id,
            'AmountTrxn': str(amount_cents),
            'MerchantReference': self.reference,
            'TrxDateTime': trx_date_time,
            'SecureHash': self.moamalat_secure_hash,  # from create()
            # Additional callback URLs if needed
            'completeCallbackURL': self.provider_id._get_return_url(self, action='moamalat_libya_return'),
            'errorCallbackURL': self.provider_id._get_return_url(self, action='moamalat_libya_cancel'),
            'cancelCallbackURL': self.provider_id._get_return_url(self, action='moamalat_libya_cancel'),
        }

    def _get_processing_values(self, **kwargs):
        """Return the inline flow with our moamalat_inline_form template."""
        _logger.info("Moamalat _get_processing_values called for transaction %s", self.reference)
        # For demonstration, we assume environment='test'
        lightbox_data = self.prepare_lightbox_data()
        lightbox_data['environment'] = 'test'

        data = {
            'flow': 'inline',  # crucial for inline form
            'render_template': 'at_moamalat_payment_gateway.moamalat_inline_form',  # your template's external ID
            'params': {
                'lightbox_data': lightbox_data,
            },
        }
        _logger.info("Moamalat processing values: %s", data)
        return data

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="moamalat_inline_form" name="Moamalat Inline Form">
            <!-- Simple inline form container -->
            <form>
                <!-- Load the official Moamalat test script (remove if loaded via assets) -->
                <script src="https://tnpg.moamalat.net:6006/js/lightbox.js"></script>

                <!-- A container to hold any data or DOM you want -->
                <div id="o_moamalat_component_container"
                     t-att-data-moamalat-payload="json.dumps(lightbox_data)">
                </div>

                <!-- Optional: A manual "Pay Now" button (instead of auto-showing) -->
                <button id="moamalat_pay_now_btn" type="button" class="btn btn-primary">
                    Pay Now
                </button>

                <!-- Inline script to configure and show the Lightbox -->
                <script type="text/javascript">
                    // Build the configuration from backend data
                    var moamalatConfig = {
                        MID: "<t t-raw='json.dumps(params.lightbox_data.MID)'/>",
                        TID: "<t t-raw='json.dumps(params.lightbox_data.TID)'/>",
                        AmountTrxn: "<t t-raw='json.dumps(params.lightbox_data.AmountTrxn)'/>",
                        MerchantReference: "<t t-raw='json.dumps(params.lightbox_data.MerchantReference)'/>",
                        TrxDateTime: "<t t-raw='json.dumps(params.lightbox_data.TrxDateTime)'/>",
                        SecureHash: "<t t-raw='json.dumps(params.lightbox_data.SecureHash)'/>",
                        // Moamalat callback references
                        completeCallback: function (data) {
                            console.log("Moamalat Payment complete:", data);
                            // e.g. redirect or show success message
                        },
                        errorCallback: function (error) {
                            console.error("Moamalat Payment error:", error);
                        },
                        cancelCallback: function () {
                            console.warn("Moamalat Payment cancelled");
                        },
                    };

                    // On DOM ready, or you can bind to the "Pay Now" button
                    document.addEventListener("DOMContentLoaded", function() {
                        if (!window.Lightbox || !window.Lightbox.Checkout) {
                            console.error("Moamalat Lightbox script not loaded or missing Lightbox.Checkout");
                            return;
                        }
                        // Option A: Auto-launch the Lightbox
                        Lightbox.Checkout.configure = moamalatConfig;
                        Lightbox.Checkout.showLightbox();

                        // Option B: If you prefer a button click:
                        // var payBtn = document.getElementById("moamalat_pay_now_btn");
                        // payBtn.addEventListener("click", function() {
                        //     Lightbox.Checkout.configure = moamalatConfig;
                        //     Lightbox.Checkout.showLightbox();
                        // });
                    });
                </script>
            </form>
        </template>
    </data>
</odoo>
	​