Cypress testing of 3D-secure inputs

Question

I have an angular application which uses Cardstream as a payment gateway and may also allow 3DSecure payments based on customer configuration. Cypress tests have been written for each part of the app but when the test step gets to the submit button an uncaught exception occurs and a log indicates the following problem: Error: No hostedfield data to tokenise! I suspect that it might be a timing issue or something similar but any attempts to mitigate have no effect. When using the application normally, no such errors occur and the transactions are always successful.

Typically the fields (which each contain an instance of an iframe with an input inside) are populated like this:

      cardExpiryDate(expiryDate) {
        return cy.get('#hostedfield-frame-2').then($iframe => {
          const $body = $iframe.contents().find('body');
    
          cy.wrap($body)
            .find('[name="cardExpiryDate"]')
            .type(expiryDate, {
              force: true,
            });
        });
      }

So far I've tried the following:

• adding a cy.wait() interval after the fields have been populated
• adding an assertion to each field following the type() command
• adding a blur() command after the text has been input

I have limited experience using Cypress but have read their documentation and searched exhaustively for a similar problem and not found anything relevant but am hoping that someone in this community might be able to provide some useful info. Thanks.