> Github Widgets Shortcodes > Payment Methods Widget

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

The PaymentMethods widget displays a comprehensive table of available payment methods for a casino or betting brand, showing detailed information including method logos, processing times, and deposit/withdrawal availability. Features a collapsible interface with “Show More/Less” functionality to manage long lists efficiently.

Key Features:

Detailed Table View: Method name, processing time, deposit/withdrawal indicators
Visual Indicators: Check marks (✓) and cross marks (✗) for availability
Collapsible Interface: Show More/Less toggle for lists with 4+ methods
Fixed Height Control: Initial display of 3 methods (168px), expands to show all
Custom Headers: Translatable column headers via i18n
Product Filtering: Filter by product type (CA=Casino, SP=Sports)
Items Limit: Control maximum number of methods displayed
Custom Styling: Configurable button colors and font sizes
Responsive Design: Adapts to container width
Regional Support: Country and state-specific filtering

Basic Usage

Expand me...

Casino Payment Methods

Expand me...

Sports Betting Payment Methods

Expand me...

Regional (US State)

Expand me...

Attributes Reference

Attribute	Type	Required	Default	Description
`id`	string	Yes	-	Must be “paymentMethods”
`cloaked-link`	string	Yes	-	Brand identifier/cloaked link
`product`	string	No	""	Product filter (CA=Casino, SP=Sports, etc.)
`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-displayed`	number	No	-	Maximum number of payment methods to display
`order`	string	No	""	Custom ordering for payment methods
`headers`	array	No	[…]	Custom header translation keys
`referer`	string	No	-	Referrer tracking parameter
`configuration`	JSON	No	{}	Styling configuration object

Configuration Object

The configuration attribute accepts a JSON object for styling:

{
  "button-colors": ["#0EA75F", "#048D4C"],
  "font-size": "14px"
}

Configuration Properties

