fix: components render inside external zoid iframes (#986)

paypal · Sep 20, 2023 · 72a1831 · 72a1831
1 parent 4960125
commit 72a1831
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 10 deletions.
diff --git a/src/library/controllers/modal/setup.js b/src/library/controllers/modal/setup.js
@@ -1,6 +1,11 @@
-import stringStartsWith from 'core-js-pure/stable/string/starts-with';
-
-import { getInlineOptions, getGlobalState, awaitDOMContentLoaded, getAllBySelector, objectMerge } from '../../../utils';
+import {
+    getInlineOptions,
+    getGlobalState,
+    awaitDOMContentLoaded,
+    getAllBySelector,
+    objectMerge,
+    isZoidComponent
+} from '../../../utils';
 import Modal from './interface';
 import { getModalComponent } from '../../zoid/modal';
 
@@ -27,7 +32,7 @@ export default function setup() {
     }
 
     // Prevent auto render from firing inside zoid iframe
-    if (!stringStartsWith(window.name, '__zoid__')) {
+    if (!isZoidComponent()) {
         const handleContentLoaded = () => {
             // If merchant includes multiple SDK scripts, the 1st script will destroy itself
             // and its globalState before this runs causing the account to be undefined

diff --git a/src/library/zoid/message/component.js b/src/library/zoid/message/component.js
@@ -5,6 +5,7 @@ import { uniqueID, getCurrentScriptUID } from '@krakenjs/belter/src';
 import { create } from '@krakenjs/zoid/src';
 
 import {
+    TAG,
     getDisableSetCookie,
     getMeta,
     getEnv,
@@ -34,7 +35,7 @@ import containerTemplate from './containerTemplate';
 
 export default createGlobalVariableGetter('__paypal_credit_message__', () =>
     create({
-        tag: 'paypal-message',
+        tag: TAG.MESSAGE,
         url: getGlobalUrl('MESSAGE'),
         // eslint-disable-next-line security/detect-unsafe-regex
         domain: /\.paypal\.com(:\d+)?$/,

diff --git a/src/library/zoid/modal/component.js b/src/library/zoid/modal/component.js
@@ -5,6 +5,7 @@ import { create } from '@krakenjs/zoid/src';
 import { uniqueID, getCurrentScriptUID } from '@krakenjs/belter/src';
 
 import {
+    TAG,
     getDisableSetCookie,
     getMeta,
     getEnv,
@@ -32,7 +33,7 @@ import prerenderTemplate from './prerenderTemplate';
 
 export default createGlobalVariableGetter('__paypal_credit_modal__', () =>
     create({
-        tag: 'paypal-credit-modal',
+        tag: TAG.MODAL,
         url: getGlobalUrl('MODAL'),
         // eslint-disable-next-line security/detect-unsafe-regex
         domain: /\.paypal\.com(:\d+)?$/,

diff --git a/src/library/zoid/treatments/component.js b/src/library/zoid/treatments/component.js
@@ -4,6 +4,7 @@ import { node, dom } from '@krakenjs/jsx-pragmatic/src';
 import { getCurrentScriptUID } from '@krakenjs/belter/src';
 
 // Direct imports to avoid import cycle by importing from ../../../utils
+import { TAG } from '../../../utils/constants';
 import {
     getMeta,
     getEnv,
@@ -19,7 +20,7 @@ import { ppDebug } from '../../../utils/debug';
 
 export default createGlobalVariableGetter('__paypal_credit_treatments__', () =>
     create({
-        tag: 'paypal-credit-treatments',
+        tag: TAG.TREATEMENTS,
         url: getGlobalUrl('TREATMENTS'),
         // eslint-disable-next-line security/detect-unsafe-regex
         domain: /\.paypal\.com(:\d+)?$/,

diff --git a/src/utils/constants.js b/src/utils/constants.js
@@ -5,3 +5,9 @@ export const OFFER = {
     PAYPAL_CREDIT_INSTALLMENTS: 'PAYPAL_CREDIT_INSTALLMENTS',
     PAYPAL_CREDIT_NO_INTEREST: 'PAYPAL_CREDIT_NO_INTEREST'
 };
+
+export const TAG = {
+    MESSAGE: 'paypal-message',
+    MODAL: 'paypal-credit-modal',
+    TREATEMENTS: 'paypal-credit-treatments'
+};
diff --git a/src/utils/sdk.js b/src/utils/sdk.js
@@ -1,5 +1,4 @@
 /* eslint-disable eslint-comments/disable-enable-pair, no-else-return */
-import stringStartsWith from 'core-js-pure/stable/string/starts-with';
 import arrayFrom from 'core-js-pure/stable/array/from';
 
 import { isLocalStorageEnabled, getStorage as getBelterStorage } from '@krakenjs/belter/src';
@@ -21,6 +20,8 @@ import {
     getDisableSetCookie as getSDKDisableCookie
 } from '@paypal/sdk-client/src';
 
+import { TAG } from './constants';
+
 export function getDisableSetCookie() {
     if (__MESSAGES__.__TARGET__ === 'SDK') {
         return getSDKDisableCookie();
@@ -128,7 +129,9 @@ export function getLibraryVersion() {
 }
 
 export function isZoidComponent() {
-    return stringStartsWith(window.name, '__zoid__');
+    // Merchants may use `zoid` to place our components inside an IFrame
+    // so we ensure that we check for the tags of our components
+    return Object.values(TAG).some(tag => window.name.startsWith(`__zoid__${tag.replace(/-/g, '_')}`));
 }
 
 export function getStorage() {

diff --git a/utils/devServerProxy/proxy.js b/utils/devServerProxy/proxy.js
@@ -11,7 +11,7 @@ export default (app, server, compiler) => {
 
     app.get('/credit-presentment/experiments/local', (req, res) => {
         const { scriptUID } = req.query;
-        const interfaceScript = `<script>var interface = window.top.document.querySelector('[data-uid-auto="${scriptUID}"]').outerHTML; document.write(interface);</script>`;
+        const interfaceScript = `<script>var interface = (window.opener ?? window.parent).document.querySelector('[data-uid-auto="${scriptUID}"]').outerHTML; document.write(interface);</script>`;
         const initializerScript = `
             <script>
                 window.xprops.onReady({