PaymentMethodSelector

Domain

Radio-group style card selector for payment methods. Shows icon, label, and description. Default set: credit card, debit card, bank transfer, wallet.

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
}) %>

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

  // NextJS option set — brand icons (fa-brands), no `desc` subtitles, 2-column card layout.
  // CREDIT_CARD uses fa-cc-visa (brand) so the brand library covers it; falls back to solid fa-credit-card via icon CSS.
  var methods = [
    { value: 'CREDIT_CARD', label: 'Credit Card',    icon: '' },
    { value: 'PAYPAL',      label: 'PayPal',         icon: '' },
    { value: 'APPLE_PAY',   label: 'Apple Pay',      icon: '' },
    { value: 'GOOGLE_PAY',  label: 'Google Pay',     icon: '' },
    { value: 'CRYPTO',      label: 'Cryptocurrency', icon: '' },
  ];
%>

  <%- include('../../../ui/RadioGroup', {
    name:     _name,
    legend:   _legend,
    options:  methods,
    value:    _value,
    variant:  'card',
    columns:  2,
    disabled: _disabled
  }) %>

PaymentMethodSelector

Default (4 methods)