# Spryker SvelteKit Storefront — Svelte Commerce Connector

> Svelte Commerce on Spryker’s Glue API: 25 of 43 services wired, with cart and sign-in, but the storefront cannot place an order yet. Setup and limits.

- Canonical: https://kitcommerce.store/svelte-commerce/backends/spryker/
- Last updated: 2026-09-25

---

Svelte Commerce × Spryker

## Svelte Commerce on Spryker

Spryker’s storefront API speaks JSON:API, and the connector wires browsing, cart, sign-in and Spryker’s checkout data. The storefront cannot place an order on it yet: Spryker has no per-gateway checkout, and the storefront asks for one.

- **25/43** services wired
- **@misiki/spryker-connector** 0.4.0
- **Cart** wired
- **Checkout** wired
- **Sign-in (auth)** wired

### What works on Spryker today

Browsing, cart and sign-in are wired, but the storefront cannot complete an order yet. Spryker has two checkout endpoints and no per-gateway ones, with payment methods named per store. The connector offers `getCheckoutData()` and `placeOrder()` for that, but the storefront’s payment step calls one method per gateway — cash on delivery included — and each of those is a placeholder.

#### Cart

Wired: issues a real request to Spryker.

#### Checkout

Wired: issues a real request to Spryker.

#### Sign-in (auth)

Wired: issues a real request to Spryker.

**Known gaps:** `coupon` — each is explained under Limitations below.

