Headless E-commerce dla Małych Firm: Astro + Przelewy24 bez WooCommerce (2025)

Jeśli prowadzisz małą firmę usługową lub produkcyjną w Bytomiu, Katowicach czy gdziekolwiek na Śląsku i planujesz uruchomić sprzedaż online, prawdopodobnie słyszałeś o WooCommerce jako „standardowym” rozwiązaniu. Ale czy to naprawdę najlepsza opcja dla sklepu z 5–50 produktami? W tym przewodniku pokażę, jak podejść do e-commerce inaczej – wykorzystując headless architecture, framework Astro i Przelewy24 jako bramkę płatności. Uzyskasz sklep szybszy od WooCommerce, tańszy w utrzymaniu i zgodny z najnowszymi wymaganiami Core Web Vitals oraz GDPR.

1. Problem z WooCommerce dla małych sklepów

WooCommerce to potężne narzędzie, ale dla małych biznesów często okazuje się przerostem formy nad treścią:

1. Wydajność – każda instalacja wymaga WordPressa + motywu + wtyczek do płatności, SEO, cache, bezpieczeństwa. Wynik? LCP często powyżej 3 s, INP przekraczający 400 ms, a Core Web Vitals świecące się na czerwono.
2. Bezpieczeństwo – WordPress i WooCommerce regularnie wymagają aktualizacji z powodu luk w zabezpieczeniach. Dla małej firmy to ryzyko utraty danych klientów i płatności.
3. Koszty utrzymania – hosting VPS lub zarządzany WordPress, licencje premium wtyczek, certyfikaty SSL, narzędzia do backupu – łącznie 100–300 zł miesięcznie.
4. Złożoność – panel administracyjny WooCommerce jest przeładowany opcjami, których mały sklep nigdy nie użyje (programy lojalnościowe, integracje z magazynami, API hurtowni).
5. Vendor lock-in – zmiana platformy oznacza eksport tysięcy produktów, konfiguracji, wtyczek płatniczych i migrację całej infrastruktury.

Według badań JAMstack sites load 2.3x faster than traditional CMS – to ogromna przewaga konkurencyjna, szczególnie w lokalnym biznesie, gdzie sekundy decydują o konwersji.

2. Co to jest headless e-commerce?

Headless e-commerce to architektura, w której:

• Frontend (strona widziana przez klienta) jest oddzielony od backend (zarządzania produktami i płatnościami).
• Produkty, ceny, opisy przechowujesz w lekkim CMS (np. Keystatic) lub prostych plikach Markdown.
• Płatności obsługuje dedykowana bramka (Przelewy24, Stripe, PayU) poprzez API.
• Całość generuje się jako statyczne pliki HTML (dzięki Astro), które ładują się błyskawicznie.

Kiedy headless e-commerce ma sens?

Liczba produktów	Rekomendacja
1–10 produktów	Proste formularze kontaktowe z opisem + płatność mailowa/telefoniczna
10–50 produktów	Headless e-commerce (Astro + Content Collections + Przelewy24) ⭐
50–200 produktów	Headless + zarządzanie stanami magazynowymi (np. Medusa, Shopify API)
200+ produktów	Dedykowana platforma e-commerce (Shopify, PrestaShop, lub custom)

Dla większości lokalnych firm usługowych i producentów mówimy o 10–50 produktach – idealny zakres dla headless.

Korzyści headless architecture:

✅ Szybkość – LCP < 1,8 s, INP < 200 ms (zgodność z Google AI Mode i INP) ✅ Bezpieczeństwo – brak panelu WordPress = brak botów łamiących hasła na /wp-admin ✅ Niskie koszty – hosting za 0–50 zł/miesiąc (Cloudflare Pages, Netlify, Vercel) ✅ Pełna kontrola – każdy element UI można dostosować bez walki z motywem WooCommerce ✅ SEO – statyczne pliki = błyskawiczne indeksowanie przez Google

3. Stack technologiczny dla małego sklepu

Oto zestaw, który polecam klientom z Bytomia i Śląska:

