Installation & Setup

Install the PlaySuper Web SDK from npm or a script tag and initialize it with your API key

Step 1: Install the SDK

With a bundler (Vite, webpack, Next.js, Phaser templates)

npm install @playsuper/web-sdk

import { PlaySuper } from '@playsuper/web-sdk';

Without a build step

Add the script tag to your page. It defines window.PlaySuper:

<script src="https://cdn.jsdelivr.net/npm/@playsuper/web-sdk@0.1.1/dist/playsuper.global.js"></script>

Always pin an exact version in the URL, as above, so a new release never changes your game without you knowing. Release notes are on npm.

Step 2: Initialize

Call init once, when your game starts:

PlaySuper.init({
  apiKey: 'YOUR_API_KEY',
  dev: true,               // true: sandbox, with your test key. false: production, with your live key
  appVersion: '1.4.0',     // your game's version; sent with analytics events
});

Option	Required	Description
`apiKey`	Yes	Your game's API key from the console
`dev`	No	`true` for the sandbox (test key), `false` or omitted for production (live key)
`appVersion`	Recommended	Your game's version, attached to every analytics event. The SDK logs a warning when it is missing
`storeMode`	No	`'overlay'` (default) shows the store over your game. `'tab'` opens it in a new tab, or a phone-sized popup window on desktop
`debug`	No	`true` logs SDK activity to the browser console

You do not set a URL: the SDK picks the PlaySuper hosts for the environment, like the Unity SDK.

Sandbox and production keys are separate. A test key only works with dev: true, and a live key only without it. The wrong pairing answers 401 Invalid API key.

React and Next.js

The SDK is safe to import during server rendering, but init and every call that opens the store belong in the browser. In React, initialize in an effect:

'use client';
import { useEffect } from 'react';
import { PlaySuper } from '@playsuper/web-sdk';

export function PlaySuperProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    PlaySuper.init({ apiKey: process.env.NEXT_PUBLIC_PLAYSUPER_API_KEY || '', appVersion: '1.4.0' });
    return () => PlaySuper.dispose();
  }, []);
  return <>{children}</>;
}

Requirements

A current version of Chrome, Safari, Firefox or Edge, on desktop or mobile.
A backend server to award and deduct coins. Coin transactions never run in the browser; see Coins.
Serve your game over https. The store tells your game when the player closes it, and it only does so for https pages (and http://localhost while you develop).
If your page sets a Content Security Policy, allow the store and the SDK's requests:
- frame-src: https://store.playsuper.club (production) and https://dev-store.playsuper.club (sandbox)
- connect-src: https://api.playsuper.club, https://dev.playsuper.club, https://analytics.playsuper.club and https://storage.googleapis.com
- img-src: https://storage.googleapis.com (touchpoint artwork)

Next step

Core Usage: sign players in, show balances and open the store.