Property	Type	Default	Description
`button-colors`	array	["#b1b1b1", “#b1b1b1”]	Button gradient colors [start, end]
`font-size`	string	“14px”	Font size for table text

Table Header

Default Headers:

Method: Payment method name and logo
Delay: Processing time for transactions
Deposit: Deposit availability indicator
Withdrawal: Withdrawal availability indicator

Translation Keys:

wgt-paymentMethods-method: “Method”
wgt-paymentMethods-delay: “Processing Time”
wgt-paymentMethods-deposit: “Deposit”
wgt-paymentMethods-withdrawal: “Withdrawal”

Customization:

<nw-blocks
    id="paymentMethods"
    headers='["custom-method", "custom-time", "custom-deposit", "custom-withdrawal"]' \>
</nw-blocks>

Table Body

Fixed Height Display:

Initial height: 168px (shows ~3 methods)
Expanded height: auto (shows all methods)
Overflow hidden when collapsed
Smooth transition on toggle

Payment Method Row:

Logo: Payment method image (left aligned)
Processing Time: Text display (e.g., “Instant”, “1-3 days”)
Deposit Indicator: ✓ (green check) or ✗ (red cross)
Withdrawal Indicator: ✓ (green check) or ✗ (red cross)

Show More/Less Toggle

Visibility:

Appears only when methods > 3
Hidden for short lists (≤3 methods)

States:

Collapsed: “Show More” with down arrow (▼)
Expanded: “Show Less” with up arrow (▲)

Interaction:

Click toggles between states
Updates button text dynamically
Animates arrow direction
Changes table body height

JavaScript Integration

Inline Script Functionality

The widget injects a self-executing script that:

document.getElementById("{id}-toggleDisplay").addEventListener("click", () => {
    const tableBodyHeight = document.getElementById('{id}__table-body').style.height;
    
    if(tableBodyHeight === "auto") {
        // Collapse
        document.getElementById("{id}-toggleDisplay").innerHTML = "Show More";
        document.getElementById("{id}-triangleUp").style.display = "none";
        document.getElementById("{id}-triangleDown").style.display = "flex";
        document.getElementById("{id}__table-body").style.height = "168px";
    } else {
        // Expand
        document.getElementById("{id}-toggleDisplay").innerHTML = "Show Less";        
        document.getElementById("{id}__table-body").style.height = "auto";
        document.getElementById("{id}-triangleUp").style.display = "flex";
        document.getElementById("{id}-triangleDown").style.display = "none";
    }
});

Features:

Event listener on toggle button
Height manipulation for collapse/expand
Text and arrow updates
Smooth visual transitions

Visual Indicators

Check Mark (CircleCheck)

Display:

Green circle with check mark (✓)
Indicates method supports deposit/withdrawal
SVG icon for crisp rendering

Usage:

<CircleCheck active={false} />

Cross Mark (CircleCloseFill)

Display:

Red circle with cross mark (✗)
Indicates method does not support deposit/withdrawal
SVG icon for consistency

Usage:

<CircleCloseFill />

Common Use Cases

Casino Review Page

<nw-blocks
    id="paymentMethods"
    cloaked-link="greatwin-casino"
    language="en"
    product="CA"
    country="UK"
    items-displayed="10"
    configuration='{"button-colors": ["#05842A", "#096725"], "font-size": "14px"}' \>
</nw-blocks>

Sports Betting Site

<nw-blocks
    id="paymentMethods"
    cloaked-link="betsson-sports"
    language="en"
    product="SP"
    country="SE"
    items-displayed="8" \>
</nw-blocks>

Multi-Language Display

<!-- English -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="fresh-casino"
    language="en"
    product="CA"
    country="UK" \>
</nw-blocks>

<!-- Portuguese -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="fresh-casino"
    language="pt"
    product="CA"
    country="BR" \>
</nw-blocks>

<!-- Spanish -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="fresh-casino"
    language="es"
    product="CA"
    country="ES" \>
</nw-blocks>

<!-- French -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="cresus-casino"
    language="fr"
    product="CA"
    country="FR" \>
</nw-blocks>

<!-- German -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="betway-casino"
    language="de"
    product="CA"
    country="DE" \>
</nw-blocks>

Regional Payment Methods (US States)

<!-- New Jersey -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="draftkings-casino"
    language="en"
    country="US"
    product="CA" \>
</nw-blocks>

<!-- Pennsylvania -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="fanduel-casino"
    language="en"
    country="US-PA"
    product="CA" \>
</nw-blocks>

<!-- Michigan -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="betmgm-casino"
    language="en"
    country="US-MI"
    product="CA" \>
</nw-blocks>

<!-- Ontario, Canada -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="betano-sports"
    language="en"
    country="CA-ON"
    product="SP" \>
</nw-blocks>

Limited Display

<!-- Show top 5 methods -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="leovegas-casino"
    language="en"
    country="SE"
    items-displayed="5" \>
</nw-blocks>

Custom Branded Styling

<nw-blocks
    id="paymentMethods"
    cloaked-link="branded-casino"
    language="en"
    country="UK"
    configuration='{"button-colors": ["#FFD700", "#FFA500"], "font-size": "16px"}' \>
</nw-blocks>

Comprehensive Display (All Methods)

<!-- No items limit - show all available -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="greatwin-casino"
    language="en"
    product="CA"
    country="ZZ" \>
</nw-blocks>

Best Practices

Content Strategy

Product Filtering: Always specify product for accurate method filtering
Appropriate Limits: Set items-displayed to 6-10 for balanced display
Regional Accuracy: Specify country for compliance and availability
Language Matching: Ensure language matches target audience

UX Optimization

Initial Display: Show 3-5 methods initially, use toggle for more
Clear Indicators: Check/cross marks provide instant visual feedback
Processing Times: Display realistic processing times from CMS
Toggle Visibility: Only show toggle when needed (>3 methods)

Visual Design

Brand Colors: Customize button colors to match brand identity
Readable Text: Use appropriate font size (14-16px recommended)
Consistent Icons: Use provided check/cross icons for consistency
Table Alignment: Ensure proper column alignment

Performance

Items Limit: Use items-displayed to prevent rendering too many methods
Lazy Loading: Consider lazy loading for below-fold widgets
Minimal Scripts: Widget uses lightweight inline script
Cache Optimization: Payment methods cached in KV storage

Accessibility

Semantic Table: Uses proper div-based table structure
Icon Alternatives: Ensure icons have proper ARIA labels
Keyboard Navigation: Toggle button is keyboard accessible
Screen Reader Support: Table headers provide context

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
Processing Time Accuracy: Display realistic times per region

Advanced Configuration

Custom Header Labels

<nw-blocks
    id="paymentMethods"
    cloaked-link="casino-brand"
    headers='["custom-payment-label", "custom-time-label", "custom-deposit-label", "custom-withdrawal-label"]' \>
</nw-blocks>

Translation file:

{
  "custom-payment-label": "Payment Option",
  "custom-time-label": "Speed",
  "custom-deposit-label": "Fund Account",
  "custom-withdrawal-label": "Cash Out"
}

Multiple Color Schemes

<!-- Green theme (default) -->
<nw-blocks 
    configuration='{"button-colors": ["#05842A", "#096725"]}' \>
</nw-blocks>

<!-- Blue theme -->
<nw-blocks 
    configuration='{"button-colors": ["#2196F3", "#1976D2"]}' \>
</nw-blocks>

<!-- Orange theme -->
<nw-blocks 
    configuration='{"button-colors": ["#FF6B00", "#E65100"]}' \>
</nw-blocks>

<!-- Purple theme -->
<nw-blocks 
    configuration='{"button-colors": ["#9C27B0", "#7B1FA2"]}' \>
</nw-blocks>

<!-- Gold theme -->
<nw-blocks 
    configuration='{"button-colors": ["#FFD700", "#FFA500"]}' \>
</nw-blocks>

Font Size Variations

<!-- Small text -->
<nw-blocks 
    configuration='{"font-size": "12px"}' \>
</nw-blocks>

<!-- Standard text -->
<nw-blocks 
    configuration='{"font-size": "14px"}' \>
</nw-blocks>

<!-- Large text -->
<nw-blocks 
    configuration='{"font-size": "16px"}' \>
</nw-blocks>

<!-- Extra large text -->
<nw-blocks 
    configuration='{"font-size": "18px"}' \>
</nw-blocks>

Combined Styling

<nw-blocks
    id="paymentMethods"
    cloaked-link="premium-casino"
    language="en"
    country="UK"
    product="CA"
    items-displayed="8"
    configuration='{
        "button-colors": ["#1E88E5", "#1565C0"],
        "font-size": "15px"
    }' \>
