PaymentMethodSelector

Domain

Radio-group kart seçici. Credit card, debit card, bank transfer ve wallet seçenekleri.

Default (4 methods)

Preview

Payment method

Credit Card

Visa, Mastercard, Amex

Debit Card

All bank debit cards

Bank Transfer

Direct from account

Digital Wallet

PayPal, Google Pay

Code

<%- include('modules/domain/common/payment/PaymentMethodSelector', {
  name:  'paymentMethod',
  value: selectedMethod
}) %>

Source modules/domain/common/payment/PaymentMethodSelector.ejs

<%
  var _name    = locals.name    || 'paymentMethod';
  var _value   = locals.value   || 'CREDIT_CARD';
  var _legend  = locals.legend  || 'Payment method';
  var _disabled = !!locals.disabled;

  var methods = [
    { value: 'CREDIT_CARD',   label: 'Credit Card',     desc: 'Visa, Mastercard, Amex',    icon: 'fa-solid fa-credit-card text-blue-600' },
    { value: 'DEBIT_CARD',    label: 'Debit Card',       desc: 'All bank debit cards',      icon: 'fa-solid fa-credit-card text-green-600' },
    { value: 'BANK_TRANSFER', label: 'Bank Transfer',    desc: 'Direct from your account',  icon: 'fa-solid fa-building-columns text-text-secondary' },
    { value: 'WALLET',        label: 'Digital Wallet',   desc: 'PayPal, Google Pay, etc.', icon: 'fa-solid fa-wallet text-purple-600' },
  ];
%>
>
  <%= _legend %>
  
    <% methods.forEach(function(m) { %>
    <%
      var isSelected = m.value === _value;
      var cardClass = isSelected
        ? 'border-primary ring-2 ring-primary bg-primary-subtle/30'
        : 'border-border hover:border-border-strong';
    %>
    
       <%= _disabled ? 'disabled' : '' %>
        class="sr-only">
      
        <% if (isSelected) { %><% } %>
      
      
      
        <%= m.label %>
        <%= m.desc %>
      
    
    <% }); %>