Effective methods for eliminating Stripe's iframes

Question

Effective methods for eliminating Stripe's iframes

I am integrating Stripe Elements using vue-stripe-elements-plus on a single page application. I want to completely unload Stripe after the user leaves the credit card module, but it seems more complicated than expected.

Even after unloading it in the component's destroyed hook and removing the iframes added by Stripe:

destroyed () {
    this.$unloadScript('https://js.stripe.com/v3/');
    
    let stripeIframes = [
        document.querySelectorAll('[name^=__privateStripeMetricsController]'),
        document.querySelectorAll('[name^=__privateStripeController]'),
    ];

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

The iframes added by Stripe:

https://i.sstatic.net/qrj6J.png

reappear after some time (one of them in particular):

https://i.sstatic.net/LFgSz.png

It appears that this iframe is regenerated by Stripe's listeners attached to the window object during message events. Removing this listener is challenging as the handler function is nested inside an inaccessible iframe within another iframe.

Additionally, this listener triggers unwanted requests to the Stripe server:

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

javascript vue.js iframe stripe-payments

Answer 1

Answer №1

To execute the function `destroyed` after a delay of 1 second, you can utilize setTimeout(destroyed, 1000)

Answer 2

To execute the function `destroyed` after a delay of 1 second, you can utilize setTimeout(destroyed, 1000)

Answer 3

Answer №2

Instead of manually removing elements from the DOM, it is recommended to utilize the official destroy method of Stripe's element. This method will also clear all associated Stripe listeners.

You can implement this using a library like the following example:

<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>

Answer 4

Instead of manually removing elements from the DOM, it is recommended to utilize the official destroy method of Stripe's element. This method will also clear all associated Stripe listeners.

You can implement this using a library like the following example:

<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>

Effective methods for eliminating Stripe's iframes

Answer №1

Answer №2

Similar questions

creating a multi-tiered dropdown menu using both CSS and JavaScript

Utilizing destructuring and Object.entries for advanced formatting

Show an HTML email message on a webpage without disrupting the existing page layout

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

"The changes made to the list are not being accurately displayed by Angular's ng

When using the .append method in jQuery, the JSON array only displays the last value of the array when iterating through it with

Vue's innate lifecycle hook

Combining CSV data from multiple arrays into a single object array

Update not reflecting on global variable across all Phaser states

Transforming a class component into a functional component using React for a session

Can I install more than one instance of Framework7 on the same device?

Error Found: The function .setFromEuler() in THREE.Quaternion now requires an Euler rotation as input instead of a Vector3, along with its corresponding order

How come React.js is not displaying images from local URLs?

Modify a single parameter of an element in a Map

Managing uncaught exceptions in node.js

Rotation to a point in a circle using three.js

jQuery UI Autocomplete for web addresses

Setting up an Express route to return a res.json(data) object and showcasing the response in a Vue $HTTP call

Mastering sorting in AngularJS: ascending or descending, the choice is yours!

Tips on verifying the count with sequelize and generating a Boolean outcome if the count is greater than zero