Integrating 3rd party iframe into HTML Form/ Form Actions

Question

I am building a PaaS package using a Golang backend (https://gunstorewebsite.com/) with admin functionality and marketing pages (Fiber). The backend is designed to be a CMS to a web of customer template websites example (https://examplegsfirestore1.netlify.app/) that work as basically a Shopify for licensed gun dealers.

The issue I am having is integrating the 3rd party credit card processor into the checkout. Specifically, getting a return ticket_id from the embedded form action i frame from the processor which itself is from Commerce. I wrote an example website (for the checkout functionality iframe to pop up it needs to be refreshed) outlining the problem with an accompanying public GitHub where I would like to post the solution once it's found.

I know there needs to be a listener on it but everywhere I have tried it hasn't worked or isn't "seeing" the application. Still has on:click={handlePaymentSubmit} on it but not working there either. I keep getting null values on the ticket_id

              <hr class="mt-4">
          <h4 class="mb-3">Payment</h4>  
          <small class="text-muted">Testing Card info: 4111 1111 1111 1111 exp 10/25 cvc 999 any valid zipcode</small>              
          <input type="hidden" id="tokenvalue" name="token" bind:value="{client_token}">
          <div id="payment">                   
          <!-- Elements will create input elements here -->
          </div>
          {#if browser}

          <script>                   
              var client_token = document.getElementById('tokenvalue').value;
              console.log('tokenValue', client_token)
              
              var elements = new Commerce.elements(client_token);
              elements.create({
              container: '#payment', // Required
              theme: 'default',
              showReceipt: false, // shows a receipt page after payment
              environment: 'sandbox',
              view: 'card-single-field',
              language: 'en-us',
              defaultCountry: 'US',
              //showSubmitButton: false //default: true
              }
              );  
              
              elements.on('submit', function (event) {
                  console.log(event);
              });

              function handlePaymentSubmit() {
                  // This code will be executed when the "Place Order" button is clicked
                  // Use elements.submit() to submit the payment form
                  elements.submit();
              }

              </script> 
          {/if} 

          {#if !browser}
          <p>Payment system has not loaded</p>
          {/if}
          <hr class="mb-4">

          <button class="btn btn-custom btn-lg btn-block" on:click={handlePaymentSubmit} type="submit">Place Order</button>
      </form>

I've tried an event listener about a dozen different ways similar to:

  function handlePaymentSubmit() {
  elements.submit().then(function(result) {
  if (result.status === 'approved') {
      // Transaction approved, you can handle success here
  } else {
      // Transaction declined, handle accordingly
      alert('Transaction Declined');
  }
  });

}

i suspect that the answer is somehere in the enhance method of form actions as the form submit would have to wait on the iframe submission result