createToken doesn't return anything and MollieComponentsError: Messenger can't be loaded Failed handshake

[paales]

I'm integrating the mollie components into our React frontend, but I'm running into some issues.

Video explaining the issue: https://d.pr/v/LzSMWr

The console.log you are seeing is from a piece of code that handles the form submission:

  const form = useFormGqlMutationCart(SetMolliePaymentMethodTokenOnCartDocument, {
    mode: 'onChange',
    defaultValues: { code },
    onBeforeSubmit: async (variables) => {
      const result = await mollie?.createToken()
      console.log(result)

      if (!result?.token || result?.error) {
        throw Error(`Error while requesting token`)
      }

      return { ...variables, token: result.token }
    },
  })

If I switch too fast between methods I get the following error:

Uncaught (in promise) MollieComponentsError: Messenger can't be loaded Failed handshake

Any suggestions how we can get this resolved?

[ls-srgjan-rakikj]

Hey @paales , hope you are doing well.

Did you manage to find a solution for this issue? Thanks in advance.

[Marinolinderhof]

@paales and @ls-srgjan-rakikj my guess is that is because you unmount components and then mount them short after that. The handshake is somewhat polled based and therefore when switching to quickly the handshake is can fail for now.

I will make a ticket on our side to look into this.

In the meantime, I would recommend not unmounting but hide the fields. (display: none;) Sorry for the inconvenience

[andyslack]

We are also having this issue on our Vue application.

When users first load the page it works fine, we mount the payment page. However if a user then navigates to another route and come back, it will not remount the page and we get this same error.

@Marinolinderhof you mentioned a fix your side but that was over 7 months ago?

[pixelbits-mk]

Same issue here