</nw-blocks>

Data Requirements

Sanity CMS Structure

Widget fetches payment method data:

{
  brand: {
    cloakedLink: "greatwin-casino",
    brandName: "GreatWin Casino",
    isBrandActive: true,
    product: "CA",
    methodList: [
      {
        paymentMethod: "visa",
        image: "https://cdn.example.com/payment-methods/visa.png",
        withdrawalTime: "Instant",
        deposit: true,
        withdrawal: true,
        displayOrder: 1
      },
      {
        paymentMethod: "mastercard",
        image: "https://cdn.example.com/payment-methods/mastercard.png",
        withdrawalTime: "Instant",
        deposit: true,
        withdrawal: true,
        displayOrder: 2
      },
      {
        paymentMethod: "skrill",
        image: "https://cdn.example.com/payment-methods/skrill.png",
        withdrawalTime: "24 hours",
        deposit: true,
        withdrawal: true,
        displayOrder: 3
      },
      {
        paymentMethod: "neteller",
        image: "https://cdn.example.com/payment-methods/neteller.png",
        withdrawalTime: "24 hours",
        deposit: true,
        withdrawal: true,
        displayOrder: 4
      },
      {
        paymentMethod: "bank-transfer",
        image: "https://cdn.example.com/payment-methods/bank.png",
        withdrawalTime: "3-5 days",
        deposit: true,
        withdrawal: true,
        displayOrder: 5
      }
    ]
  }
}

Required Fields:

cloakedLink: Brand identifier
isBrandActive: Brand status
methodList: Array of payment methods

Payment Method Fields:

paymentMethod: Method identifier (required)
image: Logo URL (required)
withdrawalTime: Processing time text (required)
deposit: Boolean - supports deposits (required)
withdrawal: Boolean - supports withdrawals (required)
displayOrder: Sorting order (optional)

Processing Time Examples:

“Instant”
“24 hours”
“1-3 days”
“3-5 business days”
“Up to 7 days”

Translation Keys

Required i18n keys:

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

Language-Specific Examples:

