1<div id="xsolla-buy-button-widget"></div>
 2      <script>
 3          var options = {
 4              project_id: "101010",
 5              sku: "my_key",
 6              user: {
 7                  auth: "9qs9VyCIQQXBlzJQcfETIKWZDvhi4Sz1"
 8              },
 9              drm: "steam",
10              item_type: "unit",
11              api_settings: {
12                  sandbox: true,
13              },
14              widget_ui: {
15                  target_element: "#xsolla-buy-button-widget",
16                  theme: {
17                      foreground: "green",
18                      background: "light"
19                  },
20              },
21
22             payment_widget_ui: {
23                  lightbox: {
24                      height: '700px',
25                      spinner: 'round'
26                  }
27            }
28          };
29          var s = document.createElement('script');
30          s.type = "text/javascript";
31          s.async = true;
32          s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.8/widget.min.js";
33          s.addEventListener('load', function (e) {
34              var widgetInstance = XBuyButtonWidget.create(options);
35          }, false);
36          var head = document.getElementsByTagName('head')[0];
37          head.appendChild(s);
38      </script>
39      <style>
40          #xsolla-buy-button-widget {
41
42          /* place code for button positioning here */
43            margin: 10px  
44          }
45
46          /* Styles the button itself */
47          .x-buy-button-widget.x-buy-button-widget__tiny
48            .x-buy-button-widget-payment-button {
49            background-color: #ff005b;
50            color: black;
51          }     
52      </style>

 1/* This should be used for button positioning but note this technically repositions the entire widget */
 2#xsolla-buy-button-widget {
 3  /* place code for button positioning here */
 4}
 5
 6/* Styles the button itself */
 7.x-buy-button-widget.x-buy-button-widget__tiny
 8  .x-buy-button-widget-payment-button {
 9  background-color: #ff005b;
10  color: black;
11}
12
13/* Button on hover */
14.x-buy-button-widget.x-buy-button-widget__tiny
15  .x-buy-button-widget-payment-button:hover {
16  background-color: #ff005b;
17}
18
19/* The following are style overrides to leave you with just the button */
20
21/* space immediately surrounding button */
22.x-buy-button-widget-button-block.x-buy-button-widget-button-block__light {
23  background-color: white;
24}
25
26/* space above button (including game title area) */
27.x-buy-button-widget.x-buy-button-widget__tiny
28  .x-buy-button-widget-game-logo {
29  height: 200px;
30  background-image: none !important;
31  background-color: white;
32}
33
34 /* Game title (located right above button) */
35.x-buy-button-widget-game-name.x-buy-button-widget-game-name__light {
36  display: none !important;
37}

 1<div id="xsolla-buy-button-widget"></div>
 2<div id="xsolla-buy-button-widget-2"></div>
 3    <script>
 4      var options = {
 5        project_id: "191204",
 6        sku: "789",
 7        item_type: "unit",
 8        api_settings: {
 9          sandbox: false,
10        },
11        widget_ui: {
12          target_element: "#xsolla-buy-button-widget",
13          theme: {
14            foreground: "gold",
15            background: "",
16          },
17        },
18        payment_widget_ui: {
19          lightbox: {
20            height: "700px",
21            spinner: "round",
22          },
23        },
24      };
25      // options for second buy button - note the different SKU and target_element
26      var options2 = {
27        project_id: "191204",
28        sku: "123",
29        item_type: "unit",
30        api_settings: {
31          sandbox: false,
32        },
33        widget_ui: {
34          target_element: "#xsolla-buy-button-widget-2",
35          theme: {
36            foreground: "gold",
37            background: "",
38          },
39        },
40        payment_widget_ui: {
41          lightbox: {
42            height: "700px",
43            spinner: "round",
44          },
45        },
46      };
47      var s = document.createElement("script");
48      s.type = "text/javascript";
49      s.async = true;
50      s.src = "https://cdn.xsolla.net/embed/buy-button/3.1.4/widget.min.js";
51
52// one event listener per widget instance. repeat for more buttons, passing in different SKUs
53      s.addEventListener(
54        "load",
55        function (e) {
56          var widgetInstance = XBuyButtonWidget.create(options);
57        },
58        false
59      );
60      s.addEventListener(
61        "load",
62        function (e) {
63          var widgetInstance2 = XBuyButtonWidget.create(options2);
64        },
65        false
66      );
67      var head = document.getElementsByTagName("head")[0];
68      head.appendChild(s);
69    </script>