Noventiq CheckoutIntegrationDynamic Product Checkout API

Buy Button Widget

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

Overview

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.

Widget Code

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

The code consist of two parts:

Button display code
Checkout link code

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

Button Display Code

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>

Checkout Link Code

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.noventiq.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": "USD", // 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.noventiq.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>

Variables to Insert

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

Data to connect external JS libraries
Data to authorize
Data to interact
Data to get links to purchase dynamic products

Data to Connect External JS Libraries

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.noventiq.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.noventiq.com.demonqweb.com/v1/widget.min.js.

Data to Authorize

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.

Example of authData

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

Data to Interact

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

Example of SLWidget.init

SLWidget.init(
 authData,
 "v1", // API Version
 'https://api.ecommerce.noventiq.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.noventiq.com/ - requests are executed in the production environment.
Change to https://api.ecommerce.noventiq.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.

Data to Get Links to Purchase Dynamic Products

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.

Example of productData (minimum data)

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

How it Works

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.