Payment Deposits 2 Widget

Overview

PaymentDeposits2 is a modern, responsive widget that displays available deposit payment methods for a casino or betting brand. It features an intelligent collapse/expand system that adapts to container width, showing only the methods that fit and allowing users to toggle to see all options. Perfect for payment information sections, review pages, and deposit method showcases.

Key Features:

• Responsive Grid Layout: Automatically calculates optimal columns based on container width
• Smart Collapse/Expand: Shows visible methods and hides overflow with “View more” toggle
• Dynamic Count Display: Shows exact number of hidden methods in toggle button
• Custom Heading: Override default label with custom text
• Items Limit: Control maximum number of methods displayed
• Logo Display: High-quality payment method logos (87px width)
• Resize Observer: Real-time recalculation on container resize
• Mobile Optimized: Special layouts for narrow containers (<350px)
• JavaScript Integration: Interactive expand/collapse functionality
• Regional Support: Country and state-specific payment methods

Basic Usage

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="en" 
  country="CM" 
  items="11" 
  headingtext="Available Deposit Methods" \>
</nw-blocks>

With Custom Heading (Spanish)

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="es" 
  country="ZZ" 
  items="10" 
  headingtext="Métodos de Depósito" \>
</nw-blocks>

Default Label (No Custom Heading)

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="fr" 
  country="ZZ" \>
</nw-blocks>

Limited Items Display

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="22bet-sport" 
  language="en" 
  country="UK" 
  items="6" 
  headingtext="Top Deposit Options" \>
</nw-blocks>

Regional (US State)

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="betmgm-casino" 
  language="en" 
  country="US" 
  headingtext="Deposit Methods in New Jersey" \>
</nw-blocks>

Attributes Reference

Widget Components

Header Label

Display:

• Shows custom heading text if provided via headingtext attribute
• Falls back to CMS-configured label (paymentLabel)
• Translatable via i18n system

Styling:

• Bold, prominent heading
• Positioned above payment method grid
• Responsive font sizing

Payment Method Grid

Layout:

• Fixed logo width: 87px per method
• Gap between logos: 20px
• Automatic column calculation based on container width
• Responsive breakpoints:
  • ≤290px: 4 methods per row
  • ≤308px: 6 methods per row
  • ≤350px: 3 methods per row
  • >350px: Dynamic calculation based on width

Logos:

• High-quality payment method images
• Fixed dimensions for consistent grid
• Lazy loading support
• Alt text from CMS data

Collapse/Expand Toggle

Functionality:

• Appears only when methods exceed visible row capacity
• Shows count of hidden methods: “View more (5)”
• Arrow indicator (down when collapsed, up when expanded)
• Click to toggle between collapsed/expanded states
• Updates label dynamically based on state

States:

• Collapsed: Shows only first row of methods
• Expanded: Shows all methods

Labels:

• “View more (X)": Show hidden count when collapsed
• “Show Less”: Label when expanded
• Translatable via i18n system

Responsive Behavior

Dynamic Column Calculation

The widget calculates optimal columns using:

function calculatePerRow() {
  const style = window.getComputedStyle(widget);
  const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  const availableWidth = widget.clientWidth - padding;
  
  const logoWidth = 87;
  const gap = 20;
  const columns = Math.floor((availableWidth + gap) / (logoWidth + gap));
  
  // Special breakpoints
  if (availableWidth <= 290) return 4;
  if (availableWidth <= 308) return 6;
  if (availableWidth <= 350) return 3;
  
  return columns;
}

Resize Observer

Real-time Updates:

• Monitors container size changes
• Recalculates visible methods on resize
• Updates toggle button count dynamically
• Falls back to window resize event if ResizeObserver unavailable

Events Handled:

• Browser window resize
• Container width changes
• Sidebar collapse/expand
• Mobile device rotation

Container Width Breakpoints

JavaScript Integration

Inline Script Injection

The widget injects a self-executing script that:

1. Initializes toggle functionality
2. Calculates initial visible methods
3. Attaches event listeners
4. Sets up ResizeObserver
5. Updates UI on interaction

Script Features

Event Handling:

• Click events on toggle button
• Resize events for recalculation
• Class toggling for expand/collapse

State Management:

• Tracks expanded/collapsed state
• Updates arrow direction
• Recalculates hidden count

Cleanup:

• Removes event listeners on unmount
• Disconnects ResizeObserver
• Prevents memory leaks

Common Use Cases

Review Page Deposit Section

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="leovegas-casino" 
  language="en" 
  country="UK" 
  items="15" 
  headingtext="Available Deposit Methods" \>
</nw-blocks>

Multi-Language Payment Display

<!-- English -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="betsson-casino" 
  language="en" 
  country="SE" 
  headingtext="Deposit Options" \>
</nw-blocks>

<!-- French -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="cresus-casino" 
  language="fr" 
  country="FR" 
  headingtext="Méthodes de Dépôt" \>
</nw-blocks>

<!-- Spanish -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="22bet-sport" 
  language="es" 
  country="ES" 
  headingtext="Opciones de Depósito" \>
</nw-blocks>

<!-- German -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="betway-casino" 
  language="de" 
  country="DE" 
  headingtext="Einzahlungsmethoden" \>
</nw-blocks>

Regional Payment Methods (US States)

<!-- New Jersey -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="draftkings-casino" 
  language="en" 
  country="US" 
  headingtext="NJ Approved Deposit Methods" \>
</nw-blocks>

<!-- Pennsylvania -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="fanduel-casino" 
  language="en" 
  country="US-PA" 
  headingtext="PA Deposit Options" \>
</nw-blocks>

