# Order Confirmation Page (OCP) integration

This page will guide you through integrating Virtusize on the Order Confirmation Page (OCP) of your website, which requires 3 steps:

1. Create an order object

This step will explain how to create the order object before sending it to us.

2. Integrating the Virtusize script

This script is necessary for calling our central application responsible for sending the orders.

3. Verification

This step is necessary for us to verify the Virtusize script and the orders inside our database on our end.


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 integrating the Product Detail Page (PDP) script. This way, your customers will benefit as soon as you integrate Virtusize on your product pages, as their purchase history from previous purchases will already be in place.


# Before you start

Please contact your sales representative to receive a Store Name.

# 1. Create an order object

An order object consists of one 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.
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)
  • Each item object requires the following:
Parameter Name Data Structure Example Notes
productId String "P00001" Product ID. Please ensure that this is the same Product ID set on the Product Detail Page.
size String "S", "M", etc. Size string. Please ensure that this is the same Size set on the Product Detail Page.
imageUrl String "https://example.com/coat.jpg" Image URL of the item. The image that will be shared with Virtusize. Please provide the absolute path.
currency String "JPY" Currency Code
url String "https://example.com/coat.html" URL of the Product Detail Page. Please ensure that this is a URL that users can access.
unitPrice Float Please input integers such as 1234123. Characters are not supported Please list product prices excluding sales tax.
quantity Integer Please input integers such as 1 or 5. Characters are not supported Number of items purchased
variantId String "A00001-001-002" An ID that is set on Product SKU, Color, Size, etc.
color String "Red", etc. Product Color

The following item object parameters are optional but highly recommended:

Parameter Name Data Structure Example Notes
gender String "W", "Womens", etc. Gender
// Example
const orderObject = {
  orderId: "A00001",
  items: [
    {
      productId: "P00001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://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. Integrating the Virtusize script

The script can be easily integrated by setting variables for each environment in the script. Please place the following script just before closing the <body /> tag and replace STORE_NAME, ENVIRONMENT, DEVICE_TYPE, USER_ID, ORDER_OBJECT with the correct values.

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  orderObject: "ORDER_OBJECT",
  page: "ocp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http'

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.com/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();
value explanation
STORE_NAME This is the Store Name that you received from your sales representative.
ENVIRONMENT This can be either staging or production depending on what environment you are integrating on.
DEVICE_TYPE This can be either desktop or mobile depending on the device type the page is being accessed from. If your site is responsive (you serve the same resource to both desktop and mobile devices), please set this as desktop.
USER_ID - Set empty string ('') when the user is not logged in.
- Set the user's ID (using a hash function such as MD5, SHA-1, etc...) when the user is logged in.
ORDER_OBJECT This is the order object created in step 1

# 3. Verification

After completing the integration, please clear your cache, cookies, and local storage before following the steps below :

  1. Purchase an item without making a comparison using Virtusize.
  2. 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.