Using Next.js

Create a React component that renders an iframe. The iframe approach is safer and more reliable than script injection in React applications.

Basic Component

export default function OncadeWidget({ gameId, itemId }) {
  return (
    <iframe 
      id="oncade-widget"
      src={`https://widget.oncade.online/?gameId=${gameId}&itemId=${itemId}`}
      width="460" 
      height="400" 
      frameBorder="0"
      allow="payment"
      style={{
        border: 'none',
        borderRadius: '12px',
        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
      }}
    />
  );
}

Auto-Resizing Component (Recommended)

This component automatically adjusts the iframe height based on the widget content:

'use client';
import { useEffect, useRef } from 'react';

export default function OncadeWidget({ gameId, itemId }) {
  const iframeRef = useRef(null);

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data.type === 'oncade-widget-resize' && iframeRef.current) {
        iframeRef.current.style.height = event.data.height + 'px';
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <iframe 
      ref={iframeRef}
      id="oncade-widget"
      src={`https://widget.oncade.online/?gameId=${gameId}&itemId=${itemId}`}
      width="460" 
      height="400" 
      frameBorder="0"
      allow="payment"
      style={{
        border: 'none',
        borderRadius: '12px',
        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
      }}
    />
  );
}

Usage Example

import OncadeWidget from './components/OncadeWidget';

export default function GamePage() {
  return (
    <div>
      <h1>My Game Store</h1>
      <OncadeWidget 
        gameId="your-game-id" 
        itemId="your-item-id" 
      />
    </div>
  );
}