SavedCardSelector

Domain

Radio-group list of saved payment cards. Shows brand badge, masked number, expiry, and default indicator. Supports remove and add-new callbacks.

Preview

VISA

•••• •••• •••• 4242

Jane Doe · 08/28 Default

•••• •••• •••• 5559

Jane Doe · 12/27

AMEX

•••• •••• •••• 0005

Jane Doe · 03/26

Code

<%- include('modules/domain/common/payment/SavedCardSelector', {
  cards: savedCards,
  selectedCardId: selectedCard,
  addHref: '/payment/cards/new',
  removeAction: '/payment/cards/{id}/remove'
}) %>

Preview

No saved cards.

+ Add new card

Code

<%- include('modules/domain/common/payment/SavedCardSelector', {
  cards: [],
  addHref: '/payment/cards/new'
}) %>

<%
  var _cards          = locals.cards          || [];
  var _selectedCardId = locals.selectedCardId || null;
  var _addHref        = locals.addHref        || null;
  var _removeAction   = locals.removeAction   || null;

  var brandColor = {
    VISA: 'bg-blue-600', MASTERCARD: 'bg-orange-500', AMEX: 'bg-teal-600',
    DISCOVER: 'bg-orange-400', JCB: 'bg-blue-600', TROY: 'bg-cyan-600',
    MIR: 'bg-green-600', UNIONPAY: 'bg-red-600', UNKNOWN: 'bg-gray-500',
  };
  var brandLabel = {
    VISA: 'VISA', MASTERCARD: 'MC', AMEX: 'AMEX', DISCOVER: 'DISC',
    JCB: 'JCB', TROY: 'TROY', MIR: 'MIR', UNIONPAY: 'UNIONPAY', UNKNOWN: '••',
  };
%>

  Select payment card

  <% if (_cards.length === 0) { %>
  No saved cards.
  <% } else { %>
  
    <% _cards.forEach(function(card) {
      var isSelected = card.cardId === _selectedCardId;
      var bc = brandColor[card.brand] || 'bg-gray-500';
      var bl = brandLabel[card.brand] || '••';
      var rowClass = isSelected
        ? 'border-primary ring-2 ring-primary ring-offset-1'
        : 'border-border hover:border-border-strong';
    %>
    
      
        class="sr-only">
      
        <% if (isSelected) { %><% } %>
      

      <%= bl %>

      
        •••• •••• •••• <%= card.last4 %>
        
          <%= card.cardholderName %> · <%= card.expiryMonth %>/<%= card.expiryYear %>
          <% if (card.isDefault) { %>Default<% } %>
        
      

      <% if (_removeAction) { %>
      
        <%- include('../../../ui/Button', {
          variant: 'ghost',
          size:    'xs',
          type:    'submit',
          children: 'Remove',
          className: 'text-error shrink-0'
        }) %>
      
      <% } %>
    
    <% }); %>
  
  <% } %>

  <% if (_addHref) { %>
  
    + Add new card
  
  <% } %>

SavedCardSelector

Multiple cards

Empty state