Integrate SDK on application side

  1. Design an interface for the login system, in-game store, and other pages of your application.
  2. Set up event handling according to your application logic using SDK methods. To get started with the basic SDK features, follow the step-by-step tutorials below.

Note

You can create your own solution by following UMG UI documentation, or use the demo map as a template. To adapt the demo scene interface to your application, use the UI builder.

To modify the SDK for your application, follow the SDK modification instruction.

Follow the step-by-step tutorials below to get going with the basic SDK features.

User login via username/email and password

This tutorial shows how to use SDK methods to implement:
  • user sign-up
  • resend request for a sign-up confirmation email
  • user login
  • user password reset
Source code
See the source code for these examples on GitHub.

You can authenticate users with their username or email address. In the following examples we authenticate users with their username, whereas the email address is used to confirm sign-up and to reset the password.

Note
If you use the Login widget on your site (in a web store, for example), make sure that you implemented the same user authentication methods on your site and in your application. The widget uses the email address for authentication by default. To set up user login via username, contact your Account Manager.

The logics and interface in the examples are less complicated than they will be in your application. A possible authentication system implementation option is described in the demo project.

Implement user sign-up

Create widget

  1. Go to Content Browser and create a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username field
    • user email address field
    • user password field
    • sign-up button

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a sign-up button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a RegisterUser method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add callback functions:
    • OnRegistered — called if sign-up is successful
    • OnError — called if an error occurs

Note
In the example of event handling, callback functions use the PrintString class. A code and error description are passed in Code and Description parameters. You can add other actions. For example, open a confirmation email resend page after successful sign-up or a login page.

  1. To start widget debugging, start a level.

Example of event handling implementation:

Set up sign-up confirmation email

After successful sign-up, a user receives a sign-up confirmation email to a specified address. You can customize emails sent to users in Publisher Account.

If you are developing an Android application, set up deep links to return a user to an application after they confirm sign-up.

Implement sign-up confirmation email resend request

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username/email field
    • resend email button

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a resend email button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a ResendAccountConfirmationEmail method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnEmailResent and OnError callback functions.
  4. To start widget debugging, start a level.

If the request is successful, the user receives a sign-up confirmation email to the email address specified during sign-up.

Example of event handling implementation:

Implement user login

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username field
    • password field
    • remember me checkbox
    • login button

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a login button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link an AuthenticateUser method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnAuthenticated and OnError callback functions.

Note
After successful user login, the authorization token is passed in the LoginData parameter. The authorization token is used in requests to Xsolla servers.

  1. To start widget debugging, start a level.

Example of event handling implementation:

Implement password reset

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username/user email address field
    • password reset button

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a password reset button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a ResetUserPassword method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnEmailSent and OnError callback functions.
  4. To start widget debugging, start a level.

Example of event handling implementation:

After successful password reset request, the user receives an email with a password reset link. In Publisher Account > your Login project > General settings > URL > Callback URL, you can configure a URL address or a path a user is redirected to after successful authentication, email confirmation, or password reset.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Social login

This guide shows how you can use SDK methods to implement user sign-up and login via their social network account.

Unlike for user authentication via username/user email address and password, you don’t have to implement separate logics for user sign-up. If the user’s first login is via a social network, a new account is created automatically.

If you have implemented social login in your application as an alternative authentication method, the social network account automatically links to an existing user account if the following conditions are met:

  • A user who signed up with username/email address and password logged into your application via a social network account.
  • A social network returns an email address.
  • User email address in a social network is the same as the email address used for sign-up in your application.

Source code
See the source code for these examples on GitHub.
Note
You can implement manual linking of a social network account. Add the page to your application where users can link a social network account to their account. In the page controller, use the LinkSocialNetworkToUserAccount SDK method.

The examples show how to set up user login via a Twitter account. You can set up all social networks in the same way.

The logics and interface in the examples are less complicated than they will be in your application. A possible authentication system implementation option is described in the demo project.

Create widget

  1. Go to Content Browser and create a UI directory.
  2. In the contextual menu, go to User Interface > Widget Blueprint.
  3. In the widget blueprint, add the social login button.

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a login button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Implement a login page opening in a built-in browser:

    1. Link a GetSocialAuthenticationUrl method call connected with the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users. Pass the Twitter value to the ProviderName parameter.
    2. Add the callback functions:
      • OnUrlReceived — called if you successfully receive a page URL. Received URL is passed in the Url parameter.
      • OnError — called if an error occurs.

