Integrating a payment gateway Uncaught Type Error

[oli_d111]

Hi All

My JS knowledge isn’t amazing and was wondering if you kind folk might be able to point me in the direction of where i’m going wrong.
I’m trying to integrate a payment gateway for my app but i’m getting the dreaded Uncaught Type Error

Uncaught TypeError: Cannot read properties of undefined (reading 'submit') at HTMLInputElement.<anonymous>

The section in question is as follows:-

const PAYMENT_DATA = getPaymentData();
var payBtn = document.getElementById("pay-btn");
    // form.addEventListener("submit", function(event) 
    payBtn.addEventListener('click', () => 
    {
        startLoading()
        
        hf.submit({ paymentData: PAYMENT_DATA }) // THIS IS THE LINE IN QUESTION
        .then((res) => 
        {
            stopLoading()
            hf.clear()
            showResult(true)
            console.log('res', res)
            Livewire.emit('transactionSuccess',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)
        })
    });
        
    function getPaymentData() 
    {
        return  {
            currency: 'GBP',
            description: 'Car Service',
            paymentSettings: {
            terminalId: '211ea23d-3720-4ebe-8e43-200856771af1',
            returnUrl: 'https://test-pay.dnapayments.com/checkout/success.html',
            failureReturnUrl: 'https://test-pay.dnapayments.com/checkout/failure.html',
            callbackUrl: 'https://pay.dnapayments.com/checkout',
            failureCallbackUrl: 'https://testmerchant/order/1123/fail'
            },
            customerDetails: {
            accountDetails: {
                accountId: 'uuid000001'
            },
            billingAddress: {
                firstName: 'John',
                lastName: 'Doe',
                addressLine1: 'Fulham Rd',
                postalCode: 'SW6 1HS',
                city: 'London',
                country: 'GB'
            },
            deliveryDetails: {
                deliveryAddress: {
                firstName: 'John',
                lastName: 'Doe',
                streetAddress1: 'Fulham Rd',
                streetAddress2: 'Fulham',
                postalCode: 'SW6 1HS',
                city: 'London',
                phone: '0475662834',
                region: 'UKI',
                country: 'GB'
                }
            },
            email: 'demo@dnapayments.com'
            },
            deliveryType: 'service',
            invoiceId: '1234',
            amount: '5.00',
        }
    } 

Thank you in advance.

[m_hutley]

what’s hf ? It seems to be undefined.

[oli_d111]

Hey m_hutley, apologies, good spot, i had forgotten to declare let hf;. I’ve now done this but the card fields aren’t initialising which is a separate issue. I’ll try and get that one figured.

Thanks for your help.