How to generate a cryptogram before placing a woocommerce order?

Question

WordPress

I'm trying to implement my payment gateway through a third-party api.
There is a checkout script that collects data from the form and generates a cryptogram, which later needs to be uploaded to api.
Now the implementation of the story is as follows:

add_action( 'woocommerce_after_checkout_form', 'add_jscript_checkout');
 
    function add_jscript_checkout() {
      ?>
    <script>
      var checkout_form = jQuery('form.checkout');


 		checkout_form.on('checkout_place_order', function () {
// Это нужно, что бы затормозить отправку перед платежем. Создается поля с валуем 1 для условия, что бы потом изменить и продолжить с готовой криптограммой.
     if (jQuery('#confirm-order-flag').length == 0) {
         checkout_form.append('<input type="hidden" id="confirm-order-flag" name="confirm-order-flag" value="1">');
         checkout_form.append('<input type="hidden" id="crypto" autocomplete="off">');
     alert('Js сработал, дальше...');
     }

     this.createCryptogram = function () {
         var result = checkout.createCryptogramPacket();

         if (result.success) {
             document.getElementById("crypto").value == result.packet;
             alert(result.packet)
         }
         else {
             for (var msgName in result.messages) {
                 alert(result.messages[msgName]);
             }
         }
     };

     jQuery(function () {
         checkout = new cp.Checkout(
             "123123123123123",
             document.getElementById("PaymentForm"));
     });

     return true;
 });

jQuery(document.body).on('checkout_error', function () {
    var error_count = jQuery('.woocommerce-error li').length;

    if (error_count == 1) {
      
    }else{
        jQuery('.woocommerce-error li').each(function(){
            var error_text = jQuery(this).text();
            if (error_text == 'custom_notice'){
                jQuery(this).css('display', 'none');
            }
        });
    }
});
</script>
      <?php
    }

When submitting the form, the first condition works like a Swiss Army knife, the second one stops with an error:

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

It is not clear why it gives an ID error, if everything seems to be fine. I suggested that it might be a matter of loading the checkout form via ajax, probably >_<. When the checkout is loaded, it loads the data, although the hooks seem to be inside the form - "woocommerce_after_checkout_form".

Another question is, what can be a more efficient method to perform such generations?
But, the only thing in all this, before sending the order, you also need to wedge in 3d secure.
And this is also a big question.