@rebilly/instruments 3.25.1-beta.0 → 3.26.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.25.1-beta.0",
+  "version": "3.26.1-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/functions/purchase.js

@@ -99,8 +99,8 @@ export async function makePurchase({ payload }) {
 export function handleApprovalUrl({fields, payload}) {
   if (payload.redirectUrl || !fields.transaction?.approvalUrl) {
     const { paymentMethodsUrl } = state.options._computed;
-    
     const modelSafeFields = JSON.parse(JSON.stringify(fields));
+
     const model = {};
     if (state.data.isPayment) {
       model.payment = modelSafeFields;

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

@@ -5,6 +5,57 @@ import { Endpoint } from './index';
 import state from '../state';
 import { mapItemsQuantities } from '../utils/quantity';
 
+export function filterReadyToPay(readyToPay) {
+  const paymentMethodsMetadata = [...paymentMethodsFile];
+  const EXPRESS_METHODS = [
+    'Google Pay',
+    'Apple Pay',
+    'paypal',
+  ];
+  const BLOCKED_METHODS = [
+    // account number, routing number, and account type required
+    'echeck',
+
+    // payment instrument is required
+    // card number is required
+    // card cvv is required
+    // expiration month is required
+    // expiration year is required
+    'Khelocard',
+    
+    // Klarna authorization token is required
+    // Klarna session ID is required
+    'Klarna',
+  ];
+  const isExpressMethod = ({ method, feature }) => (
+    EXPRESS_METHODS.includes(method) ||
+    EXPRESS_METHODS.includes(feature?.name)
+  );
+  return readyToPay
+    .filter(readyData => {
+      // Remove result for "old" paypal method
+      const isOldPayPal = readyData.method === 'paypal' && !readyData.feature;
+      // Remove result for plaid method
+      const isPlaid = readyData.method === 'ach' && readyData.feature;
+      // Remove result for blocked method
+      const isBlocked = BLOCKED_METHODS.includes(readyData.method)
+
+      return !isOldPayPal && !isPlaid && !isBlocked
+    })
+    .map((fields, index) => {
+      const metadata = paymentMethodsMetadata
+        .find(methodMetadata => methodMetadata.apiName === fields.method) || {};
+      metadata.isExpressMethod = isExpressMethod(fields);
+
+      return new ReadyToPayModel({
+        index,
+        metadata,
+        ...fields
+      });
+    })
+    .filter(({metadata}) => metadata.storefrontEnabled);
+}
+
 export async function fetchReadyToPay({
   riskMetadata = null,
 }) {
@@ -36,22 +87,7 @@ export async function fetchReadyToPay({
 
     const { fields: readyToPayFields } = await state.storefront.purchase.readyToPay({ data });
     const readyToPay = Object.values(readyToPayFields);
-    const paymentMethodsMetadata = [...paymentMethodsFile];
-
-    return readyToPay
-      // Remove result for "old" paypal method
-      .filter((fields) => !(fields.method === 'paypal' && !fields.feature))
-      // 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
-        });
-      });
+    
+    return filterReadyToPay(readyToPay);
   });
 }

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

@@ -1,6 +1,4 @@
 import Postmate from 'popostmate';
-import { SUPPORTED_METHODS } from '../../method-selector/get-payment-methods';
-import { basicLoaderHTML } from '../../../loader';
 
 export default class BaseIframe {
   constructor({
@@ -48,10 +46,6 @@ export default class BaseIframe {
       },
     };
 
-    if (SUPPORTED_METHODS.includes(this.name)) {
-      this.container.insertAdjacentHTML('beforeend', basicLoaderHTML);
-    }
-
     const component = await new Postmate({
       name: this.name,
       url: this.url,

package/src/views/errors.js

@@ -60,6 +60,7 @@ export function clearError() {
 }
 
 export function showError(error) {
+  if (!error) return;
   const errorContainer = document.querySelector('#rebilly-instruments-error');
   if (!errorContainer) return ;
 

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

@@ -1,28 +1,5 @@
 import state from '../../state';
 
-// TODO: Express methods should be filtered from RTP some how
-export const SUPPORTED_EXPRESS_METHODS = [
-  'Google Pay',
-  'Apple Pay',
-  'paypal',
-];
-
-// TODO: Supported methods should be aimed to be not needed
-// eventually moving to a BLOCKED_METHODS
-export const SUPPORTED_METHODS = [
-  'payment-card',
-  'ach',
-  'cryptocurrency',
-  'bitcoin'
-];
-
-const isExpressMethod = ({ method, feature }) => (
-    SUPPORTED_EXPRESS_METHODS.includes(method) ||
-    SUPPORTED_EXPRESS_METHODS.includes(feature?.name)
-  );
-
-const isSupportedMethod = ({ method }) => SUPPORTED_METHODS.includes(method);
-
 export function getPaymentMethods() {
   const result = {
     EXPRESS_METHODS: [],
@@ -30,9 +7,9 @@ export function getPaymentMethods() {
   };
 
   state.data.readyToPay?.forEach((method) => {
-    if (isExpressMethod(method)) {
+    if (method.metadata.isExpressMethod) {
       result.EXPRESS_METHODS.push(method);
-    } else if (isSupportedMethod(method)) {
+    } else {
       result.METHODS.push(method);
     }
   });

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

@@ -1,31 +1,35 @@
+import { StorefontTestingInstance } from 'tests/mocks/storefront-mock';
 import { getPaymentMethods } from './get-payment-methods';
-import ReadyToPayModel from '@/storefront/models/ready-to-pay-model';
+import { ok, post } from 'msw-when-then';
+import { when } from 'tests/msw/server';
+import { storefrontURL } from 'tests/mocks/storefront-api-mock';
+import { fetchReadyToPay } from '../../storefront/ready-to-pay';
 import state from 'src/state';
 
-it('should only return the allowed methods', () => {
-  state.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: 'fake-method',
-        filters: []
-      }),
-      new ReadyToPayModel({
-        method: 'payment-card',
-        brands: ['Visa'],
-        filters: []
-      })
-    ]
-  }
+it('should only return the allowed methods', async () => {
+  StorefontTestingInstance();
+  when(
+    post(`${storefrontURL}/ready-to-pay`)
+  ).thenReturn(
+    ok([{
+      method: 'payment-card',
+      feature: {
+        name: 'Google Pay',
+        merchantName: 'google-pay-merchant-name',
+        merchantOrigin: 'google-pay-merchant-origin'
+      },
+      brands: ['Visa'],
+      filters: []
+    }, {
+      method: 'fake-method',
+      filters: []
+    }, {
+      method: 'payment-card',
+      brands: ['Visa'],
+      filters: []
+    }])
+  );
+  state.data.readyToPay = await fetchReadyToPay({});
 
   const results = getPaymentMethods();
   expect(results.hasOwnProperty('EXPRESS_METHODS')).toEqual(true);

package/src/views/method-selector/index.js

@@ -113,6 +113,7 @@ export async function mountMethodSelector() {
 
     iframes.form = iframe;
   } else {
+    state.loader.stopLoading({id: 'rebilly-instruments-form'});
     METHODS_CONTAINER.style.display = 'none';
     document.querySelectorAll('[data-rebilly-instruments="divider"]')
       .forEach(el => { el.style.display = 'none' });