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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.13.2-beta.0",
+  "version": "3.13.4-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,13 +16,16 @@
     "@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",
-    "rebilly-js-sdk": "^47.3.1",
+    "postcss": "^8.4.5",
+    "rebilly-js-sdk": "^44.4.0",
     "values.js": "^2.0.0"
   },
   "devDependencies": {

package/src/functions/destroy.js

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

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

@@ -6,7 +6,6 @@ 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({
@@ -109,13 +108,11 @@ export async function fetchData({
   // Dependency injectable functions
   fetchInvoice = FetchInvoice,
   fetchTransaction = FetchTransaction,
-  fetchAccount = FetchAccount,
-  fetchInstruments = FetchInstruments
+  fetchAccount = FetchAccount
 }) {
   try {
     let transaction = null;
     let account = null;
-    let availableInstruments = null;
     if (state.options?.transactionId) {
       transaction = await fetchTransaction({data: {
         id: state.options.transactionId
@@ -137,10 +134,7 @@ export async function fetchData({
     }
 
     if (state.options?.jwt) {
-      [account, availableInstruments] = await Promise.all([
-        fetchAccount({state}),
-        fetchInstruments({state})
-      ]);
+      account = await fetchAccount({state});
     }
 
     state.data = new DataInstance({
@@ -149,7 +143,6 @@ export async function fetchData({
       transaction,
       riskMetadata,
       account,
-      availableInstruments,
     });
 
     const [readyToPay, previewPurchase] = await Promise.all([

package/src/functions/mount/index.js

@@ -7,11 +7,10 @@ import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 import setupOptions from './setup-options';
 import setupFramepayInstance from './setup-framepay';
-import setupStylesVars from './setup-styles-vars';
+import setupStyles from './setup-styles';
 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
@@ -88,26 +87,23 @@ 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({ state, section: 'summary', id: 'rebilly-instruments-summary' });
-    state.loader.startLoading({ state, id: 'rebilly-instruments-methods' });
+    state.loader.startLoading({ section: 'summary', id: 'initSummary' });
+    state.loader.startLoading({ id: 'initForm' });
 
+    // 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);
@@ -132,7 +128,6 @@ export async function mount({
     state.i18n({state});
     state.hasMounted = true;
   } catch (error) {
-    showError(error);
     throw error;
   }
 

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

@@ -29,22 +29,23 @@ 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).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>');
+    expect(summarySelector.innerHTML).toMatch('My Product');
 
     // Theme config overrides initial styles
-    const STYLE_VARS = document.querySelectorAll('style[type="text/css"]')[0];
+    const SUMMARY_CONTAINER = summarySelector.querySelector(
+      '.rebilly-instruments-content'
+    );
+    expect(getComputedStyle(SUMMARY_CONTAINER).getPropertyValue('--rebilly-colorBackground')).toEqual(
+      '#000'
+    );
 
-    expect(STYLE_VARS.innerHTML).toMatch(
-      '--rebilly-colorBackground: #000;'
+    // CSS config property overrides initial styles
+    const LINE_ITEM_TITLE = document.querySelector(
+      '.rebilly-instruments-summary-line-item-synopsis-title'
     );
+    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,3 +1,6 @@
+import css from 'css';
+import camelCase from 'lodash.camelcase';
+
 function processCSS(rawCss) {
   const cssMap = {};
  [...rawCss.matchAll(/(--rebilly.*(?=:))[:\s](.*(?=;))/g)]
@@ -23,62 +26,101 @@ function processCSS(rawCss) {
 }
 
 function replaceCssVars(rawCss) {
-  const CssVarsObj = {}
   processCSS(rawCss).forEach(([key, value]) => {
-    CssVarsObj[key] = value;
+    rawCss = rawCss.split(`var(${key})`).join(value);
   });
-  return CssVarsObj;
+
+  return rawCss;
 }
 
-const getStyleProps = (obj, particle = '') => {
+const getStyleProps = (ast, selector) => {
+  const { rules } = ast.stylesheet;
   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`],
+    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;
+        }
+      })
+    }
   }
   return output;
 }
 
-export default ({
+export default async ({
   state,
   options = {}
 }) => {
   const fullCss = `
-    ${state.mainStyleVars}
+    ${state.mainStyle}
     ${options.css || ''}
   `;
 
-  const resolvedCssVarsObj = replaceCssVars(fullCss);
+  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 framepayStyle = {
     base: {
-      ...getStyleProps(resolvedCssVarsObj, 'input'),
-      ':hover': getStyleProps(resolvedCssVarsObj, 'inputHover'),
-      ':focus': getStyleProps(resolvedCssVarsObj, 'inputFocus'),
-      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputPlaceholder'),
-      '::selection': getStyleProps(resolvedCssVarsObj, 'inputSelection'),
+      ...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),
     },
     invalid: {
-      ...getStyleProps(resolvedCssVarsObj, 'inputError'),
-      ':hover': getStyleProps(resolvedCssVarsObj, 'inputErrorHover'),
-      ':focus': getStyleProps(resolvedCssVarsObj, 'inputErrorFocus'),
-      '::placeholder': getStyleProps(resolvedCssVarsObj, 'inputErrorPlaceholder'),
-      '::selection': getStyleProps(resolvedCssVarsObj, 'inputErrorSelection'),
+      ...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),
     },
     buttons: {
       base: {
-        ...getStyleProps(resolvedCssVarsObj, 'buttonSecondary'),
-        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryHover'),
-        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonSecondaryActive'),
+        ...getStyleProps(cssAst, cssSelectors.button.base),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.baseHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.baseFocus),
       },
       active: {
-        ...getStyleProps(resolvedCssVarsObj, 'button'),
-        ':hover': getStyleProps(resolvedCssVarsObj, 'buttonHover'),
-        ':focus': getStyleProps(resolvedCssVarsObj, 'buttonActive'),
+        ...getStyleProps(cssAst, cssSelectors.button.active),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.activeHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.activeFocus),
       }
     }
   }

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

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

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

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

package/src/functions/purchase.js

@@ -2,7 +2,6 @@ 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 {
@@ -110,7 +109,11 @@ export async function purchase({ state, payload }) {
     }
     return fields;
   } catch (error) {
-    showError(error);
+    // TODO: Display error to customer
+    console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
     return error;
   }
 }

package/src/functions/setup.js

@@ -2,8 +2,7 @@ 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 {
@@ -57,7 +56,11 @@ export async function setup({ state, payload }) {
 
     return {instrument, transaction};
   } catch (error) {
-    showError(error);
+    // TODO: Display error to customer
+    console.error(error);
+    if(error.status === 422) {
+      error.details.forEach(e => console.error(e));
+    }
     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.form = state.iframeComponents.form.filter((iframe) => {
+      state.iframeComponents = state.iframeComponents.filter((iframe) => {
         iframe.destroy();
         return false;
       });
       mountResult({payload, state});
       break;
     case 'confirmation':
-      state.iframeComponents.form = state.iframeComponents.form.filter((iframe) => {
+      state.iframeComponents = state.iframeComponents.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.form.push(iframeMock);
+    instance.state.iframeComponents.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.form).toEqual([]);
+    expect(instance.state.iframeComponents).toEqual([]);
   });
 
   it('should show confirmation component', async () => {
@@ -31,7 +31,7 @@ describe('RebillyInstruments show', () => {
       .mockReturnValue(Promise.resolve());
 
     const instance = new RebillyInstrumentsInstance();
-    instance.state.iframeComponents.form.push(iframeMock);
+    instance.state.iframeComponents.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.form).toEqual([]);
+    expect(instance.state.iframeComponents).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.form = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
 
     await rebillyInstruments.update({ locale: 'ja' });
 
@@ -58,7 +58,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
+    rebillyInstruments.state.iframeComponents = [fakeIFrameComponent];
 
     await rebillyInstruments.update({
       countryCode: 'ES'
@@ -83,8 +83,7 @@ describe('RebillyInstruments Update', () => {
         call
       }
     };
-    
-    rebillyInstruments.state.iframeComponents.form = [fakeIFrameComponent];
+    rebillyInstruments.iframeComponents = [fakeIFrameComponent];
 
     await rebillyInstruments.update({
       items: [

package/src/instance.js

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

package/src/loader/index.js

@@ -1,86 +1,54 @@
 import isDOMElement from '../utils/is-dom-element';
 
-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>
+export const loaderHTML = `
+  <div class="rebilly-instruments-loader is-active">
+    <div class="rebilly-instruments-loader-spinner"></div>
+    <span class="rebilly-instuments-loader-message"></span>
   </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 = {
-      loaderContainer,
-      summaryLoaderHTML,
-      methodsLoaderHTML,
-      basicLoaderHTML
+      loading: loaderHTML
     };
   }
 
   addDOMElement({ section = 'form', el = null } = {}) {
     if (isDOMElement(el)) {
       el.style.position = 'relative';
+
       this.DOM[section] = el;
     }
   }
 
-  startLoading({section = 'form', id = ''} = {}) {
+  startLoading({state, section = 'form', id = '', message = null } = {}) {
+    const minHeight = '200px';
     this[section].push(id);
 
-    const rootEl = document.querySelector(':root');
-    const contentPadding = 2;
-    let minHeight = '240px';
-
     if (this.DOM?.[section]) {
-      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');
-        }
+      if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
+        this.DOM[section].innerHTML = this.DOM.loading;
       } else {
-        if (id.includes('confirmation') || id.includes('result') || id.includes('modal')) {
-          loaderEl.innerHTML = this.DOM.basicLoaderHTML;
-        }
-        loaderEl.classList.add('is-active');
+        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});
       }
-      this.DOM[section].style.minHeight = `calc(${minHeight} + ${paddingTop} + ${paddingBottom} + ${contentPadding * 2}px)`;
     }
   }
 
@@ -100,6 +68,14 @@ 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() {