@rebilly/instruments 3.12.3-beta.0 → 3.13.2-beta.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.12.3-beta.0",
+  "version": "3.13.2-beta.0",
   "author": "Rebilly",
+  "license": "MIT",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
-  "license": "MIT",
   "scripts": {
     "build": "yarn rollup -c --environment NODE_ENV:production",
     "dev": "yarn rollup -c --watch --environment NODE_ENV:development",
@@ -16,16 +16,13 @@
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.7",
     "@rebilly/risk-data-collector": "^2.3.0",
-    "autoprefixer": "^10.3.4",
-    "css": "^3.0.0",
     "jwt-decode": "^3.1.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.merge": "^4.6.2",
     "popostmate": "^1.6.4",
-    "postcss": "^8.4.5",
-    "rebilly-js-sdk": "^44.4.0",
+    "rebilly-js-sdk": "^47.3.1",
     "values.js": "^2.0.0"
   },
   "devDependencies": {

package/src/functions/destroy.js

@@ -6,13 +6,19 @@ export async function destroy({ state }) {
   // wait to allow for cancellation to catch any pending api requests
   const sleepMilliseconds = 1000;
   await sleep(sleepMilliseconds);
-  [...(state.iframeComponents || {})].forEach((iframe) => {
+  [
+    ...(state.iframeComponents?.form || []),
+    ...(state.iframeComponents?.summary || [])
+  ].forEach((iframe) => {
     iframe.destroy();
   });
 
   registeredListeners.removeAll(document);
 
-  state.iframeComponents = [];
+  state.iframeComponents = {
+    summary: [],
+    form: [],
+  };
   state.hasMounted = false;
 
   state.summary.textContent = '';

package/src/functions/mount/fetch-data.js

@@ -6,6 +6,7 @@ import { fetchSummary } from '../../storefront/summary';
 import { fetchInvoice as FetchInvoice } from '../../storefront/invoices';
 import { fetchTransaction as FetchTransaction } from '../../storefront/transactions';
 import { fetchAccount as FetchAccount } from '../../storefront/account';
+import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/payment-instruments';
 
 export class DataInstance {
   constructor({
@@ -108,11 +109,13 @@ export async function fetchData({
   // Dependency injectable functions
   fetchInvoice = FetchInvoice,
   fetchTransaction = FetchTransaction,
-  fetchAccount = FetchAccount
+  fetchAccount = FetchAccount,
+  fetchInstruments = FetchInstruments
 }) {
   try {
     let transaction = null;
     let account = null;
+    let availableInstruments = null;
     if (state.options?.transactionId) {
       transaction = await fetchTransaction({data: {
         id: state.options.transactionId
@@ -134,7 +137,10 @@ export async function fetchData({
     }
 
     if (state.options?.jwt) {
-      account = await fetchAccount({state});
+      [account, availableInstruments] = await Promise.all([
+        fetchAccount({state}),
+        fetchInstruments({state})
+      ]);
     }
 
     state.data = new DataInstance({
@@ -143,6 +149,7 @@ export async function fetchData({
       transaction,
       riskMetadata,
       account,
+      availableInstruments,
     });
 
     const [readyToPay, previewPurchase] = await Promise.all([

package/src/functions/mount/index.js

@@ -7,10 +7,11 @@ import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 import setupOptions from './setup-options';
 import setupFramepayInstance from './setup-framepay';
-import setupStyles from './setup-styles';
+import setupStylesVars from './setup-styles-vars';
 import setupI18n from './setup-i18n';
 import setupFramepayTheme from './setup-framepay-theme';
 import setupUserFlow from './setup-user-flow';
+import { showError } from '../../views/errors';
 
 /**
  * @typedef {object} Item
@@ -87,23 +88,26 @@ export async function mount({
     // Setup DOM
     state.form = setupElement({ element: 'form', options });
     state.summary = setupElement({ element: 'summary', options });
+    // hardcode max-width to not break UX
+    // PayPal button cannot exceed 750px;
+    state.form.style.maxWidth = '750px';
+    state.summary.style.maxWidth = '750px';
+
+    // Setup state
+    state.options = setupOptions({ options });
+    state.storefront = setupStorefront({ options });
+    state.mainStyleVars = setupStylesVars({ options });
+    state.options.themeFramepay = setupFramepayTheme({ state, options });
 
     // Setup loader
     state.loader.addDOMElement({ el: state.form });
     state.loader.addDOMElement({ section: 'summary', el: state.summary });
-    state.loader.startLoading({ section: 'summary', id: 'initSummary' });
-    state.loader.startLoading({ id: 'initForm' });
+    state.loader.startLoading({ state, section: 'summary', id: 'rebilly-instruments-summary' });
+    state.loader.startLoading({ state, id: 'rebilly-instruments-methods' });
 
-    // Setup state
-    state.options = setupOptions({ options });
-    state.storefront = setupStorefront({ options });
-    
-    state.mainStyle = await setupStyles({ options });
-    
     state.data = await fetchData({ state });
     Events.dataReady.dispatch(state.data);
     
-    state.options.themeFramepay = await setupFramepayTheme({ state, options });
     state.i18n = setupI18n({ state });
 
     await setupFramepay(state);
@@ -128,6 +132,7 @@ export async function mount({
     state.i18n({state});
     state.hasMounted = true;
   } catch (error) {
+    showError(error);
     throw error;
   }
 

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

@@ -29,23 +29,22 @@ describe('RebillyInstruments instance', () => {
     };
     await RenderMockRebillyInstruments(options);
 
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 100);
+    })
+
     // Mounts form and summary
     const summarySelector = document.querySelector('.summary-selector');
-    expect(summarySelector.innerHTML).toMatch('My Product');
+    expect(summarySelector.innerHTML).toContain('<iframe name="rebilly-instruments-summary" class="rebilly-instruments-iframe" loading="lazy" allow="payment" scrolling="no" src="https://forms.local.rebilly.dev:3000/summary"></iframe>');
 
     // Theme config overrides initial styles
-    const SUMMARY_CONTAINER = summarySelector.querySelector(
-      '.rebilly-instruments-content'
-    );
-    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual(
-      '#000'
-    );
+    const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];
 
-    // CSS config property overrides initial styles
-    const LINE_ITEM_TITLE = document.querySelector(
-      '.rebilly-instruments-summary-line-item-synopsis-title'
+    expect(STYLE_VARS.innerHTML).toMatch(
+      '--rebilly-colorBackground: #000;'
     );
-    expect(getComputedStyle(LINE_ITEM_TITLE).color).toEqual('rgb(0, 68, 212)');
 
     // Mounts default FramePay script
     const SCRIPTS = [...document.querySelectorAll('head script')];

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

@@ -1,6 +1,3 @@
-import css from 'css';
-import camelCase from 'lodash.camelcase';
-
 function processCSS(rawCss) {
   const cssMap = {};
  [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
@@ -26,101 +23,62 @@ function processCSS(rawCss) {
 }
 
 function replaceCssVars(rawCss) {
+  const CssVarsObj = {}
   processCSS(rawCss).forEach(([key, value]) => {
-    rawCss = rawCss.split(`var(${key})`).join(value);
+    CssVarsObj[key] = value;
   });
-
-  return rawCss;
+  return CssVarsObj;
 }
 
-const getStyleProps = (ast, selector) => {
-  const { rules } = ast.stylesheet;
+const getStyleProps = (obj, particle = '') => {
   const output =  {
-    color: null,
-    fontFamily: null,
-    fontSize: null,
-    lineHeight: null,
-    fontWeight: null,
-    background: null
-  }
-
-  for(let i = 0; i < rules.length; i += 1) {
-    const rule = rules[i];
-
-    if(rule.type === 'rule' && rule.selectors.includes(selector)) {
-      rule.declarations.forEach(decl => {
-        const propName = camelCase(decl.property);
-        if(typeof output[propName] !== 'undefined') {
-          output[propName] = decl.value;
-        }
-      })
-    }
+    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 async ({
+export default ({
   state,
   options = {}
 }) => {
   const fullCss = `
-    ${state.mainStyle}
+    ${state.mainStyleVars}
     ${options.css || ''}
   `;
 
-  const resolvedCss = replaceCssVars(fullCss);
-  const cssAst = css.parse(resolvedCss);
-
-  const cssSelectors = {
-    input: {
-      base: '.rebilly-instruments-form-field-input',
-      baseHover: '.rebilly-instruments-form-field-input:hover',
-      baseFocus: '.rebilly-instruments-form-field-input:focus',
-      basePlaceholder: '.rebilly-instruments-form-field-input::placeholder',
-      baseSelection: '.rebilly-instruments-form-field-input::selection',
-  
-      invalid: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input',
-      invalidHover: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover',
-      invalidFocus: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus',
-      invalidPlaceholder: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder',
-      invalidSelection: '.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection'
-    },
-    button: {
-      base: '.rebilly-instruments-button.rebilly-instruments-button-secondary',
-      baseHover: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover',
-      baseFocus: '.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active',
-  
-      active: '.rebilly-instruments-button',
-      activeHover: '.rebilly-instruments-button:not([disabled]):hover',
-      activeFocus: '.rebilly-instruments-button:not([disabled]):active',
-    }
-  }
+  const resolvedCssVarsObj = replaceCssVars(fullCss);
 
   const framepayStyle = {
     base: {
-      ...getStyleProps(cssAst, cssSelectors.input.base),
-      ':hover': getStyleProps(cssAst, cssSelectors.input.baseHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.input.baseFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.input.basePlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.input.baseSelection),
+      ...getStyleProps(resolvedCssVarsObj, 'input'),
+      ':hover': getStyleProps(resolvedCssVarsObj, 'inputHover'),
+      ':focus': getStyleProps(resolvedCssVarsObj, 'inputFocus'),
+      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputPlaceholder'),
+      '::selection': getStyleProps(resolvedCssVarsObj, 'inputSelection'),
     },
     invalid: {
-      ...getStyleProps(cssAst, cssSelectors.input.invalid),
-      ':hover': getStyleProps(cssAst, cssSelectors.input.invalidHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.input.invalidFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.input.invalidPlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.input.invalidSelection),
+      ...getStyleProps(resolvedCssVarsObj, 'inputError'),
+      ':hover': getStyleProps(resolvedCssVarsObj, 'inputErrorHover'),
+      ':focus': getStyleProps(resolvedCssVarsObj, 'inputErrorFocus'),
+      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputErrorPlaceholder'),
+      '::selection': getStyleProps(resolvedCssVarsObj, 'inputErrorSelection'),
     },
     buttons: {
       base: {
-        ...getStyleProps(cssAst, cssSelectors.button.base),
-        ':hover': getStyleProps(cssAst, cssSelectors.button.baseHover),
-        ':focus': getStyleProps(cssAst, cssSelectors.button.baseFocus),
+        ...getStyleProps(resolvedCssVarsObj, 'buttonSecondary'),
+        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryHover'),
+        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryActive'),
       },
       active: {
-        ...getStyleProps(cssAst, cssSelectors.button.active),
-        ':hover': getStyleProps(cssAst, cssSelectors.button.activeHover),
-        ':focus': getStyleProps(cssAst, cssSelectors.button.activeFocus),
+        ...getStyleProps(resolvedCssVarsObj, 'button'),
+        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonHover'),
+        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonActive'),
       }
     }
   }

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

@@ -5,7 +5,7 @@ export const defaults = {
   countryCode: 'US',
   locale: 'auto',
   theme: {
-    labels: 'floating'
+    labels: 'stacked'
   },
   paymentInstruments: {
     address: {
@@ -15,7 +15,7 @@ export const defaults = {
       show: [],
       require: []
     },
-    compactExpressInstruments: true,
+    compactExpressInstruments: false,
     googlePay: {
       displayOptions: {
         buttonColor: 'black',

package/src/functions/mount/{setup-styles.js → setup-styles-vars.js}

@@ -1,18 +1,20 @@
-import { mainStyle } from '../../style';
+import { mainStyleVars } from '../../style';
 import { addDOMElement } from '../../utils';
+import { minifyCss } from '../../style/utils/minifyCss';
 
-export default async ({
+export default ({
   options: {
     theme  =  {},
     css,
   }
 } = {}) => {
-  // Adds base stylesheet
-  const style = await mainStyle(theme || {});
+  // Adds base CSS vars stylesheet
+  const styleVars = mainStyleVars(theme || {});
+
   addDOMElement({
     element: 'style',
     attributes: { type: 'text/css' },
-    content: style,
+    content: minifyCss(styleVars),
     target: 'head'
   });
 
@@ -21,10 +23,10 @@ export default async ({
     addDOMElement({
       element: 'style',
       attributes: { type: 'text/css' },
-      content: css,
+      content: minifyCss(css),
       target: 'head'
     });
   }
 
-  return style;
+  return styleVars;
 }

package/src/functions/purchase.js

@@ -2,6 +2,7 @@ import { postPurchase, postPayment } from '../storefront/purchase';
 import Events from '../events';
 import { mountModal } from '../views/modal';
 import { DataInstance } from './mount/fetch-data';
+import { showError } from '../views/errors';
 
 export async function makePayment({ state, payload }) {
   const {
@@ -109,11 +110,7 @@ export async function purchase({ state, payload }) {
     }
     return fields;
   } catch (error) {
-    // TODO: Display error to customer
-    console.error(error);
-    if(error.status === 422) {
-      error.details.forEach(e => console.error(e));
-    }
+    showError(error);
     return error;
   }
 }

package/src/functions/setup.js

@@ -2,7 +2,8 @@ import { setupPaymentInstrument } from '../storefront/payment-instruments';
 import Events from '../events';
 import { mountModal } from '../views/modal';
 import { DataInstance } from './mount/fetch-data';
-
+import { showError } from '../views/errors';
+ 
 export async function setup({ state, payload }) {
   try {
     const {
@@ -56,11 +57,7 @@ export async function setup({ state, payload }) {
 
     return {instrument, transaction};
   } catch (error) {
-    // TODO: Display error to customer
-    console.error(error);
-    if(error.status === 422) {
-      error.details.forEach(e => console.error(e));
-    }
+    showError(error);
     return error;
   }
 }

package/src/functions/show.js

@@ -16,14 +16,14 @@ import { mountResult } from '../views/result';
 export async function show({ componentName, payload, state }) {
   switch (componentName) {
     case 'result':
-      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+      state.iframeComponents.form = state.iframeComponents.form.filter((iframe) => {
         iframe.destroy();
         return false;
       });
       mountResult({payload, state});
       break;
     case 'confirmation':
-      state.iframeComponents = state.iframeComponents.filter((iframe) => {
+      state.iframeComponents.form = state.iframeComponents.form.filter((iframe) => {
         iframe.destroy();
         return false;
       });

package/src/functions/show.spec.js

@@ -12,7 +12,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.push(iframeMock);
+    instance.state.iframeComponents.form.push(iframeMock);
 
     const payload = {
       test: 'value'
@@ -22,7 +22,7 @@ describe('RebillyInstruments show', () => {
 
     expect(mountResult).toBeCalledTimes(1);
     expect(mountResult).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents).toEqual([]);
+    expect(instance.state.iframeComponents.form).toEqual([]);
   });
 
   it('should show confirmation component', async () => {
@@ -31,7 +31,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.push(iframeMock);
+    instance.state.iframeComponents.form.push(iframeMock);
 
     const payload = {
       test: 'value'
@@ -41,7 +41,7 @@ describe('RebillyInstruments show', () => {
 
     expect(mountConfirmation).toBeCalledTimes(1);
     expect(mountConfirmation).toBeCalledWith({payload, state: instance.state});
-    expect(instance.state.iframeComponents).toEqual([]);
+    expect(instance.state.iframeComponents.form).toEqual([]);
   });
 
   it('should fail for non supported component', async () => {

package/src/functions/update.spec.js

@@ -31,7 +31,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
 
     await rebillyInstruments.update({ locale: 'ja' });
 
@@ -58,7 +58,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
 
     await rebillyInstruments.update({
       countryCode: 'ES'
@@ -83,7 +83,8 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.iframeComponents = [fakeIFrameComponent];
+    
+    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
 
     await rebillyInstruments.update({
       items: [

package/src/instance.js

@@ -18,7 +18,10 @@ export class InstrumentsState {
     this.summary = null;
     this.loader = new Loader();
     this.translate = new Translate();
-    this.iframeComponents = [];
+    this.iframeComponents = {
+      summary: [],
+      form: [],
+    };
     this.hasMounted = false;
   }
 }

package/src/loader/index.js

@@ -1,54 +1,86 @@
 import isDOMElement from '../utils/is-dom-element';
 
-export const loaderHTML = `
-  <div class="rebilly-instruments-loader is-active">
-    <div class="rebilly-instruments-loader-spinner"></div>
-    <span class="rebilly-instuments-loader-message"></span>
+export const summaryLoaderHTML = `
+  <div class="rebilly-instruments-summary-loader-total rebilly-instruments-loader-display-flex rebilly-instruments-loader-align-center rebilly-instruments-loader-justify-space-between">
+    <div><p class="is-el-loading">Total</p></div>
+    <p class="total is-el-loading">$99.99</p>
   </div>
+`;
+
+export const methodsLoaderHTML = `
+  <div class="rebilly-instruments-methods-loader">
+    <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
+    <div class="rebilly-instruments-divider">
+      <span class="rebilly-instruments-divider-label"><span class="is-el-loading">Divi</span></span>
+    </div>
+    <div class="rebilly-instruments-loader-display-flex rebilly-instruments-loader-justify-end">
+      <div class="rebilly-instruments-methods-loader-card-icon is-el-loading"></div>
+      <div class="rebilly-instruments-methods-loader-card-icon is-el-loading"></div>
+    </div>
+    <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
+    <div class="rebilly-instruments-methods-loader-form-fields">
+      <div class="rebilly-instruments-loader-form-label"><small class="is-el-loading">Card holder name</small></div>
+      <div class="rebilly-instruments-loader-form-el is-el-loading"></div>
+    </div>
+    <div class="rebilly-instruments-loader-form-el is-button">Continue</div> 
+  </div>
+`;
+
+const loaderContainer = (padding = '0px') => `
+  <div class="rebilly-instruments-loader is-active" style="padding: ${padding}"></div>
 `
 
+export const basicLoaderHTML = `
+  <div class="rebilly-instruments-loader-spinner"></div>
+`;
+
 export class Loader {
   constructor() {
     this.summary = [];
     this.form = [];
     this.modal = [];
     this.DOM = {
-      loading: loaderHTML
+      loaderContainer,
+      summaryLoaderHTML,
+      methodsLoaderHTML,
+      basicLoaderHTML
     };
   }
 
   addDOMElement({ section = 'form', el = null } = {}) {
     if (isDOMElement(el)) {
       el.style.position = 'relative';
-
       this.DOM[section] = el;
     }
   }
 
-  startLoading({state, section = 'form', id = '', message = null } = {}) {
-    const minHeight = '200px';
+  startLoading({section = 'form', id = ''} = {}) {
     this[section].push(id);
 
+    const rootEl = document.querySelector(':root');
+    const contentPadding = 2;
+    let minHeight = '240px';
+
     if (this.DOM?.[section]) {
-      if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-        this.DOM[section].innerHTML = this.DOM.loading;
+      let loaderEl = this.DOM[section].querySelector('.rebilly-instruments-loader');
+      const { padding, paddingTop, paddingBottom } = getComputedStyle(this.DOM?.[section]);
+      if (!loaderEl) {
+        this.DOM[section].innerHTML = loaderContainer(`${parseFloat(padding) + contentPadding}px`);
+        loaderEl = this.DOM[section].querySelector('.rebilly-instruments-loader');
+        if (section === 'form') {
+          loaderEl.insertAdjacentHTML('afterbegin', this.DOM.methodsLoaderHTML);
+          minHeight = getComputedStyle(rootEl).getPropertyValue('--rebilly-methodLoaderMinHeight');
+        } else if (section === 'summary') {
+          loaderEl.insertAdjacentHTML('afterbegin', this.DOM.summaryLoaderHTML);
+          minHeight = getComputedStyle(rootEl).getPropertyValue('--rebilly-summaryLoaderMinHeight');
+        }
       } else {
-        this.DOM[section]
-          .querySelector('.rebilly-instruments-loader')
-          .classList.add('is-active');
-      }
-      this.DOM[section].style.minHeight = minHeight; 
-    }
-
-    if (message) {
-      const loaderMessage = this.DOM[section].querySelector('.rebilly-instuments-loader-message');
-      if (loaderMessage) {
-        loaderMessage.innerHTML = message;
-        loaderMessage.style.marginTop = '10px';
-        loaderMessage.setAttribute('data-message-id', id);
-        loaderMessage.setAttribute('data-rebilly-i18n', message);
-        state.i18n({state});
+        if (id.includes('confirmation') || id.includes('result') || id.includes('modal')) {
+          loaderEl.innerHTML = this.DOM.basicLoaderHTML;
+        }
+        loaderEl.classList.add('is-active');
       }
+      this.DOM[section].style.minHeight = `calc(${minHeight} + ${paddingTop} + ${paddingBottom} + ${contentPadding * 2}px)`;
     }
   }
 
@@ -68,14 +100,6 @@ export class Loader {
         .classList.remove('is-active');
       this.DOM[section].style.minHeight = '';
     }
-
-    const loaderMessage = this.DOM[section].querySelector(`.rebilly-instuments-loader-message[data-message-id="${id}"]`);
-    if (loaderMessage) {
-      loaderMessage.innerHTML = null;
-      loaderMessage.style.marginTop = '0px';
-      loaderMessage.removeAttribute('data-message-id');
-      loaderMessage.removeAttribute('data-rebilly-i18n');
-    }
   }
 
   clearAll() {