Premium Subscription

A one-time premium purchase that removes ads permanently.

Step 1: Register Product on VX Shop

Before implementing, register the product on Verse8 VX Shop dashboard:

Product Settings:

Product ID: premium-subscription
Product Name: Premium Subscription (or “Remove Ads”)
Price: 100 VX (adjust as needed)
Purchase Constraints:
- ✅ Lifetime Limit: 1 (user can only purchase once)
- ❌ Period Limit: None
- ❌ Time-Limited Sale: None

This ensures users cannot purchase premium multiple times.

Step 2: Client Implementation


import { useVXShop } from '@verse8/platform';
import { useGlobalMyState } from '@agent8/gameserver';
import { useEffect } from 'react';
 
function PremiumShop() {
  const { getItem, buyItem, refresh, onClose } = useVXShop();
  const myState = useGlobalMyState();
 
  useEffect(() => {
    const cancel = onClose(() => refresh());
    return cancel;
  }, [onClose, refresh]);
 
  const premiumItem = getItem('premium-subscription');
  const isPremium = myState?.isPremium || false;
 
  // If already premium, don't show shop
  if (isPremium) {
    return (
      <div className="premium-badge">
        ✨ Premium Member - Ad Free!
      </div>
    );
  }
 
  return (
    <div className="premium-shop">
      <h3>Upgrade to Premium</h3>
      <p>Remove all ads forever!</p>
      
      {premiumItem?.purchasable && (
        <button 
          className="premium-button"
          onClick={() => buyItem('premium-subscription')}
        >
          Get Premium - {premiumItem.price} VX
        </button>
      )}
    </div>
  );
}
 
// Usage in game
function GameScreen() {
  const myState = useGlobalMyState();
  const isPremium = myState?.isPremium || false;
 
  return (
    <div>
      <h1>My Game</h1>
      
      {/* Show ads only for non-premium users */}
      {!isPremium && (
        <div className="ad-container">
          <Ad />
        </div>
      )}
      
      <GameContent />
      <PremiumShop />
    </div>
  );
}

Step 3: Server Implementation


// server.js
async $onItemPurchased({ account, purchaseId, productId, quantity, metadata }) {
  if (productId === 'premium-subscription') {
    // Set premium flag permanently
    await $global.updateUserState(account, { 
      isPremium: true,
      premiumPurchaseDate: Date.now()
    });
  }
  
  return { success: true };
}

Step 4: How It Works

User clicks “Get Premium” button
VXShop payment dialog opens
User completes payment with VX
Server receives $onItemPurchased event
Server sets isPremium: true in user state
Client automatically receives updated state
Ads are hidden, premium badge shows

Key Points

One-time purchase: Use purchaseLimit: 1 when registering the product
Permanent benefit: isPremium flag persists forever
Immediate effect: State syncs automatically to client
Simple logic: Just a boolean flag toggle

Product Registration

When registering this product on Verse8:

Set Purchase Constraints → Lifetime Limit to 1
This ensures users can only purchase once