Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Why not use getElementById? It's what it's for :)

const payBtn = document.getElementById('pay-btn')

@sinnbeck, i don't know whether its a conflict with livewire maybe as the fields: placeholders aren't populating the inputs from the JS either even though i've set the inputs to wire:ignore.

Here's some more code for reference if it helps:-

// Changed pay now button from button to input also to see if that helped
<input wire:ignore id="pay-btn"  value="Pay Now">

let hf;
const cardholderName = document.getElementById('hf-name')
const cardNumber = document.getElementById('hf-number')
const cardDate = document.getElementById('hf-date')
const cardCvv = document.getElementById('hf-cvv')
const payBtn = document.getElementById('pay-btn')

window.addEventListener('preparePayment', function() 
{
    window.dnaPayments.hostedFields.create({
        accessToken: event.detail.accessToken,
        styles: 
        {
        },
        threeDSecure: {
            container: threeDSecureModalContent
        },
        fields: 
        {
            cardholderName: {
                container: cardholderName,
                placeholder: 'Cardholder name'
            },
            cardNumber: {
                container: cardNumber,
                placeholder: 'Card number'
            },
            expirationDate: {
                container: cardDate,
                placeholder: 'Expiry date'
            },
            cvv: {
                container: cardCvv,
                placeholder: 'CSC/CVV'
            }
        }
        }).then((res) => {
            hf = res

            hf.on('dna-payments-three-d-secure-show', () => {
                $threeDSecureModal.modal('show')
            })

            hf.on('dna-payments-three-d-secure-hide', () => {
                $threeDSecureModal.modal('hide')
            })
        }).catch((err) => {
    })
    console.log('payBtn =', payBtn)
    // Payment button submit
    payBtn.addEventListener('click', () => {
        
        startLoading()
        // submits card data to pay
        hf.submit({ paymentData: PAYMENT_DATA })
            .then((res) => {
                stopLoading()
                hf.clear()
                showResult(true)
                console.log('res', res)
            })
            .catch((err) => {
                stopLoading()

                if (err.code === 'NOT_VALID_CARD_DATA') {
                    showResult(false, err.message)                    
                } else {
                    showResult(false, err.message)
                    hf.clear()
                }
                console.log('err', err)
            })
        })

    // data
    hf.submit(
    {
            paymentData: 
            {
                currency: 'GBP',
                description: 'test transaction',
                paymentSettings: 
                {
                }, 
            customerDetails: 
            {
            },
        }
    })
    .then((res) => {
        hf.clear(),
        console.log(res),
        Livewire.emit('transactionSuccess',res)
    })
    .catch((err) => {
        if (err.code === 'INVALID_CARD_DATA') {
            // do something
        } else if (err.code === 'THREE_D_SECURE_ERROR') {
            // do something
        } else {
            // do something
        }
    })
    // Final Close
})  

Hey @sinnbeck, just wondering if you had any other thoughts on this one.

I wrote a quick if condition & its coming up as not seen each time.

var payBtn = document.getElementById("pay-btn");

    // ---------- BUTTON TEST -------------
    if(payBtn)
    {
        console.log('button seen')
    }
    else
    {
        console.log('button not seen')
    }

If it helps, the whole script is placed before the last div in the livewire view and have tried using @push('scripts') ... @endpush and without but no difference. :(

Thanks in advance.