How It Works

This section explains how the platform components work together, from content delivery to checkout, in the context of streaming applications.

The typical user journey involves dynamic content delivery during video playback, contextual product display, basket interaction, and seamless checkout via Stripe.

1. Integration & Session Initialization

• The integration is initiated client-side (iOS, Android, Web, Smart TV).
• If the user has consented to tracking cookies, a tracking session is created.
• Registered users can be optionally identified by a user ID provided by the integrator (host app).

2. Contextual Content Delivery

Content is delivered dynamically based on the current episode ID, and optionally, the video timecode.

There are two main modes of display:

1. Menu-based Content
   An episode can be composed of multiple content groups organized in a static tree hierarchy, enabling structured and consistent navigation throughout the episode. These may include:

   • Main groups (e.g., product groups, cast-info groups), that are displayed in a persistent menu across the episode.
   • Each main group can contain nested sub-groups, such as product groups segmented by merchant or category.

2. Scene-based Content Contextual cards based on the current scene’s timecode. These may include:

   • Actors in the scene
   • Music playing in the scene
   • Products or whole "looks" from the scene

3. Hybrid approaches are also possible.

3. User Interaction

Users can interact with the content in several ways:

• Triggers (Examples): A clickable promo or icon appears; Overlays are activated when the user pauses playback; Thumbnail product previews are attached to the timeline.
• Menu navigation: Users browse related content via a menu interface.
• Card interaction: On-screen cards display contextual items (looks, product suggestions, info).

If products are shown:

• Users can add items to their basket
• View similar products
• Collect products from multiple episodes, formats or brand shops

Products from multiple shops are supported, even within a single session.

4. Checkout Initiation

The integrator (host app) initiates checkout:

1. The Basket API is called via the /baskets/users/{userId}/checkout/sessions route.
2. It creates a Stripe Payment Intent.
3. Relevant data (amount, items, intent ID) is returned to the integrator.
4. If available, the user ID from the host platform is passed for later association.

5. Payment Flow Overview

The payment flow follows Stripe’s native and recommended integration model, ensuring secure, reliable, and seamless processing.

• Data Collection by the Integrator

  The integrator (either a mobile SDK or web-based application) is responsible for collecting the following customer inputs:

  • Billing address
  • Email address
  • Payment method details (e.g., card, wallet, etc.)

  To facilitate this, the integrator uses Stripe’s officially supported SDKs and APIs, including:

  • Stripe.js and Stripe Elements for web-based integrations
    These libraries provide secure and customizable UI components for collecting payment information without exposing sensitive data to your servers.

  • Stripe Mobile SDKs (iOS and Android)
    These SDKs offer native interfaces and security features optimized for mobile platforms.

  • Stripe Checkout and Payment Links
    Hosted payment pages that offload the UI and payment logic to Stripe, ideal for teams wanting to minimize PCI scope.

  🔗 More details: Stripe Payment Integration Docs

• Real-Time Feedback and Webhook Integration

  Once the payment is initiated, Stripe immediately provides feedback to the integrator via:

  • The SDK response (for mobile and direct API integrations)
  • A Return URL (for web-based flows, such as redirects via 3D Secure or Stripe Checkout)

  Simultaneously, Stripe sends a webhook to the Basket API indicating the payment status change:

  • payment_intent.succeeded
  • payment_intent.payment_failed
  • Or other relevant events

  🔗 Webhook reference: Stripe Webhooks

• Final Confirmation and ERP Integration

  The final, legally binding confirmation of payment is only processed after the webhook is received and verified. This ensures the payment is settled before triggering any downstream actions, such as:

  • ERP integrations
  • Order fulfillment
  • Inventory updates

  🔗 Accepting Payments: Accept a Payment

6. Session and Identity Handling

• User ID: Can be passed from the integrator to identify users across sessions.
• Tracking session: A cookie-based ID is used to track session behavior and basket content (if consented).

7. Analytics & Reporting

• The system collects usage and interaction data for reporting and optimization.
• Tracking is a prerequisite for "Jay Insights", our analytics dashboard.
• Data is collected via session cookies and API interaction patterns.