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

package/src/views/common/iframe/base-iframe.js

@@ -1,6 +1,6 @@
 import Postmate from 'popostmate';
 import { SUPPORTED_METHODS } from '../../method-selector/get-payment-methods';
-import { basicLoaderHTML } from '../../../loader';
+import { loaderHTML } from '../../../loader';
 
 export default class BaseIframe {
   constructor({
@@ -45,14 +45,13 @@ export default class BaseIframe {
       appendChild: (iframe) => {
         iframe.setAttribute('loading', 'lazy');
         iframe.setAttribute('allow', 'payment');
-        iframe.setAttribute('scrolling', 'no');
         iframe.allowPaymentRequest = true;
         this.container.appendChild(iframe);
       },
     };
 
     if (SUPPORTED_METHODS.includes(this.name)) {
-      this.container.insertAdjacentHTML('beforeend', basicLoaderHTML);
+      this.container.insertAdjacentHTML('beforeend', loaderHTML);
     }
 
     const component = await new Postmate({

package/src/views/common/iframe/event-listeners.js

@@ -1,6 +1,5 @@
 import camelCase from 'lodash.camelcase';
 import Events from '../../../events';
-import { showError } from '../../errors';
 
 export function dispatchRebillyInsturmentEventHandler(iframe) {
   iframe.component.on(`${iframe.name}-dispatch`, ({ event, detail }) => {
@@ -14,13 +13,15 @@ export function resizeComponentHandler(iframe) {
   });
 }
 
-export function stopLoaderHandler(iframe, data) {
-  iframe.component.on(`${iframe.name}-stop-loading`, (id) => {
-    let {section} = data;
-    if (!section) {
-      section = id.includes('summary') ? 'summary' : 'form';
-    }
-    data.loader?.stopLoading({ section, id });
+export function stopLoaderHandler(iframe, data = { section: 'form' }) {
+  const iframeLoader = iframe.container.querySelectorAll('.rebilly-instruments-loader.is-active');
+
+  if (iframeLoader && iframeLoader.length) {
+    iframeLoader.forEach(loader => loader.classList.remove('is-active'));
+  }
+  
+  iframe.component.on(`${iframe.name}-stop-loading`, (id = null) => {
+    data.loader?.stopLoading({ section: data.section, id: id || data.id });
   });
 }
 
@@ -40,7 +41,3 @@ export function displayOverlay(iframe) {
     }
   });
 }
-
-export function showErrorHandler(iframe) {
-  iframe.component.on(`${iframe.name}-show-error`, showError);
-}

package/src/views/common/iframe/method-iframe.js

@@ -3,8 +3,7 @@ import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
   stopLoaderHandler,
-  displayOverlay,
-  showErrorHandler
+  displayOverlay
 } from './event-listeners';
 
 export class MethodIframe extends BaseIframe {
@@ -20,6 +19,5 @@ export class MethodIframe extends BaseIframe {
       id
     });
     displayOverlay(this);
-    showErrorHandler(this);
   }
 }

package/src/views/common/iframe/modal-iframe.js

@@ -3,8 +3,7 @@ import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
   changeIframeSrcHandler,
-  stopLoaderHandler,
-  showErrorHandler
+  stopLoaderHandler
 } from './event-listeners';
 
 export class ModalIframe extends BaseIframe {
@@ -19,9 +18,8 @@ export class ModalIframe extends BaseIframe {
     stopLoaderHandler(this, {
       loader,
       section: 'modal',
-      id: this.name
+      id: 'modal-content'
     });
-    showErrorHandler(this);
 
     // Close modal via postmate
     this.component.on(`${this.name}-close`, (...args) => {

package/src/views/common/iframe/view-iframe.js

@@ -2,8 +2,7 @@ import BaseIframe from './base-iframe';
 import {
   dispatchRebillyInsturmentEventHandler,
   resizeComponentHandler,
-  stopLoaderHandler,
-  showErrorHandler,
+  stopLoaderHandler
 } from './event-listeners';
 
 export class ViewIframe extends BaseIframe {
@@ -15,6 +14,5 @@ export class ViewIframe extends BaseIframe {
     dispatchRebillyInsturmentEventHandler(this);
     resizeComponentHandler(this);
     stopLoaderHandler(this, { loader });
-    showErrorHandler(this);
   }
 }

package/src/views/confirmation.js

@@ -1,6 +1,7 @@
 import { purchase } from '../functions/purchase';
 import { setup } from '../functions/setup';
 import { ViewIframe } from './common/iframe';
+import { replaceContent } from './common/render-utilities';
 import { updateMethodSelector } from './method-selector';
 import { updateSummary } from './summary';
 
@@ -15,14 +16,9 @@ export async function mountConfirmation({ payload: instrument, state }) {
     updateSummary({ state, instrument });
   }
 
-  const contentElement = state.form.querySelector('.rebilly-instruments-content');
-  contentElement.insertAdjacentHTML('afterend', baseConfirmationHTML);
+  replaceContent(state.form, baseConfirmationHTML);
 
-  const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
-  methodSelectorElement.style.visibility = 'hidden';
-  methodSelectorElement.style.height = '0px';
-
-  state.loader.startLoading({ id: 'rebilly-instruments-confirmation' });
+  state.loader.startLoading({ id: 'confirmation' });
 
   const container = document.querySelector('.rebilly-instruments-confirmation');
 
@@ -31,7 +27,7 @@ export async function mountConfirmation({ payload: instrument, state }) {
   const model = {
     options: state.options,
     data: state.data.toPostmatesModel(),
-    mainStyleVars: state.mainStyleVars,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -54,7 +50,7 @@ export async function mountConfirmation({ payload: instrument, state }) {
   });
 
   iframe.component.on('choose-another-method', () => {
-    state.iframeComponents.form = state.iframeComponents.form.filter((item) => {
+    state.iframeComponents = state.iframeComponents.filter((item) => {
       if (item.name === iframe.name) {
         item.destroy();
         return false;
@@ -64,9 +60,8 @@ export async function mountConfirmation({ payload: instrument, state }) {
     if (state.data.isPurchase) {
       updateSummary({ state });
     }
-    updateMethodSelector({ state, mainStyleVars: state.mainStyleVars });
-    state.form.querySelector('.rebilly-instruments-confirmation').remove();
+    updateMethodSelector({ state, mainStyle: state.mainStyle });
   });
 
-  state.iframeComponents.form.push(iframe);
+  state.iframeComponents.push(iframe);
 }

package/src/views/method-selector/express-methods/apple-pay.js

@@ -0,0 +1,92 @@
+import Events from '../../../events';
+
+const browserIsSafari = () => window.ApplePaySession;
+
+export default function mountApplePay({
+  state,
+  METHOD_ID,
+  METHOD_TYPE,
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
+}) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  const digitalWallet = state.options.digitalWallet.applePay;
+
+  function mountApplePayButton() {
+    if(!container.children.length) {
+      Rebilly.applePay.mount(`.rebilly-instruments-${METHOD_ID}-method`);
+    }
+    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+  }
+
+  // Hack: The correct way to do this is to accept the options via the framepay package
+  // Will remove once these options are added to framepay
+  function updateBtnStyling() {
+    const applePayButton = document.querySelector('#rebilly-apple-pay-button');
+    applePayButton.style.margin = '0px';
+    applePayButton.style.width = '100%';
+    applePayButton.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+  }
+
+  if(!browserIsSafari()) {
+    if(EXPRESS_METHODS.length === 1) {
+      EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+    }
+    state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+    container.style.display = 'none';
+    return;
+  } 
+
+  container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
+
+  if (!Rebilly.initialized) {
+    const options = {
+      transactionData: digitalWallet.transactionData,
+      methods: state.data.readyToPay,
+      applePay: digitalWallet.applePayDisplayOptions,
+      organizationId: state.options.organizationId
+    }
+    if (state.options.jwt && !state.options.publishableKey) {
+      options.jwt = state.options.jwt;
+      options.sandbox = state.options.apiMode === 'sandbox';
+    } else {
+      options.publishableKey = state.options.publishableKey;
+    }
+    Rebilly.initialize(options);
+  } else {
+    mountApplePayButton();
+    updateBtnStyling();
+  }
+
+  Rebilly.on('ready', () => {
+    mountApplePayButton();
+    updateBtnStyling();
+  });
+
+  // HOTFIX: Hardcoded, use env variables in the future
+  const redirectUrl = state.options.apiMode === 'sandbox'
+    ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
+    : 'https://forms.secure-payments.app/approval-url?close=true';
+
+  Rebilly.on('token-ready', (token) => {
+    const instrumentReadyPayload = {
+      websiteId: state.options.websiteId,
+      items: state.options.items,
+      paymentInstruction: {
+        token: token.id,
+      },
+      billingAddress: token.billingAddress,
+      redirectUrl,
+      _raw: token
+    }
+    if (!token.shippingAddress) {
+      instrumentReadyPayload.deliveryAddress = token.shippingAddress;
+    }
+
+    Events.instrumentReady.dispatch(instrumentReadyPayload);
+  });
+
+  Rebilly.on('error', error => {
+    console.error(error)
+  });
+}

package/src/views/method-selector/express-methods/index.js

@@ -0,0 +1,25 @@
+import { MethodIframe } from '../../common/iframe';
+
+export default async function mountExpressMethod({ state, METHOD_ID }) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {
+    options: state.options,
+    data: state.data.toPostmatesModel()
+  };
+
+  const iframe = await new MethodIframe({
+    name: METHOD_ID,
+    url: `${paymentMethodsUrl}/${METHOD_ID}`,
+    container,
+    model
+  });
+
+  iframe.bindEventListeners({
+    loader: state.loader
+  });
+
+  state.iframeComponents.push(iframe);
+}

package/src/views/method-selector/get-payment-methods.js

@@ -9,6 +9,7 @@ const isExpressMethod = ({ method, feature }) => (
 
 const isSupportedMethod = ({ method }) => SUPPORTED_METHODS.includes(method);
 
+// TODO: just loader is used. We could simplify signature
 export function getPaymentMethods({ state }) {
   const result = {
     EXPRESS_METHODS: [],

package/src/views/method-selector/index.js

@@ -1,14 +1,13 @@
 /* eslint-disable no-undef */
 import { collectData } from '@rebilly/risk-data-collector';
 import { getPaymentMethods } from './get-payment-methods';
-import { fetchData } from '../../functions/mount/fetch-data';
-import { ViewIframe } from '../common/iframe';
 import { mountExpressMethods } from './mount-express-methods';
 import { generateDigitalWallet } from './generate-digital-wallet';
+import { MountMethods } from './mount-methods';
+import { fetchData } from '../../functions/mount/fetch-data';
 
 export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 <div class="rebilly-instruments-content">
-  <div id="rebilly-instruments-error"></div>
   <div class="rebilly-instruments-method-selector ${compactExpressInstruments ? 'has-express-compact' : ''}">
     <div class="rebilly-instruments-express-methods ${
       compactExpressInstruments ? 'is-compact' : ''
@@ -24,67 +23,81 @@ export const baseMethodSelectorHTML = (compactExpressInstruments) => `
 </div>
 `;
 
-export async function mountMethodSelector({ state }) {
+export function mountMethodSelector({ state }) {
   const { EXPRESS_METHODS, METHODS } = getPaymentMethods({ state });
 
-  const methodSelectorElement = state.form.querySelector('.rebilly-instruments-method-selector');
-  if (methodSelectorElement) {
-    methodSelectorElement.style.visibility = 'visible';
-    methodSelectorElement.style.height = 'auto';
-  } else {
-    state.form.innerHTML += baseMethodSelectorHTML(
-      state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
-    );
-  }
+  state.form.innerHTML += baseMethodSelectorHTML(
+    state.options.paymentInstruments.compactExpressInstruments && EXPRESS_METHODS.length
+  );
 
-  const METHODS_CONTAINER = document.querySelector('.rebilly-instruments-methods');
-  const EXPRESS_METHODS_CONTAINER = document.querySelector('.rebilly-instruments-express-methods-container');
+  const EXPRESS_METHODS_CONTAINER = document.querySelector(
+    '.rebilly-instruments-express-methods-container'
+  );
+  const METHODS_DIVIDER = document.querySelector(
+    '.rebilly-instruments-divider'
+  );
+  METHODS_DIVIDER.style.display =
+    METHODS.length && EXPRESS_METHODS.length ? 'block' : 'none';
+  const METHODS_CONTAINER = document.querySelector(
+    '.rebilly-instruments-methods'
+  );
 
-  if(EXPRESS_METHODS.length) {
-    if (!methodSelectorElement) {
-      state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
-      mountExpressMethods({
-        state,
-        methods: EXPRESS_METHODS,
-        container: EXPRESS_METHODS_CONTAINER,
-      });
-    }
-  } else {
-    EXPRESS_METHODS_CONTAINER.style.display = 'none';
-    document.querySelector('.rebilly-instruments-divider')
-      .style.display = 'none';
-  }
+  state.options.digitalWallet = generateDigitalWallet({state, EXPRESS_METHODS});
 
   if (METHODS.length) {
-    const model = {
-      options: state.options,
-      data: state.data.toPostmatesModel(),
-      mainStyleVars: state.mainStyleVars,
-    };
-    const { paymentMethodsUrl } = state.options._computed;
-
-    const iframe = await new ViewIframe({
-      name: 'rebilly-instruments-methods',
-      url: `${paymentMethodsUrl}`,
-      container: METHODS_CONTAINER,
-      model
+    MountMethods({
+      state,
+      METHODS_CONTAINER,
+      METHODS
     });
-    iframe.bindEventListeners({loader: state.loader});
-    state.iframeComponents.form.push(iframe);
   } else {
     METHODS_CONTAINER.style.display = 'none';
   }
+
+  if (EXPRESS_METHODS.length) {
+    mountExpressMethods({
+      state,
+      EXPRESS_METHODS,
+      EXPRESS_METHODS_CONTAINER
+    });
+  } else {
+    EXPRESS_METHODS_CONTAINER.parentNode.style.display = 'none';
+  }
+
+  if (!METHODS.length && !EXPRESS_METHODS.length) {
+    state.form.innerHTML = `
+      <p data-rebilly-i18n="form.error.noPaymentMethods">
+        No payment methods available for this transaction, please contact support.
+      <p>
+    `;
+    state.form.style.minHeight = 'auto';
+  }
+
+  state.translate.translateItems();
+
+  state.loader.stopLoading({ id: 'initForm' });
 }
 
 export async function updateMethodSelector({ state }) {
-  state.loader.startLoading({ id: 'rebilly-instruments-methods' });
-
+  state.loader.startLoading({ id: 'initForm' });
   const { riskMetadata } = await collectData();
+
   state.data = await fetchData({ state, riskMetadata });
 
   if (state.data.transaction && state.data.transaction?.type === 'setup') {
     state.options.transactionType = 'setup';
   }
 
+  state.form
+    .querySelectorAll(':not(.rebilly-instruments-confirmation)')
+    .forEach((element) => {
+      if (
+        !element.classList.contains('rebilly-instruments-loader') &&
+        !element.classList.contains('rebilly-instruments-loader-spinner')
+      ) {
+        element.remove();
+      }
+    });
+
   mountMethodSelector({ state });
 }

package/src/views/method-selector/method-selector.spec.js

@@ -114,7 +114,7 @@ describe('Summary component', () => {
 
     await updateMethodSelector({
       state,
-      mainStyleVars: 'any main style'
+      mainStyle: 'any main style'
     });
   });
 });

package/src/views/method-selector/mount-express-methods.js

@@ -1,81 +1,41 @@
 import mountExpressMethod from './express-methods';
-import {generateFramepayConfig} from './generate-framepay-config'
+import mountApplePay from './express-methods/apple-pay';
 import { getMethodData } from './get-method-data';
-import Events from '../../events';
 
-const browserIsSafari = () => window.ApplePaySession;
-
-export async function mountExpressMethods({
+export function mountExpressMethods({
   state,
-  methods,
-  container
+  EXPRESS_METHODS,
+  EXPRESS_METHODS_CONTAINER
 }) {
-  const methodIds = methods.map((expressMethod) => {
+  // A child div for each method must be created before mounting.
+  // Any DOM operation (innerHTML, append, etc) done on the parent div (EXPRESS_METHODS_CONTAINER) in between
+  // the two Postmate's instantiation (1 parent, 1 child) will cause the parent <-> child handshake to fail
+  EXPRESS_METHODS.forEach((expressMethod) => {
     const { METHOD_ID } = getMethodData(expressMethod);
-    return METHOD_ID
-  });
-  const {Rebilly} = window;
 
-  if(!Rebilly?.initialized) {
-    await Rebilly?.initialize(
-      generateFramepayConfig({
-        state,
-        methodIds
-      })
-    );
-  }
-
-  methodIds.forEach((id) => {
-    // filter out apple pay unless in safari
-    if (id === 'apple-pay' && !browserIsSafari()) return
-
-    container.innerHTML += `
-      <div class="rebilly-instruments-${id}-method"></div>
+    EXPRESS_METHODS_CONTAINER.innerHTML += `
+      <div class="rebilly-instruments-${METHOD_ID}-method"></div>
     `;
-    mountExpressMethod({
-      state,
-      id,
-    });
   });
 
-  // HOTFIX: Hardcoded, use env variables in the future
-  const redirectUrl = state.options.apiMode === 'sandbox'
-    ? 'https://forms-sandbox.secure-payments.app/approval-url?close=true'
-    : 'https://forms.secure-payments.app/approval-url?close=true';
-
-  Rebilly?.on('token-ready', (token) => {
-    const instrumentReadyPayload = {
-      websiteId: state.options.websiteId,
-      billingAddress: token.billingAddress,
-      redirectUrl,
-      _raw: token
-    };
-    
-    if (state.data?.isShippingRequired) {
-      if (token.shippingAddress) {
-        instrumentReadyPayload.deliveryAddress = token.shippingAddress;
-      } else {
-        instrumentReadyPayload.deliveryAddress = instrumentReadyPayload.billingAddress;
-      }
-    }
-
-    if (Array.isArray(instrumentReadyPayload.billingAddress?.emails)) {
-      const email = instrumentReadyPayload.billingAddress.emails
-        .find(e => e.label === 'main')
 
-      if (email?.value) {
-        instrumentReadyPayload.billingAddress.email = email.value;
-      }
-    }
-    if (Array.isArray(instrumentReadyPayload.deliveryAddress?.emails)) {
-      const email = instrumentReadyPayload.deliveryAddress.emails
-        .find(e => e.label === 'main')
+  EXPRESS_METHODS.forEach((expressMethod) => {
+    const { feature } = expressMethod;
+    const { METHOD_ID, METHOD_TYPE } = getMethodData(expressMethod);
 
-      if (email?.value) {
-        instrumentReadyPayload.deliveryAddress.email = email.value;
-      }
+    if (feature?.name === 'Apple Pay') {
+      mountApplePay({
+        state,
+        METHOD_ID,
+        METHOD_TYPE,
+        EXPRESS_METHODS,
+        EXPRESS_METHODS_CONTAINER
+      });
+    } else {
+      mountExpressMethod({
+        state,
+        METHOD_ID
+      })
     }
-
-    Events.instrumentReady.dispatch(instrumentReadyPayload);
   });
 }