Create Nonce outside of SquarePaymentForm Context

[MStreet3]

Hello,

I am attempting to solve a use case that seems relatively simple, but I can't get it to work within this library. Essentially, we have some users and they may have a payment method on file already. If that's the case we wish to give them the ability to change the card they charge. Setting the card, however, is just one piece of information we need.

I would like to await the card nonce on form submission and then complete submission.

The solution I came up with is to start submission by calling onCreateNonce and then complete the form submission process in a useEffect hook, but I'm curious if there's a better approach.

Here's a code sandbox showing my issue:

https://codesandbox.io/s/affectionate-butterfly-ngsyr?file=/src/App.js

• Is it possible to access onCreateNonce without wrapping the unrelated component branches in SquarePaymentForm? From my understanding, I'm pretty sure the the answer here is no.
• Is it possible to await a card nonce request?

Thanks for any suggestions.