@rebilly/instruments 1.0.2-beta.8 → 2.1.1-beta.0

package/src/views/common/render-utilities.js

@@ -1,4 +1,4 @@
 export function replaceContent(form, newContent) {
-    const contentElement = form.querySelector('.rebilly-instruments-content');
-    contentElement.innerHTML = newContent;
-}
+  const contentElement = form.querySelector('.rebilly-instruments-content');
+  contentElement.innerHTML = newContent;
+}

package/src/views/confirmation.js

@@ -1,29 +1,32 @@
+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';
 
-export const baseConfirmationHTML = '<div class="rebilly-instruments-confirmation"></div>';
+export const baseConfirmationHTML =
+  '<div class="rebilly-instruments-confirmation"></div>';
 
-export async function MountConfirmation({
-  instrument,
-  mainStyle
-}) {
-  if(instrument.billingAddress && this.summary) {
-    this._updateSummary.call(this, instrument);
+export async function mountConfirmation({ payload: instrument, state }) {
+  if (
+    (instrument.billingAddress && state.summary) &&
+    state.data.isPurchase
+  ) {
+    updateSummary({ state, instrument });
   }
 
-  replaceContent(this.form, baseConfirmationHTML);
-  
-  this.loader.startLoading({id: 'confirmation'});
-  
+  replaceContent(state.form, baseConfirmationHTML);
+
+  state.loader.startLoading({ id: 'confirmation' });
 
   const container = document.querySelector('.rebilly-instruments-confirmation');
-  
-  const {paymentMethodsUrl} = this.options._computed;
+
+  const { paymentMethodsUrl } = state.options._computed;
 
   const model = {
-    configs: this.configs,
-    options: this.options,
-    mainStyle,
+    options: state.options,
+    mainStyle: state.mainStyle,
     instrument
   };
   const name = 'rebilly-instruments-confirmation';
@@ -34,24 +37,30 @@ export async function MountConfirmation({
     model
   });
   iframe.bindEventListeners({
-    loader: this.loader,
+    loader: state.loader
   });
 
   iframe.component.on(`${name}-confirm-purchase`, (confirmedInstrument) => {
-    this.purchase(confirmedInstrument);
+    purchase({ state, payload: confirmedInstrument });
+  });
+
+  iframe.component.on(`${name}-confirm-setup`, (confirmedInstrument) => {
+    setup({ state, payload: confirmedInstrument });
   });
 
   iframe.component.on('choose-another-method', () => {
-    this.iframeComponents = this.iframeComponents.filter(item => {
-      if(item.name === iframe.name) {
-        item.component.destroy();
+    state.iframeComponents = state.iframeComponents.filter((item) => {
+      if (item.name === iframe.name) {
+        item.destroy();
         return false;
       }
       return true;
     });
-    this._updateSummary.call(this);
-    this._updateSelector.call(this, {mainStyle});
+    if (state.data.isPurchase) {
+      updateSummary({ state });
+    }
+    updateMethodSelector({ state, mainStyle: state.mainStyle });
   });
 
-  this.iframeComponents.push(iframe);
-}
+  state.iframeComponents.push(iframe);
+}

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

@@ -0,0 +1,78 @@
+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) {
+    Rebilly.initialize({
+      publishableKey: state.options.publishableKey,
+      organizationId: state.options.organizationId,
+      digitalWallet
+    });
+  } else {
+    mountApplePayButton();
+    updateBtnStyling();
+  }
+
+  Rebilly.on('ready', () => {
+    mountApplePayButton();
+    updateBtnStyling();
+  });
+
+  Rebilly.on('token-ready', (token) => {
+    const instrumentReadyPayload = {
+      websiteId: state.options.websiteId,
+      items: state.options.items,
+      paymentInstruction: {
+        token: token.id,
+      },
+      billingAddress: token.billingAddress,
+      _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/google-pay.js

@@ -0,0 +1,24 @@
+import { MethodIframe } from '../../common/iframe';
+
+export default async function mountGooglePay({ state, METHOD_ID }) {
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+
+  const { paymentMethodsUrl } = state.options._computed;
+
+  const model = {
+    options: state.options
+  };
+
+  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/express-methods/paypal.js

@@ -0,0 +1,7 @@
+
+export default async function mountPaypal({ state, METHOD_ID, METHOD_TYPE }) {
+  console.log('PayPal - work in progress');
+  const container = document.querySelector(`.rebilly-instruments-${METHOD_ID}-method`);
+  container.style.display = 'none';
+  state.loader.stopLoading({ id: `${METHOD_TYPE}-express` });
+}

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

@@ -0,0 +1,51 @@
+import { getMethodData } from './get-method-data';
+
+export function generateDigitalWallet({ state, EXPRESS_METHODS }) {
+  const output = {};
+
+  const { paymentInstruments } = state.options;
+
+  const transactionData = {
+    countryCode: state.options.countryCode,
+    label: state.options.websiteId
+  }
+
+  if (state.data?.amountAndCurrency) {
+    const {
+      amount,
+      currency
+    } = state.data.amountAndCurrency;
+    transactionData.amount = amount;
+    transactionData.currency =  currency;
+  }
+
+  EXPRESS_METHODS.forEach(method => {
+    const { METHOD_TYPE } = getMethodData(method);
+
+    if (method.feature?.name === 'Google Pay') {
+      output[METHOD_TYPE] = {
+        transactionData,
+        merchantConfig: {
+          merchantName: method.feature.merchantName,
+          merchantOrigin: method.feature.merchantOrigin
+        },
+        googlePayDisplayOptions: paymentInstruments.googlePay.displayOptions,
+      }
+    }
+
+    if (method.feature?.name === 'Apple Pay') {
+      output[METHOD_TYPE] = {
+        transactionData,
+        merchantConfig: {
+          merchantName: paymentInstruments.applePay?.merchantConfig?.merchantName,
+          // Apple Pay code cannot run in an iframe, and the merchant origin must be
+          // registered as a merchant domain, so we can just send the current URL.
+          merchantOrigin: window.location.hostname,
+        },
+        applePayDisplayOptions: paymentInstruments.applePay.displayOptions
+      }
+    }
+  })
+
+  return output;
+}

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

@@ -0,0 +1,135 @@
+import { generateDigitalWallet } from './generate-digital-wallet';
+import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
+import SummaryModel from '@/storefront/models/summary-model';
+import { DataInstance } from '../../functions/mount/fetch-data';
+
+describe('generateDigitalWallet', () => {
+  class TestInstance {
+    constructor({ options = {} } = {}) {
+      this.options = options;
+      this.data = new DataInstance({
+        state: {
+          options
+        },
+        previewPurchase: {
+          total: 1,
+          currency: 'USD'
+        }
+      });
+    }
+  }
+
+  const summary = new SummaryModel({
+    currency: 'USD',
+    total: 1,
+  });
+  
+  const options = {
+    websiteId: 'test-website-id',
+    countryCode: 'US',
+    paymentInstruments: {
+      googlePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'short',
+          buttonHeight: '44px'
+        }
+      },
+      applePay: {
+        displayOptions: {
+          buttonColor: 'black',
+          buttonType: 'buy',
+          buttonHeight: '44px'
+        },
+        merchantConfig: {
+          merchantName: 'Test Store Name',
+        },
+      }
+    }
+  };
+
+  it('should generate the correct digital wallet config for Google pay', () => {
+    const expressMethods = [
+      new ReadyToPayModel({
+        method: 'payment-card',
+        feature: {
+          name: 'Google Pay',
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        brands: ['Visa']
+      })
+    ];
+
+    const output = generateDigitalWallet({
+      state: new TestInstance({options}),
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
+
+    const expectedOutput ={
+      googlePay: {
+        transactionData: {
+          amount: 1,
+          currency: 'USD',
+          countryCode: 'US',
+          label: 'test-website-id'
+        },
+        merchantConfig: {
+          merchantName: 'google-pay-merchant-name',
+          merchantOrigin: 'google-pay-merchant-origin'
+        },
+        googlePayDisplayOptions: { 
+          buttonColor: 'black', 
+          buttonType: 'short', 
+          buttonHeight: '44px' 
+        }
+      }
+    }
+
+    expect(output).toMatchObject(expectedOutput);
+  });
+
+  it('should generate the correct digital wallet config for Apple pay', () => {
+    delete window.location
+    window.location = new URL('https://rebilly-apple-pay-test-tunnel.ngrok.io/');
+
+    const expressMethods = [
+      new ReadyToPayModel({
+        method: 'payment-card',
+        feature: {
+          name: 'Apple Pay',
+        },
+        brands: ['Visa']
+      })
+    ];
+
+    const output = generateDigitalWallet({
+      state: new TestInstance({options}),
+      EXPRESS_METHODS: expressMethods,
+      summary
+    });
+
+    const expectedOutput = {
+      applePay: {
+        transactionData: {
+          amount: 1,
+          currency: 'USD',
+          countryCode: 'US',
+          label: 'test-website-id'
+        },
+        merchantConfig: {
+          merchantName: 'Test Store Name',
+          merchantOrigin: 'rebilly-apple-pay-test-tunnel.ngrok.io'
+        },
+        applePayDisplayOptions: { 
+          buttonColor: 'black', 
+          buttonType: 'buy', 
+          buttonHeight: '44px' 
+        }
+      }
+    }
+
+    expect(output).toMatchObject(expectedOutput);
+  });
+});

package/src/views/method-selector/get-method-data.js

@@ -3,7 +3,10 @@ import camelCase from 'lodash.camelcase';
 
 export const getMethodData = (method) => {
   const METHOD_ID = kebabCase(method.feature?.name || method.method);
-  const METHOD_TYPE = camelCase(method.feature?.name || method.method).replace('-', '');
-  
-  return {METHOD_ID, METHOD_TYPE}
-}
+  const METHOD_TYPE = camelCase(method.feature?.name || method.method).replace(
+    '-',
+    ''
+  );
+
+  return { METHOD_ID, METHOD_TYPE };
+};

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

@@ -1,36 +1,45 @@
 /* eslint-disable no-unused-expressions, arrow-body-style */
-const SUPPORTED_EXPRESS_METHODS = [
-  'Google Pay'
-];
+import { getMethodData } from './get-method-data';
+
+const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
 const SUPPORTED_METHODS = ['payment-card'];
 
-const isExpressMethod = ({method, feature}) => {
-  return SUPPORTED_EXPRESS_METHODS.includes(method)
-    || SUPPORTED_EXPRESS_METHODS.includes(feature?.name);
-}
+const isExpressMethod = ({ method, feature }) => {
+  return (
+    SUPPORTED_EXPRESS_METHODS.includes(method) ||
+    SUPPORTED_EXPRESS_METHODS.includes(feature?.name)
+  );
+};
 
-const isSupportedMethod = ({method}) => {
+const isSupportedMethod = ({ method }) => {
   return SUPPORTED_METHODS.includes(method);
-}
+};
+
+// TODO: just loader is used. We could simplify signature
+export function getPaymentMethods({ state }) {
+  const result = {
+    EXPRESS_METHODS: [],
+    METHODS: []
+  };
 
-export function getPaymentMethods (methods) {
-    const result = {
-      EXPRESS_METHODS: [],
-      METHODS: [],
-    };
-
-    methods.forEach(method => {
-      if (isExpressMethod(method)) {
-        // Add loader entry per express method
-        this.loader.startLoading({id: `${method.method}-express`});
-        result.EXPRESS_METHODS.push(method)
-      } else if (isSupportedMethod(method)) {
-        // Add loader entry per method
-        this.loader.startLoading({id: method.method});
-        result.METHODS.push(method);
-      }
-    })
-
-    return result;
-}
+  state.data.readyToPay.forEach((method) => {
+    if (isExpressMethod(method)) {
+      const { METHOD_TYPE } = getMethodData(method);
+      // Add loader entry per express method
+      state.loader.startLoading({ id: `${METHOD_TYPE}-express` });
+      result.EXPRESS_METHODS.push(method);
+    } else if (isSupportedMethod(method)) {
+      // Add loader entry per method
+      state.loader.startLoading({ id: method.method });
+      result.METHODS.push(method);
+    }
+  });
+
+  if (!window.ApplePaySession) {
+    result.EXPRESS_METHODS = result.EXPRESS_METHODS.filter(method => method?.feature?.name !== 'Apple Pay');
+    state.loader.stopLoading({ id: 'applePay-express' });
+  } 
+
+  return result;
+}

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

@@ -4,46 +4,39 @@ import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
 class TestInstance {
   constructor() {
     this.loader = {
-      startLoading: jest.fn()
+      startLoading: jest.fn(),
+      stopLoading: jest.fn()
     };
-  }
-
-  _getPaymentMethods() {
-    return getPaymentMethods.apply(this, arguments);
+    this.data = {
+      readyToPay: [
+        new ReadyToPayModel({
+          method: 'payment-card',
+          feature: {
+            name: 'Google Pay',
+            merchantName: 'google-pay-merchant-name',
+            merchantOrigin: 'google-pay-merchant-origin'
+          },
+          brands: ['Visa'],
+          filters: []
+        }),
+        new ReadyToPayModel({
+          method: 'bitcoin',
+          filters: []
+        }),
+        new ReadyToPayModel({
+          method: 'payment-card',
+          brands: ['Visa'],
+          filters: []
+        })
+      ]
+    }
   }
 }
 
 it('should only return the allowed methods', () => {
   const instance = new TestInstance();
-  const methods = [
-    new ReadyToPayModel(
-      {
-        method: 'payment-card',
-        feature: {
-          name: 'Google Pay',
-          merchantName: 'google-pay-merchant-name',
-          merchantOrigin: 'google-pay-merchant-origin'
-        },
-        brands: ['Visa'],
-        filters: []
-      }
-    ),
-    new ReadyToPayModel(
-      {
-        method: 'bitcoin',
-        filters: []
-      },
-    ),
-    new ReadyToPayModel(
-      {
-        method: 'payment-card',
-        brands: ['Visa'],
-        filters: []
-      }
-    )
-  ];
 
-  const results = instance._getPaymentMethods(methods);
+  const results = getPaymentMethods({ state: instance });
   expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);
   expect(results['EXPRESS_METHODS'].length).toEqual(1);
   expect(results['METHODS'].length).toEqual(1);