@rebilly/instruments 3.5.0-beta.0 → 3.6.0-beta.0

package/package.json

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

package/src/events/index.js

@@ -2,6 +2,7 @@ import kebabCase from 'lodash.kebabcase';
 import BaseEvent from './base-event';
 
 const events = {
+  dataReady: new BaseEvent('data-ready'),
   instrumentReady: new BaseEvent('instrument-ready'),
   purchaseCompleted: new BaseEvent('purchase-completed'),
   setupCompleted: new BaseEvent('setup-completed')

package/src/functions/mount/index.js

@@ -2,6 +2,7 @@
 import { mountSummary } from '../../views/summary';
 import { mountMethodSelector } from '../../views/method-selector';
 import { fetchData } from './fetch-data';
+import Events from '../../events';
 import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 import setupOptions from './setup-options';
@@ -96,9 +97,12 @@ export async function mount({
     // 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 });
 

package/src/style/components/accordion.js

@@ -124,4 +124,17 @@ export const accordion = () => `
     background: var(--rebilly-colorText);
     opacity: 1;
   }
+
+  @media screen and (max-width: 600px) {
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(2),
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure:nth-child(3) {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
+      display: none;
+    }
+  }
 `;

package/src/style/components/button.js

@@ -82,7 +82,7 @@ export const button = () => `
 
   .rebilly-instruments-button-group {
     display: flex;
-    align-items: center;
+    align-items: stretch;
   }
 
   .rebilly-instruments-button-group .rebilly-instruments-button {

package/src/style/payment-instruments/payment-instrument.js

@@ -40,4 +40,16 @@ export const paymentInstrument = () => `
   .rebilly-instruments-payment-instrument-exp {
     color: var(--rebilly-colorMutedText);
   }
+
+  @media screen and (max-width: 480px) {
+    .rebilly-instruments-payment-instrument-exp {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 320px) {
+    .rebilly-instruments-payment-instrument-brand {
+      display: none;
+    }
+  }
 `;

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

@@ -43,7 +43,8 @@ export default class BaseIframe {
       model: this.model
     });
 
-    component.frame.setAttribute('allowpaymentrequest', 'allowpaymentrequest');
+    component.frame.setAttribute('allowpaymentrequest', true);
+    component.frame.setAttribute('loading', 'lazy');
     component.frame.setAttribute('allow', 'payment');
     return component;
   }

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

@@ -40,13 +40,18 @@ export default function mountApplePay({
   container.style.height = digitalWallet.applePayDisplayOptions.buttonHeight;
 
   if (!Rebilly.initialized) {
-    Rebilly.initialize({
-      publishableKey: state.options.publishableKey,
-      organizationId: state.options.organizationId,
+    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;
+    } else {
+      options.publishableKey = state.options.publishableKey;
+    }
+    Rebilly.initialize(options);
   } else {
     mountApplePayButton();
     updateBtnStyling();