@rebilly/instruments 4.5.0 → 4.6.0

package/src/functions/mount/get-lead-source-data.spec.js

@@ -1,32 +1,32 @@
 import { getLeadSourceData } from './get-lead-source-data';
 
 export const mockLocation = (url) => {
-  const location = new URL(url);
-  delete window.location;
-  window.location = location;
+    const location = new URL(url);
+    delete window.location;
+    window.location = location;
 };
 
 describe('getLeadSourceData', () => {
-  it('should return an object with a path property that matches the current URL', () => {
-    const result = getLeadSourceData();
-    expect(result.path).toBe(window.location.href);
-  });
+    it('should return an object with a path property that matches the current URL', () => {
+        const result = getLeadSourceData();
+        expect(result.path).toBe(window.location.href);
+    });
 
-  it('should return the path without the query if the query is longer than 255 characters', () => {
-    const query = Array(300).fill('a').join('');
+    it('should return the path without the query if the query is longer than 255 characters', () => {
+        const query = Array(300).fill('a').join('');
 
-    const pathWithoutQuery = 'http://www.example.com/path';
-    mockLocation(`${pathWithoutQuery}?${query}`);
+        const pathWithoutQuery = 'http://www.example.com/path';
+        mockLocation(`${pathWithoutQuery}?${query}`);
 
-    const result = getLeadSourceData();
-    expect(result.path).toBe(pathWithoutQuery);
-  });
+        const result = getLeadSourceData();
+        expect(result.path).toBe(pathWithoutQuery);
+    });
 
-  it('should add the query parameters to the returned object', () => {
-    const query = 'utm_source=google&utm_medium=cpc&utm_campaign=example';
-    mockLocation(`http://www.example.com/path?${query}`);
+    it('should add the query parameters to the returned object', () => {
+        const query = 'utm_source=google&utm_medium=cpc&utm_campaign=example';
+        mockLocation(`http://www.example.com/path?${query}`);
 
-    expect(getLeadSourceData()).toMatchInlineSnapshot(`
+        expect(getLeadSourceData()).toMatchInlineSnapshot(`
       {
         "campaign": "example",
         "medium": "cpc",
@@ -34,5 +34,5 @@ describe('getLeadSourceData', () => {
         "source": "google",
       }
     `);
-  });
+    });
 });

package/src/functions/mount/index.js

@@ -16,82 +16,90 @@ import { showError } from '../../views/errors';
 
 /** See src/data/options-schema for options structure */
 export async function mount({
-  setupFramepay = setupFramepayInstance,
-  ...options
+    setupFramepay = setupFramepayInstance,
+    ...options
 } = {}) {
-  try {
-    state.data = {};
-    state.options = {};
+    try {
+        state.data = {};
+        state.options = {};
 
-    // Setup options
-    state.options = setupOptions({ options });
+        // Setup options
+        state.options = setupOptions({ options });
 
-    // Setup DOM
-    state.form = setupElement({ element: 'form' });
-    state.summary = setupElement({ element: 'summary' });
-    // hardcode max-width to not break UX
-    // PayPal button cannot exceed 750px;
-    state.form.style.maxWidth = '750px';
-    if (state.summary) {
-      state.summary.style.maxWidth = '750px';
-    }
+        // Setup DOM
+        state.form = setupElement({ element: 'form' });
+        state.summary = setupElement({ element: 'summary' });
+        // hardcode max-width to not break UX
+        // PayPal button cannot exceed 750px;
+        state.form.style.maxWidth = '750px';
+        if (state.summary) {
+            state.summary.style.maxWidth = '750px';
+        }
 
-    // Setup state
-    state.storefront = setupStorefront();
-    state.mainStyleVars = setupStylesVars();
-    state.options.themeFramepay = setupFramepayTheme();
+        // Setup state
+        state.storefront = setupStorefront();
+        state.mainStyleVars = setupStylesVars();
+        state.options.themeFramepay = setupFramepayTheme();
 
-    // Setup loader
-    state.loader.addDOMElement({ el: state.form });
-    state.loader.addDOMElement({ section: 'summary', el: state.summary });
-    state.loader.startLoading({ section: 'summary', id: 'rebilly-instruments-summary' });
-    state.loader.startLoading({ id: 'rebilly-instruments-form' });
+        // Setup loader
+        state.loader.addDOMElement({ el: state.form });
+        state.loader.addDOMElement({ section: 'summary', el: state.summary });
+        state.loader.startLoading({
+            section: 'summary',
+            id: 'rebilly-instruments-summary',
+        });
+        state.loader.startLoading({ id: 'rebilly-instruments-form' });
 
-    const [data] = await Promise.all([
-      fetchData(),
-      setupFramepay()
-    ]);
-    state.data = data;
-    Events.dataReady.dispatch(state.data);
+        const [data] = await Promise.all([fetchData(), setupFramepay()]);
+        state.data = data;
+        Events.dataReady.dispatch(state.data);
 
-    state.i18n = setupI18n();
+        state.i18n = setupI18n();
 
-    // Update state options from data
-    if ((!state.options.websiteId) && state.data.transaction?.websiteId) {
-      state.options.websiteId = state.data.transaction.websiteId;
-    } else if ((!state.options.websiteId) && state.data.invoice?.websiteId) {
-      state.options.websiteId = state.data.invoice.websiteId;
-    }
-    if (state.data.transaction && state.data.transaction?.type === 'setup') {
-      state.options.transactionType = 'setup';
-    }
+        // Update state options from data
+        if (!state.options.websiteId && state.data.transaction?.websiteId) {
+            state.options.websiteId = state.data.transaction.websiteId;
+        } else if (!state.options.websiteId && state.data.invoice?.websiteId) {
+            state.options.websiteId = state.data.invoice.websiteId;
+        }
+        if (
+            state.data.transaction &&
+            state.data.transaction?.type === 'setup'
+        ) {
+            state.options.transactionType = 'setup';
+        }
 
-    // Mount content
-    if (state.form) {
-      mountForm()
-        .then(() => determineFirstView());
-    }
-    if (state.summary) {
-      mountSummary();
-    }
-    state.i18n({state});
-    state.hasMounted = true;
+        // Mount content
+        if (state.form) {
+            mountForm().then(() => determineFirstView());
+        }
+        if (state.summary) {
+            mountSummary();
+        }
+        state.i18n({ state });
+        state.hasMounted = true;
 
-    const invoiceId = state.options?.invoiceId || state.data?.transaction?.invoiceId;
-    if(invoiceId && state.data.invoice.isPaid) {
-      state.loader.stopLoading({id: 'rebilly-instruments-form'});
-      removeForm();
-      showError(state.translate.getTranslation('form.error.invoiceIsPaid'), false);
-    }
+        const invoiceId =
+            state.options?.invoiceId || state.data?.transaction?.invoiceId;
+        if (invoiceId && state.data.invoice.isPaid) {
+            state.loader.stopLoading({ id: 'rebilly-instruments-form' });
+            removeForm();
+            showError(
+                state.translate.getTranslation('form.error.invoiceIsPaid'),
+                false,
+            );
+        }
 
-    if (!data.readyToPay?.length) {
-      state.loader.stopLoading({id: 'rebilly-instruments-form'});
-      showError(state.translate.getTranslation('form.error.noPaymentMethods'))
+        if (!data.readyToPay?.length) {
+            state.loader.stopLoading({ id: 'rebilly-instruments-form' });
+            showError(
+                state.translate.getTranslation('form.error.noPaymentMethods'),
+            );
+        }
+    } catch (error) {
+        showError(error);
+        throw error;
     }
-  } catch (error) {
-    showError(error);
-    throw error;
-  }
 
-  setupUserFlow({state});
+    setupUserFlow({ state });
 }

package/src/functions/mount/mount.spec.js

@@ -1,85 +1,96 @@
-import {RenderMockRebillyInstruments} from 'tests/mocks/rebilly-instruments-mock';
+import { RenderMockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
 import { sleep } from '@/utils';
 
 describe('RebillyInstruments instance', () => {
-  it('should inject HTML to the merchant\'s website', async () => {
-    const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
-    const framePayStyleUrl = 'https://framepay.rebilly.com/rebilly.css';
+    it("should inject HTML to the merchant's website", async () => {
+        const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
+        const framePayStyleUrl = 'https://framepay.rebilly.com/rebilly.css';
 
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      locale: 'auto',
-      items: [
-        {
-          planId: 'test-plan-id-1',
-          quantity: 1
-        }
-      ],
-      theme: {
-        colorBackground: '#000'
-      },
-      css: `
+        const options = {
+            form: '.form-selector',
+            summary: '.summary-selector',
+            locale: 'auto',
+            items: [
+                {
+                    planId: 'test-plan-id-1',
+                    quantity: 1,
+                },
+            ],
+            theme: {
+                colorBackground: '#000',
+            },
+            css: `
       .rebilly-instruments-summary-line-item-synopsis-title {
         color: rgb(0, 68, 212);
       }
       `,
-      _dev: {
-        framePayStyleLink: framePayStyleUrl
-      },
-    };
-    await RenderMockRebillyInstruments(options);
-    
-    const sleepMilliseconds = 1000;
-    await sleep(sleepMilliseconds);
+            _dev: {
+                framePayStyleLink: framePayStyleUrl,
+            },
+        };
+        await RenderMockRebillyInstruments(options);
 
-    // Mounts form and summary
-    const summarySelector = document.querySelector('.summary-selector');
-    const iframe = summarySelector.querySelector('iframe');
-    expect(iframe.getAttribute('name')).toEqual('rebilly-instruments-summary');
-    expect(iframe.getAttribute('class')).toEqual('rebilly-instruments-iframe');
-    expect(iframe.getAttribute('loading')).toEqual('lazy');
-    expect(iframe.getAttribute('allow')).toEqual('payment');
-    expect(iframe.getAttribute('src')).toEqual('https://forms.test.rebilly.dev?name=rebilly-instruments-summary');
+        const sleepMilliseconds = 1000;
+        await sleep(sleepMilliseconds);
 
-    // Theme config overrides initial styles
-    const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];
+        // Mounts form and summary
+        const summarySelector = document.querySelector('.summary-selector');
+        const iframe = summarySelector.querySelector('iframe');
+        expect(iframe.getAttribute('name')).toEqual(
+            'rebilly-instruments-summary',
+        );
+        expect(iframe.getAttribute('class')).toEqual(
+            'rebilly-instruments-iframe',
+        );
+        expect(iframe.getAttribute('loading')).toEqual('lazy');
+        expect(iframe.getAttribute('allow')).toEqual('payment');
+        expect(iframe.getAttribute('src')).toEqual(
+            'https://forms.test.rebilly.dev?name=rebilly-instruments-summary',
+        );
 
-    expect(STYLE_VARS.innerHTML).toMatch(
-      '--rebilly-colorBackground: #000;'
-    );
+        // Theme config overrides initial styles
+        const STYLE_VARS = document.querySelectorAll(
+            'style[type="text/css"]',
+        )[0];
 
-    // Mounts default FramePay script
-    const SCRIPTS = [...document.querySelectorAll('head script')];
-    const FRAMEPAY_SCRIPT = SCRIPTS.find(
-      (script) => script.src === framePayScriptUrl
-    );
-    expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl);
+        expect(STYLE_VARS.innerHTML).toMatch(
+            '--rebilly-colorBackground: #000;',
+        );
 
-    // Mounts _dev FramePay style
-    const STYLE_LINKS = [...document.querySelectorAll('head link')];
-    const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
+        // Mounts default FramePay script
+        const SCRIPTS = [...document.querySelectorAll('head script')];
+        const FRAMEPAY_SCRIPT = SCRIPTS.find(
+            (script) => script.src === framePayScriptUrl,
+        );
+        expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl);
 
-    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
-  });
+        // Mounts _dev FramePay style
+        const STYLE_LINKS = [...document.querySelectorAll('head link')];
+        const FRAMEPAY_STYLE = STYLE_LINKS.find(
+            (script) => script.href === framePayStyleUrl,
+        );
 
-  it('should mount with JWT pruchase data', async () => {
-    // Use https://www.jwt.io to help encode and decode JWT
-    const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ';
+        expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
+    });
 
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      jwt,
-    };
+    it('should mount with JWT pruchase data', async () => {
+        // Use https://www.jwt.io to help encode and decode JWT
+        const jwt =
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ';
 
-    const instance = await RenderMockRebillyInstruments(options);
+        const options = {
+            form: '.form-selector',
+            summary: '.summary-selector',
+            jwt,
+        };
 
-    expect(instance.state.options).toEqual(
-      expect.objectContaining({
-        transactionId: 'test-transaction-id',
-        organizationId: 'test-organization-id'
-      })
-    );
-  });
+        const instance = await RenderMockRebillyInstruments(options);
+
+        expect(instance.state.options).toEqual(
+            expect.objectContaining({
+                transactionId: 'test-transaction-id',
+                organizationId: 'test-organization-id',
+            }),
+        );
+    });
 });

