Multiple instances?

[timsayshey]

I have a Vue app and I've been using this web component for the last year and it's been great. But a new feature I'm adding requires us to add another payment form on another tab of the app, but having multiple instances causes the following error. Is there any way to achieve multiple instances or can I destroy one element and add another when switching tabs? Thanks!

Uncaught (in promise) IntegrationError: Can only create one Element of type card.
    at v3:1:308191
    at t.<anonymous> (v3:1:309005)
    at t.create (v3:1:82366)
    at StripeElements.createElement (stripe-elements.ts:391:36)
    at StripeElements.initElement (stripe-elements.ts:377:26)
    at async StripeElements.init (StripeBase.ts:369:5)
(anonymous) @ v3:1
(anonymous) @ v3:1
(anonymous) @ v3:1
createElement @ stripe-elements.ts:391
initElement @ stripe-elements.ts:377
await in initElement (async)
updated @ StripeBase.ts:267
_$didUpdate @ reactive-element.ts:1378
performUpdate @ reactive-element.ts:1343
scheduleUpdate @ reactive-element.ts:1261
__enqueueUpdate @ reactive-element.ts:1233
await in __enqueueUpdate (async)
requestUpdate @ reactive-element.ts:1208
__initialize @ reactive-element.ts:946
ReactiveElement @ reactive-element.ts:931
LitElement @ lit-element.ts:115
StripeBase @ StripeBase.ts:72
StripeElements @ stripe-elements.ts:173
createElement @ runtime-dom.esm-bundler.js:19
mountElement @ runtime-core.esm-bundler.js:5182
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
patchBlockChildren @ runtime-core.esm-bundler.js:5427
patchElement @ runtime-core.esm-bundler.js:5319
processElement @ runtime-core.esm-bundler.js:5167
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5773
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
callWithErrorHandling @ runtime-core.esm-bundler.js:158
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
(anonymous) @ runtime-core.esm-bundler.js:5810
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
trigger @ reactivity.esm-bundler.js:335
set2 @ reactivity.esm-bundler.js:487
changeStep @ ShareForm.vue:12
_createVNode.onClick._cache.<computed>._cache.<computed> @ ShareForm.vue:150
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278

[bennypowers]

destroy and recreate seems like the way to go

[timsayshey]

Cool, I ran into an issue with that though. When I get an instance of <stripe-elements/>, the JS object doesn't have a destroy or recreate function. Any ideas?

[bennypowers]

stripeElementsEl.remove() doesn't do it?

[timsayshey]

So I could only find reset() which kind of worked but ultimately the issue was that the tabs were displayed with v-show instead of v-if so they components weren't being unmounted in Vue which is why we had 2 Stripe Elements displaying at the same time causing the issue. Switching to v-if fixed everything! Thanks for your help.