Payment Withdrawals 2 Widget

Overview

PaymentWithdrawals2 is a specialized widget that displays available withdrawal payment methods for a casino or betting brand in a clean, responsive logo grid format. It features intelligent collapse/expand functionality that adapts to container width, making it perfect for showcasing withdrawal options on review pages, banking sections, and withdrawal information displays.

Key Features:

• Withdrawal-Specific Display: Shows only withdrawal methods
• 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 via headingtext attribute
• 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 withdrawal methods

Basic Usage

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

With Custom Heading (Spanish)

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

Default Label (No Custom Heading)

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

Limited Items Display

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

Regional (US State)

<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="betmgm-casino" 
  language="en" 
  country="US" 
  headingtext="Withdrawal 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 (withdrawalLabel)
• Translatable via i18n system

Styling:

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

Withdrawal 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 withdrawal 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 Withdrawal Section

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

Banking Page

<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="betsson-casino" 
  language="en" 
  country="SE" 
  items="12" 
  headingtext="Cash Out Options" \>
</nw-blocks>

Multi-Language Withdrawal Display

<!-- English -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="fresh-casino" 
  language="en" 
  country="UK" 
  headingtext="Withdrawal Options" \>
</nw-blocks>

<!-- French -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="cresus-casino" 
  language="fr" 
  country="FR" 
  headingtext="Méthodes de Retrait" \>
</nw-blocks>

<!-- Spanish -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="fresh-casino" 
  language="es" 
  country="ES" 
  headingtext="Opciones de Retiro" \>
</nw-blocks>

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

<!-- Portuguese -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="betano-casino" 
  language="pt" 
  country="BR" 
  headingtext="Métodos de Saque" \>
</nw-blocks>

Regional Withdrawal Methods (US States)

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

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

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

<!-- Ontario, Canada -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="betano-sports" 
  language="en" 
  country="CA-ON" 
  headingtext="Ontario Cashout Options" \>
</nw-blocks>

Limited Display for Comparison

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

Mobile-Optimized Display

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

All Methods Display

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

Paired with Deposits Widget

<!-- Deposits section -->
<nw-blocks 
  id="paymentdeposits2" 
  cloakedlink="casino-brand" 
  language="en" 
  country="UK" 
  items="10" 
  headingtext="Deposit Methods" \>
</nw-blocks>

<!-- Withdrawals section -->
<nw-blocks 
  id="paymentwithdrawals2" 
  cloakedlink="casino-brand" 
  language="en" 
  country="UK" 
  items="10" 
  headingtext="Withdrawal Methods" \>
</nw-blocks>

Best Practices

Content Strategy

• Clear Headings: Use descriptive heading text that indicates withdrawal methods
• Appropriate Limits: Set items based on page context (5-10 for highlights, 15+ for comprehensive)
• Regional Accuracy: Always specify country for accurate withdrawal method filtering
• Language Matching: Ensure heading text matches the language attribute
• Paired Display: Consider showing alongside PaymentDeposits2 for complete banking info

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
• Withdrawal Focus: Highlight faster withdrawal methods (e-wallets, crypto)

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: Withdrawal method names available via alt text
• Focus States: Ensure toggle button has visible focus indicator

Regional Compliance

• Country Filtering: Withdrawal 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
• Processing Times: Consider adding withdrawal time information in CMS

Withdrawal-Specific Considerations

• Method Availability: Not all deposit methods support withdrawals
• Verification Requirements: Some methods require KYC verification
• Processing Times: Withdrawal times vary (instant for e-wallets, 3-5 days for banks)
• Minimum/Maximum Limits: Different from deposit limits
• Fees: Some methods may have withdrawal fees

Advanced Configuration

Custom Ordering

Control withdrawal method order via CMS configuration:

// Withdrawal method order defined in Sanity CMS
withdrawalMethods: [
  { paymentMethod: "skrill", image: "/skrill.png" },
  { paymentMethod: "neteller", image: "/neteller.png" },
  { paymentMethod: "bank-transfer", image: "/bank.png" },
  // ... more methods
]

Container Width Control

Widget adapts to parent container:

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

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

<!-- Two-column layout -->
<div style="width: 50%; min-width: 400px;">
  <nw-blocks id="paymentwithdrawals2" ...></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 withdrawal methods from brand profile:

