[OMM-651] Change window size restrictios to container instead of iframe

recurly · Oct 11, 2022 · a9c0227 · a9c0227
1 parent 052c0e4
commit a9c0227
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/lib/recurly/frame.js b/lib/recurly/frame.js
@@ -48,14 +48,6 @@ export class Frame extends Emitter {
     type: Frame.TYPES.WINDOW
   };
 
-  static DIMENSIONS = {
-    '01': { height: '400px', width: '250px' },
-    '02': { height: '400px', width: '390px' },
-    '03': { height: '600px', width: '500px' },
-    '04': { height: '400px', width: '600px' },
-    '05': { height: '100%', width: '100%' }
-  }
-
   constructor ({ recurly, path, payload = {}, ...options }) {
     super();
     this.recurly = recurly;
@@ -240,14 +232,6 @@ export class Frame extends Emitter {
   createIFrame () {
     const { container, url } = this;
     const iframe = document.createElement('iframe');
-    const dimensions = this.constructor.DIMENSIONS;
-    const windowSize = this.recurly.config.challengeWindowSize;
-
-    const selectedWindowSize = dimensions[windowSize];
-    if (!selectedWindowSize) {
-      const validWindowSizes = Object.keys(dimensions).join(', ');
-      throw new Error(`Invalid challengeWindowSize. Expected any of ${validWindowSizes}, got ${windowSize}`);
-    }
 
     if (!(container instanceof HTMLElement)) {
       throw new Error(`Invalid container. Expected HTMLElement, got ${typeof container}`);
@@ -258,7 +242,7 @@ export class Frame extends Emitter {
     iframe.setAttribute('border', '0');
     iframe.setAttribute('frameborder', '0');
     iframe.setAttribute('scrolling', 'no');
-    iframe.setAttribute('style', `background: transparent; width: ${ dimensions[windowSize].width }; height: ${ dimensions[windowSize].height };`);
+    iframe.setAttribute('style', 'background: transparent; width: 100%; height: 100%;');
     container.appendChild(iframe);
     this.iframe = iframe;
     debug('created iframe and attached to', container);

diff --git a/lib/recurly/risk/three-d-secure/strategy/strategy.js b/lib/recurly/risk/three-d-secure/strategy/strategy.js
@@ -5,6 +5,13 @@ export default class ThreeDSecureStrategy extends ReadinessEmitter {
 
   static preflight () {}
   static PREFLIGHT_TIMEOUT = 30000;
+  static FRAME_DIMENSIONS = {
+    '01': { height: '400px', width: '250px' },
+    '02': { height: '400px', width: '390px' },
+    '03': { height: '600px', width: '500px' },
+    '04': { height: '400px', width: '600px' },
+    '05': { height: '100%', width: '100%' }
+  }
 
   constructor ({ threeDSecure, actionToken }) {
     super();
@@ -18,13 +25,21 @@ export default class ThreeDSecureStrategy extends ReadinessEmitter {
 
   get container () {
     if (this._container) return this._container;
-    const { parent } = this;
+
+    const { parent, threeDSecure: { risk: { recurly: { config: { challengeWindowSize } } } } } = this;
+    const frameDimensions = this.constructor.FRAME_DIMENSIONS;
+    const selectedWindowSize = frameDimensions[challengeWindowSize];
+    if (!selectedWindowSize) {
+      const validWindowSizes = Object.keys(frameDimensions).join(', ');
+      throw new Error(`Invalid challengeWindowSize. Expected any of ${validWindowSizes}, got ${challengeWindowSize}`);
+    }
+
     // eslint-disable-next-line
     if (!parent) return;
     const container = this._container = document.createElement('div');
     container.setAttribute('data-recurly', 'three-d-secure-container');
-    container.style.height = '100%';
-    container.style.width = '100%';
+    container.style.height = selectedWindowSize.height;
+    container.style.width = selectedWindowSize.width;
     parent.appendChild(container);
     return container;
   }