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

package/package.json

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

package/src/functions/mount/index.js

@@ -67,7 +67,7 @@ import setupUserFlow from './setup-user-flow';
  * @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

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-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

@@ -36,7 +36,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/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/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/ready-to-pay.js

@@ -33,16 +33,28 @@ 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({
+      .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);

package/src/style/components/accordion.js

@@ -0,0 +1,127 @@
+import { lighten } from '../utils/color-values';
+
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the accordion component.
+// -----------------------------------------------------------------------------
+
+export const accordion = (theme) => `
+  /* ACCORDION CLOSED */
+  .rebilly-instruments-accordion {
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: 0 var(--rebilly-spacings-s);
+    background: var(--rebilly-colorBackground);
+    transition: border 0.2s ease, box-shadow 0.2s ease;
+    margin: var(--rebilly-spacings-s) 0;
+    border-radius: var(--rebilly-borderRadius);
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-accordion:first-of-type {
+    margin-top: 0;
+  }
+
+  .rebilly-instruments-accordion:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: var(--rebilly-spacings-xs) var(--rebilly-spacings-s);
+    margin: 0px calc(-1 * var(--rebilly-spacings-s));
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    margin-right: var(--rebilly-spacings-s);
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    box-shadow: 0 0 0 0 transparent;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.4);
+    opacity: 0;
+    background: var(--rebilly-colorPrimary);
+    border-radius: 50%;
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-accordion:hover .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: ${lighten(theme.colorText, 60)};
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary img {
+    margin-right: var(--rebilly-spacings-s);
+    height: auto;
+    max-width: 40px;
+    width: 100%;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+    margin: 0;
+    font-weight: 500;
+    flex: 2;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure {
+    margin: auto;
+    padding: 0;
+    height: 26px;
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure img {
+    width: auto;
+    height: 100%;
+    border-radius: 4px;
+    margin-right: var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands span {
+    color: var(--rebilly-colorMutedText);
+    margin: 0;
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
+    line-height: 1;
+  }
+
+  /* ACCORDION OPENED */
+  .rebilly-instruments-accordion[open] {
+    padding: 0 var(--rebilly-spacings-s) var(--rebilly-spacings-s);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
+    border-bottom: 1px solid var(--rebilly-colorMutedBorder);
+    margin-bottom: var(--rebilly-spacings-m);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
+    border-color: var(--rebilly-colorPrimary);
+    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+`;

package/src/style/components/button.js

@@ -50,6 +50,9 @@ export const button = () => `
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
     background: var(--rebilly-colorBackground);
     color: var(--rebilly-buttonColorBackground);
     border-color: var(--rebilly-buttonColorBackground);

package/src/style/components/forms/form.js

@@ -13,7 +13,6 @@ export const form = () => `
   .rebilly-instruments-form select:-webkit-autofill:hover,
   .rebilly-instruments-form select:-webkit-autofill:focus {
     -webkit-text-fill-color: var(--rebilly-colorText);
-    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
-    transition: background-color 5000s ease-in-out 0s;
+    transition: background-color 5000s ease-in-out 0s, box-shadow 200ms, border 200ms;
   }
 `;

package/src/style/components/index.js

@@ -12,6 +12,7 @@ import { loader } from './loader';
 import { icons } from './icons';
 import { address } from './address';
 import { overlay } from './overlay';
+import {accordion} from './accordion';
 
 // Order of components matters for style cascade
 export const components = (theme) => `
@@ -32,4 +33,5 @@ export const components = (theme) => `
   ${icons(theme)}
   ${address(theme)}
   ${overlay(theme)}
+  ${accordion(theme)}
 `;

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

@@ -3,7 +3,7 @@ import { getMethodData } from './get-method-data';
 
 const SUPPORTED_EXPRESS_METHODS = ['Google Pay', 'Apple Pay', 'paypal'];
 
-const SUPPORTED_METHODS = ['payment-card'];
+const SUPPORTED_METHODS = ['payment-card', 'ach'];
 
 const isExpressMethod = ({ method, feature }) => {
   return (

package/src/views/method-selector/mount-methods.js

@@ -3,11 +3,57 @@ import { mountModal } from '../modal';
 import { MethodIframe } from '../common/iframe';
 import { getMethodData } from './get-method-data';
 
+async function mountInline(state, {
+  methodId,
+  paymentMethodsUrl,
+  container,
+  model,
+  method
+}) {
+  const iframe = await new MethodIframe({
+    name: methodId,
+    url: `${paymentMethodsUrl}/${methodId}`,
+    container,
+    model
+  });
+  iframe.bindEventListeners({
+    loader: state.loader,
+    id: method.method
+  });
+  state.iframeComponents.push(iframe);
+}
+
+function displayBrands({summary, method}) {
+  function renderBrand(brand) {
+    return `
+      <figure>
+        <img alt="${brand}" src="https://forms.secure-payments.app/payment-instruments/brand/${brand.replace(/\s/, '')}.svg" />
+      </figure>
+    `;
+  }
+
+  const {brands} = method;
+  summary.insertAdjacentHTML(
+    'beforeend',
+    `<div class="rebilly-instruments-accordion-brands">${(() => {
+      if (brands.length >= 4) {
+        const truncatedBrands = brands.slice(0, 3);
+        return `${truncatedBrands.map(brand => renderBrand(brand)).join('')}
+          <span data-rebilly-i18n="forms.andMore">and more</span>
+        `
+      }
+      return brands.map(brand => renderBrand(brand)).join('');
+    })()}</div>`
+  );
+}
+
 export function MountMethods({
   state,
   METHODS_CONTAINER,
   METHODS
 }) {
+  const isAccordion = METHODS.length > 1;
+
   METHODS.forEach(async (method) => {
     const { METHOD_ID: methodId, METHOD_TYPE: methodType } =
       getMethodData(method);
@@ -26,25 +72,63 @@ export function MountMethods({
       method
     };
 
-    METHODS_CONTAINER.insertAdjacentHTML(
-      'beforeend',
-      `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
-    );
-    const container = document.querySelector(`#${selector}`);
+    if (isAccordion) {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<details class="rebilly-instruments-accordion for-${methodId}">
+            <summary class="rebilly-instruments-accordion-summary">
+                <span class="rebilly-instruments-accordion-summary-radio"></span>
+                <img class="rebilly-instruments-accordion-${method.method}-img" src="${method.metadata.logo}" alt="${method.method}"/>
+                <span class="rebilly-instruments-accordion-title" data-rebilly-i18n="paymentMethods.${method.method}">${method.metadata.name}</span>
+            </summary>
+            <div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>
+        </details>`
+      );
+
+      if ([
+        'payment-card'
+      ].includes(method.method)) {
+        const summary = document.querySelector(`.for-${methodId} > .rebilly-instruments-accordion-summary`);
+        displayBrands({summary, method});
+      }
 
-    if (isiFrame) {
-      const iframe = await new MethodIframe({
-        name: methodId,
-        url: `${paymentMethodsUrl}/${methodId}`,
+      state.loader.stopLoading({ id: method.method });
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
+      state.loader.stopLoading({ id: method.method });
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
         container,
-        model
+        model,
+        method
       });
-      iframe.bindEventListeners({
-        loader: state.loader,
-        id: method.method
+    } else if (isiFrame) {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
+      state.loader.stopLoading({ id: method.method });
+      mountInline(state, {
+        methodId,
+        paymentMethodsUrl,
+        container,
+        model,
+        method
       });
-      state.iframeComponents.push(iframe);
     } else {
+      METHODS_CONTAINER.insertAdjacentHTML(
+        'beforeend',
+        `<div id="${selector}" data-rebilly-instruments-type="${methodId}"></div>`
+      );
+      const container = document.querySelector(`#${selector}`);
+
       container.insertAdjacentHTML(
         'beforeend',
         `<button class="${selector} rebilly-instruments-button" data-rebilly-i18n="paymentMethods.${
@@ -64,4 +148,23 @@ export function MountMethods({
       state.loader.stopLoading({ id: method.method });
     }
   });
+
+  if (isAccordion) {
+    // Fetch all the accordion elements.
+    const details = document.querySelectorAll('.rebilly-instruments-accordion');
+    // Add the onclick listeners.
+    details.forEach((targetDetail) => {
+      targetDetail.addEventListener('click', () => {
+        // Close all the accordion that are not targetDetail.
+          details.forEach((detail) => {
+            detail.removeAttribute('open');
+          });
+      });
+    });
+
+    // Open the first accordion by default
+    details[0].open = true;
+  }
+
+  state.translate.translateItems();
 }

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

@@ -0,0 +1,9 @@
+import { ok, get } from 'msw-when-then';
+
+export const rebillyURL = '*';
+
+export const initRebillyApiMocks = (when) => {
+  when(get(`${rebillyURL}/payment-methods`)).thenReturn((() => {
+    return ok([])
+  })());
+};