package/src/functions/mount/setup-element.js

@@ -1,29 +1,29 @@
 import { processPropertyAsDOMElement } from '../../utils';
 import state from '../../state';
 
-export default ({element = ''}) => {
-  const {options} = state;
-  
-  if (element !== 'form' && element !== 'summary') {
-    throw new Error('element must be "form" or "summary"');
-  }
+export default ({ element = '' }) => {
+    const { options } = state;
 
-  const getProp = () => {
-    if (options[element]) {
-      return options[element]
+    if (element !== 'form' && element !== 'summary') {
+        throw new Error('element must be "form" or "summary"');
     }
-    switch(element) {
-      case 'summary':
-        return '.rebilly-instruments-summary'
-      case 'form':
-      default:
-          return '.rebilly-instruments'
-    }
-  }
 
-  return processPropertyAsDOMElement({
-    prop: getProp(),
-    propName: element,
-    isRequired: ['form'].includes(element)
-  });
-}
+    const getProp = () => {
+        if (options[element]) {
+            return options[element];
+        }
+        switch (element) {
+            case 'summary':
+                return '.rebilly-instruments-summary';
+            case 'form':
+            default:
+                return '.rebilly-instruments';
+        }
+    };
+
+    return processPropertyAsDOMElement({
+        prop: getProp(),
+        propName: element,
+        isRequired: ['form'].includes(element),
+    });
+};

package/src/functions/mount/setup-framepay-theme.js

@@ -1,86 +1,104 @@
 import state from '../../state';
 
 function processCSS(rawCss) {
-  const cssMap = {};
- [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
-   .forEach(item => {
-     cssMap[item[1]] = item[2].trim();
-   });
- 
- function parseValue(value) {
-   const cssVariables = value.match(/var\((.+?)\)/g);
-   if(cssVariables) {
-     let cssValue = value;
-     cssVariables.forEach(variable => {
-       const cssVarName = variable.match(/\((.*)\)/i)[1];
-       cssValue = value.replace(variable, cssMap[cssVarName]);
-     });
-     return parseValue(cssValue);
-   }
-   return value
- }
+    const cssMap = {};
+    [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)].forEach(
+        (item) => {
+            cssMap[item[1]] = item[2].trim();
+        },
+    );
 
- return Object.entries(cssMap)
-   .map(([key, value]) => [key, parseValue(value)]);
+    function parseValue(value) {
+        const cssVariables = value.match(/var\((.+?)\)/g);
+        if (cssVariables) {
+            let cssValue = value;
+            cssVariables.forEach((variable) => {
+                const cssVarName = variable.match(/\((.*)\)/i)[1];
+                cssValue = value.replace(variable, cssMap[cssVarName]);
+            });
+            return parseValue(cssValue);
+        }
+        return value;
+    }
+
+    return Object.entries(cssMap).map(([key, value]) => [
+        key,
+        parseValue(value),
+    ]);
 }
 
 function replaceCssVars(rawCss) {
-  const CssVarsObj = {}
-  processCSS(rawCss).forEach(([key, value]) => {
-    CssVarsObj[key] = value;
-  });
-  return CssVarsObj;
+    const CssVarsObj = {};
+    processCSS(rawCss).forEach(([key, value]) => {
+        CssVarsObj[key] = value;
+    });
+    return CssVarsObj;
 }
 
 const getStyleProps = (obj, particle = '') => {
-  const output =  {
-    color: obj[`--rebilly-${particle}ColorText`],
-    fontFamily: obj[`--rebilly-${particle}FontFamily`],
-    fontSize: obj[`--rebilly-${particle}FontSize`],
-    fontWeight: obj[`--rebilly-${particle}FontWeight`],
-    lineHeight: obj[`--rebilly-${particle}FontLineHeight`],
-    background: obj[`--rebilly-${particle}ColorBackground`],
-    boxShadow: obj[`--rebilly-${particle}BoxShadow`],
-  }
-  return output;
-}
+    const output = {
+        color: obj[`--rebilly-${particle}ColorText`],
+        fontFamily: obj[`--rebilly-${particle}FontFamily`],
+        fontSize: obj[`--rebilly-${particle}FontSize`],
+        fontWeight: obj[`--rebilly-${particle}FontWeight`],
+        lineHeight: obj[`--rebilly-${particle}FontLineHeight`],
+        background: obj[`--rebilly-${particle}ColorBackground`],
+        boxShadow: obj[`--rebilly-${particle}BoxShadow`],
+    };
+    return output;
+};
 
 export default () => {
-  const fullCss = `
+    const fullCss = `
     ${state.mainStyleVars}
     ${state.options?.css || ''}
   `;
 
-  const resolvedCssVarsObj = replaceCssVars(fullCss);
+    const resolvedCssVarsObj = replaceCssVars(fullCss);
 
-  const framepayStyle = {
-    base: {
-      ...getStyleProps(resolvedCssVarsObj, 'input'),
-      ':hover': getStyleProps(resolvedCssVarsObj, 'inputHover'),
-      ':focus': getStyleProps(resolvedCssVarsObj, 'inputFocus'),
-      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputPlaceholder'),
-      '::selection': getStyleProps(resolvedCssVarsObj, 'inputSelection'),
-    },
-    invalid: {
-      ...getStyleProps(resolvedCssVarsObj, 'inputError'),
-      ':hover': getStyleProps(resolvedCssVarsObj, 'inputErrorHover'),
-      ':focus': getStyleProps(resolvedCssVarsObj, 'inputErrorFocus'),
-      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputErrorPlaceholder'),
-      '::selection': getStyleProps(resolvedCssVarsObj, 'inputErrorSelection'),
-    },
-    buttons: {
-      base: {
-        ...getStyleProps(resolvedCssVarsObj, 'buttonSecondary'),
-        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryHover'),
-        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryActive'),
-      },
-      active: {
-        ...getStyleProps(resolvedCssVarsObj, 'button'),
-        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonHover'),
-        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonActive'),
-      }
-    }
-  }
+    const framepayStyle = {
+        base: {
+            ...getStyleProps(resolvedCssVarsObj, 'input'),
+            ':hover': getStyleProps(resolvedCssVarsObj, 'inputHover'),
+            ':focus': getStyleProps(resolvedCssVarsObj, 'inputFocus'),
+            '::placeholder': getStyleProps(
+                resolvedCssVarsObj,
+                'inputPlaceholder',
+            ),
+            '::selection': getStyleProps(resolvedCssVarsObj, 'inputSelection'),
+        },
+        invalid: {
+            ...getStyleProps(resolvedCssVarsObj, 'inputError'),
+            ':hover': getStyleProps(resolvedCssVarsObj, 'inputErrorHover'),
+            ':focus': getStyleProps(resolvedCssVarsObj, 'inputErrorFocus'),
+            '::placeholder': getStyleProps(
+                resolvedCssVarsObj,
+                'inputErrorPlaceholder',
+            ),
+            '::selection': getStyleProps(
+                resolvedCssVarsObj,
+                'inputErrorSelection',
+            ),
+        },
+        buttons: {
+            base: {
+                ...getStyleProps(resolvedCssVarsObj, 'buttonSecondary'),
+                ':hover': getStyleProps(
+                    resolvedCssVarsObj,
+                    'buttonSecondaryHover',
+                ),
+                ':focus': getStyleProps(
+                    resolvedCssVarsObj,
+                    'buttonSecondaryActive',
+                ),
+            },
+            active: {
+                ...getStyleProps(resolvedCssVarsObj, 'button'),
+                ':hover': getStyleProps(resolvedCssVarsObj, 'buttonHover'),
+                ':focus': getStyleProps(resolvedCssVarsObj, 'buttonActive'),
+            },
+        },
+    };
 
-  return framepayStyle;
-}
+    return framepayStyle;
+};

package/src/functions/mount/setup-framepay.js

@@ -1,10 +1,14 @@
 import state from '../../state';
 
-export default async function setupFramepay () {
-    const {_dev} = state.options || {};
+export default async function setupFramepay() {
+    const { _dev } = state.options || {};
     const urls = {
-        script: _dev?.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js',
-        style: _dev?.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css',
+        script:
+            _dev?.framePayScriptLink ||
+            'https://framepay.rebilly.com/rebilly.js',
+        style:
+            _dev?.framePayStyleLink ||
+            'https://framepay.rebilly.com/rebilly.css',
     };
 
     return new Promise((resolve) => {
@@ -15,7 +19,7 @@ export default async function setupFramepay () {
 
         const framepayScript = document.createElement('script');
         framepayScript.setAttribute('src', urls.script);
-        
+
         framepayScript.onload = () => resolve();
         document.head.append(framepayScript);
     });