Connect Xsolla Login widget SDK

The Xsolla Login widget is available for installation using the NPM package manager or the <script> tag on an HTML page.

Connect the Xsolla Login widget SDK in one of the following ways:

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</script>

Initialize Xsolla Login widget SDK

Initialize the widget using one of the methods below. Specify the following parameters:

• projectId — Login project ID. You can find it in your project in Publisher Account, in the Login > Dashboard section.
• preferredLocale — the interface language. The following languages are supported: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), English (en_US), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vietnamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).
• clientId — OAuth 2.0 client ID. You can find it in your project in Publisher Account, in the Login > your Login project > Security > OAuth 2.0 section.
• redirectUri — The URL the user is redirected to after they confirm their account, log in, or confirm password reset. Must be specified in the Publisher Account in the OAuth 2.0 client settings.

Leave the rest of the parameters unchanged.

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</script>

Add Xsolla Login widget opening

1. Add a button with the on-click event and the xl.open() function to your HTML page:

<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>

2. Add the code to open the widget in the <div> block of your HTML page.

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

Import package from an archive

1. Download the SDK from CDN or GitHub.

2. Unzip the package.
3. Open your Unity project or create a new one.
4. In the Unity editor, go to Assets > Import Package > Custom Package in the main menu and select the SDK.

Set up compiler

1. Click Edit > Project Settings in the main menu.
2. Go to the Player > Other Settings > Configuration section.
3. Make sure that Mono is selected in the Scripting Backend field.

Resolve Android dependencies

For Android builds, the SDK uses function from native Android libraries.

To resolve dependencies and download the necessary libraries:

1. Specify Android as the build platform:
   1. In the Unity editor, go to File > Build Settings in the main menu.
   2. In the Platform panel, select Android.
   3. Click Switch Platform.

2. Start the dependency manager:
   1. In the Unity editor, go to Assets > External Dependency Manager > Android Resolver > Resolve in the main menu.
   2. Wait for the dependency manager to finish.

As a result, the JAR or AAR files of all the necessary Android libraries are downloaded to the Assets/Plugins/Android folder.

Set up SDK

1. Open your Unity project.
2. Click Window > Xsolla > Edit Settings in the main menu.
3. Specify the main project parameters in the Inspector panel in one of the following ways:

1. 1. Import settings from Publisher Account:
      1. Click Fill settings by PA.
      2. Specify Publisher Account authorization data in the Login and Password fields.
      3. Click Log In.
      4. Fill in the fields in the Publisher Account section.

1. 1. 5. Click Apply Settings.

1. 2. Specify the parameters manually:
      1. In the Project ID field, specify the project ID that can be found in Publisher Account next to the name of your project.
      2. In the Login ID field, specify the ID of the Login project. To get it, open Publisher Account, go to the Login > Dashboard > your Login project section, and click Copy ID next to the name of the Login project.
      3. In the Callback URL field, specify the URL or path where users are redirected after they have been successfully authenticated, confirmed their email, or reset their password. The value must match the one specified in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.

1. 1. 4. In the OAuth Client ID field, specify client ID for OAuth 2.0 that can be found in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.

4. Set other settings if necessary (e.g., display options for the payment UI in the Pay Station UI section).

Add Xsolla Login widget opening

To open the widget, call the XsollaAuth.AuthWithXsollaWidget SDK method, passing the following parameters:

• onSuccess — the successful user authentication callback.
• onError — the request error callback.
• onCancel — the user authentication cancellation callback, triggered when the user closes the widget without completing the authentication process.
• locale — the UI language (optional). The following languages are supported: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), English (en_US), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vietnamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).

For standalone builds, the widget opens in the built-in browser that is included with the SDK. You can use a different built-in browsing solution that allows you to track URL changes

Install SDK

The required libraries are available on Maven Central.

To install the libraries:

1. Launch Android Studio.
2. Open your application’s build.gradle file.
3. Add the following lines to the dependencies section, where <version_number> is the required library version:

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

Initialize SDK

Initialize the Login library by calling the static method at application startup. To do this, add the following lines to your Android project source code:

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

Add Xsolla Login widget opening

To open the widget:

1. Call the XLogin.startAuthWithXsollaWidget method from the Login library, passing the following parameters:

1. • fragment or activity — the current fragment or activity.

1. • callback — the status callback.

1. • locale — the UI language (optional). The following languages are supported: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), English (en_US), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vietnamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).

2. Inside the onActivityResult method, call the XLogin.finishAuthWithXsollaWidget method from the Login library, passing the following parameters:

1. • activity — the current activity. It is necessary for processing the application context.

1. • activityResultRequestCode — the request code from the onActivityResult method. It is used to identify the original request.

1. • activityResultCode — the result code from the onActivityResult method. It allows you to determine whether the operation was successful.

1. • activityResultData — the data returned from onActivityResult. It contains the results of the operation.

1. • callback — the status callback. It is used to process the authentication result.

3. When processing the authorization result, initialize the Store library.

Initializing the Store library:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

Install SDK

1. Download the Epic Games Launcher.
2. Create a new Unreal Engine project.

3. Download and install the SDK:
   1. To download and install the SDK from the Unreal Engine Marketplace:
      1. Go to the SDK page on the Unreal Engine Marketplace.
      2. Click Open in Launcher.

1. 1. 3. Go to Epic Games Launcher.

1. 1. 4. Click Install to Engine.
      5. Open your Unreal Engine project in Unreal Editor.
      6. Go to the Settings > Plugins > Installed > Xsolla SDK section. Check the Enabled box and click Restart Now to save settings and reload the Unreal Editor.

1. 2. To download and install the SDK from GitHub:
      1. Download the package with the SDK for your version of the engine.
      2. Unzip the package.
      3. Move the SDK folder to the plugins directory in the root of your Unreal Engine project.

Set up SDK

1. Open your Unreal Engine project in Unreal Editor.
2. Go to Settings > Project Settings > Plugins > Xsolla Settings > General and specify project parameters:

1. 1. In the Project ID field, specify the project ID that can be found in Publisher Account next to the name of your project.
   2. In the Login ID field, specify the ID of the Login project. To get it, open Publisher Account, go to the Login > Dashboard > your Login project section, and click Copy ID next to the name of the Login project.
   3. In the Client ID field, specify client ID for OAuth 2.0 that can be found in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
   4. In the Redirect URI field, specify the URL or path in the application to which users are redirected after they have successfully authenticated, confirmed their email, or reset their password. The value must match the one specified in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
   5. Set other settings if necessary (e.g., display options for the payment UI in the Pay Station UI section).

1. As a result, your project in Publisher Account will be connected to demo maps.

3. Go to Content Browser > View Options and check the boxes for Show Engine Content and Show Plugin Content.

Add Xsolla Login widget opening

Call the AuthWithXsollaWidget SDK method, passing the following parameters:

• WorldContextObject — the world context object (for C++ call).
• SuccessCallback — the successful user authentication and token receipt callback (optional).
• CancelCallback — the user authentication cancellation callback, triggered when the user closes the widget without completing the authentication process (optional).
• ErrorCallback — the callback for errors that occur during the authentication process (optional).
• bRememberMe — whether it is necessary to retain the authentication data (optional). By default, the value is set to false.
• Locale — the UI language (optional). By default, this value is defined by the user’s IP address.
• State — a string used for additional verification of the user on the application server. The default value is set to xsollatest.

Example: