diff --git a/.changeset/green-months-hang.md b/.changeset/green-months-hang.md
new file mode 100644
index 00000000..b28a960b
--- /dev/null
+++ b/.changeset/green-months-hang.md
@@ -0,0 +1,5 @@
+---
+'@noaignite/react-centra-checkout': patch
+---
+
+`Context`: Update `data` type on `addBundleItem` handler
diff --git a/.changeset/rotten-pugs-unite.md b/.changeset/rotten-pugs-unite.md
new file mode 100644
index 00000000..fc8df6fd
--- /dev/null
+++ b/.changeset/rotten-pugs-unite.md
@@ -0,0 +1,5 @@
+---
+'@noaignite/react-centra-checkout': patch
+---
+
+Add missing `'use client'` directives
diff --git a/.changeset/tangy-toys-double.md b/.changeset/tangy-toys-double.md
new file mode 100644
index 00000000..271048cc
--- /dev/null
+++ b/.changeset/tangy-toys-double.md
@@ -0,0 +1,5 @@
+---
+'@noaignite/react-centra-checkout': minor
+---
+
+`Context`: Add support for `data` in `addItem` handler
diff --git a/packages/react-centra-checkout/src/Context.tsx b/packages/react-centra-checkout/src/Context.tsx
index 298208bb..daf80348 100644
--- a/packages/react-centra-checkout/src/Context.tsx
+++ b/packages/react-centra-checkout/src/Context.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as CheckoutApi from '@noaignite/centra-types'
 import { isPlainObject } from '@noaignite/utils'
 import type Cookies from 'js-cookie'
@@ -67,6 +69,28 @@ export interface ContextMethods {
   addItem?: (
     item: string,
     quantity?: number,
+    data?: {
+      /**
+       * The URL to the product added, so the item can be linked back to its origin
+       */
+      productUrl?: string
+      /**
+       * The category id of the added product, so the item can be linked back to its origin.
+       */
+      category?: string
+      /**
+       * Requires shared secret. Comment that will end up on the order line
+       */
+      comment?: string
+      /**
+       * Localized size (localizedSize) & localization definition name (localizationDefinitionName)
+       */
+      localizedProdSize?: string
+      /**
+       * The ID of subscription plan
+       */
+      subscriptionPlan?: string
+    },
   ) => Promise<CheckoutApi.Response<CheckoutApi.SelectionResponse>>
   /**
    * @param item - The Centra item id
@@ -74,7 +98,34 @@ export interface ContextMethods {
    */
   addBundleItem?: (
     item: string,
-    data?: Record<string, unknown>,
+    data?: {
+      /**
+       * The quantity of items that should be added to the cart.
+       * Minimum should be 1.
+       * Defaults to 1.
+       */
+      quantity?: number
+      /**
+       * The URL to the product added, so the item can be linked back to its origin
+       */
+      productUrl?: string
+      /**
+       * The category id of the added product, so the item can be linked back to its origin
+       */
+      category?: string
+      /**
+       * Requires shared secret. Comment that will end up on the order line
+       */
+      comment?: string
+      /**
+       * Localized size (localizedSize) & localization definition name (localizationDefinitionName)
+       */
+      localizedProdSize?: string
+      /**
+       * The ID of subscription plan
+       */
+      subscriptionPlan?: string
+    },
   ) => Promise<CheckoutApi.Response<CheckoutApi.SelectionResponse>>
   /**
    * @param giftCertificate - The `giftCertificate` value of the gift certificate to add
@@ -355,9 +406,9 @@ export function CentraProvider(props: ProviderProps) {
   /* HANDLER METHODS */
 
   const addItem = useCallback<NonNullable<ContextMethods['addItem']>>(
-    (item, quantity = 1) =>
+    (item, quantity = 1, data) =>
       onSelectionResponse(
-        apiClient.request('POST', `items/${item}/quantity/${quantity}`),
+        apiClient.request('POST', `items/${item}/quantity/${quantity}`, data),
         selectionApiCall,
       ),
     [apiClient, selectionApiCall],
diff --git a/packages/react-centra-checkout/src/PaymentEmbed.tsx b/packages/react-centra-checkout/src/PaymentEmbed.tsx
index 633c50c8..a3c18809 100644
--- a/packages/react-centra-checkout/src/PaymentEmbed.tsx
+++ b/packages/react-centra-checkout/src/PaymentEmbed.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type * as CheckoutApi from '@noaignite/centra-types'
 import { isPlainObject } from '@noaignite/utils'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
diff --git a/packages/react-centra-checkout/src/ShipwalletEmbed.tsx b/packages/react-centra-checkout/src/ShipwalletEmbed.tsx
index 6ac5bb38..4dd6f673 100644
--- a/packages/react-centra-checkout/src/ShipwalletEmbed.tsx
+++ b/packages/react-centra-checkout/src/ShipwalletEmbed.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect } from 'react'
 import { useCentraSelection } from './Context'
 import { HtmlEmbed } from './internal/HtmlEmbed'