PlaySuperWeb SDK Overview
Add PlaySuper rewards to an HTML5 or browser game with the JavaScript SDK, from installation to players, the store and touchpoints
The PlaySuper Web SDK (@playsuper/web-sdk) brings PlaySuper rewards to games that run in a browser: HTML5 games, Phaser, PixiJS, Cocos web builds, or any page built with React, Next.js or plain JavaScript. It does what the Unity SDK does, in the browser.
Prerequisites: Complete the Console Setup Guide first so you have your API key and coin ID ready.
What you can do with the SDK
- Sign players in: with your game's own player IDs, no PlaySuper login screen
- Show coin balances: read each player's coins to display in your game
- Open the store: show the PlaySuper rewards store over your game, and know when the player comes back
- Show touchpoints: fetch reward widgets for a screen, render them in your UI, and open them in the store
- Track analytics: the same SDK events as the Unity SDK, sent automatically
Coins move on your server
In a web game, every coin transaction happens on your server. Never award or deduct coins from the browser. Your web page, its API key and its network calls are visible to every player, so anything the page can do, a player can repeat with any amount.
The SDK reads balances; it has no method to award or deduct coins. The flow is:
- Your game tells your server what happened (a level finished, a purchase made), through your own API and your own player session.
- Your server decides the amount and calls PlaySuper's v2 coin API (
/v2/coins/:coinId/distributeand/deduct) with your API key and server secret. The secret stays on your server; it never goes into the page. Web games must use v2, not the v1/coins/...endpoints. - PlaySuper calls your server back with a webhook when a player spends coins in the store or gets a refund.
The browser only shows the balance (getBalance()) and opens the store. Core Usage has the code for each step.
How the store appears
openStore() shows the store above your game:
- On phones, full screen.
- On tablets and desktops, as a phone-sized panel in the middle of the screen, over your dimmed game. Clicking outside the panel closes it.
The player returns to your game with the store's Continue playing button, the browser's back button, or Escape. Your game is notified each time the store opens or closes, and when the player buys something with coins.
Integration steps
| Step | Guide | What you will do |
|---|---|---|
| 1 | Installation | Install the package or script tag and initialize the SDK |
| 2 | Core Usage | Sign players in, show balances, award coins from your server, open the store |
| 3 | Touchpoints | Fetch, render and track reward widgets |
Support
- Email: engineering@playsuper.club
- Package: @playsuper/web-sdk on npm