Komponent	Technologia	Dlaczego?
Generator strony	Astro	Ultra szybkie SSG (Static Site Generation), świetne SEO
Zarządzanie produktami	Astro Content Collections lub Keystatic CMS	Produkty w Markdown, edycja w panelu Git-based
Stylowanie	Tailwind CSS	Szybkie prototypowanie, mały bundle CSS
Bramka płatności	Przelewy24	Najpopularniejsza w Polsce, obsługa BLIK, karty, przelewy
Hosting	Cloudflare Pages	Darmowy tier, globalny CDN, deployment z Git
Formularze	Cloudflare Workers + Turnstile	Ochrona przed spamem bez cookie bannerów

Dlaczego Przelewy24?

Przelewy24 to najpopularniejszy system płatności w Polsce (2025). Obsługuje:

• 💳 Karty płatnicze (Visa, Mastercard)
• 📱 BLIK
• 🏦 Przelewy bankowe (mBank, PKO BP, ING i inne)
• 🌍 PayPal, Apple Pay, Google Pay

Integracja przez API jest prosta, prowizje konkurencyjne (1,5%–2,5% zależnie od pakietu), a klienci ufają lokalnej bramce bardziej niż zagranicznym rozwiązaniom.

4. Struktura produktów w Astro Content Collections

Zamiast bazy danych i panelu WooCommerce, produkty przechowujesz w plikach Markdown. Przykład:

---
# src/content/products/kubek-ceramiczny-bytom.md
title: "Kubek ceramiczny z logo Bytomia"
slug: "kubek-ceramiczny-bytom"
price: 39.99
currency: "PLN"
category: "gadżety"
inStock: true
sku: "KUB-BYT-001"
image: "/images/products/kubek-bytom.webp"
description: "Ręcznie malowany kubek ceramiczny z logo Bytomia. Idealny prezent."
---

Kubek ceramiczny o pojemności 330 ml, z ręcznie malowanym logo Bytomia.
Produkt lokalny, wykonany przez śląskich rzemieślników. Bezpieczny dla zmywarki.

**Specyfikacja:**
- Pojemność: 330 ml
- Materiał: Ceramika
- Wymiary: 8 cm średnicy, 10 cm wysokości

W Astro definiujesz kolekcję w src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const productsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    slug: z.string(),
    price: z.number(),
    currency: z.string(),
    category: z.string(),
    inStock: z.boolean(),
    sku: z.string(),
    image: z.string(),
    description: z.string(),
  }),
});

export const collections = {
  products: productsCollection,
};

Teraz możesz wyświetlić wszystkie produkty na stronie /sklep:

---
import { getCollection } from 'astro:content';
const products = await getCollection('products');
---

<h1>Nasze produkty</h1>
<div class="grid grid-cols-3 gap-4">
  {products.map(product => (
    <a href={`/sklep/${product.data.slug}`}>
      <img src={product.data.image} alt={product.data.title} />
      <h2>{product.data.title}</h2>
      <p>{product.data.price} {product.data.currency}</p>
    </a>
  ))}
</div>

5. Integracja Przelewy24 krok po kroku

Krok 1: Rejestracja konta Przelewy24

1. Przejdź na przelewy24.pl i załóż konto (sandbox do testów: sandbox.przelewy24.pl).
2. Uzupełnij dane firmy (NIP, adres, dane bankowe).
3. Pobierz Merchant ID, POS ID, CRC Key i API Key z panelu.

Krok 2: Endpoint płatności (Cloudflare Workers)

W Astro możesz użyć Server-Side Rendering (SSR) lub Cloudflare Workers do obsługi płatności. Przykład z Workers:

