Events

Events let you know what a customer is doing inside the AccelPay cart. You can use these messages to track conversion funnels and analytics events.

Getting Started

The AccelPay cart will send events to your web page via the window.postMessage() method. In order to start receiving events, add to your website the Event listener JS snippet below. Where we've added the // Your Custom Code comment is where you'll implement your custom code to handle the event.

window.addEventListener("message", (event) => {
    const { action, value } = event.data;
    if (typeof event?.data !== 'object' || !event.data?.action || !/^bc\-.*/g.test(event.data.action)) {
        return;
    }

    const { action, key, value, meta } = event.data;

    if (action === "bc-view-cart") {
        const { items } = value;
        // Your Custom Code
    } else if (action === "bc-add-item") {
        const { items, added, estimate } = value;
        // Your Custom Code
    } else if (action === "bc-remove-item") {
        const { items, removed } = value;
        // Your Custom Code
    } else if (action === "bc-begin-checkout") {
        const { items, estimate } = value;
        // Your Custom Code
    } else if (action === "bc-add-address") {
        const { address, items, estimate } = value;
        // Your Custom Code
    } else if (action === "bc-sale") {
        const { payload, items } = value;
        // Your Custom Code
    }

}, false);

NOTE: Only adding the snippet above without modifying it with your custom code will not result in proper event tracking. You need to add your own custom implementation in order to track events successfully. AccelPay is not responsible for maintaining any custom event tracking implementation.

Types

The structure of event objects and sub-objects is defined below

Event

NOTE: The fields in the value object that are present depends on the event. See the Events section for which are defined for each event.

{
    data: {
      action: string,
      value: {
        items: Item[],
        added: Item,
        removed: Item,
        estimate: Estimate,
        address: Address,
        payload: Sale
      }
}

Item

{
    active: boolean,
    createdAt: number,
    description: string,
    id: number,
    images: [{
    	variantId: number,
    	path: string,
    }],
    listingType: string,
  	price: number,
    quantity: number,
    title: string,
    truncatedDescription: string,
    updatedAt: number,
    variant: {
        id: number,
        listingId: number,
        category: string,
        title: string,
        weightLbs: number
    }
}

Estimate

{
    brandId: number,
    deliveryFee: number,
    discountAmount: number,
    subtotal: number,
    tax: number,
    total: number
}

Address

{
    phone: string,
    name: string,
    line1: string,
    line2: string,
    city: string,
    state: string,
    province: string,
    country: string,
    zip: string
}

Sale

{
    brandId: number,
    id: number,
    deliveryFee: number,
    discountAmount: number,
    subtotal: number,
    tax: number,
    total: number
}

Events

The specific events and structures passed by our Cart are defined below.

View cart

{ 
    action: "bc-view-cart", 
    value: { items: Item[] } 
}

Add Item

{ 
    action: "bc-add-item", 
    value: { 
      items: Item[], 
      added: Item, 
      estimate: Estimate 
    } 
}

Remove Item

{ 
    action: "bc-remove-item", 
    value: { 
      items: Item[],   
      removed: Item 
    }
}

Begin Checkout

{ 
    action: "bc-begin-checkout", 
    value: { 
      items: Item[], 
      estimate: Estimate 
    } 
}

Add Address

{ 
    action: "bc-add-address", 
    value: { 
      address: Address, 
      items: Item[], 
      estimate: Estimate 
    } 
}

Sale

{ 
    action: "bc-sale", 
    value: {   
      payload: Sale, 
      items: Item[] 
    } 
}

Updated about 6 hours ago