Embed the PlaySuper store in native Android, iOS, React Native, and Flutter apps — no Unity SDK required

WebView Integration (Non-Unity Apps)

If your app is not built with Unity — a native Android Studio project, an iOS app, React Native, or Flutter — you can still offer the full PlaySuper store experience by loading it in a WebView. Your app handles authentication via the REST API, then opens the store URL with the player's credentials attached.

This guide covers the complete flow: getting an auth token, building the store URL, configuring the WebView, and reacting to in-store transactions.

Prerequisites: Complete the Console Setup Guide first so you have your API key and coin ID ready. Coin distribution and other server-side operations use the REST API directly.

How it works

Your app registers and logs in the player through the REST API to obtain an access token.
Your app opens the store URL in a WebView with the API key and token as query parameters — the store picks them up automatically on first render.
Your app wraps the WebView in its own screen with its own close/back control (e.g. a toolbar button), so the player can return to the game at any time.

Step 1: Get an auth token for the player

Create the player once (using your app's internal user ID), then log them in to receive an access token.

Create the player (once per player):

curl -X POST https://api.playsuper.club/player/create-with-uuid \
  -H "x-api-key: YOUR_API_KEY" \
  -H "x-game-uuid: your-unique-player-id"

Log the player in (federated login by studio):

curl -X POST https://api.playsuper.club/player/login/federatedByStudio \
  -H "Content-Type: application/json" \
  -H "x-api-key: YOUR_API_KEY" \
  -d '{"uuid": "your-unique-player-id"}'

The response contains the token you will pass to the store:

{
  "access_token": "eyJhbGciOi..."
}

Ideally, make these calls from your backend and hand only the access_token to your app, so your API key is never shipped inside the app binary. Cache the token — it stays valid across sessions until it expires.

Use https://dev.playsuper.club as the API base URL during development, and https://api.playsuper.club in production. See Environments.

Step 2: Build the store URL

Open the store with the credentials as query parameters. The store consumes them synchronously on first render, saves them to its own localStorage, and strips them from the address bar.

https://store.playsuper.club/?apiKey=YOUR_API_KEY&authToken=ACCESS_TOKEN

Query parameter	Required	Description
`apiKey`	Yes	Your game's API key from the console
`authToken`	Yes	The player's `access_token` from Step 1
`utm_content`	No	Analytics tag identifying where the store was opened from (e.g. `main_menu_button`)
`clearSession`	No	Pass `true` on the first open after your app's user logs out, so the previous player's session data is wiped (see Logout)

URL-encode all values. During development, use https://dev-store.playsuper.club/ instead.

You can also deep-link to a specific store page — e.g. https://store.playsuper.club/rewards?apiKey=... — the same query parameters apply.

Step 3: Configure the WebView

The store is a JavaScript single-page app, so the WebView needs:

JavaScript enabled
DOM storage (localStorage) enabled — the store will not function without it
Portrait orientation — mandatory; the store is designed for portrait only. Lock the screen hosting the WebView to portrait, even if your game runs in landscape.

Wrap the WebView in your own screen with a native close or back button that dismisses it and returns the player to the game. On Android, also handle the hardware back button (navigate back in WebView history first, then dismiss).

Platform examples

Each example below is a complete minimal integration: build the store URL with credentials, enable JavaScript and DOM storage, and load it. Add your own close control around the WebView.

Android (Kotlin)

import android.net.Uri
import android.webkit.WebView

fun openStore(webView: WebView, apiKey: String, authToken: String) {
    val storeUrl = Uri.parse("https://store.playsuper.club/").buildUpon()
        .appendQueryParameter("apiKey", apiKey)
        .appendQueryParameter("authToken", authToken)
        .appendQueryParameter("utm_content", "main_menu_button")
        .build()
        .toString()

    webView.settings.javaScriptEnabled = true
    webView.settings.domStorageEnabled = true

    webView.loadUrl(storeUrl)
}

Android (Java)

WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);

String storeUrl = Uri.parse("https://store.playsuper.club/").buildUpon()
        .appendQueryParameter("apiKey", apiKey)
        .appendQueryParameter("authToken", authToken)
        .appendQueryParameter("utm_content", "main_menu_button")
        .build()
        .toString();

webView.loadUrl(storeUrl);

iOS (Swift)

import UIKit
import WebKit

class StoreViewController: UIViewController {
    var webView: WKWebView!
    let apiKey = "YOUR_API_KEY"
    let authToken = "ACCESS_TOKEN"

    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView(frame: view.bounds)
        view.addSubview(webView)

        var components = URLComponents(string: "https://store.playsuper.club/")!
        components.queryItems = [
            URLQueryItem(name: "apiKey", value: apiKey),
            URLQueryItem(name: "authToken", value: authToken),
            URLQueryItem(name: "utm_content", value: "main_menu_button"),
        ]

        webView.load(URLRequest(url: components.url!))
    }
}

React Native

import { WebView } from 'react-native-webview';

const params = new URLSearchParams({
  apiKey: 'YOUR_API_KEY',
  authToken: accessToken,
  utm_content: 'main_menu_button',
});

<WebView
  source={{ uri: `https://store.playsuper.club/?${params.toString()}` }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
/>;

Flutter

import 'package:webview_flutter/webview_flutter.dart';

final storeUri = Uri.https('store.playsuper.club', '/', {
  'apiKey': apiKey,
  'authToken': authToken,
  'utm_content': 'main_menu_button',
});

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(storeUri);

DOM storage is enabled by default in webview_flutter on Android. If you use a different WebView package, make sure localStorage is enabled.

Logout and switching players

The store persists the player's session in the WebView's localStorage, which survives across app launches. When a user logs out of your app (or a different user logs in), open the store once with clearSession=true so the previous player's data is wiped before the new credentials are applied:

https://store.playsuper.club/?clearSession=true&apiKey=YOUR_API_KEY&authToken=NEW_ACCESS_TOKEN

Troubleshooting

Symptom	Likely cause	Fix
Blank or broken store page	DOM storage disabled	Enable localStorage/DOM storage in the WebView settings
Player shown as logged out in the store	Missing or expired `authToken`	Re-run the federated login (Step 1) and reopen the store with a fresh token
Previous user's data appears after account switch	Stale WebView localStorage	Open the store once with `clearSession=true`

Next steps

Guide	Description
API Reference	Distribute coins, fetch balances, and manage players via REST
Touchpoints API	Show reward widgets in your own app UI
Webhooks	Receive server-side notifications for coin transactions
Unity SDK Guide	If your game is built with Unity, use the SDK instead

Need help?

Email: engineering@playsuper.club

WebView Integration

On this page