Storefront
Sell from your own website, with Organization Depot as the shop behind it. Your site shows the products and the cart in your own design. Organization Depot keeps the catalog, the cart and the payment: buyers pay on a hosted checkout on your shop's domain, so you never handle card details or set up a payment provider.
All it takes is one script from this site, a public token, and the Storefront API behind them.
How it fits together
| Part | Runs on | What it does |
|---|---|---|
| Your website | Your hosting | Your pages and design. Shows products and the cart through our script |
storefront.js / components.js |
developers.organizationdepot.com |
The JavaScript client and the drop-in web components |
| The Storefront API | api.organizationdepot.com |
Your shop's catalog and the buyer's cart, behind a public token |
| The hosted checkout | Your shop's checkout domain | Payment, card security, Apple Pay and Google Pay, the confirmation and the receipt |
A buyer's visit goes like this:
- They browse products on your site. The script reads them from your shop.
- They add to the cart. The cart is kept for them across page loads.
- They press Checkout and go to your hosted checkout, for example
https://shop.your-club.com/c/…, in your shop's branding. - They pay. The confirmation page's back link returns them to your website, where a fresh cart starts.
Two ways to build
- Web components (
components.js). Paste a script and a few elements, such as<od-product-list>,<od-product>and<od-cart-button>, into any HTML page. No code needed, and they're styled from your shop's branding. - JavaScript (
storefront.js). A small client (about 3.3 kB gzipped) for your own markup and UI: products, the cart and checkout, with TypeScript types.
Both come from the same folder, and you can mix them on one page. Starters give you a small working shop of each kind to copy.
What you need
All of it is on your shop's Storefront › Your own website page in Organization Depot (the page is titled Headless):
- A public token (
odpk_…), a Website token under Tokens. It's meant to be in your page: it can read your catalog and build carts, nothing else. See Public tokens. For building your site, make a Preview token (odpv_…) too: its carts work while the shop is closed and pay only with Stripe's test cards. See Preview tokens. - Your website's address, under Your website, for example
https://www.your-club.com. Checkout's "Continue shopping" and the confirmation's back link go there. - Optionally, your own checkout domain, for example
shop.your-club.com, connected with the domain wizard on the Storefront page. Without one, checkout runs on your shop's platform address,https://{your organization}.storefront.organizationdepot.com/{your shop}. - What our domain shows. Hosted storefront keeps our full storefront there as well; Checkout only shows checkout and nothing else, and sends everything else to your website.
The page also has install code with your token already filled in.
Addresses
| What | Address |
|---|---|
| The scripts | https://developers.organizationdepot.com/storefront/v1/ |
| The Storefront API | https://api.organizationdepot.com/api |
| These docs | https://developers.organizationdepot.com/storefront/ |
/storefront/v1/ is always the latest 1.x release. To pin one, use /storefront/1.3.0/; see
Versioning.
Where to go next
- Quickstart: web components, a product page in a few minutes.
- Quickstart: JavaScript, your own UI on the client.
- Concepts: the shop, the cart, personalization and the checkout handoff.
- Tokens: public tokens for your site, and preview tokens for building it.
- Security: the Content-Security-Policy lines your site needs, and pinning a version with Subresource Integrity.
- The references: JavaScript, web components and the HTTP API for other languages.