# Order confirmation page integration

On the Order Confirmation Page, please add a Script that enables Virtusize to show your customers the items they have recently purchased as part of their Purchase History, and use those items to compare with new items they want to buy.

If you would like, you can integrate the Order Confirmation Page script before you integrate the Product Page script. This way your customers will benefit as soon as you integrate Virtusize on your product pages by having purchase history from their previous purchases already in place.

# Before you start

Please contact your sales representative to receive an API Key.

# 1. Create an object for order data

An order object consists of 1 order object and several item objects (to account for orders with multiple item purchases).

  • An order object requires the following:
Parameter Name Data Structure Example Notes
orderId String "A00001" The Order ID issued.
userId String "UserId" UserID is converted to MD5, SHA-, etc. Please make sure that the UserID set on the product information page is the same. ※1
region String "JP" A country code is set for each region i.e. ISO-3166.
items Array of Objects (see table below) each item of the array is an item object corresponding to each product purchased in the order. (e.g. if a user purchases 2 shirts and 1 pair of pants, the items array will have 3 item objects)

※1 If a user makes a purchase without logging in, please set guest_{random_value} as the value for the userId parameter. Here is example code to generate a random value for the userId of a guest user:

userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`
  • Each item object requires the following:
Parameter Name Data Structure Example Notes
productId String "A00001" Product ID. Please make sure this is the same Product ID set on the product page.
size String "S", "M", etc. Size string. Please make sure this is the same size selected from the product page.
imageUrl String "http://example.com/coat.jpg" imageURL of the item. The image that will be shared with Virtusize. The image must be the same as the one that was set from the product page
currency String "JPY" Currency Code
url String "http://example.com/coat.html" URL of the product page. Please make sure this is a URL that users can access.
unitPrice Float Please input integers such as 1234123. Characters are not supported Please list product prices without sales tax.
quantity Integer Please input integers such as 1 or 5. Characters are not supported Number of items purchased

The following item object parameters are optional but highly recommended:

Parameter Name Data Structure Example Notes
variantId String "A00001-001-002" An ID that is set on Product SKU, Color, Size, etc.
color String "Red", etc. Product Color
gender String "W", "Womens", etc. Gender
// Example
var orderObject = {
  // order object
  orderId: xxx,
  userId: xxx,
  region: xxx,
  // item objects
  items: [
    {
      productId: "P001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "http://example.com/products/P001",
      imageUrl: "http://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    ...// Create an object for each of the items that were purchased in the order
  ]
}

# 2. Send the created object

After creating the object above, please send it to Virtusize using the following script. If you are using staging environment, make sure to use com for vsDomain. For production environment, use com as well unless your store is located in Japan, Korea or China. In that case the value should respectively be jp, kr or com.cn.

window.vsEnv = "staging"; // can be "staging" or "production"
window.vsDomain = "com"; // "com" is used for staging and production. The only exception is that if your store is located in Japan, Korea or China, in production, the value is respectively "jp", "kr" or "com.cn" (the staging version is still "com");
window.vsApiKey = "API_KEY"; // this is the api key from the "before you start" instruction
window.vsOrderObject = orderObject; // this is the order object created in step 1

(function(d) {
  var s = d.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.async = true;
  s.src = "https://integration.virtusize.com/orders/confirmation.js";
  var s1 = d.getElementsByTagName("script")[0];
  s1.parentNode.insertBefore(s, s1);
})(document);

# 3. Test the Order Confirmation Page Integration

In order to test the Order Confirmation Page tag, please conduct the test below:

  1. Using a *compatible browser, purchase an item without making a comparison using Virtusize.
  2. Using a *compatible browser, purchase an item after making a comparison using Virtusize.
  3. Contact your sales representative with the orderId and productId of the purchases made above.
  4. Verify the attribution of Virtusize with the sales representative.

*compatible browser: Please clear your Cookies and Local Storage before testing