#bonnerearle_error

1 messages · Page 1 of 1 (latest)

formal acornBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1448316016730833009

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

near narwhal
#

The sample needs the test publishable key filling in before you run it
Press "Setup elements", fill in a valid card, press "Add card".

If you look in dev tools when you press "Add card" it will:
log a warning that submit needs to finish before calling createPaymentMethod "elements.submit() is pending: You must wait for this function’s promise to resolve (using await or .then) before calling stripe.createPaymentMethod()."
then we log the result returned from the submit method
then either the createPaymentMethod call succeeds, or sometimes errors with "elements.submit() must be called before stripe.createPaymentMethod(). Call elements.submit() as soon as your customer presses pay, prior to any asynchronous work."

#

The errors occur in both live and test

#

Separately we get the warning
"Unrecognized elements() parameter: rules is not a recognized parameter. This may cause issues with your integration in the future."
as we have specified a rule when initialising elements to add drop shadow on the currently selected element
the functionality continues to work despite the warning, how should we be adding the drop shadow to the elements element?

rough pumice
#

Hi there, juggling a couple of threads, looking into this shortly!

rough pumice
#

I was able to reproduce and see the warning, thanks for providing a clean reproduction! Digging further now

#

If you change your savePayment code to this it should resolve the issue:

      async function savePayment() {
        enableDisableConfirm(false, submitButton);
        await elements.submit();
        console.log(await createPaymentMethod());
      }

Since you're using the await syntax, you don't need to use .then to resolve promises

near narwhal
#

Thanks

#

While I've done promises in the past I haven't used async heavily, can you explain why this was going wrong with the original version?
Your response has dropped the error handling, is it safe to put that back in using a .catch() or should I use a try catch block?

rough pumice
#

Sure! The .then syntax expects a promise as an argument, which is not what is returned when you use the await keyword. There's no real downside to sticking to promises in my opinion, async/await is really a syntactical convenience. But if you do use async, then you shouldn't use .then. And yes, you would use a try/catch block with await, it doesn't have a special syntax to handle errors

formal acornBOT