Sending Virtual Gifts - React

Virtual gifting is a powerful monetization and engagement feature that allows viewers to support hosts or speakers during a livestream by sending them digital tokens or "gifts." These gifts can be visually animated and even linked to leaderboards or reward systems.

This guide explains how to implement a secure and real-time virtual gifting experience using your backend server in combination with VideoSDK PubSub.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• publish()

How It Works

1. User Action: A viewer taps on a gift button to send a virtual gift to the host.

2. Server Verification:

   • A request is made to your business backend to process the gift.
   • The server authenticates the user, checks their wallet balance, deducts the gift value, and returns a success response.

3. Event Broadcast: Upon success, the client publishes a PubSub message to inform everyone in the meeting (host + other viewers) that a gift has been sent. Clients can then visually show an animation or notification.

Backend Responsibility

Your backend plays a central role in verifying, validating, and processing gift transactions. It should:

• Authenticate the request (token/session)
• Verify if the user has sufficient balance
• Deduct the gift cost
• Store the transaction in a database (optional but recommended)
• Respond with success or failure

Frontend Implementation

• Sending a Gift (Client to Backend + PubSub)

import axios from "axios";
import { usePubSub } from "@videosdk.live/react-sdk";

function GiftSender({ senderId, hostId }) {
  const { publish } = usePubSub("GIFT");

  const sendGift = async (giftType) => {
    try {
      const response = await axios.post("https://your-api.com/send-gift", {
        senderId,
        hostId,
        giftType,
      });

      if (response.data.success) {
        // Notify everyone in the meeting
        try {
          await publish(
            JSON.stringify({
              giftType,
              from: senderId,
              to: hostId,
            })
          );
        } catch (err) {
          console.error("publish failed:", err);
        }
      } else {
        alert("Gift could not be sent: " + response.data.message);
      }
    } catch (error) {
      console.error("Error while sending gift:", error);
    }
  };

  return (
    <>
      <button onClick={() => sendGift("rose")}>🌹 Send Rose</button>
      <button onClick={() => sendGift("diamond")}>💎 Send Diamond</button>
    </>
  );
}

• Displaying the Gift (All Clients)

import { usePubSub } from "@videosdk.live/react-sdk";
import { useEffect, useState } from "react";

function GiftReceiver() {
  const [gifts, setGifts] = useState([]);
  const { messages } = usePubSub("GIFT");

  useEffect(() => {
    messages.forEach(({ message }) => {
      const parsed = JSON.parse(message);
      setGifts((prev) => [
        ...prev,
        {
          id: Date.now(),
          from: parsed.from,
          to: parsed.to,
          type: parsed.giftType,
        },
      ]);
    });
  }, [messages]);

  return (
    <div className="gift-container">
      {gifts.map((gift) => (
        <div key={gift.id} className="gift-toast">
          🎁 {gift.from} sent a {gift.type} to {gift.to}
        </div>
      ))}
    </div>
  );
}

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• usePubSub()