Payment Methods 2 Widget

Overview

PaymentMethods2 is a hybrid widget that combines the visual logo grid display of PaymentDeposits2 with the comprehensive data structure of PaymentMethods. It displays both deposit and withdrawal methods in a responsive logo grid with intelligent collapse/expand functionality, making it ideal for showcasing all available payment options in a compact, visually appealing format.

Key Features:

• Combined Display: Shows both deposit and withdrawal methods together
• Logo Grid Layout: Clean, visual presentation with 87px logos
• Smart Collapse/Expand: Dynamic toggle based on container width and visible methods
• Responsive Grid: Automatically calculates optimal columns (3-10+ per row)
• Items Limit: Control maximum number of methods displayed
• Product Filtering: Filter by product type (CA=Casino, SP=Sports)
• Resize Observer: Real-time recalculation on container size changes
• Mobile Optimized: Special breakpoints for narrow containers (<350px)
• JavaScript Integration: Interactive expand/collapse with dynamic count
• Regional Support: Country and state-specific payment methods

Basic Usage

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="greatwin-casino" 
  product="CA" 
  language="en" 
  country="ZZ" 
  items="8" \>
</nw-blocks>

Casino Payment Methods

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="fresh-casino" 
  product="CA" 
  language="en" 
  country="UK" 
  items="12" \>
</nw-blocks>

Sports Betting Payment Methods

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="betsson-sports" 
  product="SB" 
  language="en" 
  country="UK" 
  items="10" \>
</nw-blocks>

All Methods (No Limit)

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="leovegas-casino" 
  product="CA" 
  language="en" 
  country="UK" \>
</nw-blocks>

Regional (US State)

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="draftkings-casino" 
  product="CA" 
  language="en" 
  country="US" 
  items="15" \>
</nw-blocks>

Attributes Reference

Widget Components

Combined Method Display

Data Sources:

• Deposit Methods: From depositMethodsOrder array
• Withdrawal Methods: From withdrawalMethods array
• Combined Array: [...depositMethods, ...withdrawalMethods]

Items Limit:

• Applied to combined array
• Slices to specified count
• Shows all if no limit set

Example:

const combined = [...depositMethods, ...withdrawalMethods];
const allMethods = itemsLimit ? combined.slice(0, itemsLimit) : combined;

Responsive Logo Grid

Layout:

• Fixed logo width: 87px per method
• Gap between logos: 20px
• Dynamic column calculation based on container width
• Automatic reflow on resize

Responsive Breakpoints:

Column Calculation Formula:

const logoWidth = 87;
const gap = 20;
const columns = Math.floor((availableWidth + gap) / (logoWidth + gap));

Collapse/Expand Toggle

Functionality:

• Shows only first row of methods when collapsed
• Displays all methods when expanded
• Toggle button shows count of hidden methods
• Arrow indicator changes direction (▼/▲)

Dynamic Count Display:

• Calculates visible methods per row
• Subtracts from total to get hidden count
• Updates count on resize
• Example: “View more (8)” shows 8 hidden methods

Toggle States:

• Collapsed: widget__cols collapsed class
• Expanded: widget__cols expanded class
• Arrow Down: When collapsed
• Arrow Up: When expanded

Resize Observer

Real-time Updates:

• Monitors container size changes
• Recalculates visible methods per row
• Updates toggle button count dynamically
• Falls back to window resize event if unsupported

Event Handling:

const resizeObserver = new ResizeObserver(updateToggle);
resizeObserver.observe(widget);

JavaScript Integration

Inline Script Injection

The widget injects a self-executing script with comprehensive functionality:

Key Functions:

1. calculatePerRow(): Determines how many logos fit per row
2. updateToggle(): Updates toggle visibility and hidden count
3. toggleExpanded(): Handles expand/collapse interaction

Event Listeners:

• Click event on toggle button
• ResizeObserver for container changes
• Fallback to window resize event

State Management:

• Tracks expanded/collapsed state
• Updates CSS classes dynamically
• Manages arrow direction
• Recalculates hidden count

Script Cleanup

Proper Cleanup:

return () => {
  if (toggle) {
    toggle.removeEventListener('click', toggleExpanded);
  }
  if (resizeObserver) {
    resizeObserver.disconnect();
  } else {
    window.removeEventListener('resize', updateToggle);
  }
};

Prevents memory leaks and ensures smooth unmounting.

Common Use Cases

Casino Review Page

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="greatwin-casino" 
  product="CA" 
  language="en" 
  country="UK" 
  items="15" \>
</nw-blocks>

Sports Betting Site

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="leovegas-casino" 
  product="CA" 
  language="en" 
  country="UK" 
  items="12" \>
</nw-blocks>

Limited Display for Highlights

<!-- Top 6 methods -->
<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="leovegas-casino" 
  product="CA" 
  language="en" 
  country="SE" 
  items="6" \>
</nw-blocks>