{
  "en": {
    "wgt-paymentMethods-method": "Method",
    "wgt-paymentMethods-delay": "Processing Time",
    "wgt-paymentMethods-deposit": "Deposit",
    "wgt-paymentMethods-withdrawal": "Withdrawal"
  },
  "fr": {
    "wgt-paymentMethods-method": "Méthode",
    "wgt-paymentMethods-delay": "Délai de traitement",
    "wgt-paymentMethods-deposit": "Dépôt",
    "wgt-paymentMethods-withdrawal": "Retrait"
  },
  "es": {
    "wgt-paymentMethods-method": "Método",
    "wgt-paymentMethods-delay": "Tiempo de procesamiento",
    "wgt-paymentMethods-deposit": "Depósito",
    "wgt-paymentMethods-withdrawal": "Retiro"
  },
  "de": {
    "wgt-paymentMethods-method": "Methode",
    "wgt-paymentMethods-delay": "Bearbeitungszeit",
    "wgt-paymentMethods-deposit": "Einzahlung",
    "wgt-paymentMethods-withdrawal": "Auszahlung"
  }
}

KV Storage

Payment method data is cached:

Key: PAYMENT_METHODS:{cloakedLink}:{country}:{language}:{product}
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 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 isBrandActive flag in CMS
Verify regional availability

No Payment Methods

If no methods available:

Widget renders empty table with headers
Toggle button hidden automatically
Consider fallback message in CMS

Missing Method Data

Missing Image:

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

Missing Processing Time:

Empty cell in delay column
Validate CMS data completeness

Missing Deposit/Withdrawal Flags:

Defaults to false (shows ✗)
Ensure boolean values set correctly

JavaScript Disabled

If JavaScript disabled:

Widget displays all methods (no collapse)
Toggle button non-functional
Table remains scrollable
Graceful degradation to static table

Comparison: PaymentMethods vs PaymentDeposits2

Feature	PaymentMethods	PaymentDeposits2
Display Type	Table with details	Logo grid only
Information	Method, time, deposit/withdrawal	Visual logos
Processing Times	✅ Yes	❌ No
Deposit/Withdrawal Flags	✅ Yes	❌ No
Toggle Type	Show More/Less (fixed height)	Smart expand (per row)
Responsive	✅ Scrollable table	✅ Dynamic columns
Items Limit	✅ Yes	✅ Yes
Use Case	Detailed comparison	Quick visual reference
Mobile	⚠️ May require scroll	✅ Optimized

When to use PaymentMethods:

Detailed payment information required
Processing times important
Deposit vs withdrawal distinction needed
Comparison shopping
Review pages with full specifications

When to use PaymentDeposits2:

Quick visual reference
Space-constrained layouts
Logo recognition sufficient
Mobile-first designs
Clean, minimal display

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="paymentMethods"
    cloaked-link="greatwin-casino"
    language="pt"
    product="CA"
    country="ZZ"
    items-displayed="4"
    configuration='{"button-colors": ["#0EA75F", "#048D4C"], "font-size": "14px"}' \>
</bw-widget>

<!-- New syntax (recommended) -->
<nw-blocks
    id="paymentMethods"
    cloaked-link="greatwin-casino"
    language="pt"
    product="CA"
    country="ZZ"
    items-displayed="4"
    configuration='{"button-colors": ["#0EA75F", "#048D4C"], "font-size": "14px"}' \>
</nw-blocks>

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

Payment Methods Widget

Overview

Basic Usage

Casino Payment Methods

Sports Betting Payment Methods

Custom Styled Widget

Regional (US State)

Attributes Reference

Configuration Object

Configuration Properties

Widget Components

Table Header

Table Body

Show More/Less Toggle

JavaScript Integration

Inline Script Functionality

Visual Indicators

Check Mark (CircleCheck)

Cross Mark (CircleCloseFill)

Common Use Cases

Casino Review Page

Sports Betting Site

Multi-Language Display

Regional Payment Methods (US States)

Limited Display

Custom Branded Styling

Comprehensive Display (All Methods)

Best Practices

Content Strategy

UX Optimization

Visual Design

Performance

Accessibility

Regional Compliance

Advanced Configuration

Custom Header Labels

Multiple Color Schemes

Font Size Variations

Combined Styling

Data Requirements

Sanity CMS Structure

Translation Keys

KV Storage

Error Handling

Inactive Brand

No Payment Methods

Missing Method Data

JavaScript Disabled

Comparison: PaymentMethods vs PaymentDeposits2

Backward Compatibility