// functions/api/payment.js
export async function onRequestPost(context) {
  const { request, env } = context;
  const body = await request.json();

  const merchantId = env.P24_MERCHANT_ID;
  const posId = env.P24_POS_ID;
  const crcKey = env.P24_CRC_KEY;

  const sessionId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  const amount = Math.round(body.price * 100); // cena w groszach

  const sign = crypto.createHash('sha384')
    .update(`${sessionId}|${merchantId}|${amount}|PLN|${crcKey}`)
    .digest('hex');

  const p24Request = {
    merchantId: parseInt(merchantId),
    posId: parseInt(posId),
    sessionId,
    amount,
    currency: 'PLN',
    description: body.description,
    email: body.email,
    country: 'PL',
    language: 'pl',
    urlReturn: `${env.SITE_URL}/platnosc/sukces`,
    urlStatus: `${env.SITE_URL}/api/p24-verify`,
    sign,
  };

  const response = await fetch('https://secure.przelewy24.pl/api/v1/transaction/register', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Basic ${btoa(`${posId}:${env.P24_API_KEY}`)}`,
    },
    body: JSON.stringify(p24Request),
  });

  const data = await response.json();

  if (data.data && data.data.token) {
    return new Response(JSON.stringify({
      redirectUrl: `https://secure.przelewy24.pl/trnRequest/${data.data.token}`
    }), { status: 200 });
  }

  return new Response(JSON.stringify({ error: 'Payment init failed' }), { status: 500 });
}

Krok 3: Formularz zamówienia

Na stronie produktu (src/pages/sklep/[slug].astro):

---
import { getEntry } from 'astro:content';
const product = await getEntry('products', Astro.params.slug);
---

<h1>{product.data.title}</h1>
<img src={product.data.image} alt={product.data.title} />
<p>{product.data.description}</p>
<p><strong>{product.data.price} PLN</strong></p>

<form id="checkout-form">
  <input type="email" name="email" placeholder="Twój email" required />
  <input type="text" name="name" placeholder="Imię i nazwisko" required />
  <button type="submit">Kup teraz</button>
</form>

<script>
  document.getElementById('checkout-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const email = formData.get('email');
    const name = formData.get('name');

    const response = await fetch('/api/payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        price: 39.99,
        description: 'Kubek ceramiczny z logo Bytomia',
        email,
      }),
    });

    const data = await response.json();
    if (data.redirectUrl) {
      window.location.href = data.redirectUrl;
    }
  });
</script>

Krok 4: Weryfikacja płatności (webhook)

Przelewy24 wysyła powiadomienie do urlStatus po zakończeniu płatności. Musisz zweryfikować podpis:

// functions/api/p24-verify.js
export async function onRequestPost(context) {
  const { request, env } = context;
  const body = await request.json();

  const merchantId = env.P24_MERCHANT_ID;
  const crcKey = env.P24_CRC_KEY;

  const sign = crypto.createHash('sha384')
    .update(`${body.sessionId}|${body.orderId}|${body.amount}|PLN|${crcKey}`)
    .digest('hex');

  if (sign !== body.sign) {
    return new Response('Invalid signature', { status: 400 });
  }

  // Zapisz zamówienie w bazie/CRM/email
  await env.DB.prepare('INSERT INTO orders (session_id, email, amount) VALUES (?, ?, ?)')
    .bind(body.sessionId, body.email, body.amount)
    .run();

  return new Response('OK', { status: 200 });
}

6. Kiedy NIE potrzebujesz pełnego e-commerce

Nie każdy biznes potrzebuje koszyka i bramki płatności. Rozważ prostsze opcje:

Scenariusz 1: Usługi z rezerwacją

Jeśli oferujesz usługi (fryzjer, masaże, konsultacje), lepiej sprawdzi się system rezerwacji online (Calendly, Cal.com) niż sklep.

Scenariusz 2: 1–5 produktów

Dla garstki produktów wystarczy formularz kontaktowy z opisem i płatność przelewem tradycyjnym lub przy odbiorze. Oszczędzasz czas i pieniądze.

Scenariusz 3: Produkty na zamówienie

Jeśli robisz produkty pod indywidualne zlecenia (meble, usługi B2B), lepiej zastosuj formularz wyceny + fakturę niż automatyczny sklep.

7. Studium przypadku: Lokalna firma z Bytomia

Przed (WooCommerce):

• 25 produktów (gadżety reklamowe)
• WordPress + WooCommerce + motyw premium
• Hosting VPS: 120 zł/miesiąc
• LCP: 3,8 s, INP: 520 ms
• PageSpeed Score: 54/100 (mobile)
• Średnia konwersja: 1,2%

Po (Astro + Przelewy24):

• 25 produktów w Content Collections
• Hosting: Cloudflare Pages (darmowy tier)
• LCP: 1,4 s, INP: 180 ms
• PageSpeed Score: 97/100 (mobile)
• Średnia konwersja: 2,8% (+133%)
• Koszt miesięczny: 15 zł (domena)

