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 the Event listener JS snippet to your website.

Example

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;
        // Track
    } else if (action === "bc-add-item") {
        const { items, added, estimate } = value;
        // Track
    } else if (action === "bc-remove-item") {
        const { items, removed } = value;
        // Track
    } else if (action === "bc-begin-checkout") {
        const { items, estimate } = value;
        // Track
    } else if (action === "bc-add-address") {
        const { address, items, estimate } = value;
        // Track
    } else if (action === "bc-sale") {
        const { payload, items } = value;
        // Track
    }

}, false);

Event Message

Events are received as an Object in the following shape:

{
    data: {
        action: '...',
        value: {...}
    }
}

Events

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[] } }

Types

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;
}