test.liquid

{% assign current_timestamp = 'now' | date: '%s' %}
{% assign secret_string = customer.id | append: customer.email | append: shop.permanent_domain | append: current_timestamp %}
{% assign hmac = secret_string | hmac_sha256: "xxxxxxxxxxxxxxxxx" %}
<script>
    const replaceButtonWithForm = () => {
        const elements = document.querySelectorAll('a[href="/products/box"]');
        if (elements.length > 0) {
          const checkoutForm = `
                   <form action="https://pensa.pastaevangelists.com/api/v1/checkout" method="post" novalidate id="cart_form">
                       <input name="timestamp" type="hidden" value="{{ current_timestamp }}">
                       <input name="hmac" type="hidden" value="{{ hmac }}">
                       <input name="shop_name" type="hidden" value="{{ shop.permanent_domain }}">
                       <input name="shopify_customer_id" type="hidden" value="{{ customer.id }}">
                       <input name="email" type="hidden" value="{{ customer.email }}">
                   </form> 
                  `;
          const accountForm = `
                   <form action="https://pensa.pastaevangelists.com/api/v1/account" method="post" novalidate id="pomodoro_account_form">
                       <input name="timestamp" type="hidden" value="{{ current_timestamp }}">
                       <input name="hmac" type="hidden" value="{{ hmac }}">
                       <input name="shop_name" type="hidden" value="{{ shop.permanent_domain }}">
                       <input name="shopify_customer_id" type="hidden" value="{{ customer.id }}">
                       <input name="email" type="hidden" value="{{ customer.email }}">
                   </form> 
                  `;
          document.querySelector('body').insertAdjacentHTML('beforeend', checkoutForm);
          document.querySelector('body').insertAdjacentHTML('beforeend', accountForm);
          elements.forEach(el => {
            el.href = 'https://plan.pastaevangelists.com/';
            el.addEventListener('click', e => {
                if(e.target.id === 'show-modal') {
                    return;
                }
                e.preventDefault();
                document.querySelector('#cart_form').submit();
            });
          });
        }
    };

    document.addEventListener("DOMContentLoaded", function() {
        replaceButtonWithForm();
    });
</script>