You already have a website. Maybe it's a WordPress blog, a Webflow portfolio, a Squarespace landing page, or a custom-built site. It gets traffic. It has an audience. But it doesn't sell anything -- or if it does, you built a clunky checkout flow that barely converts.
What if you could drop in a fully functional e-commerce experience -- product grids, cart, checkout, payments -- in 30 minutes, without rebuilding anything?
That's exactly what the Lesuto Commerce SDK does.
What Is the Commerce SDK?
The Commerce SDK is a lightweight JavaScript library that lets you embed Lesuto's commerce functionality on any existing website. It connects to your Lesuto merchant account, pulls in the products you've subscribed to, and renders a complete shopping experience wherever you place it.
Think of it as "Stripe for e-commerce" -- a few lines of code that unlock an entire commerce platform.
Who Is It For?
The SDK is designed for anyone who has an existing web presence and wants to monetize it without migrating to a new platform:
- Bloggers & Content Creators -- Embed product recommendations directly in your articles
- Influencers & Social Sellers -- Add a shop section to your personal website
- Local Businesses -- Turn your informational site into a revenue generator
- WordPress Publishers -- Add commerce to your media site without WooCommerce complexity
- Agencies & Developers -- Build custom storefronts for clients using Lesuto's infrastructure
Step-by-Step Integration
Step 1: Create Your Lesuto Merchant Account
If you haven't already, sign up at lesuto.com/sign-up. It's free. During registration, you'll choose your business name and set up your merchant channel. This takes about 2 minutes.
Step 2: Subscribe to Suppliers
Browse the supplier marketplace from your Lesuto dashboard and subscribe to the suppliers whose products match your audience. You can subscribe to all of a supplier's products or selectively choose specific collections.
Step 3: Get Your Channel Token
In your dashboard, navigate to Account > API Access. You'll find your channel token -- this is the key that connects the SDK to your specific product catalog and commission settings.
Step 4: Add the SDK Script
Add the following script tag to your website's <head> section:
<script src="https://sdk.lesuto.com/v1/commerce.js"></script>
Step 5: Initialize the SDK
Add an initialization script before the closing </body> tag:
LesutoCommerce.init({
channelToken: 'your_channel_token_here',
theme: 'dark', // or 'light'
currency: 'USD',
});
Step 6: Place Components
Now you can drop commerce components anywhere on your site using simple HTML attributes:
<!-- Product grid showing all your subscribed products -->
<div data-lesuto="product-grid" data-columns="3"></div>
<!-- A specific collection -->
<div data-lesuto="collection" data-slug="living-room-furniture"></div>
<!-- Mini cart button (floating) -->
<div data-lesuto="cart-button"></div>
<!-- Full cart drawer -->
<div data-lesuto="cart-drawer"></div>
That's it. The SDK handles rendering, cart management, checkout, and payment processing. Products are pulled live from your Lesuto catalog, so when suppliers update prices or add new items, your site updates automatically.
Available Modules
The SDK offers several embeddable modules:
Product Grid
Displays a responsive grid of products with images, prices, and "Add to Cart" buttons. Configurable columns (1-4), filterable by collection, sortable by price or date.
Product Detail
A full product detail view with image gallery, description, variant selection, and add-to-cart. Can be embedded on a dedicated page or opened as a modal.
Collection Browser
Shows a list of available collections with product counts. Clicking a collection opens its products in a grid.
Cart
Two options: a floating cart button that shows item count and opens a slide-out drawer, or an inline cart component that renders in place.
Checkout
A multi-step checkout flow (shipping address, shipping method, payment via Stripe Elements, review and confirm) that handles the entire purchase process. Tax is calculated automatically via Stripe Tax.
Search
A search bar with real-time results powered by Elasticsearch. Drops into any page and returns products matching the query.
Customization
The SDK is designed to blend with your existing site. You can customize:
- Colors: Pass a theme object to match your brand palette
- Typography: Inherits your site's font by default, or specify a custom font
- Layout: Control grid columns, spacing, and breakpoints
- Language: Currently English, with more languages coming soon
- Components: Show or hide specific UI elements (filters, sorting, reviews)
LesutoCommerce.init({
channelToken: 'your_token',
theme: {
primaryColor: '#10b981',
backgroundColor: '#0a0a0a',
textColor: '#e5e7eb',
borderRadius: '8px',
fontFamily: 'Inter, sans-serif',
},
});
Real-World Use Cases
The Food Blogger
A food blogger with 50,000 monthly readers embeds a "Kitchen Essentials" product grid at the bottom of every recipe post. Readers who just learned how to make artisanal pasta can immediately buy the pasta maker, cutting board, and ingredients featured in the post. The blogger earns commission on every purchase without ever touching inventory.
The Fitness Influencer
A personal trainer with a popular workout website adds a supplements and equipment shop to their site. Instead of awkward affiliate links, visitors see a fully branded shopping experience integrated directly into the site. Cart persists across pages, and checkout happens without leaving the domain.
The Local Real Estate Agency
A real estate firm adds a "Furnish Your New Home" section to their property listings. Buyers browsing a listing can also browse furniture, decor, and appliances -- all from Lesuto suppliers. The agency earns commission on every furnishing sale, turning their property site into a dual revenue stream.
The WordPress Publisher
A news and lifestyle publisher adds commerce sections to their sidebar and article footers. Product recommendations are contextual to the content. The editorial team doesn't need to learn WooCommerce or manage any e-commerce infrastructure -- they just place the SDK components and let Lesuto handle the rest.
What Happens Behind the Scenes
When a customer makes a purchase through the SDK:
- The order is created in the Lesuto system under the merchant's channel
- The order is automatically split by supplier (if products come from multiple suppliers)
- Each supplier is notified and begins fulfillment
- The 3-way commission split is calculated and recorded
- Payouts are held until the return window expires, then released via Stripe Connect
- The customer receives tracking information and can manage their order through Lesuto
The merchant sees all of this in their Lesuto dashboard -- orders, revenue, commission earned, and payout status. The SDK is the frontend; the entire Lesuto engine runs behind it.
Get Started
The Commerce SDK is available to all Lesuto merchants at no additional cost. Sign up, subscribe to suppliers, grab your channel token, and start embedding commerce on your site today.
Have questions? Reach out to our team at lesuto.com/contact or check the developer documentation for detailed API references and advanced configuration.