@rebilly/instruments 3.2.1-beta.0 → 3.4.0-beta.0

package/package.json

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

package/src/functions/mount/index.js

@@ -5,7 +5,7 @@ import { fetchData } from './fetch-data';
 import setupElement from './setup-element';
 import setupStorefront from './setup-storefront';
 import setupOptions from './setup-options';
-import setupFramepay from './setup-framepay';
+import setupFramepayInstance from './setup-framepay';
 import setupStyles from './setup-styles';
 import setupI18n from './setup-i18n';
 import setupFramepayTheme from './setup-framepay-theme';
@@ -63,11 +63,12 @@ import setupUserFlow from './setup-user-flow';
  * Mount library with configurations.
  * @param {object} options - The options object
  * @param {object} options.state - Global state
+ * @param {function} options.setupFramepayInstance - Helper for adding FramePay scripts to the DOM
  * @param {string | HTMLElement} options.form - The CSS class or HTML element were the form will be mounted.
  * @param {string | HTMLElement} options.summary - The CSS class or HTML element were the summary will be mounted.
  * @param {Item[]} options.items - Which plans the customer is purchasing.
  * @param {string} options.invoiceId - The Rebilly id of the invoice used for purchasing.
- * @param {string} options.customerJwt - The customer token to access the invoice.
+ * @param {string} options.jwt - The customer token to access the invoice.
  * @param {string} [options.countryCode=USD] - The country code for the transaction
  * @param {PaymentInstruments} options.paymentInstruments - settings for various payment instruments
  * @param {Features} options.features - flags to enable and disable different features
