> Wordpress Widgets Shortcodes > Payment Deposits 2 Widget

Payment Deposits 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

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

Expand me...

With Custom Heading (Spanish)

Expand me...

Default Label (No Custom Heading)

Expand me...

Limited Items Display

Expand me...

Regional (US State)

Expand me...

Attributes Reference

Attribute	Type	Required	Default	Description
`id`	string	Yes	-	Must be “paymentdeposits2”
`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 payment 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

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

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:

Initializes toggle functionality
Calculates initial visible methods
Attaches event listeners
Sets up ResizeObserver
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

Feature	PaymentDeposits2	PaymentMethods
Display Type	Logo grid only	Full table with details
Information	Visual logos	Method, time, limits
Collapse/Expand	✅ Smart toggle	✅ Show more button
Responsive	✅ Dynamic columns	✅ Horizontal scroll
Items Limit	✅ Yes	✅ Yes
Use Case	Quick visual reference	Detailed comparison
Mobile	✅ Optimized	⚠️ Scroll required

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.

Payment Deposits 2 Widget

Overview

Basic Usage

With Custom Heading (Spanish)

Default Label (No Custom Heading)

Limited Items Display

Regional (US State)

Attributes Reference

Widget Components

Header Label

Payment Method Grid

Collapse/Expand Toggle

Responsive Behavior

Dynamic Column Calculation

Resize Observer

Container Width Breakpoints

JavaScript Integration

Inline Script Injection

Script Features

Common Use Cases

Review Page Deposit Section

Multi-Language Payment Display

Regional Payment Methods (US States)

Limited Display for Comparison

Mobile-Optimized Display

All Methods Display

Best Practices

Content Strategy

UX Optimization

Performance

Accessibility

Regional Compliance

Advanced Configuration

Custom Ordering

Container Width Control

Toggle Label Customization

Items Limit Strategies

Data Requirements

Sanity CMS Structure

Translation Keys

KV Storage

Error Handling

Inactive Brand

No Payment Methods

Missing Images

JavaScript Disabled

Comparison: PaymentDeposits2 vs PaymentMethods

Backward Compatibility