Note
In the example of event handling, the OnError function uses the PrintString class. A code and error description are passed in Code and Description parameters. You can add other actions.

  1. Implement user login:
    1. Call the LaunchSocialAuthentication SDK methods linked to the XsollaLoginSubsystem object.
    2. Pass a login page URL.

  1. To get a token, track a login page URL change after successful user login:
    1. Implement closing of a browser after successful login.
    2. Call the OnSocialAuthCompleted method and subscribe to a BrowserClosed event.

Note
Getting a token from a URL is made by a blueprint of a built-in browser. The authorization token is passed to a LoginData parameter. Use it in requests to Xsolla servers.

Example of event handling implementation:

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Display of item catalog

This tutorial shows how to use the SDK methods to display the following items in an in-game store:
  • virtual items
  • groups of virtual items
  • bundles
  • packages of virtual currency
Source code
See the source code for these examples on GitHub.

Before you start, configure items in Publisher Account:

  1. Configure virtual items and groups of virtual items.
  2. Configure packages of virtual currencies.
  3. Configure bundles.

The logics and interface in the examples are less complicated than they will be in your application. A possible item catalog in an in-game store implementation option is described in the demo project.

Note

The example of every item in a catalog shows:

  • item name
  • item price

You can also show other information about the item if this information is stored in an in-game store.

Create widget for catalog page

  1. Go to Content Browser and create a UI directory.
  2. In the contextual menu, go to User Interface > Widget Blueprint.
  3. In the widget blueprint, add the following UI elements:

    • buttons for switching between displays of items and virtual currency packages
    • a display area for groups of items
    • a display area for the list of items
    • a display area for the list of virtual currency packages

The following picture shows an example of the page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Add widget event handling for catalog page

  1. In the Hierarchy panel, select a button for switching to the list of items.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. In the Hierarchy panel, select a button for switching to the list of virtual currency packages.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Implement logic for switching between the lists. To do this, add the nodes as shown in the following picture.

Implement display of virtual item groups

Create class for item group

  1. Go to Content Browser. There, in the contextual menu, click Blueprint Class.
  2. In the All classes section, select Object and click Select.
  3. Use BP_ItemGroupData as a class name.
  4. Open a blueprint of a created class.
  5. In the My Blueprint panel, click Add New and select Variable.
  6. In the Details panel:

    1. Specify GroupData in the Variable Name field.
    2. Select XsollaItemGroup in the Variable Type field.
    3. Check Instance Editable and Expose on Spawn boxes.

Create widget for item group

  1. Go to Content Browser and create a UI directory and, in the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add an element for the name of the item group.

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Click Class settings.
  3. In the Details panel, go to Interfaces > Implemented interfaces.
  4. Click Add and select UserObjectListEntry. This is a standard UE interface that allows the UI primitive to implement a behavior normal for the element of the list.
  5. Implement logic for creating a group of items:

    1. Add the EventOnListItemObjectSet node to create an element of the list and initialize the widget.
    2. Pass the value from the object that contains data about the group to the element with the name of the group. To do this, add nodes as shown in the following picture.

    1. Implement logic for showing all items with the All category. To do this, edit a blueprint as shown in the following picture.

  1. Implement logic for highlighting a group of items that is selected in the list. To do this, add nodes as shown in the following picture.

Add list of item groups to catalog page

  1. Open the catalog page widget blueprint.
  2. Add the List View element to the item groups display area.
  3. In the Details panel, select a previously created class for an item group in the Entry Widget Class field.
  4. Implement logic for adding items to groups:

    1. Open a Graph view.
    2. Link an UpdateItemGroups SDK method call connected with the XsollaLoginSubsystem object to the EventConstruct node and add passing of data entered by users.
    3. Implement logic for adding items to the group. The action should be done while processing a successful update of local cache of virtual item groups. To do this, add nodes as shown in the following picture.

  1. Implement logic for showing all items with the All category. To do this, edit a blueprint as shown in the following picture.

Implement display of virtual items

Create class for item

  1. Go to Content Browser. There, in the contextual menu, click Blueprint Class.
  2. In the All classes section, select Object and click Select.
  3. Use BP_CatalogItemData as a class name.
  4. Open a blueprint of a created class.
  5. In the My Blueprint panel, click Add New and select Variable.
  6. In the Details panel:

    1. Specify CatalogItem in the Variable Name field.
    2. Select StoreItem in the Variable Type field.
    3. Check Instance Editable and Expose on Spawn boxes.