<!-- Top 8 methods -->
<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="betsson-casino" 
  product="CA" 
  language="en" 
  country="SE" 
  items="8" \>
</nw-blocks>

Comprehensive Display (All Methods)

<!-- No items limit - show all deposit + withdrawal methods -->
<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="legendplay-casino" 
  product="CA" 
  language="en" 
  country="ZZ" \>
</nw-blocks>

Mobile-Optimized Display

<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="mobile-casino" 
  product="CA" 
  language="en" 
  country="UK" 
  items="9" \>
</nw-blocks>

Best Practices

Content Strategy

• Product Filtering: Always specify product for accurate method filtering
• Appropriate Limits: Set items to 8-12 for balanced display
• Combined Methods: Leverage both deposit and withdrawal in single view
• Regional Accuracy: Specify country for compliance and availability
• Language Matching: Ensure language matches target audience

UX Optimization

• Visible Methods: Aim for 6-10 methods in first row
• Smart Toggle: Let users expand to see all methods
• Quick Scan: Logo grid allows fast visual recognition
• Mobile First: Test on narrow containers (<350px)
• Resize Handling: Widget adapts automatically to container changes

Visual Design

• Consistent Logos: Use standard 87px width for all payment method logos
• Adequate Spacing: 20px gap provides clean, uncluttered layout
• Grid Alignment: Methods align perfectly in responsive grid
• Toggle Clarity: Arrow and count provide clear expansion affordance

Performance

• Items Limit: Use items attribute to prevent rendering too many methods
• Resize Observer: Modern, efficient resize detection
• Lazy Loading: Consider lazy loading for below-fold widgets
• Minimal Scripts: Inline script is compact and self-contained
• Cache Optimization: Payment methods cached in KV storage

Accessibility

• Logo Alt Text: Ensure payment method logos have descriptive alt attributes
• Keyboard Navigation: Toggle button is keyboard accessible
• Screen Reader Support: Payment method names available via alt text
• Focus States: Ensure toggle button has visible focus indicator

Regional Compliance

• Country Filtering: Methods automatically filtered by country
• State Support: US/Canada states supported (US-NJ, CA-ON format)
• Regulatory Compliance: Shows only legally allowed methods per region
• Currency Matching: Payment methods match regional currencies

Advanced Configuration

Custom Ordering

Control method display order via CMS configuration:

// Deposit methods ordered
depositMethodsOrder: [
  { paymentMethod: "visa", image: "/visa.png" },
  { paymentMethod: "mastercard", image: "/mc.png" },
  { paymentMethod: "skrill", image: "/skrill.png" },
  // ... more deposit methods
]

// Withdrawal methods
withdrawalMethods: [
  { paymentMethod: "bank-transfer", image: "/bank.png" },
  { paymentMethod: "skrill", image: "/skrill.png" },
  // ... more withdrawal methods
]

// Combined display: [...depositMethods, ...withdrawalMethods]

Container Width Control

Widget adapts to parent container:

<!-- Full width section -->
<div style="width: 100%; max-width: 1200px;">
  <nw-blocks id="paymentmethods2" ...></nw-blocks>
</div>

<!-- Sidebar (narrow) -->
<div style="width: 300px;">
  <nw-blocks id="paymentmethods2" ...></nw-blocks>
</div>

<!-- Two-column layout -->
<div style="width: 50%; min-width: 400px;">
  <nw-blocks id="paymentmethods2" ...></nw-blocks>
</div>

Items Limit Strategies

<!-- Highlights only (top 6) -->
<nw-blocks items="6" ...></nw-blocks>

<!-- Standard display (8-10) -->
<nw-blocks items="10" ...></nw-blocks>

<!-- Comprehensive (15-20) -->
<nw-blocks items="20" ...></nw-blocks>

<!-- All available (no limit) -->
<nw-blocks ...></nw-blocks>

Product-Specific Displays

<!-- Casino only -->
<nw-blocks product="CA" ...></nw-blocks>

<!-- Sports betting only -->
<nw-blocks product="SB" ...></nw-blocks>

<!-- Poker -->
<nw-blocks product="PK" ...></nw-blocks>

<!-- All products (no filter) -->
<nw-blocks product="" ...></nw-blocks>

Data Requirements

Sanity CMS Structure

Widget fetches combined deposit and withdrawal methods:

