Skip to main content

Widgets Overview

Azotte provides embeddable widgets for seamless integration of subscription functionality into your existing applications.

Widget Types​

Pricing Widget​

  • Display subscription plans and pricing
  • Interactive plan comparison
  • Real-time pricing updates
  • Campaign-aware pricing display

Checkout Widget​

  • Complete payment flow
  • Multiple payment methods
  • Real-time validation
  • Mobile-optimized interface

Account Management Widget​

  • Customer subscription overview
  • Plan upgrade/downgrade options
  • Payment method management
  • Usage analytics display

Integration Methods​

Hosted Checkout​

<!-- Redirect customers to Azotte-hosted page -->
<a href="https://checkout.azotte.com/premium-plan">
  Subscribe Now
</a>

Embedded Widgets​

<!-- Embed widgets directly in your page -->
<div id="azotte-pricing-widget"></div>
<script src="https://js.azotte.com/v1/widgets.js"></script>
<script>
  AzotteWidgets.render('pricing', {
    containerId: 'azotte-pricing-widget',
    bundles: ['basic', 'premium', 'enterprise']
  });
</script>

JavaScript SDK​

import { AzotteCheckout, AzottePricing } from '@azotte/widgets';

// Programmatic widget control
const checkout = new AzotteCheckout({
  priceId: 'price_premium_monthly',
  customerId: 'customer_123'
});

checkout.open();

Customization Options​

Visual Theming​

  • Brand colors and fonts
  • Custom CSS styling
  • Responsive design
  • Dark/light mode support

Behavioral Configuration​

  • Success/cancel redirects
  • Event callbacks
  • Validation rules
  • Localization settings

Next Steps​