Skip to main content
Checkout Studio is the no-code control center for Hosted Checkout. Instead of rebuilding checkout UI or shipping repeated frontend releases, teams can configure the full checkout experience from a dashboard and publish changes instantly.

​
Access Checkout Studio

https://images.tarkai.com/Commerce_Engine/Brand%20Assets/02%20-%20Glyph/png/CE_glyph.png?updatedAt=1700889454764

Checkout Studio

Open Checkout Studio, then enter:
  • storeId
  • apiKey
  • environment (staging or production)
Once connected, Studio loads your store’s current checkout configuration.

​
How publishing works

1

Connect

Authenticate your store with Store ID, API Key, and environment.
2

Customize

Use Studio panels to update branding, features, login flows, layout behavior, and payment configuration.
3

Preview in real time

See changes immediately in a live, full-fidelity checkout environment.
4

Save and publish

Click Save once. Hosted Checkout starts using the updated config automatically, with no storefront code changes.

​
Everything you can customize (no code)

AreaWhat you can configure in StudioBusiness impact
Brand appearanceTheme name, full color system (light + dark), typography, component shapes (button/input/card/badge), and responsive drawer/modal/sheet sizingMatch brand identity exactly across every checkout state
Conversion featuresToggle loyalty redemption, coupons, collect-in-store, free-shipping progress, and product recommendationsRun conversion experiments and promotions without engineering cycles
Login experienceEnable login methods (whatsapp, phone, email) and account switching behaviorAdapt authentication to local market behavior and customer preferences
Checkout UX behaviorDefault theme mode and drawer direction by device (mobile/desktop)Optimize usability and conversion for each form factor
PaymentsPayment provider routing/selection (including default/auto mode)Control payment strategy per store without code deployments

​
Full-fidelity live preview (including edge cases)

Studio uses the real Hosted Checkout application in preview. Brands can validate both design and behavior end to end before publishing.
Scenario categoryWhat you can verify in Studio preview
Cart flowsEmpty cart, multi-item cart, quantity updates, recommendation blocks, coupon and loyalty surfaces
Auth flowsGuest vs logged-in behavior, method availability (whatsapp/phone/email), account switching behavior
Address flowsAddress forms, saved addresses, and state transitions across checkout steps
Payment flowsProvider-specific payment step presentation and overall checkout continuity
Theme and layout statesLight/dark defaults, drawer direction by device, spacing/sizing behavior across breakpoints

​
URL overrides and Studio config

Studio controls remote checkout config per store + environment, regardless of whether your storefront uses default host resolution or an SDK url override.
  • Default mode: SDK resolves to {storeId}.checkout.commercengine.com (or staging subdomain)
  • Override mode: SDK loads from your explicit url
In both cases, saving in Studio updates Hosted Checkout behavior for that store/environment immediately.
Studio values are the default source of truth for Hosted Checkout. SDK options such as theme can still override behavior per session when needed.