Payment Withdrawals 2 Widget

Migration Notice: We are transitioning from <bw-widget> to <nw-blocks> tags. While both are currently supported for backward compatibility, <nw-blocks> is now the recommended tag for all new implementations. Existing <bw-widget> implementations will continue to function.

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

Expand me...

{"cloakedLink":"greatwin-casino","language":"en","country":"CM","headers":["wgt-paymentMethods-method","wgt-paymentMethods-delay","wgt-paymentMethods-deposit","wgt-paymentMethods-withdrawal"],"itemsDisplayed":11,"labelOverrideText":"Available Withdrawal Methods","id":"paymentwithdrawals2","wid":"id83d97658-f2d8-4e4e-931d-ac753be525d9","websiteId":"1034.stage-umbrella-showcase.com","websiteConfiguration":{"restrictions":[],"redirect_404_to_301":false,"configurationSanity":{},"botRestrictions":{"userAgent":"^.*googlebot.*$","paths":["^/"]}},"cfRayID":"9de48b517d05addf","widgetCacheKey":"af4a834a851cb021564a0d7b08fc04a2","isBot":false,"isGov":false,"name":"Greatwin Casino","isBrandActive":true,"paymentLabel":"Available Withdrawal Methods","viewMoreLabel":"View #num# More","showLessLabel":"Show Less","showLabels":false,"numValue":0,"withdrawalMethodsOrder":[{"paymentMethod":"AstroPay Card","category":"Credit Card","image":"/content/cms-images/3050079a9ca3698342d2dc5dd35d729475ee8d02-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true}]}

With Custom Heading (Spanish)

Expand me...

{"cloakedLink":"greatwin-casino","language":"es","country":"ZZ","headers":["wgt-paymentMethods-method","wgt-paymentMethods-delay","wgt-paymentMethods-deposit","wgt-paymentMethods-withdrawal"],"itemsDisplayed":10,"labelOverrideText":"Métodos de Retiro","id":"paymentwithdrawals2","wid":"id870e18fd-c199-46af-bb6d-4e03e4757612","websiteId":"1034.stage-umbrella-showcase.com","websiteConfiguration":{"restrictions":[],"redirect_404_to_301":false,"configurationSanity":{},"botRestrictions":{"userAgent":"^.*googlebot.*$","paths":["^/"]}},"cfRayID":"9de48b517d05addf","widgetCacheKey":"e3f19b273a0baef15ed79095d266c586","isBot":false,"isGov":false,"name":"Greatwin Casino","isBrandActive":true,"paymentLabel":"Métodos de Retiro","viewMoreLabel":"Ver #num# más","showLessLabel":"Mostrar menos","showLabels":false,"numValue":0,"withdrawalMethodsOrder":[{"paymentMethod":"Astropay Card","image":"/content/cms-images/3050079a9ca3698342d2dc5dd35d729475ee8d02-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Bank transfer","image":"/content/cms-images/dab561de92754e8a24e441ea862fd6fb425df9f1-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Cashlib","image":"/content/cms-images/639a465b4d4449240c49d3c38822852164138273-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Citadel","image":"/content/cms-images/5c417297071b0f39abd78d13b8079f704800ea71-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Echeck","image":"/content/cms-images/7d8c24167bfaf2a7e7f338e93a9a013eb49afd62-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Giropay","image":"/content/cms-images/df8df019426e2f110d894f4a6f66e81488a692dd-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Jcb","image":"/content/cms-images/f9b73b9f28693a32a1c869b9210f16f4b9743288-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Klarna","image":"/content/cms-images/e5c78a1b511519cd35feac4e8f6f1f076be728c7-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Neteller","image":"/content/cms-images/4feff11c8c1587a0d3f46341e059b5007dd268a5-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true}]}

Default Label (No Custom Heading)

Expand me...

{"cloakedLink":"greatwin-casino","language":"fr","country":"ZZ","headers":["wgt-paymentMethods-method","wgt-paymentMethods-delay","wgt-paymentMethods-deposit","wgt-paymentMethods-withdrawal"],"id":"paymentwithdrawals2","wid":"ide170a39f-c56c-4d42-ade3-aaaabaf5b043","websiteId":"1034.stage-umbrella-showcase.com","websiteConfiguration":{"restrictions":[],"redirect_404_to_301":false,"configurationSanity":{},"botRestrictions":{"userAgent":"^.*googlebot.*$","paths":["^/"]}},"cfRayID":"9de48b517d05addf","widgetCacheKey":"d4dc11cc59e455caab6baaa9a5a81568","isBot":false,"isGov":false,"name":"Greatwin Casino","isBrandActive":true,"paymentLabel":"Retrait","viewMoreLabel":"Voir #num# de plus","showLessLabel":"Afficher Moins","showLabels":false,"numValue":0,"withdrawalMethodsOrder":[{"paymentMethod":"Astropay Card","image":"/content/cms-images/3050079a9ca3698342d2dc5dd35d729475ee8d02-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Bank transfer","image":"/content/cms-images/dab561de92754e8a24e441ea862fd6fb425df9f1-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Cashlib","image":"/content/cms-images/639a465b4d4449240c49d3c38822852164138273-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Citadel","image":"/content/cms-images/5c417297071b0f39abd78d13b8079f704800ea71-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Echeck","image":"/content/cms-images/7d8c24167bfaf2a7e7f338e93a9a013eb49afd62-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Giropay","image":"/content/cms-images/df8df019426e2f110d894f4a6f66e81488a692dd-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Jcb","image":"/content/cms-images/f9b73b9f28693a32a1c869b9210f16f4b9743288-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Klarna","image":"/content/cms-images/e5c78a1b511519cd35feac4e8f6f1f076be728c7-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Neteller","image":"/content/cms-images/4feff11c8c1587a0d3f46341e059b5007dd268a5-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true}]}

Limited Items Display

Expand me...

{"cloakedLink":"22bet-sport","language":"en","country":"UK","headers":["wgt-paymentMethods-method","wgt-paymentMethods-delay","wgt-paymentMethods-deposit","wgt-paymentMethods-withdrawal"],"itemsDisplayed":6,"labelOverrideText":"Top Withdrawal Options","id":"paymentwithdrawals2","wid":"id343a0b7f-f0d3-4f15-8036-5aab748ba8aa","websiteId":"1034.stage-umbrella-showcase.com","websiteConfiguration":{"restrictions":[],"redirect_404_to_301":false,"configurationSanity":{},"botRestrictions":{"userAgent":"^.*googlebot.*$","paths":["^/"]}},"cfRayID":"9de48b517d05addf","widgetCacheKey":"3faa8d4aca236ad9f0aeaa987fd08cf9","isBot":false,"isGov":false,"name":"22Bet Sport","isBrandActive":true,"paymentLabel":"Top Withdrawal Options","viewMoreLabel":"View #num# More","showLessLabel":"Show Less","showLabels":false,"numValue":0,"withdrawalMethodsOrder":[{"paymentMethod":"Bitcoin","image":"/content/cms-images/a862ebbee26d15bcd1f704fbf46442c35ce28020-172x116.webp","withdrawalTime":null,"deposit":false,"withdrawal":true},{"paymentMethod":"Entropay","image":"/content/cms-images/4c78780967dc69b9a9e3b0dd0ebc4a70f90920b7-172x116.webp","withdrawalTime":"0","deposit":false,"withdrawal":true},{"paymentMethod":"Euteller","image":"/content/cms-images/81afd9e06cb7814b6151b677df71921cf59f4a84-172x116.webp","withdrawalTime":"0","deposit":false,"withdrawal":true}]}

Regional (US State)

Expand me...

Attributes Reference

Attribute Type Required Default Description
id string Yes - Must be “paymentwithdrawals2”
cloakedlink string Yes - Brand identifier/cloaked link
language string No “en” ISO 639-1 language code
country string No "" ISO 3166-1 country code (supports state: US-NJ, CA-ON)
countrystate string No - State/province code (auto-parsed from country)
items number No - Maximum number of withdrawal methods to display
itemsdisplayed number No - Alternative attribute name for items limit
headingtext string No - Custom heading text (overrides default label)
labeloverridetext string No - Alternative attribute name for custom heading
headers array No […] Header translation keys (not used in this widget)
order string No "" Custom ordering for payment methods

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

Width Range Columns Behavior
≤290px 4 Mobile narrow
291-308px 6 Mobile standard
309-350px 3 Mobile wide
>350px Dynamic Desktop (calculated)

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

Feature PaymentDeposits2 PaymentWithdrawals2 PaymentMethods2
Methods Shown Deposits only Withdrawals only Both combined
Display Type Logo grid Logo grid Logo grid
Product Filter ❌ No ❌ No ✅ Yes
Items Limit ✅ Yes ✅ Yes ✅ Yes
Custom Heading ✅ Yes ✅ Yes ❌ No
Toggle Type Smart per-row Smart per-row Smart per-row
Responsive ✅ Dynamic grid ✅ Dynamic grid ✅ Dynamic grid
Use Case Deposit info Withdrawal info All payment info

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.