Create widget for item

  1. Go to Content Browser and create a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following UI elements:
    • item name
    • item price

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Click Class settings.
  3. In the Details panel, go to Interfaces > Implemented interfaces.
  4. Click Add and select UserObjectListEntry. This is a standard UE interface that allows the UI primitive to implement a behavior normal for the element of the list.
  5. Implement logic for creating a group of items:

    1. Add the EventOnListItemObjectSet node to create an element of the list and initialize the widget.
    2. Pass the values from the object that contains data about the item to the elements with the name of the item and its price. To do this, add nodes as shown in the following picture.

Add list of items to catalog page

  1. Open the catalog page widget blueprint.
  2. Add the List View element to the items list display area.
  3. In the Details panel, select a previously created class for an item in the Entry Widget Class field.
  4. Implement logic for adding items to groups:

    1. Open a Graph view.
    2. Link an UpdateVirtualItems SDK method call connected with the XsollaLoginSubsystem object to the EventConstruct node and add passing of data entered by users.
    3. Implement logic for adding items to the group. The action should be done while processing a successful update of local cache of virtual item groups. To do this, add nodes as shown in the following picture.

Note
The offset and limit parameters of the UpdateVirtualItems method are not required. Use them to implement pagination — a page-by-page display of items in the catalog. The maximum number of items on the page is 50. If the catalog has more than 50 items, pagination is necessary.

  1. Implement logic for adding items to groups. To do this, add nodes as shown in the following picture.

Implement display of virtual items by groups

  1. Open the catalog page widget blueprint.
  2. In the Hierarchy panel, select the list of item groups.
  3. In the Details panel, click the + icon near the On Item Clicked event.

  1. Open a Graph view.
  2. Implement logic for filtering items by groups. To do this, add nodes as shown in the following picture.

Note
Items are filtered by a unique group identifier. The All category doesn’t have an identifier, that’s why the filter resets and shows all items.

Implement display of bundles

In this instruction, bundles and virtual items are shown in one list. Moreover, we use the same widget to display a single bundle or item.

Add list of bundles on catalog page

  1. Open a catalog page blueprint.
  2. Open a Graph view.
  3. Complete logic for adding bundles to a list. Add the UpdateBundles SDK method callback alongside with the UpdateVirtualItems method callback as shown in the following picture.

Completing item widget

  1. Open an item widget blueprint.
  2. Add a button for viewing bundle content near the item name.

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Complete logic for creating an item by adding a display condition for a bundle content viewing button. The example is in the following picture.

Add logic for displaying bundle content

  1. In the blueprint for the item widget, open a Designer view.
  2. In the Hierarchy panel, select a button for viewing bundle content.
  3. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Implement logic for displaying bundle content (a list of items in the bundle and the quantity of every item in the bundle). To do this, add nodes as shown in the following picture.

Implement display of virtual currency packages

Create class for virtual currency package

  1. Go to Content Browser. There, in the contextual menu, click Blueprint Class.
  2. In the All classes section, select Object and click Select.
  3. Use BP_VcPackItemData as a class name.
  4. Open a blueprint of a created class.
  5. In the My Blueprint panel, click Add New and select Variable.
  6. In the Details panel:

    1. Specify PackItem in the Variable Name field.
    2. Select VirtualCurrencyPackage in the Variable Type field.
    3. Check Instance Editable and Expose on Spawn boxes.

Create virtual currency package widget

  1. Go to Content Browser and create a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following UI elements:
    • package name
    • package price

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Click Class settings.
  3. In the Details panel, go to Interfaces > Implemented interfaces.
  4. Click Add and select UserObjectListEntry. This is a standard UE interface that allows the UI primitive to implement a behavior normal for the element of the list.
  5. Implement logic for creating a group of items:

    1. Add the EventOnListItemObjectSet node to create an element of the list and initialize the widget.
    2. Pass the value from the object that contains data about the package to the element with the name and a price of the package. To do this, add nodes as shown in the following picture.

Add list of virtual currency packages on catalog page

  1. Open the catalog page widget blueprint.
  2. Add the List View element to the display area for the list of virtual currency packages.
  3. In the Details panel, select a previously created class for a virtual currency package in the Entry Widget Class field.
  4. Implement logic for adding packages to the list:

    1. Open a Graph view.
    2. Link an UpdateVirtualCurrencyPackage method call connected with the XsollaStoreSubsystem object to the EventConstruct node and add passing of data entered by users.
    3. Implement logic for adding a package to the list. The action should be done while processing a successful update of local cache of virtual currency packages. To do this, add nodes as shown in the following picture.

