Don't use display:none to hide token form iframe

sequra · Jun 10, 2024 · 72418e0 · 72418e0
1 parent 9d32e49
commit 72418e0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/paymentForm.ts b/src/paymentForm.ts
@@ -37,10 +37,17 @@ const paymentForm = ({
       name: 'mufasa-iframe',
       src: url,
     });
+    const tokenFormStyles = !hidden ? {} : {
+      position: 'absolute',
+      height: '0px',
+      left: '-999px',
+      overflow: 'hidden',
+      opacity: '0',
+    };
     setElementStyles(mufasaIframe, {
       ...baseStyles,
       ...styles,
-      display: hidden ? 'none' : 'block'
+      ...tokenFormStyles,
     });
     if(className) {
       mufasaIframe.className = className;

diff --git a/src/tests/sequraPCI.test.ts b/src/tests/sequraPCI.test.ts
@@ -28,7 +28,13 @@ describe('SequraPCI', () => {
     test('mounts the iframe in the DOM, hidden', () => {
       paymentForm = SequraPCI.paymentForm({ url: emptyUrl }).mount('my-container', { hidden: true });
       const mufasaIframe = document.querySelector('iframe');
-      expect(mufasaIframe.style["display"]).toEqual("none");
+      expect(mufasaIframe).toHaveStyle({
+        position: 'absolute',
+        height: '0px',
+        left: '-999px',
+        overflow: 'hidden',
+        opacity: '0',
+      });
     });
 
     test('it uses custom styles', () => {