@@ -75,6 +76,7 @@ import setupUserFlow from './setup-user-flow';
  */
 export async function mount({
   state,
+  setupFramepay = setupFramepayInstance,
   ...options
 } = {}) {
   try {
@@ -100,7 +102,7 @@ export async function mount({
     state.options.themeFramepay = await setupFramepayTheme({ state, options });
     state.i18n = setupI18n({ state });
 
-    setupFramepay({ state });
+    await setupFramepay(state);
 
     // Update state options from data
     if ((!state.options.websiteId) && state.data.transaction?.websiteId) {

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

@@ -8,9 +8,9 @@ import ProductModel from '@/storefront/models/product-model';
 import SummaryModel from '@/storefront/models/summary-model';
 
 describe('RebillyInstruments instance', () => {
-  it("should inject HTML to the merchant's website", async () => {
+  it('should inject HTML to the merchant\'s website', async () => {
     const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
-    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
+    const framePayStyleUrl = 'https://framepay.rebilly.com/rebilly.css';
 
     const options = {
       form: '.form-selector',
@@ -34,7 +34,6 @@ describe('RebillyInstruments instance', () => {
         framePayStyleLink: framePayStyleUrl
       },
     };
-
     await RenderMockRebillyInstruments(options);
 
     // Mounts form and summary
@@ -64,15 +63,14 @@ describe('RebillyInstruments instance', () => {
 
     // Mounts _dev FramePay style
     const STYLE_LINKS = [...document.querySelectorAll('head link')];
-    const FRAMEPAY_STYLE = STYLE_LINKS.find(
-      (script) => script.href === framePayStyleUrl
-    );
+    const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
+
     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 jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGYzNWEzYy03N2M0LTQ0NDItOWFhNC03ODA5NDA2NzBjN2IiLCJleHAiOjE2NzM2NDk0ODcsImlhdCI6MTY0MjExMDczOS4zMjYyNDQsImFjbCI6W3sic2NvcGUiOnsib3JnYW5pemF0aW9uSWQiOlsidGVzdC1vcmdhbml6YXRpb24tZCJdLCJ0cmFuc2FjdGlvbklkIjpbInRlc3QtdHJhbnNhY3Rpb24taWQiXX0sInBlcm1pc3Npb25zIjpbMV19XSwiY2xhaW1zIjp7InRyYW5zYWN0aW9uSWQiOiJ0ZXN0LXRyYW5zYWN0aW9uLWlkIn0sIm1lcmNoYW50IjoidGVzdC1vcmdhbml6YXRpb24taWQiLCJjdXN0b21lciI6eyJpZCI6InRlc3QtY3VzdG9tZXItaWQiLCJuYW1lIjoiVGVzdGVyIFRlc3RlcnNvbiIsImNyZWF0ZWRUaW1lIjoiMjAyMi0wMS0xNFQwMDowMDowMCswMDowMCJ9fQ.h4voW-UvXzXRm1JlxkN8cNHhQ_IIPSWWN9BANfBWEHQ';
 
     const options = {
       form: '.form-selector',

package/src/functions/mount/setup-framepay-theme.js

@@ -48,33 +48,56 @@ export default async ({
   const cssAst = css.parse(resolvedCss);
 
   const cssSelectors = {
-    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'
+    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(cssAst, cssSelectors.base),
-      ':hover': getStyleProps(cssAst, cssSelectors.baseHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.baseFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.basePlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.baseSelection),
+      ...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(cssAst, cssSelectors.invalid),
-      ':hover': getStyleProps(cssAst, cssSelectors.invalidHover),
-      ':focus': getStyleProps(cssAst, cssSelectors.invalidFocus),
-      '::placeholder': getStyleProps(cssAst, cssSelectors.invalidPlaceholder),
-      '::selection': getStyleProps(cssAst, cssSelectors.invalidSelection),
+      ...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(cssAst, cssSelectors.button.base),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.baseHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.baseFocus),
+      },
+      active: {
+        ...getStyleProps(cssAst, cssSelectors.button.active),
+        ':hover': getStyleProps(cssAst, cssSelectors.button.activeHover),
+        ':focus': getStyleProps(cssAst, cssSelectors.button.activeFocus),
+      }
     }
   }
 

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

@@ -1,41 +1,20 @@
-import { addDOMElement } from '../../utils';
+export default async function setupFramepay (state = {}) {
+    const {_dev} = state.options || {};
+    const urls = {
+        script: _dev?.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js',
+        style: _dev?.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css',
+    };
 
-export default ({
-  state: {
-      options: {
-      _dev
-    }
-  }
-} = {}) => {
-  const framePayUrls = {
-    script: _dev
-      ? _dev.framePayScriptLink || 'https://framepay.rebilly.com/rebilly.js'
-      : 'https://framepay.rebilly.com/rebilly.js',
-    style: _dev
-      ? _dev.framePayStyleLink || 'https://framepay.rebilly.com/rebilly.css'
-      : 'https://framepay.rebilly.com/rebilly.css'
-  };
+    return new Promise((resolve) => {
+        const framepayStyle = document.createElement('link');
+        framepayStyle.setAttribute('href', urls.style);
+        framepayStyle.setAttribute('rel', 'stylesheet');
+        document.head.prepend(framepayStyle);
 
-  if (!document.querySelectorAll('[framepay*="script"]').length) {
-    addDOMElement({
-      element: 'script',
-      attributes: {
-        framepay: 'script',
-        src: framePayUrls.script
-      },
-      target: 'head'
+        const framepayScript = document.createElement('script');
+        framepayScript.setAttribute('src', urls.script);
+        
+        framepayScript.onload = () => resolve();
+        document.head.append(framepayScript);
     });
-  }
-
-  if (!document.querySelectorAll('[framepay*="stylesheet"]').length) {
-    addDOMElement({
-      element: 'link',
-      attributes: {
-        framepay: 'stylesheet',
-        href: framePayUrls.style,
-        rel: 'stylesheet'
-      },
-      target: 'head'
-    });
-  }
-}
+}

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

@@ -59,6 +59,10 @@ export function validateOptions(options) {
   }
 
   if (purchaseData.length > 1) {
+    // JWT can be alone or with specific invoiceId or transactionId
+    if (options.jwt && (options.invoiceId || options.transactionId)) {
+      return
+    }
     throw new Error('Must provide only one purchase data type');
   }
 }
@@ -66,6 +70,7 @@ export function validateOptions(options) {
 export default ({
   options = {}
 } = {}) => {
+
   validateOptions(options);
 
   const _computed = {
@@ -122,7 +127,7 @@ export default ({
     'money',
     'invoiceId',
     'transactionId',
-    'customerJwt',
+    'jwt',
     '_dev'
   ].forEach(key => {
     if (options[key]) {

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

@@ -21,8 +21,7 @@ describe('Setup mount options', () => {
       publishableKey: 'test-publishable-key',
       organizationId: 'test-organization-id',
       websiteId: 'test-website-id',
-      invoiceId: 'test-invoice-id',
-      customerJwt: 'test-customer-jwt'
+      jwt: 'test-jwt'
     }
     const rebillyInstruments = await RenderMockRebillyInstruments(options);
     expect(rebillyInstruments.state.options).toMatchObject(options);

package/src/functions/purchase.js

@@ -6,15 +6,24 @@ import { DataInstance } from './mount/fetch-data';
 export async function makePayment({ state, payload }) {
   const {
     _raw: {
-      id: token
-    }
+      id
+    },
+    isExistingInstrument
   } = payload;
+  delete payload.isExistingInstrument;
+  delete payload._raw;
 
   const data = {
-    token,
     ...payload
   };
 
+  if (isExistingInstrument) {
+    data.paymentInstrumentId = id;
+    
+  } else {
+    data.token = id;
+  }
+
   if (state.options.invoiceId) {
     data.invoiceId = state.options.invoiceId;
   }
@@ -36,7 +45,7 @@ export async function makePayment({ state, payload }) {
 
   fields = {
     transaction: fields,
-    token: fields.token || state.options.customerJwt
+    token: fields.token || state.options.jwt
   };
 
   if (state.data.invoice) {

package/src/functions/setup.js

@@ -5,12 +5,30 @@ import { DataInstance } from './mount/fetch-data';
 
 export async function setup({ state, payload }) {
   try {
+    const {
+      _raw: {
+        id
+      },
+      isExistingInstrument
+    } = payload;
+    delete payload.isExistingInstrument;
+    delete payload._raw;
+  
+    const data = {
+      ...payload
+    };
+  
+    if (isExistingInstrument) {
+      data.paymentInstrumentId = id;
+    } else {
+      data.token = id;
+    }
+
     const {instrument, transaction} = await setupPaymentInstrument({
       state,
       data: {
-        token: payload._raw.id,
         websiteId: state.options?.websiteId,
-        ...payload
+        ...data
       }
     });
 

package/src/i18n/en.json

@@ -11,6 +11,7 @@
       "expressCheckout": "Express checkout",
       "or": "Or",
       "popupOverlayText": "Click here to show popup window",
+      "andMore": "and more",
       "error": {
         "noPaymentMethods": "No payment methods available for this transaction, please contact support."
       },
@@ -19,7 +20,8 @@
       }
     },
     "paymentMethods": {
-      "payment-card": "Payment card"
+      "payment-card": "Payment card",
+      "ach": "Bank account"
     }
   }
 }

package/src/i18n/es.json

@@ -10,13 +10,15 @@
     "form": {
       "expressCheckout": "Chequeo rápido",
       "or": "O pague con",
+      "andMore": "y más",
       "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
       "error": {
         "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia."
       }
     },
     "paymentMethods": {
-      "payment-card": "Tarjeta de crédito"
+      "payment-card": "Tarjeta de crédito",
+      "ach": "Cuenta bancaria"
     }
   }
 }

package/src/instance.spec.js

@@ -1,6 +1,7 @@
+import { avoidUnhandledPromises } from 'tests/async-utilities';
+import { setupFramepayMock } from 'tests/mocks/rebilly-instruments-mock';
 import RebillyInstruments from './index';
 import { RebillyInstrumentsInstance } from './instance';
-import { avoidUnhandledPromises } from 'tests/async-utilities';
 
 describe('RebillyInstruments instance', () => {
   let rebillyInstruments;
@@ -24,7 +25,8 @@ describe('RebillyInstruments instance', () => {
     const options = {
       form: '.form-selector',
       summary: '.summary-selector',
-      items: []
+      items: [],
+      setupFramepay: setupFramepayMock,
     };
 
     await rebillyInstruments.mount(options);

package/src/storefront/index.js

@@ -1,4 +1,4 @@
-import { RebillyStorefrontAPI } from 'rebilly-js-sdk';
+import RebillyApi, {RebillyStorefrontAPI} from 'rebilly-js-sdk';
 
 export function validateStateForStorefront({state}) {
   if (!state.storefront) {
@@ -43,23 +43,25 @@ export class StorefrontInstance {
       sandbox: sandboxUrl || 'https://api-sandbox.rebilly.com'
     };
 
-    const api = RebillyStorefrontAPI({
+    const config = {
       organizationId,
       sandbox: mode === 'sandbox',
       timeout: Number.isNaN(parseInt(timeout, 10))
         ? 10000
         : parseInt(timeout, 10),
       urls
-    });
+    };
 
-    if (publishableKey) {
-      api.setPublishableKey(publishableKey);
-    }
-    if (jwt) {
-      api.setSessionToken(jwt);
-    }
+    const api = RebillyStorefrontAPI(config);
+    // TODO: Check why Rollup is making the default as an named export
+    const rebilly = typeof RebillyApi.default === 'function' ? RebillyApi.default(config) : RebillyApi(config);
+
+    api.setSessionToken(publishableKey || jwt);
+    rebilly.setSessionToken(publishableKey || jwt);
 
     this.api = api;
+    this.api.rebilly = rebilly;
+
     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.options.jwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.invoices.get(data);
 
     return new InvoiceModel(fields);

package/src/storefront/models/payment-metadata.js

@@ -0,0 +1,7 @@
+import BaseModel from './base-model';
+
+export default class PaymentMetadataModel extends BaseModel {
+  get logo () {
+    return this.landscapeLogo || this.portraitLogo;
+  }
+}

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

@@ -1,3 +1,5 @@
+import PaymentMetadataModel from './payment-metadata';
+
 export class ReadyToPayFeatureModel {
   constructor({
     name = '',
@@ -16,6 +18,7 @@ export class ReadyToPayFeatureModel {
   } = {}) {
     this.name = name;
     this.expirationTime = expirationTime;
+    
 
     this.merchantName = merchantName;
     this.merchantOrigin = merchantOrigin;
@@ -33,12 +36,14 @@ export default class ReadyToPayModel {
     method = '',
     feature = null,
     brands = [],
-    filters = []
+    filters = [],
+    metadata = null
   } = {}) {
     this.index = index;
     this.method = method;
     this.feature = feature ? new ReadyToPayFeatureModel(feature) : null;
     this.brands = brands;
     this.filters = filters;
+    this.metadata = metadata ? new PaymentMetadataModel(metadata) : null;
   }
 }

package/src/storefront/payment-instruments.js

@@ -16,10 +16,10 @@ export async function setupPaymentInstrument({ data, state }) {
       }
     }
 
-    if(state.data.getAmountAndCurrency) {
+    if(state.data.amountAndCurrency) {
       setupPayload.data = {
         ...setupPayload.data,
-        ...state.data.getAmountAndCurrency
+        ...state.data.amountAndCurrency
       }
     }
 

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

@@ -33,16 +33,30 @@ export async function fetchReadyToPay({ state, riskMetadata = null }) {
       data.currency = money.currency;
     }
 
-    const { fields: readyToPayFields } =
-      await state.storefront.purchase.readyToPay({ data });
+    const [
+      { fields: readyToPayFields },
+      { items: paymentMethodsMetadataItems } 
+    ] = await Promise.all([
+      state.storefront.purchase.readyToPay({ data }),
+      state.storefront.rebilly.paymentMethods.getAll()
+    ]);
+
+    const paymentMethodsMetadata = paymentMethodsMetadataItems.map(({fields}) => fields);
 
     return Object.values(readyToPayFields)
       // Remove result for "old" paypal method
       .filter((fields) => !(fields.method === 'paypal' && !fields.feature))
-      .map((fields, index) => new ReadyToPayModel({
+      // Remove Plaid payment method
+      .filter((fields) => !(fields.method === 'ach' && fields.feature))
+      .map((fields, index) => {
+        const metadata = paymentMethodsMetadata
+          .find(methodMetadata => methodMetadata.apiName === fields.method);
+
+        return new ReadyToPayModel({
           index,
+          metadata,
           ...fields
-        })
-      );
+        });
+      });
   });
 }

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.options.jwt);
+    state.storefront.setSessionToken(state.options.jwt);
     const {fields} = await state.storefront.transactions.get(data);
 
     return new TransactionModel(fields);