{
  brand: {
    cloakedLink: "legendplay-casino",
    brandName: "Magical Spin Casino",
    isActive: true,
    isBrandActive: true,
    product: "CA",
    depositMethodsOrder: [
      {
        paymentMethod: "visa",
        image: "https://cdn.example.com/payment-methods/visa.png",
        displayOrder: 1
      },
      {
        paymentMethod: "mastercard",
        image: "https://cdn.example.com/payment-methods/mastercard.png",
        displayOrder: 2
      },
      {
        paymentMethod: "skrill",
        image: "https://cdn.example.com/payment-methods/skrill.png",
        displayOrder: 3
      },
      {
        paymentMethod: "neteller",
        image: "https://cdn.example.com/payment-methods/neteller.png",
        displayOrder: 4
      },
      // ... more deposit methods
    ],
    withdrawalMethods: [
      {
        paymentMethod: "bank-transfer",
        image: "https://cdn.example.com/payment-methods/bank.png",
        displayOrder: 1
      },
      {
        paymentMethod: "skrill",
        image: "https://cdn.example.com/payment-methods/skrill.png",
        displayOrder: 2
      },
      {
        paymentMethod: "neteller",
        image: "https://cdn.example.com/payment-methods/neteller.png",
        displayOrder: 3
      },
      // ... more withdrawal methods
    ],
    showLessLabel: "Show Less",
    viewMoreLabel: "View more"
  }
}

Required Fields:

• cloakedLink: Brand identifier
• isActive: Brand status
• isBrandActive: Brand active flag
• depositMethodsOrder: Array of deposit methods
• withdrawalMethods: Array of withdrawal methods

Payment Method Fields:

• paymentMethod: Method identifier (required)
• image: Logo URL (required)
• displayOrder: Sorting order (optional)

Optional Fields:

• showLessLabel: Collapse button label
• viewMoreLabel: Expand button label

Translation Keys

Required i18n keys:

{
  "wgt-payment-show-less": "Show Less",
  "wgt-payment-view-more": "View more",
  "wgt-paymentMethods-method": "Method",
  "wgt-paymentMethods-delay": "Processing Time",
  "wgt-paymentMethods-deposit": "Deposit",
  "wgt-paymentMethods-withdrawal": "Withdrawal"
}

Language-Specific Examples:

{
  "en": {
    "wgt-payment-show-less": "Show Less",
    "wgt-payment-view-more": "View more"
  },
  "fr": {
    "wgt-payment-show-less": "Afficher moins",
    "wgt-payment-view-more": "Voir plus"
  },
  "es": {
    "wgt-payment-show-less": "Mostrar menos",
    "wgt-payment-view-more": "Ver más"
  },
  "de": {
    "wgt-payment-show-less": "Weniger anzeigen",
    "wgt-payment-view-more": "Mehr anzeigen"
  }
}

KV Storage

Payment method data is cached:

• Key: PAYMENT_METHODS2:{cloakedLink}:{country}:{language}:{product}
• TTL: 1 hour
• Invalidation: On brand/payment method update

Error Handling

Inactive Brand

If brand is inactive or not allowed:

<p id="inactive-brand" style="display: none;">
  The brand {brandName} is inactive or not allowed.
</p>

Handling:

• Widget shows hidden error message
• No visual output to users
• Check isActive and isBrandActive flags
• Verify regional availability

No Payment Methods

If no methods available:

• Widget renders empty grid
• Toggle button hidden automatically
• Consider fallback message in CMS
• Check deposit and withdrawal method arrays

Missing Method Data

Missing Image:

• Image placeholder or broken image icon
• Alt text displays method name
• Ensure all logos uploaded to CDN

Empty Arrays:

• depositMethodsOrder empty: No deposit methods shown
• withdrawalMethods empty: No withdrawal methods shown
• Both empty: Widget shows nothing

JavaScript Disabled

If JavaScript disabled:

• Widget displays all methods (no collapse)
• Toggle button non-functional
• Grid layout still responsive via CSS
• Graceful degradation to static grid

ResizeObserver Unsupported

Fallback:

if (typeof ResizeObserver !== 'undefined') {
  resizeObserver = new ResizeObserver(updateToggle);
  resizeObserver.observe(widget);
} else {
  window.addEventListener('resize', updateToggle);
}

Falls back to window resize event in older browsers.

Comparison: Widget Variants

When to use PaymentMethods2:

• Need both deposit and withdrawal in one widget
• Visual logo display preferred over detailed table
• Space-efficient layout required
• Product filtering needed
• Mobile-first responsive design
• Quick overview of all payment options

When to use PaymentMethods:

• Detailed information required
• Processing times important
• Deposit vs withdrawal distinction needed
• Full specifications display

When to use PaymentDeposits2:

• Only deposit methods needed
• No product filtering required
• Similar visual display to PaymentMethods2

Backward Compatibility

All examples above use the new <nw-blocks> tag. For backward compatibility, you can still use <bw-widget>:

<!-- Old syntax (still supported) -->
<bw-widget 
  id="paymentmethods2" 
  cloaked-link="legendplay-casino" 
  product="CA" 
  language="en" 
  country="ZZ" 
  items="8" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="paymentmethods2" 
  cloaked-link="legendplay-casino" 
  product="CA" 
  language="en" 
  country="ZZ" 
  items="8" \>
</nw-blocks>

Both tags work identically, but <nw-blocks> is recommended for all new implementations.