Own UI betslip

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>emBET own betslip</title>
    <style>
      .layout {
        display: flex;
        gap: 1rem;
      }
      #host-betslip {
        min-width: 280px;
        padding: 1rem;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <embet-overlay customid="YOUR_EVENT_ID"></embet-overlay>
      <aside id="host-betslip">
        <h2>Your betslip</h2>
        <ul id="selections"></ul>
        <button type="button" id="place-bet" disabled>Place bet</button>
      </aside>
    </div>

    <script src="https://unpkg.com/@livelike/[email protected]/embet.umd.min.js"></script>
    <script>
      let currentSelection = null;

      (async () => {
        await embet.init({ clientId: "YOUR_CLIENT_ID" });

        embet.betSlipConfig({
          mode: "EXTERNAL",
          currency: "€",
          currencyDisplay: "prefix",
          decimalSign: ",",
          maxAmount: 1000,
        });

        embet.eventManager(({ eventName, payload }) => {
          if (eventName === "outcome_selected") {
            currentSelection = payload;
            document.getElementById("place-bet").disabled = false;
            document.getElementById("selections").innerHTML =
              `<li>${payload.marketId} / ${payload.outcomeId}</li>`;
          }
        });
      })();

      document.getElementById("place-bet").addEventListener("click", async () => {
        if (!currentSelection) return;

        const stake = 10;
        const result = await placeBetWithYourSportsbook({
          ...currentSelection,
          stake,
        });

        if (result.accepted) {
          embet.notifyBetPlaced({
            marketId: currentSelection.marketId,
            outcomeId: currentSelection.outcomeId,
            stake,
            betResult: "success",
          });
          currentSelection = null;
          document.getElementById("place-bet").disabled = true;
          document.getElementById("selections").innerHTML = "";
          return;
        }

        embet.notifyBetPlaced({
          marketId: currentSelection.marketId,
          outcomeId: currentSelection.outcomeId,
          stake,
          betResult: "failed",
          error: result.errorCode,
        });
      });

      async function placeBetWithYourSportsbook(selection) {
        console.log("place bet", selection);
        return { accepted: true };
      }
    </script>
  </body>
</html>

npm install @livelike/embet

import { useEffect, useState } from "react";
import embet from "@livelike/embet";

const CLIENT_ID = "YOUR_CLIENT_ID";
const EVENT_ID = "YOUR_EVENT_ID";

type Selection = { marketId: string; outcomeId: string };

export function EmbetExternalBetslipPlayer() {
  const [selection, setSelection] = useState<Selection | null>(null);

  useEffect(() => {
    (async () => {
      await embet.init({ clientId: CLIENT_ID });

      embet.betSlipConfig({
        mode: "EXTERNAL",
        currency: "€",
        currencyDisplay: "prefix",
        decimalSign: ",",
        maxAmount: 1000,
      });

      embet.eventManager(({ eventName, payload }) => {
        if (eventName === "outcome_selected") {
          setSelection({
            marketId: payload.marketId,
            outcomeId: payload.outcomeId,
          });
        }
      });
    })();
  }, []);

  async function onPlaceBet(stake: number) {
    if (!selection) return;

    const result = await placeBetWithYourSportsbook({ ...selection, stake });

    embet.notifyBetPlaced(
      result.accepted
        ? {
            marketId: selection.marketId,
            outcomeId: selection.outcomeId,
            stake,
            betResult: "success",
          }
        : {
            marketId: selection.marketId,
            outcomeId: selection.outcomeId,
            stake,
            betResult: "failed",
            error: result.errorCode,
          },
    );

    if (result.accepted) setSelection(null);
  }

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <embet-overlay customid={EVENT_ID} />
      <aside>
        <h2>Your betslip</h2>
        {selection ? (
          <p>
            {selection.marketId} / {selection.outcomeId}
          </p>
        ) : (
          <p>Select an outcome in the overlay.</p>
        )}
        <button
          type="button"
          disabled={!selection}
          onClick={() => onPlaceBet(10)}
        >
          Place bet
        </button>
      </aside>
    </div>
  );
}

async function placeBetWithYourSportsbook(_selection: unknown) {
  return { accepted: true as const };
}