Hosted & Embedded UI

Sell subscriptions anywhere — without rebuilding checkout every time

Azotte gives you two UI delivery modes for subscription sales and lifecycle actions:

  • Hosted UI: Azotte-hosted checkout and account flows (fastest to launch)
  • Embedded UI: drop-in components you render inside your own app (most control)

Both modes run on the same core engine: bundles, pricing, taxes, offers, trials, payment routing, and lifecycle rules.

What “Hosted UI” means in Azotte

Hosted UI is a secure, Azotte-managed set of pages you redirect customers to for key flows.

Typical hosted flows:

  • Checkout for subscription purchase (web)
  • Payment method capture / update
  • Authentication steps (3DS / SCA where needed)
  • Subscription actions (upgrade, downgrade, pause, cancel)
  • Invoices, receipts, and payment history
  • Consent flows (e.g., price change consent, policy acknowledgments)

Why teams choose Hosted UI:

  • Fast go-live: minimal frontend work
  • Compliance-ready: fewer PCI/PII concerns in your app
  • Consistent lifecycle: every channel follows the same rules
  • Built-in localization: storefront language + currency formatting
  • Safe upgrades: UI improvements land without redeploying your app

What “Embedded UI” means in Azotte

Embedded UI lets you place Azotte-powered UI inside your own product experience.

Typical embedded components:

  • Bundle / plan picker
  • Price card grid (storefront-aware pricing and taxes)
  • Promotion code input + validation
  • Trial eligibility messaging
  • Checkout module (payment selection, confirmation)
  • Account widgets (subscription status, next renewal, cancel, manage)

Why teams choose Embedded UI:

  • Your brand, your UX: native look & feel inside your app
  • Higher conversion: fewer redirects, fewer drop-offs
  • Full layout control: adapt to mobile, TV, web, kiosk
  • Composable growth: A/B test plan cards, offers, and messaging

When to use Hosted vs Embedded

Choose Hosted UI when:

  • You want the quickest launch
  • You prefer Azotte to carry most of the compliance surface
  • You need a reliable, uniform checkout across storefronts and regions

Choose Embedded UI when:

  • Checkout must feel fully native in your product
  • You want maximum control over layout and user journey
  • You plan to run experiments, personalization, or deep in-product upsells

Many businesses use both:

  • Embedded plan picker + offer messaging
  • Hosted checkout for payment + confirmation
  • Embedded “manage subscription” in the account area

Hosted UI building blocks

Hosted UI is typically structured around:

  • Storefront context (region, language, currency, taxes)
  • Subscription channel (web card PSP, in-app, third-party, direct transfer)
  • Bundle selection (entitlements grouped as packages)
  • Offer inputs (promo code, rule-based triggers, eligibility)
  • Consent & notices (price change consent, legal text, renewals)

Embedded UI building blocks

Embedded UI typically ships as:

  • Web components / JS widgets for fast integration
  • React components for full control in modern apps
  • Headless mode (API-only) if you want to build every pixel yourself

Embedded UI should support:

  • Server-side pricing (storefront + channel-aware)
  • Real-time trial eligibility checks
  • Campaign & promo code validation
  • Analytics events (impressions, clicks, conversions)

Branding & customization

Azotte UI is designed to be brand-safe:

  • Theme tokens (colors, radius, typography)
  • Storefront-specific logos and legal text
  • Component-level copy overrides (microcopy per locale)
  • Content placeholders for banners, notices, and trust badges

This keeps one UI system aligned with multi-storefront needs.

Trust, compliance, and security boundaries

Azotte-hosted and Azotte-embedded UIs are designed to protect sensitive data by default:

  • Prefer tokenized payment data (PSP vaulting)
  • Limit PII exposure in merchant apps
  • Use short-lived session tokens for checkout context
  • Audit events for consent and lifecycle changes

Hosted UI reduces your surface area; Embedded UI increases UX control — both keep the same security posture.

How Hosted & Embedded connect to other Azotte pages

  • Multi-Storefront: the same UI adapts per region, language, currency, and tax scheme
  • Unified Subscriptions: one UI strategy across web, in-app, and third-party subscription engines
  • Campaign & Offer Engine: promo codes and rule-based triggers show consistently in either UI mode
  • Trial Eligibility Engine: eligibility checks and messaging appear in checkout and plan selection
  • Price Change Consent: consent and notices can be enforced in hosted flows or embedded components

Implementation mindset (what teams usually do first)

A practical rollout path:

  1. Start with Hosted UI for checkout to go live quickly
  2. Add Embedded plan picker in-product to improve conversion
  3. Expand embedded modules for account management and upsell flows
  4. Use analytics + experiments to tune pricing, offers, and messaging per storefront

Key promise

Hosted or embedded, Azotte keeps your subscription UX:

  • consistent across channels
  • localized per storefront
  • governed by the same lifecycle rules
  • connected to offers, trials, and consent — automatically