<!-- Michigan -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="betmgm-casino" 
  language="en" 
  country="US-MI" 
  headingtext="Michigan Payment Methods" \>
</nw-blocks>

Limited Display for Comparison

<!-- Show top 5 methods -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="casino-brand" 
  language="en" 
  country="CA" 
  items="5" 
  headingtext="Popular Deposit Methods" \>
</nw-blocks>

Mobile-Optimized Display

<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="mobile-casino" 
  language="en" 
  country="UK" 
  items="8" 
  headingtext="Mobile Deposits" \>
</nw-blocks>

All Methods Display

<!-- No items limit - show all available methods -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="en" 
  country="ZZ" 
  headingtext="All Deposit Methods" \>
</nw-blocks>

Best Practices

Content Strategy

• Clear Headings: Use descriptive heading text that indicates deposit methods
• Appropriate Limits: Set items based on page context (5-10 for highlights, 15+ for comprehensive)
• Regional Accuracy: Always specify country for accurate payment method filtering
• Language Matching: Ensure heading text matches the language attribute

UX Optimization

• Visible Methods: Aim for 6-10 methods in first row for optimal UX
• Toggle Visibility: Let users expand to see all methods rather than overwhelming with full list
• Mobile First: Test on narrow containers to ensure proper breakpoint handling
• Quick Access: Place most popular methods first via CMS ordering

Performance

• Resize Observer: Modern browsers use efficient ResizeObserver
• Lazy Loading: Widget defers initialization to avoid blocking page load
• Event Cleanup: Proper cleanup prevents memory leaks
• Minimal Scripts: Inline script is compact and self-contained

Accessibility

• Semantic HTML: Uses proper div structure with ARIA-friendly classes
• Keyboard Navigation: Toggle button is keyboard accessible
• Screen Readers: Payment method names available via alt text
• Focus States: Ensure toggle button has visible focus indicator

Regional Compliance

• Country Filtering: Payment 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 payment method order via CMS configuration:

// Payment method order defined in Sanity CMS
depositMethodsOrder: [
  { paymentMethod: "visa", image: "/visa.png" },
  { paymentMethod: "mastercard", image: "/mc.png" },
  { paymentMethod: "skrill", image: "/skrill.png" },
  // ... more methods
]

Container Width Control

Widget adapts to parent container:

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

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

Toggle Label Customization

Default labels can be overridden via CMS:

{
  showLessLabel: "Show Less",
  viewMoreLabel: "View more"
}

Items Limit Strategies

<!-- Top methods only -->
<nw-blocks items="6" ...></nw-blocks>

<!-- Standard display -->
<nw-blocks items="12" ...></nw-blocks>

<!-- Comprehensive list -->
<nw-blocks items="20" ...></nw-blocks>

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

Data Requirements

Sanity CMS Structure

Widget fetches deposit methods from brand profile:

{
  brand: {
    cloakedLink: "greatwin-casino",
    brandName: "GreatWin Casino",
    isActive: true,
    isBrandActive: true,
    depositMethodsOrder: [
      {
        paymentMethod: "visa",
        image: "https://cdn.example.com/payment-methods/visa.png",
        displayName: "Visa",
        processingTime: "Instant",
        minDeposit: "10",
        maxDeposit: "5000"
      },
      {
        paymentMethod: "mastercard",
        image: "https://cdn.example.com/payment-methods/mastercard.png",
        displayName: "Mastercard",
        processingTime: "Instant",
        minDeposit: "10",
        maxDeposit: "5000"
      },
      {
        paymentMethod: "skrill",
        image: "https://cdn.example.com/payment-methods/skrill.png",
        displayName: "Skrill",
        processingTime: "Instant",
        minDeposit: "10",
        maxDeposit: "10000"
      },
      // ... more methods
    ],
    withdrawalMethods: [
      // Withdrawal methods (combined with deposit methods)
    ],
    paymentLabel: "Deposit Methods",
    showLessLabel: "Show Less",
    viewMoreLabel: "View more"
  }
}

Required Fields:

• cloakedLink: Brand identifier
• isActive: Brand status
• depositMethodsOrder: Array of deposit methods

Payment Method Fields:

• paymentMethod: Method identifier
• image: Logo URL (required)
• displayName: Human-readable name
• processingTime: Time to process deposit
• minDeposit: Minimum deposit amount
• maxDeposit: Maximum deposit amount

Optional Fields:

• withdrawalMethods: Combined with deposit methods
• paymentLabel: Default heading text
• showLessLabel: Collapse button label
• viewMoreLabel: Expand button label

Translation Keys

Required i18n keys:

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

KV Storage

Payment method data is cached:

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

Error Handling

Inactive Brand

If brand is inactive:

<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 brand isActive and isBrandActive flags
• Verify regional availability

No Payment Methods

If no deposit methods available:

• Widget renders with empty grid
• Header label still displays
• Toggle button hidden automatically
• Consider fallback message in CMS

Missing Images

If payment method logo missing:

• Logo container renders empty
• Grid layout maintained
• Alt text may display (browser-dependent)
• Ensure all method images uploaded to CDN

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 display

Comparison: PaymentDeposits2 vs PaymentMethods

When to use PaymentDeposits2:

• Visual payment method showcase
• Space-constrained layouts
• Quick reference display
• Mobile-first designs
• Logo recognition sufficient

When to use PaymentMethods:

• Detailed payment information needed
• Processing times important
• Min/max limits display
• Comparison shopping
• Full specifications required

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="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="en" 
  country="CM" 
  items="11" 
  headingtext="Available Deposit Methods" \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="greatwin-casino" 
  language="en" 
  country="CM" 
  items="11" 
  headingtext="Available Deposit Methods" \>
</nw-blocks>

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