Configure SDK

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

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

Below is a brief overview of the callbacks and configuration.

Configuration

Pass in the following query params into the game url to configure the app.

operatorId: This ID will be provided to you by THNDR
gameId: 'solitaire', 'blocks' or 'blackjack'
language: Two-letter country code. If language is not supported, defaults to English.

Note: for game make sure clipboard permissions are allowed:

 allow="clipboard-write; clipboard-read;"

Callbacks

The SDK requires two key callback functions, each responsible for handling specific actions within the THNDR game.

getToken

Returns the authentication token for the user.

getBalance

Retrieves the user's balance from your system and return it to the THNDR game for display.

handlePaymentError

When a payment request fails, your integration should return one of the following error-handling responses. These responses determine what the user will see within the game and how the system behaves next.

Use this option to instruct the system to retry the payment. No additional popups will appear unless the retry attempt also fails. If it does, a generic payment error will be displayed.

return {
   action: "RETRY"
};

This will immediately display a standard error popup to the user. Use this if the error cannot be recovered from or if retrying is not applicable.

return {
   action: "GENERIC_ERROR"
};

Use this to display a custom error message to the user. This is useful when you want to show specific messaging, such as account-related issues or detailed failure reasons.

return {
  action: "OPERATOR_ERROR"
  message: "Your custom message"
};

Use this to not retry the payment. Also no error message will be shown

return {
  action: "IGNORE"
};

analyticsEvent

Returns events that occur in the game, should it be required to capture these for your own analytics

close

The host application should close the web view hosting the game. This means the user indicated they want to close the game.

Example Code Overview

The code integrates the THNDR 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>THNDR</title>
  </head>
  <body>
    <iframe 
      src="https://embed-sandbox.clinch.gg?operatorId=operator_id&gameId=solitaire&language=en" 
      id="games_iframe"
      allow="clipboard-write; clipboard-read;"
      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 { enableLogging, demoBalance, initGame, analyticsEvent, cancelInvoice } from '/thndr-sdk.js';
        
      function async getToken() {
        console.log("THNDR 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)
        };
      }
      
      function async handlePaymentError(error) {
        console.log("Error code", error.code);
        return {
          action: "RETRY", // RETRY, GENERIC_ERROR, OPERATOR_ERROR, IGNORE
          // message: "Custom error meesage defined by the operator." // Custom error message for use with OPERATOR_ERROR action only
        };
      }

      function async analyticsEvent(name) {
        console.log("Analytics event:", name);
      }
      
      function close() {
        console.log("Close the game");
      }
      
      //enableLogging(); // Optional, enable logging for debugging
    
      initGame(
        "games_iframe",
        "https://embed-sandbox.clinch.gg",
        getToken,
        getBalance,
        close,
        handlePaymentError,
      );
    </script>
  </body>
</html>

PreviousIntroduction NextAuthenticate Users

Last updated 3 days ago