From 72a183186b841d8716fd43f10e17bd3c320d96d8 Mon Sep 17 00:00:00 2001 From: Nathan Schott Date: Wed, 20 Sep 2023 11:39:53 -0400 Subject: [PATCH] fix: components render inside external zoid iframes (#986) --- src/library/controllers/modal/setup.js | 13 +++++++++---- src/library/zoid/message/component.js | 3 ++- src/library/zoid/modal/component.js | 3 ++- src/library/zoid/treatments/component.js | 3 ++- src/utils/constants.js | 6 ++++++ src/utils/sdk.js | 7 +++++-- utils/devServerProxy/proxy.js | 2 +- 7 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/library/controllers/modal/setup.js b/src/library/controllers/modal/setup.js index 0a3e62371e..bf24513ce3 100644 --- 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 index df377f70bd..626c09c1ba 100644 --- 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 index 697ed14d70..294cae1436 100644 --- 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 index a4fe3659d3..68e85344aa 100644 --- 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 index ab374de62c..a3c7dbcbcb 100644 --- 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 index fa40489111..4f61b49cfd 100644 --- 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 index 625dbf133e..a5d36f1e0b 100644 --- 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 = ``; + const interfaceScript = ``; const initializerScript = `