diff --git a/src/paymentForm.ts b/src/paymentForm.ts index bac285b..401fcf3 100644 --- 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 index 2d216c5..243ecaf 100644 --- 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', () => {