HobuyWidget Integration Examples

Props

Prop	Type	Required	Description
`locale`	string	Yes	Widget language (e.g., 'en', 'uk')
`product`	object	Yes	Product object with id, imageUrl, name, price
`shopCurrency`	string	Yes	Currency code (e.g., 'USD', 'UAH')
`customerName`	string	No	Customer's name
`onStartAuction`	function	Yes	Callback to start auction
`onUseWinData`	function	Yes	Callback for win data processing

CDN Integration

HTML + JavaScript

<script src="https://cdn.jsdelivr.net/gh/front1wss/hobuy-widget-build@main/dist/widget.js"></script>
<script>
    const handleStartAuction = async (product, customerName) => {
      console.log('Starting auction for:', product);

      // Your API call here

      return { socketUrl: "wss://..." };
    };

    const handleUseWinData = (winData, { handleClearAuctionCart }) => {
      console.log('Win data:', winData);

      // Process win and clear cart on success
      if (success) {
        handleClearAuctionCart();
        // Logic
      } else {
        // Another logic
      }
    };

    window.addEventListener('load', () => {
      window.HobuyWidget.init({
        locale: 'en',
        product: {
          id: 10226342363466,
          imageUrl: 'https://via.placeholder.com/600/771796',
          name: 'Gift Card',
          price: 10
        },
        shopCurrency: 'USD',
        customerName: 'John Doe',
        onStartAuction: handleStartAuction,
        onUseWinData: handleUseWinData
      });
    });
  </script>

React Integration

React Component

import React from 'react';
import { HobuyWidget } from 'hobuy-widget';

const ProductAuction = () => {
    const handleStartAuction = async (product, customerName) => {
      console.log('Starting auction for:', product);

      // Your API call here

      return { socketUrl: "wss://..." };
    };

    const handleUseWinData = (winData, { handleClearAuctionCart }) => {
      console.log('Win data:', winData);

      // Process win and clear cart on success
      if (success) {
        handleClearAuctionCart();
        // Logic
      } else {
        // Another logic
      }
    };

    return (
    <HobuyWidget
      locale="en"
      product={{
        id: 10226342363466,
        imageUrl: 'https://via.placeholder.com/600/771796',
        name: 'Gift Card',
        price: 10
      }}
      shopCurrency="USD"
      customerName="John Doe"
      onStartAuction={handleStartAuction}
      onUseWinData={handleUseWinData}
    />
    );
};

export default ProductAuction;

Product Object

Product Structure

const product = {
  id: 10226342363466,           // string or number
  imageUrl: 'https://example.com/image.jpg',  // string
  name: 'Gift Card',            // string
  price: 10                     // number (in pennies/kopecks)
};

Callback Functions

onStartAuction

const handleStartAuction = async (product, customerName) => {
  // Called when user starts auction
  // Must return Promise with { socketUrl: string }

  try {
    const response = await fetch('/api/auctions/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId: product.id, customerName })
    });

    if (!response.ok) {
      throw new Error('Failed to start auction');
    }

    const data = await response.json();
    return { socketUrl: data.socketUrl };
  } catch (error) {
    console.error('Auction start failed:', error);
    throw error;
  }
};

onUseWinData

const handleUseWinData = async (winData, { handleClearAuctionCart }) => {
  // Called when user wins auction
  // Use handleClearAuctionCart() to clear widget state

  try {
    const response = await fetch('/api/auctions/process-win', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(winData)
    });

    if (response.ok) {
      handleClearAuctionCart();
      // Redirect or show success message
      window.location.href = '/checkout';
    }
  } catch (error) {
    console.error('Win processing failed:', error);
  }
};