@rebilly/instruments 3.1.2-beta.0 → 3.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.1.2-beta.0",
+  "version": "3.2.0-beta.0",
   "author": "Rebilly",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -18,6 +18,7 @@
     "@rebilly/risk-data-collector": "^2.0.1",
     "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",

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

@@ -142,9 +142,19 @@ export async function fetchData({
       state.options.items ? fetchSummary({ data: summaryPayload, state }) : null
     ]);
 
-    const plans = await fetchPlans({ state });
-    state.data.plans = plans;
-    const products = await fetchProducts({ state });
+    let plans = null;
+    let products = null;
+    try {
+      plans = await fetchPlans({ state });
+      state.data.plans = plans;
+    } catch(e) {
+      plans = [];
+    }
+    try {
+      products = await fetchProducts({ state });
+    } catch (e) {
+      products = [];
+    }
 
     return new DataInstance({
       state,

package/src/functions/mount/index.js

@@ -92,15 +92,22 @@ export async function mount({
     state.loader.startLoading({ id: 'initForm' });
 
     // Setup state
-    state.storefront = setupStorefront({ options });
     state.options = setupOptions({ options });
+    state.storefront = setupStorefront({ options });
     state.mainStyle = await setupStyles({ options });
     state.data = await fetchData({ state });
+
     state.options.themeFramepay = await setupFramepayTheme({ state, options });
     state.i18n = setupI18n({ state });
 
     setupFramepay({ state });
 
+    // Update state options from data
+    if ((!state.options.websiteId) && state.data.transaction?.websiteId) {
+      state.options.websiteId = state.data.transaction.websiteId;
+    } else if ((!state.options.websiteId) && state.data.invoice?.websiteId) {
+      state.options.websiteId = state.data.invoice.websiteId;
+    }
     if (state.data.transaction && state.data.transaction?.type === 'setup') {
       state.options.transactionType = 'setup';
     }

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

@@ -69,4 +69,24 @@ describe('RebillyInstruments instance', () => {
     );
     expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
   });
+
+  it('should mount with JWT pruchase data', async () => {
+    // Use https://www.jwt.io to help encode and decode JWT
+    const jwt = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ`;
+
+    const options = {
+      form: '.form-selector',
+      summary: '.summary-selector',
+      jwt,
+    };
+
+    const instance = await RenderMockRebillyInstruments(options);
+
+    expect(instance.state.options).toEqual(
+      expect.objectContaining({
+        transactionId: 'test-transaction-id',
+        organizationId: 'test-organization-id'
+      })
+    );
+  });
 });

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

@@ -1,4 +1,5 @@
 import merge from 'lodash.merge';
+import decodeJwt from 'jwt-decode';
 
 export const defaults = {
   countryCode: 'US',
@@ -46,6 +47,7 @@ export const defaults = {
 export function validateOptions(options) {
   // TODO: validate more options
   const purchaseData = [
+    options.jwt,
     options.items,
     options.invoiceId,
     options.money,
@@ -73,9 +75,6 @@ export default ({
   };
 
   const combinedOptions = merge({...defaults}, {
-    organizationId: options.organizationId,
-    publishableKey: options.publishableKey,
-    websiteId: options.websiteId,
     apiMode: options.apiMode,
     i18n: options.i18n,
     theme: options.theme,
@@ -88,6 +87,35 @@ export default ({
     _computed
   });
 
+  if (options.publishableKey) {
+    Object.entries({
+      organizationId: options.organizationId,
+      publishableKey: options.publishableKey,
+      websiteId: options.websiteId,
+    }).forEach(([key, value]) => {
+      combinedOptions[key] = value;
+    });
+  } else if (options.jwt) {
+    combinedOptions.jwt = options.jwt;
+    const {
+      merchant: organizationId,
+      claims: {
+        transactionId,
+        invoiceId,
+      }
+    } = decodeJwt(combinedOptions.jwt);
+    
+    combinedOptions.organizationId = organizationId;
+    
+    if (transactionId) {
+      combinedOptions.transactionId = transactionId;
+    }
+
+    if (invoiceId) {
+      combinedOptions.invoiceId = invoiceId;
+    }
+  }
+
   // Add optional key's
   [
     'items',

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

@@ -9,11 +9,14 @@ export default ({
   }
 }) => {
   const storefront = {
-    publishableKey,
     orgnizationId,
     mode: apiMode || 'live'
   };
 
+  if (publishableKey) {
+    storefront.publishableKey = publishableKey;
+  }
+
   if (_dev) {
     storefront.liveUrl = _dev.liveUrl || 'https://api.rebilly.com';
     storefront.sandboxUrl =

package/src/storefront/index.js

@@ -31,6 +31,7 @@ export async function Endpoint({
 export class StorefrontInstance {
   constructor({
     publishableKey = null,
+    jwt = null,
     organizationId = null,
     mode = 'live',
     timeout = 10000,
@@ -51,7 +52,12 @@ export class StorefrontInstance {
       urls
     });
 
-    api.setPublishableKey(publishableKey);
+    if (publishableKey) {
+      api.setPublishableKey(publishableKey);
+    }
+    if (jwt) {
+      api.setSessionToken(jwt);
+    }
 
     this.api = api;
     return this.api;

package/src/storefront/invoices.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchInvoice({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt);
+    state.storefront.setSessionToken(state.options.customerJwt || state.options.jwt);
     const {fields} = await state.storefront.invoices.get(data);
 
     return new InvoiceModel(fields);

package/src/storefront/products.js

@@ -3,11 +3,13 @@ import { Endpoint } from './index';
 
 export async function fetchProducts({ state }) {
   return Endpoint({state}, async () => {
-    if (state.data.plans === null) {
-      return null;
+    let plansData = [];
+    if (state.data.plans) {
+      plansData = state.data.plans;
+    }
+    if (state.data.invoice?.items) {
+      plansData = state.data.invoice.items;
     }
-
-    const plansData = state.data.plans || [];
     const filterByProductId = {
       filter: ''
     };

package/src/storefront/ready-to-pay.js

@@ -8,13 +8,21 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       const { riskMetadata: data } = await collectData();
       riskMetadata = data;
     }
-    const websiteId = state.options?.websiteId || null;
-
+    
     const data = {
-      websiteId,
       riskMetadata
     };
-
+    
+    let websiteId = state.options?.websiteId || null;
+    if (!websiteId) {
+      if (state.data.transaction?.websiteId) {
+        websiteId = state.data.transaction.websiteId
+      } else if (state.data.invoice?.websiteId) {
+        websiteId = state.data.invoice.websiteId;
+      }
+    }
+    data.websiteId = websiteId;
+  
     if (state.options?.items) {
       data.items = state.options.items;
     }

package/src/storefront/transactions.js

@@ -3,7 +3,7 @@ import { Endpoint } from './index';
 
 export async function fetchTransaction({ data = null, state = null }) {
   return Endpoint({state}, async () => {
-    state.storefront.setSessionToken(state.options.customerJwt);
+    state.storefront.setSessionToken(state.options.customerJwt || state.options.jwt);
     const {fields} = await state.storefront.transactions.get(data);
 
     return new TransactionModel(fields);

package/src/style/components/button.js

@@ -57,6 +57,7 @@ export const button = () => `
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
   .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
+    color: var(--rebilly-buttonColorBackground);
     background: var(--rebilly-colorBackground);
   }
 

package/src/views/method-selector/generate-digital-wallet.js

@@ -45,7 +45,7 @@ export function generateDigitalWallet({ state, EXPRESS_METHODS }) {
         applePayDisplayOptions: paymentInstruments.applePay.displayOptions
       }
     }
-  })
+  });
 
   return output;
 }

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

@@ -23,7 +23,7 @@ export function getPaymentMethods({ state }) {
     METHODS: []
   };
 
-  state.data.readyToPay.forEach((method) => {
+  state.data.readyToPay?.forEach((method) => {
     if (isExpressMethod(method)) {
       const { METHOD_TYPE } = getMethodData(method);
       // Add loader entry per express method

package/tests/mocks/rebilly-instruments-mock.js

@@ -87,7 +87,8 @@ export async function RenderMockRebillyInstruments(options = {}) {
     'items',
     'invoiceId',
     'transactionId',
-    'money'
+    'money',
+    'jwt'
   ].some(key => Object.keys(options).includes(key))
   if(!hasPurchaseData) {
     defaultOptions.items = [