I'm using Stripe Elements with vue-stripe-elements-plus on internal single page app. As there is no need to keep the stripe code running after user leaves change credit card module I want to unload Stripe pletely but it doesn't appear to be that easy.

After I unload it in ponent's destroyed hook and remove added iframes:

destroyed () {
    this.$unloadScript('/');
    //delete window.Stripe; // mented because this makes stripe add iframes twice

    let stripeIframes = [
        document.querySelectorAll('[name^=__privateStripeMetricsController]'),
        document.querySelectorAll('[name^=__privateStripeController]'),
    ];

    stripeIframes.forEach(iframes => iframes.forEach(iframe => {
         iframe.parentNode.removeChild(iframe);
    }));
},

iframes which were added by Stripe:

are reappearing again after a while (one of them):

Seems like this iframe is recreated by Stripe's listeners which were attached to window object on message event. I'm unable to remove this listener because the handler function is located in an iframe which is inside iframe, so the browser won't let me access its internals.

Moreover, this listener is making unwanted requests to stripe:

XHR finished loading: POST ";.

I'm using Stripe Elements with vue-stripe-elements-plus on internal single page app. As there is no need to keep the stripe code running after user leaves change credit card module I want to unload Stripe pletely but it doesn't appear to be that easy.

After I unload it in ponent's destroyed hook and remove added iframes:

destroyed () {
    this.$unloadScript('https://js.stripe./v3/');
    //delete window.Stripe; // mented because this makes stripe add iframes twice

    let stripeIframes = [
        document.querySelectorAll('[name^=__privateStripeMetricsController]'),
        document.querySelectorAll('[name^=__privateStripeController]'),
    ];

    stripeIframes.forEach(iframes => iframes.forEach(iframe => {
         iframe.parentNode.removeChild(iframe);
    }));
},

iframes which were added by Stripe:

are reappearing again after a while (one of them):

Seems like this iframe is recreated by Stripe's listeners which were attached to window object on message event. I'm unable to remove this listener because the handler function is located in an iframe which is inside iframe, so the browser won't let me access its internals.

Moreover, this listener is making unwanted requests to stripe:

XHR finished loading: POST "https://m.stripe./4".

• javascript
• vue.js
• iframe
• stripe-payments

Share Improve this question Follow edited Aug 10, 2022 at 14:04 Skatox 4,2841212 gold badges4545 silver badges4949 bronze badges asked Mar 12, 2019 at 10:16 van_folmertvan_folmert 4,5371010 gold badges5151 silver badges9797 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

You can use setTimeout(destroyed, 1000)

Instead of manually removing elements from DOM, you should use Stripe element's official destroy method. It should clear all Stripe listeners too.

With this lib, you can try something like this:

<template>
    <div ref="card" />
</template>
    
<script>
    let stripe = window.Stripe('pk_test_xxxxxxxxxxxx'),
        elements = stripe.elements(),
        card = undefined;
    
    export default {
        name: 'Payment',
        mounted() {
          card = elements.create('card');
          card.mount(this.$refs.card);
        },
        beforeDestroy() {
          card.destroy(this.$refs.card);
        },
    }
</script>