Configure SDK

This script integrates the Clinch SDK into your web app, enabling secure communication between your parent window and the embedded iframe.

All interactions with your users balances are made via server to server APIs

Below is a brief overview of the callbacks and configuration.

Configuration Object (config)

The config object passed to loadClinch contains settings that control the behaviour of the iFrame.

const config = {
    operatorId: "your_operator_id",
    gameId: "solitaire",
    clinchUrl: "https://embed-sandbox.clinch.gg",
    companyName: "your company name",
    language: "en",
    logging: true,
};
  • operatorId: This ID will be provided to you by THNDR

  • gameId: 'solitaire', 'blocks' or 'blackjack'

  • clinchUrl: This is the URL for the clinch iframe. This will be provided by THNDR for sandbox (embed-sandbox.clinch.gg) and production (embed.clinch.gg) environments.

  • companyName: This is your company name that will be shown by the users balance of their wallet on your platform.

  • language: Two-letter country code. If language is not supported, defaults to English.

  • logging: When set to true, this enables debug mode, allowing additional logging in the console for troubleshooting.

Callbacks

The SDK requires two key callback functions, each responsible for handling specific actions within the Clinch web app.

  1. getToken: Returns the authentication token for the user.

  2. getBalance: Retrieves the user's balance from your system and return it to the Clinch web app for display.

Example Code Overview

The code integrates the Clinch SDK with the specified configuration and callbacks:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clinch</title>
  </head>
  <body>
    <iframe src="http://embed-sandbox.clinch.gg" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
        Your browser doesn't support iframes
    </iframe>
    <script type="module">
      import { loadClinch } from './clinch-sdk.js';
    
      const config = {
        operatorId: "operator_id",
        gameId: "solitaire",
        clinchUrl: "http://embed-sandbox.clinch.gg",
        companyName: "some company",
        language: "en",
        logging: true,
      };
    
      function async getToken() {
        console.log("Clinch SDK: Get the server to server thndr authentication token");
        return "eyJhbGciOiJSUzI1NiIsInR5cC...";
      }
    
      function async getBalance() {
        return {
          balance: 100, // $1.00
          currency: "cents", // Must be either - sats, btc, or cents (USD)
        };
      }
    
      loadClinch(
        config,
        getToken,
        getBalance,
      );
    </script>
  </body>
</html>

Last updated