Web/Javascript SDK (Games)

Installation

npm install Lucra-Sports/lucra-web-sdk

The package is hosted as a public repository on Github. To specify a specific version of the SDK to install, add #vX.Y.Z after lucra-web-sdk in your package.json file. The available releases can be found at https://github.com/Lucra-Sports/lucra-web-sdk/releases. We recommend using the most recent version of the SDK.

Typescript

The SDK was developed with Typescript in mind. If you are using Typescript, everything should be typed including the class constructor and the available methods and arguments on the LucraClient class.

Create an instance of LucraClient

API Key Update (Required)

Starting with Web SDK > 0.20.2, Lucra SDK initialization now requires both tenantId and apiKey.

What changed

• Lucra SDK initialization requires an explicit apiKey.

• Using tenantId alone is no longer supported in these versions.

• Existing integrations on older Web SDK versions will continue to work.

Required action

• Update your Lucra SDK initialization to include both tenantId and apiKey.

Notes

• Backend API keys are unchanged.

• Use the appropriate key for Sandbox vs Production environments.

import { LucraClient } from "lucra-web-sdk";

export const lucraClient = new LucraClient({
  tenantId: "<your Lucra tenant id>",
  env: "sandbox" | "production",
  onMessage: {
    claimReward: (claimReward) => {
      // the user is attempting to claim their reward from a Free To Play matchup
    },
    convertToCredit: (convertToCredit) => {
      // if you've enabled convert to credit, the SDK will ask for the conversion amount through this method
    },
    deepLink: (deepLink) => {
      // Lucra is requesting a url that the user of the SDK will open to then open up the LucraClient at where the deepLink url is linking to
    },
    matchupAccepted: (matchup) => {
      // the user successfully jointed someone else's matchup, and contains the id of that matchup 
    },
    matchupCanceled: (matchup) => {
      // the user successfully canceled the matchup, and contains the id of that matchup
    },
    matchupCreated: (matchup) => {
      // the user successfully created a matchup, and contains the id of that matchup 
    },
    matchupStarted: (matchup) => {
      // the user successfully started a matchup, and contains the id of that matchup 
    },
    navigationEvent: (navigationEvent) => {
      // the user has navigated in Lucra. The full URL will be sent in this message to be used later on with opening a deepLink or for analytics tracking.
    },
    tournamentJoined: (tournamentJoined) => {
      // the user successfully joined a tournament
    },
    userInfo: (userInfo) => {
      // whenever an update happens to the user, the callback to this function will receive the newest version of that user object
    },
  },
  useTestUsers: true, // optional boolean to pass in to use test users instead of phone number authentication
});

Registering `onMessage` functions

If you need to register a handler function for any of the onMessagecallbacks, you can do so after instantiation like so:

const lucraClient = new LucraClient(...)
lucraClient.deepLinkHandler = handleDeepLinkRequest;

The deepLinkhandler is an example of where you might want to do this since the handler of the function probably needs the instance of LucraClientto respond. For example, consider this handler function,

function generateDeepLink({ url }: LucraDeepLinkBody) {
  const searchParams = new URLSearchParams({
    launch: "lucra-deep-link",
    deepLinkUrl: url
  });
  const shareUrl = `${window.location.origin}?${searchParams.toString()}`;
  lucraClient?.sendMessage.deepLinkResponse({
    url: shareUrl,
  });
}

Note that when you register this function at instantiation, lucraClientwill be undefined. You can later in your code, when lucraClientis no longer undefined, do:

if (lucraClient) {
  lucraClient.deepLinkHandler = generateDeepLink;
}

Opening up Lucra

const lucraClient = new LucraClient(...)
lucraClient
  .open(element) // HTMLElement to place iframe in. The iframe will attempt to take up 100% height and width of the container element
  // and then choose one of the following
  .profile() // Open directly to the user's profile page
  .home() // Open to the home page
  .deposit() // Open directly into add funds
  .withdraw() // Open directly into withdraw funds
  .createMatchup(gameId?: string) // Open directly into create matchup flow. If gameId is provided, the game selection screen will be skipped 
  .matchupDetails(matchupId: string) // Open directly into an existing matchup
  .tournamentDetails(matchupId: string) // Open directly into a tournament
  .deepLink(url: string) // Let LucraClient open the deeplink

Recommended Screen Size

We recommend that the element you pass to the LucraClient be bound by a width between 320px - 640px for the optimal experience.

Messages you can send to LucraClient

userUpdated - update the LucraClient user with known information about the current user. This information will be persisted to LucraSports and will be used to pre-fill forms the user will have to fill out for things like Identity Verification

You may optionally include a metadata property as valid JSON related to the Lucra user. Key/value pairs should be of type String only. Note: On the metadata object, the external_id property will be used to index, if provided. Passing in metadata in this way will be used to link client users with the Lucra user for autosettlement identification purposes.

Sending a message to LucraClient

const lucraClient = new LucraClient(...)
lucraClient.sendMessage.userUpdated(...)
lucraClient.sendMessage.convertToCreditResponse(...)
lucraClient.sendMessage.enableConvertToCredit()
lucraClient.sendMessage.deepLinkResponse(...)
lucraClient.sendMessage.availableRewards(...)

Logging out

Sign the user out of Lucra

lucraClient.logout()