Unable to update payment element theme with a remount

[Scott-Fischer]

I noticed that your recommended way to update the CSS of the Payment Element (discussed here)

I'm actually totally okay with destroying the user input state, however, I'm having an interesting issue when trying to unmount and remount with the key directive. Whenever my watched value changes, I'm seeing v3:1 Uncaught (in promise) IntegrationError: Can only create one Element of type payment.

To test if the issue is simply being caused by a failure to unmount the component, I added this to my click event handler:

const paymentElement = elements.getElement('payment');
paymentElement.destroy();

This time, I see: Uncaught (in promise) IntegrationError: This Element has already been destroyed. Please create a new one.

This leads me to wonder if the problem is being caused by a bit of a race condition, where it's attempting to add mount the new component before removing the old one.

I created a reproducible example on code sandbox (bring your own stripe key + intent)

[joshnuss]

Interesting, maybe the unmounting in svelte should also destroy the component at the same time? Not sure, I'll try it out and get back to you.

[steveninety]

The solution is to use the StripeElements native update function which can take in the appearance object:

https://stripe.com/docs/js/elements_object/update

For some reason it took me ages to find out about this method, which is so much cleaner than fudging around with a combination of Svelte's and Stripe's mount/destroy functionalities (as you must have noticed)!

[joshnuss]

@Scott-Fischer Thanks for reporting, you're right that is should be updatable. @steveninety Thanks for proposing the solution.

I've just deployed a fix in #56, please give it a shot and let me know if you run into anything

[joshnuss]

This appears to be related to #60 & #61