{
  brand: {
    cloakedLink: "greatwin-casino",
    brandName: "GreatWin Casino",
    isBrandActive: true,
    withdrawalMethods: [
      {
        paymentMethod: "skrill",
        image: "https://cdn.example.com/payment-methods/skrill.png",
        displayName: "Skrill",
        processingTime: "Instant",
        minWithdrawal: "10",
        maxWithdrawal: "10000",
        withdrawalFee: "0"
      },
      {
        paymentMethod: "neteller",
        image: "https://cdn.example.com/payment-methods/neteller.png",
        displayName: "Neteller",
        processingTime: "Instant",
        minWithdrawal: "10",
        maxWithdrawal: "10000",
        withdrawalFee: "0"
      },
      {
        paymentMethod: "bank-transfer",
        image: "https://cdn.example.com/payment-methods/bank.png",
        displayName: "Bank Transfer",
        processingTime: "3-5 business days",
        minWithdrawal: "50",
        maxWithdrawal: "50000",
        withdrawalFee: "0"
      },
      {
        paymentMethod: "visa",
        image: "https://cdn.example.com/payment-methods/visa.png",
        displayName: "Visa",
        processingTime: "1-3 business days",
        minWithdrawal: "10",
        maxWithdrawal: "5000",
        withdrawalFee: "0"
      },
      // ... more methods
    ],
    withdrawalLabel: "Withdrawal Methods",
    showLessLabel: "Show Less",
    viewMoreLabel: "View more"
  }
}

Required Fields:

• cloakedLink: Brand identifier
• isBrandActive: Brand status
• withdrawalMethods: Array of withdrawal methods

Withdrawal Method Fields:

• paymentMethod: Method identifier (required)
• image: Logo URL (required)
• displayName: Human-readable name
• processingTime: Time to process withdrawal
• minWithdrawal: Minimum withdrawal amount
• maxWithdrawal: Maximum withdrawal amount
• withdrawalFee: Fee amount or “0” for free

Optional Fields:

• withdrawalLabel: Default heading text
• showLessLabel: Collapse button label
• viewMoreLabel: Expand button label

Translation Keys

Required i18n keys:

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

Language-Specific Examples:

{
  "en": {
    "wgt-paymentMethods-withdrawals": "Withdrawal Methods",
    "wgt-payment-show-less": "Show Less",
    "wgt-payment-view-more": "View more"
  },
  "fr": {
    "wgt-paymentMethods-withdrawals": "Méthodes de Retrait",
    "wgt-payment-show-less": "Afficher moins",
    "wgt-payment-view-more": "Voir plus"
  },
  "es": {
    "wgt-paymentMethods-withdrawals": "Métodos de Retiro",
    "wgt-payment-show-less": "Mostrar menos",
    "wgt-payment-view-more": "Ver más"
  },
  "de": {
    "wgt-paymentMethods-withdrawals": "Auszahlungsmethoden",
    "wgt-payment-show-less": "Weniger anzeigen",
    "wgt-payment-view-more": "Mehr anzeigen"
  },
  "pt": {
    "wgt-paymentMethods-withdrawals": "Métodos de Saque",
    "wgt-payment-show-less": "Mostrar menos",
    "wgt-payment-view-more": "Ver mais"
  }
}

KV Storage

Withdrawal method data is cached:

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

Error Handling

Inactive Brand

If brand is inactive:

<p id="inactive-brand" style="visibility: hidden;">
  The brand with name {brandName} is currently inactive or not allowed in this country!
</p>

Handling:

• Widget shows hidden error message
• No visual output to users
• Check brand isBrandActive flag
• Verify regional availability

No Withdrawal Methods

If no withdrawal methods available:

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

Missing Images

If withdrawal 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: Payment Widget Variants

When to use PaymentWithdrawals2:

• Dedicated withdrawal information section
• Need to highlight cashout options separately
• Custom withdrawal heading required
• Banking/cashier page withdrawal section
• Separate display from deposits

When to use PaymentDeposits2:

• Dedicated deposit information section
• Focus on funding methods
• Custom deposit heading required

When to use PaymentMethods2:

• Show both deposit and withdrawal together
• Comprehensive payment method overview
• Product filtering needed
• Space-efficient combined display

When to use PaymentMethods:

• Detailed table with processing times needed
• Deposit/withdrawal flags important
• 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="paymentwithdrawals2" 
  cloakedlink="greatwin-casino" 
  language="en" 
  country="CM" 
  items="11" 
  headingtext="Available Withdrawal Methods" \>
</bw-widget>

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

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