Note
The offset and limit parameters of the UpdateVirtualCurrencyPackage method are not required. Use them to implement pagination — a page-by-page display of items in the catalog. The maximum number of items on the page is 50. If the catalog has more than 50 items, pagination is necessary.
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Sell virtual items for real currency

This instruction shows how to use the SDK methods to implement selling of virtual items for real currency.

Before you start, implement a display of virtual items in a catalog. In the following example, we describe how to implement purchasing of virtual items. Configuration for other item types is similar.

The logic and interface in the examples are less complicated than they will be in your application. A possible implementation option for selling items for real currency and displaying a catalog of items is described in the demo project.

Source code
See the source code for these examples on GitHub.

Complete catalog page widget

  1. Open the catalog page widget.
  2. Open a Graph view.
  3. To open a payment page in a browser:
    1. Implement receiving of a payment token:
      1. Add the InitiatePurchase node and connect the FetchPaymenToken SDK method call linked to the XsollaStoreSubsystem object to the added node.
      2. To the FetchPaymenToken method, pass the SKU of a purchased item and a user authorization token.

Note
You can use one of the following tokens:

    1. Call the LaunchPaymentConsole SDK method linked to the XsollaStoreSubsystem object and pass a payment token to it.

Example of the payment page opening implementation:

  1. Implement a purchase status check after closing the browser window:
    1. To track the browser closing event, subscribe to the BrowserClosed event.
    2. To check the purchase status, call the CheckOrder SDK method and pass an authorization token and order number to it.

Note
Implementation of logic for adding purchased items to the inventory isn’t required — it’s done automatically.

Example of a purchase status check implementation:

Enhance item data class

  1. Open the BP_CatalogItemData blueprint.
  2. In the My Blueprint panel, click Add New and select Variable.
  3. In the Details panel:

    1. Specify CatalogWidget in the Variable Name field.
    2. In the Variable Type field, select W_StoreCatalog.
    3. Check the Instance Editable and Expose on Spawn boxes.

The result is that every element of the list will contain a link to a parent widget and will be able to call its methods.

Complete adding list of items to catalog page

  1. Open a blueprint of a catalog page widget.
  2. Open a Graph view.
  3. Edit the logic for filling out the list of items as shown in the following picture.

Complete widget for item

  1. Open a widget blueprint for an item.
  2. Add a button for purchasing an item.

The following picture shows an example of the widget structure.

  1. In the Hierarchy panel, select a button for purchasing an item.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open the Graph view.
  2. Implement logic for clicking a button for purchasing an item. To do this, add the nodes as shown in the following picture.

As a result, when clicking the button for purchasing an item, a payment page opens in the browser according to the logic implemented in the catalog page widget.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Sell virtual items for virtual currency

This instruction shows how to use the SDK methods to implement selling of virtual items for virtual currency.

Before you start, implement a display of virtual items in a catalog.

Note
In the following example, we describe how to implement purchasing of virtual items. Configuration for other item types is similar.
Source code
See the source code for these examples on GitHub.

The logic and interface in the examples are less complicated than they will be in your application. A possible implementation option for selling items for real currency and displaying a catalog of items is described in the demo project.

To implement selling of virtual items for virtual currency:

  1. Add logic for purchasing an item to the widget for the catalog page.
  2. Add a mechanism to an item class to initiate the logic for purchasing an item.
  3. Refine adding a list of items to the catalog page.
  4. Add a purchase button to the widget for an item.
  5. Add the logic of buying for virtual currency to the widget for an item:
    1. Open a blueprint of the widget for an item.
    2. Go to the Graph view.
    3. Add nodes as shown below.

This will result in a virtual currency price that is specified for an item will display in the widget and is used to purchase the item. If an item is priced in multiple virtual currencies, the first virtual currency in the list will be used for display and purchase.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Display of items in inventory

This tutorial shows how to use the SDK methods to display items in the user inventory.

The logics and interface in the examples are less complicated than they will be in your application. A possible item catalog in an in-game store implementation option is described in the demo project.

Source code
See the source code for these examples on GitHub.

Create widget for inventory page

  1. Go to Content Browser and create a UI directory.
  2. In the contextual menu, go to User Interface > Widget Blueprint.
  3. In the widget blueprint, add the display area for the list of items.

