Upfront Companion

Overview

Upfront Companion is meant to be rendered on your cart page. Before you can use this element, the following must be completed:

Upfront.js init steps outlined in the Upfront.js Docs
an Upfront Companion product SKU created
Upfront Companion product SKU communicated with Upfront for product mapping

Upfront Companion (`<upfront-companion>`)

Shopify Stores

If your site is built on Shopify, the integration is super simple using a single line of code:

<upfront-companion />

When the Upfront Component component is checked, it will add the Companion Add-On to the cart. When unchecked, it will remove the Companion Add-On from the cart. This component will automatically show or hide based on whether the products in the cart have rebates.

Non-Shopify Stores

If your site is custom built, the integration involves a little more code, however it's still very simple. See a demo of this approach here.

<upfront-companion id="upfront-companion" products='[{"productId": "45293510230330", "productPrice": 69900, "quantity": 1, "installPrice": 0}]' zipCode="56208"></upfront-companion>

<script>
    const companion = document.getElementById('upfront-companion');
    companion.addEventListener('rebate-companion-checked', () => {
      console.log('rebate-companion-checked')
      // merchant should add to cart using their own APIs/logic
    })
    companion.addEventListener('rebate-companion-unchecked', () => {
      console.log('rebate-companion-unchecked')
      // merchant should remove from cart using their own APIs/logic
    })
</script>?

Attributes

The following attributes are available in the Upfront Companion element:

Attribute name	Type	Required	Description
products	string	Yes	A JSON string of the products being purchased. Each of the products should have a "productID" (required), a "productPrice" (required), "quantity" (required), and "installPrice" (optional). Work with us to map your product IDs prior to going live.
zipCode	string	Yes	The user ZIP code. This helps us determine eligible rebates in their local area.

Events

Upfront Companion will send events when it's checked and unchecked.

Event name	Type	Description
rebate-companion-checked	event	Dispatched whenever a user checks the box next to the component. This represents the user opting into the service. When this event is received, you should add the Companion product to the cart.
rebate-companion-unchecked	event	Dispatched whenever a user unchecks the box next to the component. Similar to the above, when this event is received you should remove the Companion product from the cart.

const companion = document.getElementById('upfront-companion');
companion.addEventListener('rebate-companion-checked', () => {
      console.log('rebate-companion-checked')
      // merchant should add to cart using their own APIs/logic
})
companion.addEventListener('rebate-companion-unchecked', () => {
      console.log('rebate-companion-unchecked')
      // merchant should remove from cart using their own APIs/logic
})

Overview