@rebilly/instruments 3.3.0-beta.0 → 3.3.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.3.0-beta.0",
+  "version": "3.3.1-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",

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

@@ -61,9 +61,9 @@ export function MountMethods({
       state.options._computed || 'https://www.example.com';
 
     const selector = `rebilly-instruments-${methodId}`;
-    const isiFrame =
-      methodId === 'payment-card' &&
-      !state.options.paymentInstruments[methodType]?.popup;
+    const isPopup = [
+        'payment-card'
+      ].includes(methodId) && state.options.paymentInstruments[methodType]?.popup;
     const model = {
       options: state.options,
       mainStyle: state.mainStyle,
@@ -91,23 +91,8 @@ export function MountMethods({
         const summary = document.querySelector(`.for-${methodId} > .rebilly-instruments-accordion-summary`);
         displayBrands({summary, method});
       }
-
       state.loader.stopLoading({ id: method.method });
-      METHODS_CONTAINER.insertAdjacentHTML(
-        'beforeend',
-        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-      );
-      const container = document.querySelector(`#${selector}`);
 
-      state.loader.stopLoading({ id: method.method });
-      mountInline(state, {
-        methodId,
-        paymentMethodsUrl,
-        container,
-        model,
-        method
-      });
-    } else if (isiFrame) {
       METHODS_CONTAINER.insertAdjacentHTML(
         'beforeend',
         `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
@@ -122,7 +107,7 @@ export function MountMethods({
         model,
         method
       });
-    } else {
+    } else if (isPopup) {
       METHODS_CONTAINER.insertAdjacentHTML(
         'beforeend',
         `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
@@ -135,8 +120,8 @@ export function MountMethods({
           method.method
         }">${camelCase(method.method)}</button>`
       );
-      const paymentCardButton = document.querySelector(`.${selector}`);
-      paymentCardButton.addEventListener('click', async () => {
+      const button = document.querySelector(`.${selector}`);
+      button.addEventListener('click', async () => {
         const iframe = await mountModal({
           state,
           name: methodId,
@@ -145,7 +130,21 @@ export function MountMethods({
         });
         state.iframeComponents.push(iframe);
       });
+    } else {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
       state.loader.stopLoading({ id: method.method });
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
+        container,
+        model,
+        method
+      });
     }
   });