25 of 43 services wired, read from [CONNECTORS.md](https://github.com/itswadesh/svelte-commerce/blob/main/docs/CONNECTORS.md) on 21 September 2026, where the package version is recorded too; npm may carry a newer patch. Coverage is traced by a script in the Svelte Commerce repository: a service counts as wired only if it transitively issues an HTTP request, or delegates to one that does. It is not hand-asserted. Some services are Litekart-native concepts with no equivalent elsewhere (reels, deals, chat, gallery, popularity, demo-request, feedback, plugins, banner). They stay documented placeholders on every connector and are excluded from known gaps.

### Quick start

From nothing to a Svelte Commerce storefront reading Spryker. You need Node.js and a Spryker to point it at; the storefront holds no data of its own.

Clone it, choose the connector, point it at Spryker

```
# 1 — get the storefront
git clone https://github.com/itswadesh/svelte-commerce
cd svelte-commerce

# 2 — one connector at a time: remove the two the storefront ships with, add this one
npm uninstall @misiki/litekart-connector @misiki/vendure-connector
npm i @misiki/spryker-connector

# 3 — point it at your Spryker Glue API
echo PUBLIC_SPRYKER_API_URL=https://your-store.example.com >> .env

# 4 — run it
npm run dev
```

The guide removes only `@misiki/litekart-connector`. A fresh clone’s `package.json` also lists `@misiki/vendure-connector`, and with two connectors installed and neither of them Litekart’s, the build stops and asks for `PUBLIC_CONNECTOR` — so this removes both.

### Environment variables

*What Svelte Commerce reads to reach Spryker*

| Variable | Required | What it does |
| --- | --- | --- |
| `PUBLIC_SPRYKER_API_URL` | Yes | Base URL of your Spryker Glue storefront API. Boot fails, naming this variable, if it is missing. |
| `PUBLIC_SPRYKER_STORE_ID` | No | The Spryker store name, sent as the `Store` header — `DE`, for example — for Dynamic Multistore. |
| `PUBLIC_SPRYKER_LOCALE` | No | Sent as `Accept-Language`, such as `de_DE`. |
| `PUBLIC_SPRYKER_ANONYMOUS_CUSTOMER_ID` | No | A guest identity replayed as `X-Anonymous-Customer-Unique-Id`. The browser mints its own; this exists for server rendering. |
| `PUBLIC_SPRYKER_NAVIGATION_KEY` | No | The key for `GET /navigations/{key}`: Spryker has no route that lists navigations. |
| `PUBLIC_SPRYKER_ACCESS_TOKEN` | No | Sent as a bearer token when set. |
| `PUBLIC_CONNECTOR` | No | Only when more than one connector is installed: `@misiki/spryker-connector` names the one this build runs on. |

`init.ts` hands the connector every `PUBLIC_SPRYKER_*` variable that is set, camel-cased: `PUBLIC_SPRYKER_ANONYMOUS_CUSTOMER_ID` arrives as `anonymousCustomerId`. The guide also lists `PUBLIC_SPRYKER_API_KEY`, `PUBLIC_SPRYKER_API_SECRET`, `PUBLIC_SPRYKER_ACCESS_KEY` and `PUBLIC_SPRYKER_CHANNEL_ID`; the connector’s source does not read them.

Every variable here begins `PUBLIC_`, and SvelteKit sends `PUBLIC_` variables to the browser: treat each value you set as published.

### What to set up on Spryker

- Name the store in `PUBLIC_SPRYKER_STORE_ID` if you run Dynamic Multistore: it travels as the `Store` header.
- Let the storefront’s origin make cross-origin requests to Spryker (CORS): in production the browser calls `PUBLIC_SPRYKER_API_URL` directly, not only the server.

### How the integration works

Spryker’s Glue storefront API answers in JSON:API, and the connector ships a deserialiser that resolves `included` relationships (the `jsonapi` file in its source is that helper, not a service). The store travels as a `Store` header, the locale as `Accept-Language`, and a guest as `X-Anonymous-Customer-Unique-Id`.

Checkout in Spryker is two calls: `POST /checkout-data`, which says what is still missing and which payment and shipment methods this cart can use, and `POST /checkout`, which places the order. Payment is chosen by method and provider names configured per store. The connector wires both as `getCheckoutData()` and `placeOrder()`; the storefront’s per-gateway methods stay placeholders, because inventing them would mean guessing a store’s payment method names.

Installing the package is the whole switch. `vite.config.ts` resolves whichever `@misiki/*-connector` is installed, and `src/lib/core/connectors/init.ts` hands it every `PUBLIC_SPRYKER_*` variable that is set, camel-cased, at boot — in the server hook for server rendering and in the client hook for the browser, which must reach the same URL in production.

There is no Litekart API behind the storefront here, so store identity — name, logo, currency, menus, plugin toggles, theme colours — comes from `src/lib/core/connectors/default-store.json` merged under the default export of `kitcommerce.config.ts`. Until you override it, the store is called “Test”. Any Litekart REST path the connector still inherits is answered from that local data, or resolved empty, rather than requested.

### Limitations

- The storefront cannot place an order. Checkout counts as wired because the connector reaches Spryker’s checkout endpoints, but the storefront’s payment step calls one method per gateway — cash on delivery, Razorpay, Stripe and the rest — and on Spryker each of those is a placeholder. The connector’s `getCheckoutData()` and `placeOrder()` are not called by the storefront yet.
- Coupons: not wired.
- Pages that depend on a service that is not wired render their empty state rather than failing.
- Homepage sections other than the live product list come from the active theme’s static content — the standing rule for themes.
- The Conversational Shopping assistant is Litekart-only; its widget stays hidden when another connector is active.

### Troubleshooting

*Errors you may meet running Svelte Commerce on Spryker, and what fixes them*

| When you see | What to do |
| --- | --- |
| Boot fails with “the spryker connector is active but PUBLIC_SPRYKER_API_URL is not set” | Add `PUBLIC_SPRYKER_API_URL` to `.env`. A production Node build and Docker read `PUBLIC_*` from the process environment rather than `.env`, so set it on your deploy platform too. |
| The build stops with “Several commerce connectors are installed … Set PUBLIC_CONNECTOR to pick one” | More than one `@misiki/*-connector` is in `package.json` and none is Litekart’s. Uninstall the ones you do not run — a fresh clone also lists `@misiki/vendure-connector` — or set `PUBLIC_CONNECTOR='@misiki/spryker-connector'`. |
| Boot fails with “PUBLIC\_…\_API_URL is set, but it configures a different backend than the one this build runs on” | Another backend’s variable is still set, usually left over from the one you switched from. Remove it, or install that backend’s connector. `PUBLIC_LITEKART_API_URL` is exempt: it only points the dev proxy. |
| The store is called “Test”, or shows the wrong name and logo | Store identity is static on this backend. Set `name`, `logo`, `currencyCode` and the rest in the default export of `kitcommerce.config.ts`; `src/lib/core/connectors/default-store.json` lists every field. |
| `[spryker] no native implementation for get /api/...` in the console | The connector’s REST guard caught a path inherited from Litekart and answered it empty instead of requesting it. Each path is reported once. Harmless if Spryker has no such feature; if it has one, the fix belongs in the connector’s matching service. |
| `http proxy error: api/... ECONNREFUSED` in dev | A Litekart REST path was requested from outside the connector, so its guard never saw it. Vite proxies `/api` to `PUBLIC_LITEKART_API_URL`, or to `localhost:7000`. |
| The build fails on `@misiki/litekart-connector` | `@misiki/kitcommerce-core` declares it as a peer, and `vite.config.ts` redirects that specifier to whichever connector is installed. Make sure exactly one `@misiki/*-connector` is listed in `package.json`. |

### Before you rely on it

#### The one caveat that matters

Read this before choosing

Every connector was written by reading its platform’s authoritative source — an OpenAPI spec, a RAML file, a router registration or the controller source — rather than by running against a store. **No connector has been exercised against a live production instance of its platform.**

[Offer a sandbox or a correction](https://github.com/itswadesh/svelte-commerce/discussions/new/choose)

FAQ

### Questions about Svelte Commerce on Spryker

**Can I run a Spryker store on Svelte Commerce today?**

Not to take orders. Browsing, cart and sign-in are wired, but the storefront’s payment step calls per-gateway methods that are placeholders on Spryker. The connector has the Spryker-native getCheckoutData() and placeOrder(); the storefront does not call them yet.

**How do I switch Svelte Commerce to Spryker?**

Remove the connectors the storefront ships with, install @misiki/spryker-connector, set PUBLIC_SPRYKER_API_URL in .env and start the dev server. vite.config.ts resolves whichever connector is installed, so no file in the storefront changes.

**Why can’t Svelte Commerce place an order on Spryker?**

Spryker has exactly two checkout endpoints — one to check what is missing, one to place the order — and chooses payment by names each store configures. The storefront expects one method per gateway, and inventing those would mean guessing a store’s payment method names, so the connector leaves them as placeholders.

**Has the Spryker connector been run against a real Spryker store?**

Not against a live production instance — no Svelte Commerce connector has been. It was written by reading Spryker’s authoritative API source, and the Svelte Commerce maintainers ask Spryker’s own maintainers for a sandbox to run it against.

### Sources

This page summarises SPRYKER.md in the Svelte Commerce repository and the Spryker connector’s source, read on 25 September 2026, and the coverage in CONNECTORS.md, read on 21 September 2026. Where they disagree with this page, they are right and this page is out of date. Spryker is a trademark of its owner, named here only to describe compatibility; no endorsement or affiliation is implied — see [trademarks](https://kitcommerce.store/about/#trademarks).

- [SPRYKER.md — the full guide for Spryker](https://github.com/itswadesh/svelte-commerce/blob/main/docs/SPRYKER.md)
- [CONNECTORS.md — coverage for all 26 connectors](https://github.com/itswadesh/svelte-commerce/blob/main/docs/CONNECTORS.md)
- [@misiki/spryker-connector on npm](https://www.npmjs.com/package/@misiki/spryker-connector)
- [Spryker](https://spryker.com)

### Read the whole guide

The storefront is the same on every backend; the connector is what changes. SPRYKER.md has the Spryker setup in full, beside the connector’s source.

[The Spryker guide on GitHub](https://github.com/itswadesh/svelte-commerce/blob/main/docs/SPRYKER.md) · [All 26 backends](https://kitcommerce.store/svelte-commerce/backends/)