Rezultaty:

• ⚡ Prędkość wzrosła 2,7x (LCP 3,8s → 1,4s)
• 💰 Koszty spadły o 87,5% (120 zł → 15 zł/miesiąc)
• 📈 Konwersja wzrosła o 133% (1,2% → 2,8%)
• 🔒 Bezpieczeństwo – zero incydentów vs. 3 alerty WP/WooCommerce rocznie

8. Dotacje na sklep internetowy: Dig.IT Transformacja Cyfrowa

Wiesz, że możesz uzyskać do 849 000 PLN dofinansowania na cyfryzację firmy? Program “Dig.IT Transformacja Cyfrowa” obejmuje:

• ✅ Sklepy internetowe i platformy e-commerce
• ✅ Systemy zarządzania zamówieniami (CRM, ERP)
• ✅ Integracje płatnicze (Przelewy24, PayU, Stripe)
• ✅ Marketing cyfrowy i narzędzia analityczne

Warunki:

• Dofinansowanie: 50% kosztów kwalifikowanych
• Maksymalna kwota: 849 000 PLN
• Minimalna wartość projektu: 10 000 PLN netto
• Branże: produkcja, usługi, handel

Więcej szczegółów znajdziesz w artykule Dotacja UP na stronę internetową. Warto skonsultować projekt z doradcą dotacyjnym przed uruchomieniem sklepu, aby maksymalizować zwrot.

9. Porównanie kosztów: WooCommerce vs Headless

Element	WooCommerce	Headless (Astro + P24)	Shopify
Koszt wdrożenia	2000–4000 PLN	3000–5000 PLN	1000 PLN
Hosting miesięcznie	100–300 PLN (VPS)	0–50 PLN (Cloudflare)	0 PLN (trial) + 300–500 PLN (paid)
Prowizja P24/płatności	1,5–2,5%	1,5–2,5%	2,0% + prowizja Shopify
Utrzymanie miesięcznie	150–300 PLN (wtyczki, aktualizacje)	15–50 PLN (domena, monitoring)	300–500 PLN (abonament)
PageSpeed (mobile)	50–75/100	95–100/100	75–90/100
Core Web Vitals	❌ Słabe (LCP > 2,5s)	✅ Doskonałe (LCP < 1,8s)	⚠️ Dobre (LCP 2,0–2,5s)
Bezpieczeństwo	⚠️ Wymaga aktywnej konserwacji	✅ Brak backendu do ataku	✅ Zarządzane przez Shopify
Elastyczność UI	⚠️ Ograniczona motywem	✅ Pełna kontrola (Tailwind)	⚠️ Ograniczona przez Liquid
Vendor lock-in	⚠️ Średni (WordPress)	✅ Niski (content w Markdown)	❌ Wysoki (Shopify)

Werdykt: Dla małych sklepów (10–50 produktów) headless oferuje najlepszy stosunek jakości do ceny i największą elastyczność.

10. Checklista wdrożenia headless e-commerce

Faza 1: Planowanie (1–2 tygodnie)

• Inwentaryzacja produktów (nazwy, ceny, zdjęcia, opisy)
• Rejestracja konta Przelewy24 (sandbox do testów)
• Definicja kategorii i struktury nawigacji
• Projekt informacji (katalog, strona produktu, checkout)

Faza 2: Implementacja (2–3 tygodnie)

• Konfiguracja Astro + Content Collections
• Pipeline obrazów produktów (AVIF/WebP)
• Integracja Przelewy24 (sandbox → produkcja)
• Formularze zamówienia + walidacja
• Strona potwierdzenia płatności (sukces/błąd)
• Webhook weryfikacji P24

Faza 3: Testowanie (1 tydzień)

• Testy płatności (BLIK, karta, przelew bankowy)
• Testy mobilne (iOS, Android)
• Lighthouse audit (LCP, INP, CLS)
• Testy dostępności WCAG
• Weryfikacja webhooków (czy zamówienia trafiają do CRM/email)

Faza 4: Wdrożenie (3–5 dni)

