# 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 an API Key and 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 :

Purchase an item without making a comparison using Virtusize.
Purchase an item after making a comparison using Virtusize.
Contact your sales representative with the orderId and productId of the purchases made above.
Verify the attribution of Virtusize with the sales representative.

← Product Detail Page (PDP) Integration Product Detail Page (PDP) integration for Google Tag Manager (GTM) →