Config

This script integrates the Clinch SDK into your web app, enabling secure communication between your parent window and the embedded iframe. 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 Clinch web app.

const config = {
    operatorId: 'your_operator_id',
    gameId: "solitaire",
    clinchUrl: "http://embed-sandbox.clinch.gg",
    companyName: "your company name",
    language: "en",
    paymentType: "lightning",
    showSats: true,
    lightningAddress: "[email protected]",
    logging: true,
};

operatorId: This ID will be provided to you by THNDR
gameId: 'solitaire' or 'blocks'
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.
paymentType: This must be 'lightning'.
showSats: The iframe shows balances in USD. If you want to show a satoshi balance as well, set this to true.
lightningAddress: The users lightning address that their winnings are sent to
logging: When set to true, this enables debug mode, allowing additional logging in the console for troubleshooting.

Callbacks

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

getToken: Retrieves the authentication token for the user.
getBalance: Returns the current balance for the user.
onPayInvoice: You will receive a bolt11 invoice, which you should pay from your users wallet balance.

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: "soltaire"
        clinchUrl: "http://embed-sandbox.clinch.gg",
        companyName: "some company",
        language: "en",
        paymentType: "lightning",
        showSats: true,
        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)
        };
      }
    
      function async onPayInvoice(invoice) {
        console.log("Pay invoice", invoice);
      }
    
      loadClinch(
        config,
        getToken,
        getBalance,
        onPayInvoice
      );
    </script>
  </body>
</html>

<!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: "soltaire"
        clinchUrl: "http://embed-sandbox.clinch.gg",
        companyName: "some company",
        language: "en",
        paymentType: "lightning",
        showSats: true,
        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)
        };
      }
    
      function async onPayInvoice(invoice) {
        console.log("Pay invoice", invoice);
      }
    
      loadClinch(
        config,
        getToken,
        getBalance,
        onPayInvoice
      );
    </script>
  </body>
</html>

hashtagConfiguration Object (config)

hashtagCallbacks

hashtagExample Code Overview

Configuration Object (`config`)

Callbacks

Example Code Overview