Enable Buy Button via link-outs to Web Shop

Enable users to purchase in-game items in your Web Shop. Launch the web payment UI for a specific item directly from the game. This approach creates a seamless experience when users just tap the Buy Button in the game and complete the transaction with no extra steps. It significantly simplifies and speeds up the purchase flow.

Both the Web Shop-based integration and the Xsolla Mobile SDK offer a wide range of payment methods — including Apple Pay, which provides users with effortless and familiar checkout experience.

How it works

1. The user opens the app on iOS.
2. The user taps the Buy Button next to the desired item.
3. The app launches a browser with a Web Shop link that includes the user-id, sku and redirect-url parameters.
4. Web Shop automatically authenticates the user and displays the payment UI for the selected item.
5. The user chooses a payment method and completes the purchase.
6. The app receives the purchase confirmation via a webhook and delivers the purchased item.
7. The user is automatically redirected back to the game via a deep link.

How to get it

Add logic to your iOS app to show the button with purchase link only to users in the United States. To do this, add the button to your game and detect the iOS storefront. If the returned storefront country is the United States (“USA”), the button with the purchase link should be displayed to the user.

Adding button with purchase link to your game

To implement this scenario, add a button in your game with a link in the following format:

https://yourwebshop.xsolla.site/?user-id=<USER_ID>&purchase-sku=<SKU>&redirect-url=<RETURN_TO_GAME_URL>, where:

• yourwebshop.xsolla.site is a link to your Web Shop site.
• user-id is the user ID in your system.
• purchase-sku is the SKU of the desired item from the Web Shop catalog.
• redirect-url is the URL the user is redirected to after a successful payment. Use any valid URL, such as a deep link (e.g., mygame://) that returns the user to the game.

When the user follows this link, they are automatically authorized on Web Shop, and the payment UI for the selected item is displayed.

To find the item SKU (using a virtual item as an example):

1. Open your project in Publisher Account, go to Store > Virtual Items section, and click Configure.
2. Navigate to the group of items where the item is located.
3. Copy the SKU from the line of the specific item below its name.

Detecting iOS storefront

To determine whether you can show Buy Button, retrieve the Storefront information at the initial app launch after installation, or on subsequent launches if needed. The storefront may already be available as part of your existing StoreKit implementation or provided by your Mobile Measurement Partner (MMP). If the storefront’s country code is “USA”, enable the functionality to display the Buy Button.

Ensure your implementation is flexible enough to support additional countries in the future, as regulatory conditions and platform policies may change.

Note that the storefront value on the device does not change unless the user explicitly updates their Apple ID region in system settings.

1let countryCode = await Storefront.current?.countryCode
2let showBuyButton = countryCode == "USA"

Additional features

You can provide users with quick access to the Web Shop features by using query parameters in website links; for example, when promoting a page on social media and in mass mailings. Such links let you automatically authenticate users on your website or redirect them to a specific item when they open the site.

Using query parameters, you can configure the following actions that will be performed when a link is clicked:

1. Automatic authentication using the user ID.
2. Automatic authentication using the deep link.
3. Redirecting to the card of a specific item. If the user is already logged in to the site, they will proceed to purchase the item.
4. Automatically applying a promo code to the catalog or redeeming a coupon with a reward.

You can use multiple parameters in a single link, thus combining multiple features.

Setting up authorization via user ID

Use a link with a query parameter for automatic user authorization when navigating to the site. This option is suitable if your site is set up for authorization via User ID.

To automatically authenticate a user via User ID:

1. Copy the link to the site.
2. At the end of the link, add ?user-id=<UserID>, where <UserID> is the user ID to whom you are sending the link.

1. Example: https://webshop-external-demo.xsolla.site/?user-id=12345

3. Send individual links to users.

After the user clicks on the link, they will be directed to the site and automatically authenticated.

Setting up authorization via deep link

Use a link with a query parameter for automatic user authorization when navigating to the site. This option is suitable if your site is set up for authentication via a deep link.

To automatically authenticate a user via a deep link:

1. Copy the link to the site.
2. At the end of the link, add ?deeplink=true.

1. Example: https://webshop-external-demo.xsolla.site/?deeplink=true

3. Share the link in public materials or send individual links to users.

Setting up focus on a specific item

Use a link with a query parameter to redirect the user directly to the desired item when opening the site. For an unauthorized user, a card with information about the item specified in the query parameter will be opened. If the user is already logged in to the site, upon clicking on the link, the payment interface for purchasing the item will open for them.

To direct a user to a specified item:

1. Copy the link to the site.
2. At the end of the link, add ?purchase-sku=<item SKU>, where <item SKU> is the SKU of the desired item.

1. To find the item SKU (using a virtual item as an example):
   1. Open your project in Publisher Account, go to Store > Virtual Items section, and click Configure.
   2. Navigate to the group where the item is located.
   3. Copy the SKU from the line of the specific item below its name.
2. Example: https://webshop-external-demo.xsolla.site/?purchase-sku=giant

3. Share the link in public materials or send individual links to users.

After the user clicks on the link, they will be directed to the website where the item card with detailed information about the item is displayed, or to the payment interface for purchasing the item. The resulting message depends on whether the user is authenticated on the site.

Setting up application of promo code or coupon

Use a link with a query parameter to apply a promo code or coupon by the user. The code can be applied automatically after navigating to the website or by clicking the Redeem code button. You can also add parameters to the link for one of the authentication methods. To use a link with a code parameter, set up promo codes and coupons in the project.

To apply the code:

1. Copy the link to the site.
2. At the end of the link, add one of the following query parameters:
   • ?redeem-code=<promo code> — for automatic code redemption
   • ?insert-code=<promo code> — for redemption upon button click

1. Instead of <promo code>, specify the promo code or coupon that was generated in the Publisher Account or that you have set.
2. Example: https://xsolla.webshop.com/?redeem-code=promo777
3. If you want the user to be automatically authenticated on the site, add one of the authentication parameters before the code parameter in the link: ?user-id=<UserID> or ?deeplink=true.
4. Example: https://webshop-external-demo.xsolla.site/?user-id=12345&redeem-code=TESTCOUPON

3. Share the link in public materials or send individual links to users.

After the authenticated user clicks on the link, they will be directed to the site, where the code will be activated automatically or the user will have the option to manually redeem the code.

Supported URL parameters

Advanced analytics in AppsFlyer

When you use link-outs to allow users to make purchases in the web payment UI directly from the game, you can still track their purchases and measure lifetime value (LTV) with a Mobile Measurement Partner (MMP), such as AppsFlyer. Xsolla supports two integration types to enable seamless tracking of user acquisition, retargeting, and purchase activity across both mobile and web platforms.

Choose a type that best fits your setup to keep full visibility into your campaigns and revenue: