设置商品销售

您可以通过直接链接商店UI销售商品。

以下链接用于打开支付UI:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}

将以下数据添加至链接:

  • YOUR-ITEM-TYPE — 商品类型:
    • game — 游戏;game_key — 用于销售指定DRM游戏。
    • physical_item — 实体商品。
    • virtual_item — 虚拟物品。
    • virtual_currency — 虚拟货币。
    • bundle — 虚拟货币套餐或捆绑包。
  • YOUR-PROJECT-ID发布商帐户中的项目ID(您的项目 > 项目设置 > 常规设置 > 项目ID)。
  • YOUR-ITEM-SKU — 商品SKU。要销售指定DRM游戏,应通过Get games list获取添加至商店的虚拟商品完整列表中显示的DRM的SKU。该SKU的格式一般为unit_name_drm_sku

  • 支付UI样式:主题(深色为dark参数,浅色为default参数)、大小及其他参数。在URL中指定ui_settings参数并传入具有Base64编码值的settings.ui JSON对象。以下为包含UI设置的URL示例:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&ui_settings=ewoJCQkic2l6ZSI6ICJzbWFsbCIsCgkJCSJ0aGVtZSI6ICJkYXJrIgoJCX0=

  • 用于传递用户数据的令牌。仅当向通过认证的用户销售商品时使用,且对销售虚拟物品和虚拟货币为必需。此令牌取决于认证方式。包含令牌的URL示例:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOUR_PROJECT_ID}&sku={YOUR_ITEM_SKU}&xsolla_login_token={ACCESS_TOKEN}

  • 用于支付测试的mode=sandbox参数。可使用测试银行卡完成支付。测试URL示例:

Copy
Full screen
Small screen
https://store.xsolla.com/pages/buy.php?type={YOUR-ITEM-TYPE}&project_id={YOU_PROJECT_ID}&sku={YOUR-ITEM-SKU}&mode=sandbox

通过商店UI销售

要通过商店UI销售游戏密钥、虚拟物品和虚拟货币,可实现一个独立的web应用程序或实现一个游戏内商店UI。应使用Commerce API或在演示版本的基础上创建自己的商店来获取商品列表并进行处理。

基于Commerce API

您可以通过集成Commerce API以下方法创建商店的前端部分:
  1. 获取虚拟物品虚拟货币套餐游戏
  2. 购买商品:

选择合适的认证方式以便方法正常工作。

注:
要通过Commerce API方法销售游戏,应在前端侧实现DRM的选择。将从获取游戏请求获得的items.unit_items.sku参数值作为SKU传入。

通过小组件销售

有以下几种开发按钮并与艾克索拉API集成的方法:

按钮自定义

  1. 在发布商帐户中打开您的项目。
  2. 在侧边栏中单击商店
  3. 游戏密钥窗格中,单击配置
  4. 选择游戏密钥,然后前往小组件自定义选项卡。

注:
如没有游戏密钥,请新建一个。

  1. 自定义区块中,选择浅色作为背景颜色。

注:
您也可以在代码中修改theme对象,让background参数以空字符串作为值。

  1. 将小组件代码添加到页面时,它包含了继承的样式。请添加下方的样式来覆盖这些样式。

注意
出于CSS继承/优先级原因,将这些代码添加在从小组件自定义选项卡获得的script标记下方的style标记中。
Copy
Full screen
Small screen
/* This should be used for button positioning but note this technically repositions the entire widget */
#xsolla-buy-button-widget {
  /* place code for button positioning here */
}

/* Styles the button itself */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button {
  background-color: #ff005b;
  color: black;
}

/* Button on hover */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-payment-button:hover {
  background-color: #ff005b;
}

/* The following are style overrides to leave you with just the button */

/* space immediately surrounding button */
.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
  background-color: white;
}

/* space above button (including game title area) */
.x-buy-button-widget.x-buy-button-widget__tiny
  .x-buy-button-widget-game-logo {
  height: 200px;
  background-image: none !important;
  background-color: white;
}

 /* Game title (located right above button) */
.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
  display: none !important;
}

注意
  • 上方的id/类名称和代码片段与复制的小组件代码(见步骤5的图片)一起使用。因此,请务必实现复制的小组件代码。
  • 您可以直接使用上方代码,也可以根据实际情况进行修改。代码注释(第1、3、5、11、16、18、22、29行)用于帮助您了解每条CSS规则的作用及做样式上的修改。例如,如果只需要按钮(不需要整个组件),则需在下方颜色是white的地方(第20和27行)替换页面的背景色。

如何创建多个按钮或SKU

关于如何使用Pay2Play小组件来实现的代码示例,请参阅Xsolla Pay2Play Widget Simple Integration 4 buttons

该结构类似于Buy Button小组件代码。迁移示例:

Copy
Full screen
Small screen
<div id="xsolla-buy-button-widget"></div>
<div id="xsolla-buy-button-widget-2"></div>
    <script>
      var options = {
        project_id: "191204",
        sku: "789",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      // options for second buy button - note the different SKU and target_element
      var options2 = {
        project_id: "191204",
        sku: "123",
        item_type: "unit",
        api_settings: {
          sandbox: false,
        },
        widget_ui: {
          target_element: "#xsolla-buy-button-widget-2",
          theme: {
            foreground: "gold",
            background: "",
          },
        },
        payment_widget_ui: {
          lightbox: {
            height: "700px",
            spinner: "round",
          },
        },
      };
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";

// one event listener per widget instance. repeat for more buttons, passing in different SKUs
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance = XBuyButtonWidget.create(options);
        },
        false
      );
      s.addEventListener(
        "load",
        function (e) {
          var widgetInstance2 = XBuyButtonWidget.create(options2);
        },
        false
      );
      var head = document.getElementsByTagName("head")[0];
      head.appendChild(s);
    </script>

注意
  • 第1、2行 — 每个按钮一个div,且每个都有唯一ID。
  • 第26行起是第二个按钮的选项(在options2中展开)。对于每个Buy按钮,都需要类似上面的一组options。请注意sku(第28行)和target_element(第34行,指向第2行的div)的不同。

基于演示版本

可使用商店演示版本检查API功能。该代码已上传至GitHub。您可以以它为基础创建自己的版本。

本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗?

不想回答

感谢您的反馈!

继续阅读

下一步

设置Webhook
上次更新时间: 2022年8月8日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!