The following picture shows an example of the inventory structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement the widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Create class for item

  1. Go to Content Browser. There, in the contextual menu, click Blueprint Class.
  2. In the All classes section, select Object and click Select.
  3. Use BP_UserInventoryItemData as a class name.
  4. Open a blueprint of a created class.
  5. In the My Blueprint panel, click Add New and select Variable.
  6. In the Details panel:

    1. Specify UserInventoryItem in the Variable Name field.
    2. Select InventoryItem in the Variable Type field.
    3. Check Instance Editable and Expose on Spawn boxes.

Create widget for item

  1. Go to Content Browser and create a UI directory and, in the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following UI elements:
    • item name
    • item feature:
      • for subscriptions — subscription status (active or expired)
      • for consumable items — quantity of items
      • for nonconsumable items — no feature is displayed

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Click Class settings.
  3. In the Details panel, go to Interfaces > Implemented interfaces.
  4. Click Add and select UserObjectListEntry. This is a standard UE interface that allows the UI primitive to implement a behavior normal for the element of the list.
  5. Implement logic for creating an item:

    1. Add the OnListItemObjectSet node to create an element of the list and initialize the widget.
    2. Pass the value from the object that contains data about the item to the element with the name of the item. To do this, add nodes as shown in the following picture.

    1. Implement logic for defining an item type by passing the data about the item according to its type to the element with the item features. To do this, add nodes as shown in the following picture.

    1. Add logic for defining the subscription expiration time. To do this, add nodes as shown in the following picture.

Add list of items to inventory page

  1. Open the inventory page widget blueprint.
  2. Add the List View element to the item list display area.
  3. In the Details panel, select a previously created class for an item group in the Entry Widget Class field.
  4. Implement logic for adding items to groups:

    1. Open the Graph view.
    2. Link an UpdateInventory and UpdateSubscriptions consecutive SDK methods call connected with the XsollaInventorySubsystem object to the EventConstruct node as shown in the following picture:

    1. Implement logic for filling out the list of items. To do this, add nodes as shown in the following picture.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Display of virtual currency balance

This tutorial shows how to use the SDK methods to display the balance of virtual currency in your app.

In the example, we show virtual currencies and their balance in the user inventory. Therefore, you should implement display of items in the user inventory before you start.

The logics and interface in the examples are less complicated than they will be in your application. A possible item catalog in an in-game store implementation option is described in the demo project.

Source code
See the source code for these examples on GitHub.

Create class for balance display

  1. Go to Content Browser. There, in the contextual menu, click Blueprint Class.
  2. In the All classes section, select Object and click Select.
  3. Use BP_VcBalanceItemData as a class name.
  4. Open a blueprint of a created class.
  5. In the My Blueprint panel, click Add New and select Variable.
  6. In the Details panel:

    1. Specify VcBalanceItem in the Variable Name field.
    2. Select VirtualCurrencyBalance in the Variable Type field.
    3. Check Instance Editable and Expose on Spawn boxes.

Create widget for display of balance

  1. Go to Content Browser and create a UI directory and, in the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following UI elements:
    • virtual currency name
    • virtual currency quantity

The following picture shows an example of the widget structure.

  1. Open a Graph view.
  2. Click Class settings.
  3. In the Details panel, go to Interfaces > Implemented interfaces.
  4. Click Add and select UserObjectListEntry. This is a standard UE interface that allows the UI primitive to implement a behavior normal for the element of the list.
  5. Implement logic for adding a virtual currency to the list:

    1. Add the EventOnListItemObjectSet node to create a list element and initialize the widget.
    2. Pass the values from the object that contains data about the virtual currency to the elements with the name of the virtual currency and its quantity. To do this, add nodes as shown in the following picture.

Complete widget for inventory display

  1. Open the inventory page widget blueprint.
  2. Add the List View element to the virtual currency list display area.
  3. In the Details panel, select a previously created class for balance display in the Entry Widget Class field.
  4. Implement logic for filling out the list of virtual currencies:

    1. Open a Graph view.
    2. Link an UpdateVirtualCurrencyBalance method call connected with the XsollaInventorySubsystem object to the EventConstruct node.
    3. Implement logic for filling out the list of virtual currencies. The action should be done while processing a successful update of the local cache of the virtual currency balance. To do this, add nodes as shown in the following picture.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide
Your progress
Thank you for your feedback!

Useful links

Last updated: June 6, 2022

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!