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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.3.2-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,6 +63,7 @@ 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.
@@ -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.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/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;
   }

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/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/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/style/components/accordion.js

@@ -8,13 +8,18 @@ export const accordion = (theme) => `
   /* ACCORDION CLOSED */
   .rebilly-instruments-accordion {
     border: 1px solid var(--rebilly-colorMutedBorder);
-    padding: 0 var(--rebilly-spacings-s);
+    padding: 0 calc(var(--rebilly-spacings-m) - 4px);
     background: var(--rebilly-colorBackground);
-    transition: border 0.2s ease, box-shadow 0.2s ease;
+    transition: border 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
     margin: var(--rebilly-spacings-s) 0;
     border-radius: var(--rebilly-borderRadius);
     overflow: hidden;
     cursor: pointer;
+    opacity: 0.8;
+  }
+
+  .rebilly-instruments-accordion:hover {
+    opacity: 1;
   }
 
   .rebilly-instruments-accordion:first-of-type {
@@ -33,37 +38,37 @@ export const accordion = (theme) => `
     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));
+    padding: calc(var(--rebilly-spacings-m) - 14px) calc(var(--rebilly-spacings-m) - 4px);
+    margin: 0px calc(-1 * calc(var(--rebilly-spacings-m) - 4px));
+    background: var(--rebilly-colorBackground);
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio {
-    height: 18px;
-    width: 18px;
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    position: relative;
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    height: calc(var(--rebilly-spacings-m) - 4px);
     border-radius: 50%;
-    margin-right: var(--rebilly-spacings-s);
-    border: 1px solid var(--rebilly-colorMutedBorder);
-    box-shadow: 0 0 0 0 transparent;
+    background: ${lighten(theme.colorText, 60)};
+    margin-left: var(--rebilly-spacings-m);
     transition: all 0.2s ease;
-    position: relative;
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-radio::after {
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark::after {
     content: '';
     position: absolute;
-    width: 10px;
-    height: 10px;
+    border: solid var(--rebilly-colorBackground);
+    width: calc(var(--rebilly-spacings-xs) + 2px);
+    height: calc(var(--rebilly-spacings-xs) - 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%) scale(0.4);
-    opacity: 0;
-    background: var(--rebilly-colorPrimary);
-    border-radius: 50%;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
     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-summary:hover .rebilly-instruments-accordion-summary-checkmark {
+    background: var(--rebilly-colorText);
   }
 
   .rebilly-instruments-accordion .rebilly-instruments-accordion-summary img {
@@ -73,55 +78,50 @@ export const accordion = (theme) => `
     width: 100%;
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-title {
     margin: 0;
     font-weight: 500;
     flex: 2;
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands {
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands {
     display: inline-flex;
     justify-content: flex-end;
     align-items: center;
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure {
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands figure {
     margin: auto;
     padding: 0;
     height: 26px;
   }
 
-  .rebilly-instruments-accordion .rebilly-instruments-accordion-brands figure img {
+  .rebilly-instruments-accordion-summary .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 {
+  .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-brands span {
     color: var(--rebilly-colorMutedText);
-    margin: 0;
+    margin: 0 0 0 var(--rebilly-spacings-xs);
     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);
+    padding: 0 calc(var(--rebilly-spacings-m) - 4px) calc(var(--rebilly-spacings-m) - 4px);
+    opacity: 1;
   }
 
   .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary {
     border-bottom: 1px solid var(--rebilly-colorMutedBorder);
-    margin-bottom: var(--rebilly-spacings-m);
+    margin-bottom: calc(var(--rebilly-spacings-m) - 4px);
   }
 
-  .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;
+  .rebilly-instruments-accordion[open] .rebilly-instruments-accordion-summary .rebilly-instruments-accordion-summary-checkmark {
+    background: ${theme.colorPrimary};
   }
 `;

package/src/style/components/button.js

@@ -79,4 +79,21 @@ export const button = () => `
   .rebilly-instruments-button:first-of-type { margin-top: 0; }
 
   .rebilly-instruments-button:last-of-type { margin-bottom: 0; }
+
+  .rebilly-instruments-button-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button {
+    margin: 0 var(--rebilly-spacings-xs);
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+    margin-left: 0;
+  }
+
+  .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+    margin-right: 0;
+  }
 `;

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

@@ -1,8 +1,7 @@
-import { lighten } from '../../utils/color-values';
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the checkbox component.
 // -----------------------------------------------------------------------------
-export const checkbox = (theme) => `
+export const checkbox = () => `
   /**
   * Checkbox
   */
@@ -33,10 +32,10 @@ export const checkbox = (theme) => `
     position: relative;
     top: 0;
     left: 0;
-    height: 24px;
-    width: 24px;
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    height: calc(var(--rebilly-spacings-m) - 4px);
     border-radius: 4px;
-    box-shadow: inset 0 0 0 1px var(--rebilly-colorMutedBorder);
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
     margin-right: var(--rebilly-spacings-s);
     background-color: transparent;
     transition: all 200ms;
@@ -45,17 +44,20 @@ export const checkbox = (theme) => `
   .rebilly-instruments-form-field-checkbox span:after {
     content: '';
     position: absolute;
-    left: 9px;
-    top: 4px;
-    opacity: 0;
-    width: 5px;
-    height: 11px;
     border: solid var(--rebilly-colorPrimary);
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    transition: all 200ms;
+    width: calc(var(--rebilly-spacings-xs) + 4px);
+    height: calc(var(--rebilly-spacings-xs) - 2px);
+    border-width: 2px 2px 0 0;
+    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    transform: translateY(-60%) translateX(-50%) rotate(135deg);
+    transition: all 0.2s ease;
+  }
+
+  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
@@ -66,10 +68,6 @@ export const checkbox = (theme) => `
     opacity: 1;
   }
 
-  .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
-    box-shadow: 0 0 0 2px ${lighten(theme.colorPrimary, 80)}, inset 0 0 0 1px var(--rebilly-colorPrimary);
-  }
-
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {
     opacity: 0.6;
   }

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

@@ -0,0 +1,80 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the radio component.
+// -----------------------------------------------------------------------------
+export const radio = () => `
+  /**
+  * Checkbox
+  */
+  .rebilly-instruments-form-field-radio {
+    position: relative;
+    opacity: 1;
+    align-items: center;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
+    cursor: pointer;
+    transform: none;
+  }
+
+  .rebilly-instruments-form-field-radio > * {
+    cursor: pointer;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .rebilly-instruments-form-field-radio > span {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: calc(var(--rebilly-spacings-m) - 4px);
+    width: calc(var(--rebilly-spacings-m) - 4px);
+    min-width: calc(var(--rebilly-spacings-m) - 4px);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorMutedBorder);
+    margin-right: var(--rebilly-spacings-s);
+    background-color: transparent;
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio > span:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    opacity: 0;
+    width: calc(var(--rebilly-spacings-xs) + 4px);
+    height: calc(var(--rebilly-spacings-xs) + 4px);
+    border-radius: 50%;
+    background: var(--rebilly-colorMutedBorder);
+    transition: all 200ms;
+  }
+
+  .rebilly-instruments-form-field-radio:hover > span:after {
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span {
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:checked ~ span:after {
+    background: var(--rebilly-colorPrimary);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:focus ~ span {
+    opacity: 1;
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
+  }
+
+  .rebilly-instruments-form-field-radio input[type="radio"]:disabled ~ span {
+    opacity: 0.6;
+  }
+`;

package/src/style/components/index.js

@@ -1,6 +1,7 @@
 import { expressMethods, methods } from './methods';
 import { form } from './forms/form';
 import { checkbox } from './forms/checkbox';
+import { radio } from './forms/radio';
 import { field } from './forms/field';
 import { input } from './forms/input';
 import { label } from './forms/label';
@@ -12,7 +13,7 @@ import { loader } from './loader';
 import { icons } from './icons';
 import { address } from './address';
 import { overlay } from './overlay';
-import {accordion} from './accordion';
+import { accordion } from './accordion';
 
 // Order of components matters for style cascade
 export const components = (theme) => `
@@ -25,7 +26,8 @@ export const components = (theme) => `
   ${input(theme)}
   ${select(theme)}
   ${label(theme)}
-  ${checkbox(theme)}
+  ${checkbox()}
+  ${radio()}
   ${validation(theme)}
   ${button(theme)}
   ${divider(theme)}

package/src/style/helpers/index.js

@@ -48,4 +48,7 @@ export const helpers = () => `
   .rebilly-instruments-helper-ml-xl { margin-left: var(--rebilly-spacings-xl) !important }
   .rebilly-instruments-helper-ml-xxl { margin-left: var(--rebilly-spacings-2xl) !important }
   .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
+
+  .rebilly-instruments-display-flex { display: flex!important }
+  .rebilly-instruments-align-items-center { align-items: center!important }
 `;

package/src/style/payment-instruments/index.js

@@ -1,5 +1,7 @@
 import { methodContent } from './content';
 import { paymentCard } from './payment-card';
+import { paymentInstrumentList } from './payment-instrument-list';
+import { paymentInstrument } from './payment-instrument';
 
 // Order of components matters for style cascade
 export const paymentInstruments = (theme) => `
@@ -7,4 +9,6 @@ export const paymentInstruments = (theme) => `
   ------------------------------------------------------------ */
   ${methodContent()}
   ${paymentCard(theme)}
+  ${paymentInstrument()}
+  ${paymentInstrumentList()}
 `;

package/src/style/payment-instruments/payment-instrument-list.js

@@ -0,0 +1,44 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the payment instrument list component.
+// -----------------------------------------------------------------------------
+export const paymentInstrumentList = () => `
+  .rebilly-instruments-payment-instrument-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list li {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    list-style-type: none;
+    padding: var(--rebilly-spacings-xs) 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list li:first-child {
+    padding-top: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rebilly-instruments-payment-instrument-list li + li {
+    border-top: 1px solid var(--rebilly-colorMutedBorder);
+  }
+
+  .rebilly-instruments-payment-instrument-list.is-relaxed li {
+    min-height: var(--rebilly-spacings-form-element-min-height);
+  }
+
+  .rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
+    width: 100%;
+  }
+
+  .rebilly-instruments-payment-instrument-list li .rebilly-instruments-payment-instrument-list-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+`;