Squarespace Checkout Customization

I’m a first time Squarespace user trying to inject JavaScript into my website so that I can customize the checkout button to redirect you to a form instead of the regular checkout. I’m having trouble getting it to actually work. There are no errors in the console. The result is still a direction to the default checkout page, and I’m expecting it to redirect to a form.

I’ve used the following code. I’ve injected it into the “Header” section of Code Injection. Does anyone know why this isn’t working or have any other script suggestions? I’ve checked the classes to make sure that they’re correct.

<script>
document.addEventListener("DOMContentLoaded", function() {
    function checkout() {
        window.location.href = '/checkout-form'; 
    }
    const checkoutButtons = document.querySelectorAll('d_v7cGDEhQylt5v3Moan sqs-editable-button sqs-button-element--primary cart-checkout-button');

    checkoutButtons.forEach(button => {
        button.addEventListener('click', checkout);
    });
});
</script>

The HTML used is:

<button aria-label="Checkout" class="d_v7cGDEhQylt5v3Moan sqs-editable-button sqs-button-element--primary cart-checkout-button" data-test="cart-button">Checkout</button>