> ## Documentation Index > Fetch the complete documentation index at: https://docs.videowise.com/llms.txt > Use this file to discover all available pages before exploring further. # React Native SDK > Videowise React Native SDK provides components for integrating shoppable video and live shopping experiences directly into your mobile app. It includes: LiveShoppingChannel, VideoFeed, Floating and Inline. Available Widget Types (Inline): single video, in-page video player, quick shop carousel, stories, video carousel, highlighted carousel, overlapping carousel, masonry grid, grid gallery and gallery highlight. ## Videowise Live Shopping Channel A full-screen live shopping channel component that embeds the Videowise live streaming experience. It renders a WebView with the live shopping channel and dispatches custom events for user interactions like adding products to cart. > **Note:** The `LiveShoppingChannel` component does **not** need to be wrapped inside ``. It operates independently. ### Props | Prop | Type | Required | Default | Description | | -------------------- | -------------------------------------- | -------- | -------------- | ----------------------------------------------------------------------- | | `videowiseInfo` | `object` | Yes | — | Store configuration (see below) | | `offsetY` | `number` | No | `0` | Reduces the height of the component wrapper by `screenHeight - offsetY` | | `style` | `StyleProp` | No | — | Custom style overrides for the component wrapper | | `onEvent` | `(event) => void` | No | — | Callback for live shopping events | | `onAddToCart` | `(event) => void` | No | — | Callback when a product is added to cart | | `onCheckout` | `(event) => void` | No | — | Callback for checkout events | | `environment` | `'local' \| 'staging' \| 'production'` | No | `'production'` | Environment target | | `lsId` | `string` | No | — | Live shopping ID (for autostart) | | `playerBottomOffset` | `number` | No | `0` | Bottom offset (px) for the Live Player component elements | | `playerTopOffset` | `number` | No | `0` | Top offset (px) for the Live Player component elements | | `vwStyle` | `string` | No | — | Style for the Videowise Live Shopping Channel component | #### `videowiseInfo` object | Property | Type | Required | Default | Description | | -------- | -------- | -------- | ------- | -------------------------------------------------- | | `shop` | `string` | Yes | — | Your store domain (e.g. `storename.myshopify.com`) | #### `onEvent` callback Triggered for all live shopping interaction events. The event object has the following structure: | Property | Type | Description | | -------- | ----------------- | -------------------------------- | | `type` | `'live-shopping'` | Event type identifier | | `detail` | `object` | Event detail payload (see below) | **`detail` object (`LSTrackingEventData`)** | Property | Type | Required | Description | | --------------------- | ----------------------- | -------- | -------------------------------------------------------------------------------------- | | `lsId` | `string` | Yes | Live shopping session ID | | `siteId` | `string` | Yes | Site ID | | `organisationId` | `string` | Yes | Organisation ID | | `clientTS` | `Date` | Yes | Client timestamp | | `videoElapsedMinutes` | `number` | Yes | Minutes elapsed in the video | | `videoElapsedSeconds` | `number` | Yes | Seconds elapsed in the video | | `currentTime` | `number` | No | Current playback time | | `uid` | `string` | Yes | Unique user ID | | `device` | `'mobile' \| 'desktop'` | Yes | Device type | | `isLive` | `boolean` | Yes | Whether the stream is currently live | | `url` | `string` | Yes | Page URL | | `interactionType` | `string` | Yes | Interaction type (see list below) | | `eventType` | `string` | Yes | Host event type: `'play'`, `'pause'`, `'stop'`, `'load'`, `'pending'`, `'interaction'` | | `item` | `object` | No | Product data (present for `add_to_cart` and `product_click` interactions) | **`item` object (when present)** | Property | Type | Description | | --------------------- | ------------------ | ---------------------------------- | | `name` | `string` | Product name | | `sku` | `string` | Product SKU | | `id` | `string` | Product ID | | `highlighted` | `boolean` | Whether the product is highlighted | | `meta.customId` | `string` | Custom variant ID | | `meta.vendor` | `string` | Product vendor | | `meta.price` | `number \| string` | Product price | | `meta.compareAtPrice` | `unknown` | Compare at price | | `meta.quantity` | `number` | Quantity | | `meta.currency` | `string` | Currency code | **Possible interaction types (`interactionType`)** * `mute_player` — Player muted * `unmute_player` — Player unmuted * `pause_player` — Player paused * `resume_player` — Player resumed * `like_reaction` — Like reaction * `share` — Share clicked * `add_to_calendar` — Added to calendar * `send_chat` — Chat message sent * `close_player` — Player closed * `minimize_player` — Player minimized * `maximize_player` — Player maximized * `show_product_list` — Product list shown * `hide_product_list` — Product list hidden * `product_click` — Product clicked * `add_to_cart` — Product added to cart * `checkout` — Checkout clicked * `show_cart` — Cart shown * `hide_cart` — Cart hidden * `toggle_cc_on` — Closed captions enabled * `toggle_cc_off` — Closed captions disabled * `replay` — Replay clicked * `progress` — Playback progress #### `onAddToCart` callback Triggered when a user adds a product to the cart (`add_to_cart` interaction). The product data is unified into a standard format. The event object has the following structure: | Property | Type | Description | | -------- | --------------- | ----------------------- | | `type` | `'add-to-cart'` | Event type identifier | | `detail` | `object` | Unified product payload | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ------------------- | | `productName` | `string` | Product name | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code | #### `onCheckout` callback Triggered when a user clicks checkout. The event object has the following structure: | Property | Type | Description | | -------- | ----------------- | ------------------------------------------------------------------ | | `type` | `'live-shopping'` | Event type identifier | | `detail` | `object` | `LSTrackingEventData` payload (same structure as `onEvent` detail) | ### Example ``` console.log('onEvent', event)} onAddToCart={(event) => console.log('onAddToCart', event)} onCheckout={(event) => console.log('onCheckout', event)} /> ``` Here's a list of the possible events triggered inside the `LiveShopping` component -> [https://docs.videowise.com/custom-events-ls](https://docs.videowise.com/custom-events-ls). *** > **Note:** The `Inline`, `Floating`, and `VideoFeed` components must be wrapped inside `` to function correctly. The Provider manages modal video state and handles navigation when a user taps on a video. ``` {/* Your components here */} ``` *** ## Videowise VideoFeed A full-screen video feed component that displays a single video with shopping capabilities. The video player is shown immediately upon render. ### Props | Prop | Type | Required | Default | Description | | --------------------------- | -------------------------------------- | -------- | -------------- | ---------------------------------------------------------- | | `videowiseInfo` | `object` | Yes | — | Store configuration (see below) | | `widgetId` | `string` | Yes | — | The ID of the Videowise widget | | `style` | `StyleProp` | No | — | Custom style overrides for the component wrapper | | `videoId` | `string` | No | `''` | Specific video ID to display | | `rightActionButtonsTop` | `number` | No | `7` | Top offset (px) for the right action buttons (close, etc.) | | `marketingLogoTop` | `number` | No | `20` | Top offset (px) for the marketing logo | | `shoppableTop` | `number` | No | `0` | Top offset (px) for the shoppable product list | | `shoppableListAspectRatio` | `` `${number}/${number}` \| "auto" `` | No | `"1/1"` | Aspect ratio of product list items | | `disableIndependentApiCall` | `boolean` | No | `true` | Disables independent API calls | | `onEvent` | `(event) => void` | No | — | Callback for custom events | | `onAddToCart` | `(event) => void` | No | — | Callback when a product is added to cart | | `onCheckout` | `(event) => void` | No | — | Callback for checkout events | | `environment` | `'local' \| 'staging' \| 'production'` | No | `'production'` | Environment target | #### `videowiseInfo` object | Property | Type | Required | Default | Description | | -------------- | ---------------------------------------------------------- | -------- | ----------- | -------------------------------------------------- | | `shop` | `string` | Yes | — | Your store domain (e.g. `storename.myshopify.com`) | | `cartType` | `'Shopify' \| 'Magento' \| 'SFCC' \| 'Tapcart' \| 'Other'` | No | `'Shopify'` | Cart platform type | | `currency` | `string` | No | `'USD'` | Display currency | | `currencyRate` | `number` | No | `1` | Currency conversion rate | | `productId` | `number \| null` | No | `null` | Filter by specific product ID | #### `onEvent` callback Triggered for all custom events from the widget. The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | -------------------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload (see below) | | `name` | `string` | Event name (see list below) | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ------------------------------------ | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `campaignId` | `string` | Campaign ID | | `items` | `array` | Array of products (see `onCheckout`) | > All `detail` properties are optional and depend on the event type. **Possible event names (`name`)** * `videowiseProductAddToCart` — Product added to cart * `videowiseProductBuyNow` — Buy now clicked * `videowiseCheckoutClick` — Checkout clicked * `videowiseProductClick` — Product clicked * `videowiseVideoClick` — Video clicked * `videowiseVideoStart` — Video played more than 3 seconds * `videowiseVideoIsPlaying` — Video is currently playing * `videowiseVideoFull` — Video played more than 80% * `videowiseVideoSwipe` — Video swiped * `videowisePlayerClose` — Player closed * `videowiseVideoSoundOn` — Sound turned on * `videowiseVideoSoundOff` — Sound turned off * `videowiseVideoBounce` — Video closed/swiped before 3 seconds * `videowiseDataReady` — Widget data loaded * `videowiseCampaignReady` — Campaign rendered * `videowiseCampaignCheckout` — Redirecting to checkout * `videowiseCtaClick` — CTA button clicked #### `onAddToCart` callback Triggered when a user adds a product to the cart (`videowiseProductAddToCart` event). The event object has the following structure: | Property | Type | Description | | -------- | --------------- | --------------------- | | `type` | `'add-to-cart'` | Event type identifier | | `detail` | `object` | Event detail payload | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ---------------------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | #### `onCheckout` callback Triggered when a user clicks checkout (`videowiseCheckoutClick` event). The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | ----------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload | | `name` | `string` | Event name | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ------------ | -------- | --------------------------------- | | `campaignId` | `string` | Campaign ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `items` | `array` | Array of products in the checkout | **`items` array element** | Property | Type | Description | | -------------- | -------- | ------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code | ### Example ``` console.log('onEvent', event)} onAddToCart={(event) => console.log('onAddToCart', event)} onCheckout={(event) => console.log('onCheckout', event)} /> ``` *** ## Videowise Floating A floating widget overlay that appears at the bottom-left of the screen. It dynamically sizes itself based on the widget content. When a user taps on a video, a full-screen `VideoFeed` modal opens. ### Props | Prop | Type | Required | Default | Description | | -------------------------- | -------------------------------------- | -------- | -------------- | ---------------------------------------------- | | `videowiseInfo` | `object` | Yes | — | Store configuration (same as VideoFeed) | | `widgetId` | `string` | Yes | — | The ID of the Videowise widget | | `rightActionButtonsTop` | `number` | No | — | Top offset (px) for the right action buttons | | `marketingLogoTop` | `number` | No | — | Top offset (px) for the marketing logo | | `shoppableTop` | `number` | No | — | Top offset (px) for the shoppable product list | | `shoppableListAspectRatio` | `` `${number}/${number}` \| "auto" `` | No | — | Aspect ratio of product list items | | `onEvent` | `(event) => void` | No | — | Callback for custom events | | `onAddToCart` | `(event) => void` | No | — | Callback when a product is added to cart | | `onCheckout` | `(event) => void` | No | — | Callback for checkout events | | `environment` | `'local' \| 'staging' \| 'production'` | No | `'production'` | Environment target | #### `videowiseInfo` object | Property | Type | Required | Default | Description | | -------------- | ---------------------------------------------------------- | -------- | ----------- | -------------------------------------------------- | | `shop` | `string` | Yes | — | Your store domain (e.g. `storename.myshopify.com`) | | `cartType` | `'Shopify' \| 'Magento' \| 'SFCC' \| 'Tapcart' \| 'Other'` | No | `'Shopify'` | Cart platform type | | `currency` | `string` | No | `'USD'` | Display currency | | `currencyRate` | `number` | No | `1` | Currency conversion rate | | `productId` | `number \| null` | No | `null` | Filter by specific product ID | #### `onEvent` callback Triggered for all custom events from the widget. The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | -------------------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload (see below) | | `name` | `string` | Event name (see list below) | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ------------------------------------ | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `campaignId` | `string` | Campaign ID | | `items` | `array` | Array of products (see `onCheckout`) | > All `detail` properties are optional and depend on the event type. **Possible event names (`name`)** * `videowiseProductAddToCart` — Product added to cart * `videowiseProductBuyNow` — Buy now clicked * `videowiseCheckoutClick` — Checkout clicked * `videowiseProductClick` — Product clicked * `videowiseVideoClick` — Video clicked * `videowiseVideoStart` — Video played more than 3 seconds * `videowiseVideoIsPlaying` — Video is currently playing * `videowiseVideoFull` — Video played more than 80% * `videowiseVideoSwipe` — Video swiped * `videowisePlayerClose` — Player closed * `videowiseVideoSoundOn` — Sound turned on * `videowiseVideoSoundOff` — Sound turned off * `videowiseVideoBounce` — Video closed/swiped before 3 seconds * `videowiseDataReady` — Widget data loaded * `videowiseCampaignReady` — Campaign rendered * `videowiseCampaignCheckout` — Redirecting to checkout * `videowiseCtaClick` — CTA button clicked #### `onAddToCart` callback Triggered when a user adds a product to the cart (`videowiseProductAddToCart` event). The event object has the following structure: | Property | Type | Description | | -------- | --------------- | --------------------- | | `type` | `'add-to-cart'` | Event type identifier | | `detail` | `object` | Event detail payload | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ---------------------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | #### `onCheckout` callback Triggered when a user clicks checkout (`videowiseCheckoutClick` event). The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | ----------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload | | `name` | `string` | Event name | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ------------ | -------- | --------------------------------- | | `campaignId` | `string` | Campaign ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `items` | `array` | Array of products in the checkout | **`items` array element** | Property | Type | Description | | -------------- | -------- | ------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code | ### Example ``` console.log('onEvent', event)} onAddToCart={(event) => console.log('onAddToCart', event)} onCheckout={(event) => console.log('onCheckout', event)} /> ``` *** ## Videowise Inline An inline widget that embeds directly within the page flow. It starts with minimal height and dynamically expands as content loads, making it suitable for placing inside scrollable layouts. When a user taps on a video, a full-screen `VideoFeed` modal opens. ### Available Widget Types The following widget layouts are supported for the Inline component: * Single Video * In-Page Video Player * Quick Shop Carousel * Stories * Video Carousel * Highlighted Carousel * Overlapping Carousel * Masonry Grid * Grid Gallery * Gallery Highlight ### Props | Prop | Type | Required | Default | Description | | -------------------------- | -------------------------------------- | -------- | -------------- | ---------------------------------------------- | | `videowiseInfo` | `object` | Yes | — | Store configuration (same as VideoFeed) | | `widgetId` | `string` | Yes | — | The ID of the Videowise widget | | `rightActionButtonsTop` | `number` | No | — | Top offset (px) for the right action buttons | | `marketingLogoTop` | `number` | No | — | Top offset (px) for the marketing logo | | `shoppableTop` | `number` | No | — | Top offset (px) for the shoppable product list | | `shoppableListAspectRatio` | `` `${number}/${number}` \| "auto" `` | No | — | Aspect ratio of product list items | | `onEvent` | `(event) => void` | No | — | Callback for custom events | | `onAddToCart` | `(event) => void` | No | — | Callback when a product is added to cart | | `onCheckout` | `(event) => void` | No | — | Callback for checkout events | | `environment` | `'local' \| 'staging' \| 'production'` | No | `'production'` | Environment target | #### `videowiseInfo` object | Property | Type | Required | Default | Description | | -------------- | ---------------------------------------------------------- | -------- | ----------- | -------------------------------------------------- | | `shop` | `string` | Yes | — | Your store domain (e.g. `storename.myshopify.com`) | | `cartType` | `'Shopify' \| 'Magento' \| 'SFCC' \| 'Tapcart' \| 'Other'` | No | `'Shopify'` | Cart platform type | | `currency` | `string` | No | `'USD'` | Display currency | | `currencyRate` | `number` | No | `1` | Currency conversion rate | | `productId` | `number \| null` | No | `null` | Filter by specific product ID | #### `onEvent` callback Triggered for all custom events from the widget. The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | -------------------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload (see below) | | `name` | `string` | Event name (see list below) | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ------------------------------------ | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `campaignId` | `string` | Campaign ID | | `items` | `array` | Array of products (see `onCheckout`) | > All `detail` properties are optional and depend on the event type. **Possible event names (`name`)** * `videowiseProductAddToCart` — Product added to cart * `videowiseProductBuyNow` — Buy now clicked * `videowiseCheckoutClick` — Checkout clicked * `videowiseProductClick` — Product clicked * `videowiseVideoClick` — Video clicked * `videowiseVideoStart` — Video played more than 3 seconds * `videowiseVideoIsPlaying` — Video is currently playing * `videowiseVideoFull` — Video played more than 80% * `videowiseVideoSwipe` — Video swiped * `videowisePlayerClose` — Player closed * `videowiseVideoSoundOn` — Sound turned on * `videowiseVideoSoundOff` — Sound turned off * `videowiseVideoBounce` — Video closed/swiped before 3 seconds * `videowiseDataReady` — Widget data loaded * `videowiseCampaignReady` — Campaign rendered * `videowiseCampaignCheckout` — Redirecting to checkout * `videowiseCtaClick` — CTA button clicked #### `onAddToCart` callback Triggered when a user adds a product to the cart (`videowiseProductAddToCart` event). The event object has the following structure: | Property | Type | Description | | -------- | --------------- | --------------------- | | `type` | `'add-to-cart'` | Event type identifier | | `detail` | `object` | Event detail payload | **`detail` object** | Property | Type | Description | | ----------------- | -------- | ---------------------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `variantId` | `number` | Variant ID | | `selectedVariant` | `number` | Selected variant ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code (e.g. `'USD'`) | | `videoTitle` | `string` | Video title | | `videoId` | `string` | Video ID | | `widgetId` | `string` | Widget ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | #### `onCheckout` callback Triggered when a user clicks checkout (`videowiseCheckoutClick` event). The event object has the following structure: | Property | Type | Description | | ----------- | ---------------- | ----------------------- | | `type` | `'custom-event'` | Event type identifier | | `detail` | `object` | Event detail payload | | `name` | `string` | Event name | | `targetTag` | `null` | Reserved for future use | **`detail` object** | Property | Type | Description | | ------------ | -------- | --------------------------------- | | `campaignId` | `string` | Campaign ID | | `deviceType` | `string` | Device type | | `url` | `string` | Page URL | | `items` | `array` | Array of products in the checkout | **`items` array element** | Property | Type | Description | | -------------- | -------- | ------------- | | `productName` | `string` | Product name | | `productId` | `number` | Product ID | | `qty` | `number` | Quantity | | `price` | `number` | Product price | | `currencyCode` | `string` | Currency code | ### Example ``` console.log('onEvent', event)} onAddToCart={(event) => console.log('onAddToCart', event)} onCheckout={(event) => console.log('onCheckout', event)} /> ``` ## Videowise trackingPixel `VideowiseSDK.trackingPixel` is an async function that sends order data to Videowise analytics after a successful checkout. Call it once per completed order, after order confirmation. It is a plain async function and does not need to be rendered inside `VideowiseSDK.Provider`. It returns `Promise`. The resolved value is `null` when the SDK has no stored user identifier, when a required parameter is missing, or when the request throws. ### Parameters `trackingPixel(params)` takes a single object with the following properties: | Property | Type | Required | Description | | --------------- | ------------- | -------- | --------------------------------------------- | | `shop` | `string` | Yes | Store domain (e.g. `storename.myshopify.com`) | | `orderId` | `number` | Yes | Numeric order ID | | `orderTotal` | `number` | Yes | Total order amount | | `orderCurrency` | `string` | Yes | ISO currency code (e.g. `USD`) | | `orderItems` | `OrderItem[]` | Yes | Array of purchased items (see below) | #### `orderItems` element (`OrderItem`) | Property | Type | Description | | ---------------- | ---------------- | ---------------------------- | | `id` | `string` | Line item ID | | `quantity` | `number` | Quantity purchased | | `title` | `string \| null` | Line item title | | `variant` | `object` | Variant details (see below) | | `finalLinePrice` | `object` | Final line price (see below) | **`variant` object** | Property | Type | Description | | --------------------------- | ---------------- | --------------------------- | | `id` | `string` | Variant ID | | `image.src` | `string \| null` | Variant image URL | | `price.amount` | `number` | Variant unit price | | `price.currencyCode` | `string` | Variant price currency code | | `product.id` | `string` | Product ID | | `product.title` | `string \| null` | Product title | | `product.vendor` | `string \| null` | Product vendor | | `product.type` | `string \| null` | Product type | | `product.untranslatedTitle` | `string \| null` | Untranslated product title | | `product.url` | `string` | Product URL | | `sku` | `string \| null` | Variant SKU | | `title` | `string` | Variant title | | `untranslatedTitle` | `string` | Untranslated variant title | **`finalLinePrice` object** | Property | Type | Description | | -------------- | -------- | ------------------------- | | `amount` | `number` | Final line price amount | | `currencyCode` | `string` | Final line price currency | ### Example ```jsx theme={null} import VideowiseSDK from '@vidystar/videowise-react-native-sdk'; await VideowiseSDK.trackingPixel({ shop: 'storename.myshopify.com', orderId: 12345, orderTotal: 99.99, orderCurrency: 'USD', orderItems: [ { id: 'item-1', quantity: 1, title: 'Product Name', variant: { id: 'variant-1', image: { src: 'https://...' }, price: { amount: 99.99, currencyCode: 'USD' }, product: { id: 'prod-1', title: 'Product Name', vendor: 'Vendor', type: 'Type', untranslatedTitle: 'Product Name', url: 'https://...', }, sku: 'SKU-123', title: 'Variant', untranslatedTitle: 'Variant', }, finalLinePrice: { amount: 99.99, currencyCode: 'USD' }, }, ], }); ```