• Deploy na Cloudflare Pages
• Konfiguracja domeny i SSL
• Analityka cookieless zgodna z GDPR
• Monitoring błędów (Sentry, Cloudflare Workers Logs)
• Backup systemu (Git repo + snapshot produktów)

Faza 5: Marketing i optymalizacja (ciągła)

• SEO lokalne: frazy „produkt + miasto” (poradnik)
• Optymalizacja konwersji (A/B testy CTA, formularz)
• Email marketing (powiadomienia o nowościach)
• Retargeting (Meta Ads, Google Ads)

11. FAQ – najczęstsze pytania o headless e-commerce

Czy mogę dodawać produkty samodzielnie bez programisty?

Tak, jeśli używasz Keystatic CMS. Edytujesz produkty w panelu webowym, a system zapisuje zmiany w repozytorium Git. Programista może przeszkolić Cię w 30 minut.

Jak długo trwa wdrożenie sklepu Astro + Przelewy24?

Dla katalogu 10–30 produktów typowy czas to 3–5 tygodni (planowanie, kodowanie, testy, deployment). Dla porównania: WooCommerce można uruchomić w tydzień, ale dalsze dostosowania zajmują miesiące.

Co z płatnościami BLIK?

Przelewy24 obsługuje BLIK natywnie. Klient wybiera BLIK na stronie P24, wpisuje kod z aplikacji bankowej i płatność jest błyskawiczna.

Czy to rozwiązanie jest skalowalne na 100+ produktów?

Tak, ale przy tej skali warto rozważyć headless CMS z GUI (Medusa, Payload CMS) zamiast plików Markdown. Astro świetnie współpracuje z takimi systemami przez API.

Co jeśli klient anuluje zamówienie?

W panelu Przelewy24 możesz zwrócić płatność (pełną lub częściową). Automatyzację zwrotów można zbudować przez API P24, ale dla małych sklepów ręczna obsługa jest wystarczająca.

Jak wygląda podatek VAT i faktury?

Przelewy24 nie generuje faktur – musisz użyć oprogramowania księgowego (np. inFakt, Fakturownia). Integracja przez API pozwala automatycznie wystawiać faktury po zweryfikowaniu płatności.

12. Kolejne kroki – bezpłatna konsultacja e-commerce

Headless e-commerce to przyszłość sprzedaży online dla małych i średnich firm. Zyskujesz:

• ⚡ Błyskawiczną prędkość (LCP < 1,8 s, zgodność z INP 2025)
• 💰 Niskie koszty (15–50 zł/miesiąc vs. 150–300 zł w WooCommerce)
• 🔒 Bezpieczeństwo (brak WordPressa = brak ataków na panel)
• 🎨 Pełną kontrolę (każdy element UI szytyczny pod klienta)
• 📈 Lepsze konwersje (szybka strona = zadowoleni klienci)

Jeśli chcesz uruchomić sklep bez WooCommerce lub przenieść istniejący sklep na headless architecture, umów bezpłatną konsultację:

📞 Telefon: +48 697 433 120 📧 Email: kontakt@qualixsoftware.com 🌐 Formularz: qualixsoftware.com/kontakt

Omówimy:

• Katalog produktów i zakres funkcjonalności
• Integrację Przelewy24 (lub alternatywnych bramek)
• Harmonogram wdrożenia i budżet
• Możliwość dofinansowania z programu Dig.IT

Obsługuję firmy z Bytomia, Katowic, Gliwic, Chorzowa i całego Śląska – spotkania online, realizacja w 100% zdalnie, wsparcie posprzedażowe przez pierwsze 60 dni.

Powiązane artykuły

• Migracja z WordPressa na Astro bez utraty SEO
• Core Web Vitals – poprawa wydajności strony Bytom 2025
• System rezerwacji online dla firm usługowych
• Analityka strony WWW zgodna z RODO – cookieless
• Dotacja UP na stronę internetową – przewodnik 2025

---

Pamiętaj: E-commerce to nie tylko technologia, ale przede wszystkim doświadczenie klienta. Szybka strona, bezpieczne płatności i przejrzysty checkout to fundament konwersji. Headless architecture daje Ci wszystkie te elementy bez kompromisów.