Contents

Buy Button Widget to Take Customers to Checkout Pages to Purchase Dynamic Products

You can add a buy button on your website. When clicking on the button, a checkout link redirects customers to a checkout page to purchase a dynamic product.

You need to insert a widget code into your website to display the button. Prior to that, you have to insert some variables into the code.

When opening a webpage having the button, API requests are made in the customer's browser and the button receives a checkout link. More details on how the widget works.

Insert this code into the webpage where you want to display the Buy button.

The code consist of two parts:

Insert both of the parts into the code of your webpage as described below.

You need this code to display the Buy button on your webpage.

  • The code requires no variables and can be inserted as it is.
  • Insert the code into the code of your webpage at the place where you want the button to be displayed.
  • You can add your own styling with CSS and modify texts to display the button that matches your website.
  • The id parameter contains a link identifier. After the widget code is executed, a link is inserted into the href attribute of the element. This links is received from the Dynamic Product Buylink API and leads to a checkout page.

<a id="linkElementID">Buy</a>

You need this code to get checkout links. They redirect customers when they click the button. 

  • Insert the variables into the code.
  • Insert the code anywhere on your webpage. We recommend inserting this snippet at the end of the <body> element.

<script src = "https://js.ecommerce.softline.com/v1/widget.min.js">  </script>
<script>
// Data for authorization via Authentication API
var authData = {
 "username": "demo", // Your username
 "password": "1234" // Your password
};

// Data for a request to the Dynamic Product Checkout API
var productData = {
 "currency": "RUB", // Checkout currency
 "products": [{
   "id": 11111, // Original product ID
   "name": "Demo Product", // Product name
   "price": "30.00", // Price per product unite
   "quantity": 1 // Product quantity
  }
 ]
};

SLWidget.init(
 authData,
 "v1", // API version
 'https://api.ecommerce.softline.com/' // Endpoint Domain Name
);

SLWidget.run(
 "DynamicProduct", {
 elementID: "linkElementID",
 productData: productData
});

// Listen authorization result
document.body.addEventListener('auth-complete', function (e) {
 console.log(e.detail);

 if (e.detail.status === 'done') {
  // success code
  console.log('Auth complete');
 } else {
  // failure code
  console.log(e.detail.errorCode);
 }
});

// Listen basket generation result
document.getElementById('linkElementID').addEventListener('dynamic-product-complete', function (e) {
 console.log(e.detail);

 if (e.detail.status === 'done') {
  // success code
  console.log(e.detail.buylink);
 } else {
  // failure code
  console.log(e.detail.errorCode);
 }
});
</script>

To make the widget work, you must insert the following values into its code:

To make the widget work, you must connect an external JS library. The link to the library is contained in the element as in the example below:

<script src="https://js.ecommerce.softline.com/v1/widget.min.js"></script>

The example shows the library link used in the production environment.

If you want to connect the library from the test environment, replace the link with https://js.ecommerce.softline.com.demoslweb.com/v1/widget.min.js.

Insert your login and password into the authData variable to authorize via the Authentication API. These are the same values that you transfer in the username and password parameters when getting your authorization token.

// Data for authorization via Authentication API
var authData = {
 "username": "demo", // Your username
 "password": "1234" // Your password
};

Insert the data for interaction into the SLWidget.init method.

SLWidget.init(
 authData,
 "v1", // API Version
 'https://api.ecommerce.softline.com/', // Endpoint Domain Name
 true // test mode Switch
);
authData
variable
required
Variable name. The variable contains authorization data. Do not change the value.
[apiVersion]
string
required
API version. Requests are made to the API. Current version: v1.
[baseURL]
Domain name. It is inserted into the Endpoint URL to make a request to the API.
  • Default is https://api.ecommerce.softline.com/ - requests are executed in the production environment.
  • Change to https://api.ecommerce.softline.com.demo.slweb.ru/ - if you want requests to be executed in the test environment.
[testMode]
boolean
Use to switch on/off the test mode.
Values:
  • true – the console displays additional data about ongoing requests and responses to them.
  • false – the console displays no additional data.
It is true, if not transferred.

Insert the request body code of the request to the Dynamic Product Buylink API into the productData variable. This code contains the data required to generate a checkout link. Insert the variable values into the request code. You can use the required fields only, as in the example below. Alternatively, you can use all the parameters the request supports (incl. transfer of two products and customer data). For more details on the parameters and other examples, see the request overview.

// Data for a request to the Dynamic Product Checkout API
var productData = {
 "currency": "RUB", // Checkout currency
 "products": [{
   "id": 11111, // Original product ID
   "name": "Demo Product", // Product name
   "price": "30.00", // Price per product unite
   "quantity": 1 // Product quantity
  }
 ]
};
  • When the page containing the button is opened, the SLWidget.init method is called. It makes a request to the Authentication API and receives an authorization token.
  • As the result, the auth-complete event is generated within the body element. The auth-complete event contains the following additional data in the details element:
    • status - operation progress status: done (if successful) or fail (if errors occur).
    • errorCode - error code (transferred when errors occur).
  • If the authorization token is received successfully, then the SLWidget.run method is called. It makes a request to the Dynamic Product Buylink API and receives a checkout link for purchasing a dynamic product.
  • As the result, the dynamic-product-complete event is generated within the linkElementID element. The dynamic-product-complete event contains the following additional data in the details element:
    • status - operation progress status: done (if successful) or fail (if errors occur).
    • buylink - checkout link: allows adding a dynamic product to a checkout page (transferred only if processing is successful).
    • errorCode - error code (transferred when errors occur).
  • If the link is successfully received, then:
    • The link is inserted into the button code: the checkout page URL is transferred to the href attribute of the element with id=linkElementID.
    • The customer follows the link when clicking the button.

If errors occur during processing:

  • No link is inserted into the button. Nothing happens when clicking the button.
  • The page does not display any errors visible to the customer.
  • You can switch on the test mode and view the error data in the console. For this purpose, you have to transfer true within the SLWidget.init method.