ectoflow/vue-stripe-js

payment Element didn't mount normally

Closed this issue · 4 comments

mirabuck commented

Hi there,

Trying to use this library to add a payment element and I keep running into this error: "payment Element didn't mount normally". Do you have any guidance on what might cause this?

Many thanks!

bondgeek commented

Seeing the same error here. Any thoughts on this?

Seeing a similar question over on the Drupal forums, after a bunch of googling: https://www.drupal.org/project/commerce_stripe/issues/3443592

They at least track it down to the Stripe code -- but I have no idea how to resolve the issue

softbeehive commented

Hi,

an actual DOM element is created by the stripe library. You can trace what throws this error. For the payment element I suggest:

  1. Make sure stripe.js is loaded before you mount vue components
  2. Pass the correct type
<StripeElements
    v-if="stripeLoaded"
    ...
  >
    <StripeElement
      type="payment"
      ...
    />
</StripeElements>

For the reference, check the example https://github.com/ectoflow/vue-stripe-js/blob/main/examples/CardOnly.vue

bondgeek commented

Thanks @softbeehive -- that helps. I'll look through that example.

softbeehive commented

You are welcome to add your findings. Feel free to reopen the issue if you believe there is a bug in vue-stripe-js