Přeskočit na hlavní obsah

Loader - začínáme

Checkout SDK lze do projektu integrovat dvěma způsoby – pomocí dependency manageru nebo načtením z Comgate CDN. Oba způsoby poskytují identickou funkcionalitu, volba závisí na způsobu správy závislostí ve vašem projektu. Jakmile je Loader k dispozici, využívá se jeho funkcionalita ke stažení a zavedení jednotlivých modulů potřebných pro běh Checkout SDK.

Upozornění

Loader je nezbytnou součástí, bez které nelze Comgate Checkout SDK provozovat.

Instalace

Prvním krokem integrace Comgate Checkout SDK je instalace Loaderu. Instalace je možná prostřednictvím dependency managera nebo načtením z Comgate CDN.

Dependency manager

Tento způsob p;oužijte, pokud spravujete závislosti pomocí dependency managerů, jako jsou npm, yarn nebo pnpm, a projekt sestavujete prostřednictvím bundleru (např. Vite, Webpack, Next.js, ...).

npm install @comgate/checkout-js

Po instalaci můžete SDK importovat přímo do svého kódu. Nejjednodušší je importovat pouze požadované funkce:

import { getLoaderVersion } from '@comgate/checkout-js';

const comgateLoaderVersion = getLoaderVersion();
console.log('Version:', comgateLoaderVersion);

Alternativně je možné importovat všechny exporty pod jeden alias:

import * as CheckoutJS from '@comgate/checkout-js';

const comgateLoaderVersion = CheckoutJS.getLoaderVersion();
console.log('Version:', comgateLoaderVersion);

Comgate CDN

Pokud z jakéhokoli důvodu nechcete využívat dependency managery, lze SDK načíst přímo z Comgate CDN. Tento způsob je vhodný zejména pro rychlé testování nebo pro integraci do menších projektů.

Po načtení je modul dostupný globálně prostřednictvím window.comgateCheckoutJs.

Poznámka

Načítání přes CDN probíhá ve dvou krocích. Nejprve je odeslán požadavek na server, který provede resolvováníResolvování je proces, při kterém se nejasný nebo odkazující údaj převede na svou konkrétní a jednoznačnou hodnotu. major verze a pomocí přesměrování 302 vrátí odkaz na aktuální verzi. Záměrně tak dochází ke dvěma HTTP požadavkům.

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Comgate Checkout example - script in body</title>
<!-- ... metas ... -->
</head>
<body>
<!-- ... content ... -->
<script src="https://checkout.comgate.cz/sdk/@2/checkout-js.min.js"></script>
<script>
if (window.comgateCheckoutJs) {
const comgateLoaderVersion = comgateCheckoutJs.getLoaderVersion();
console.log(comgateLoaderVersion.version);
}
</script>
</body>
</html>

Práce s verzemi

Pro produkční nasazení je nutné vždy používat pouze fixní major verzi (např. @2), čímž se zajistí stabilní prostředí a kompatibilita. Verze nesmí být uzamčena na konkrétní patch (např. 2.0.11), protože by to mohlo vést k neočekávanému narušení funkčnosti.

Comgate při vydávání nových verzí garantuje zachování zpětné kompatibility v rámci stejné major verze.

Použití

Loader zajišťuje stažení všech potřebných modulů a připravuje prostředí podle zadané konfigurace. Jeho použití je jednoduché – poskytuje několik předdefinovaných metod a konstant, které lze přímo využít při integraci.

Upozornění

Používejte pouze funkce a metody popsané v této dokumentaci. Loader i moduly Checkout SDK obsahují interní prvky, které nejsou určeny pro veřejné použití. Jejich využití není podporováno, není garantována zpětná kompatibilita a může vést k nefunkčnosti celého SDK.

⚠️ Jakékoli jiné použití je na vlastní riziko. ⚠️

Dostupné konstanty

Konstanty je vhodné používat při konfiguraci Loaderu, aby byla vždy zajištěna maximální kompatibilita. Tyto konstanty se zároveň objevují ve všech uvedených příkladech níže.

KonstantaTypPopis
checkoutIdRegexRegExpRegulární výraz pro validaci formátu checkoutId na straně e-shopu. Stejný validátor používá i Loader.
checkoutVersionsRegExpRegulární výraz pro validaci formátu verze. Doporučujeme však používat níže uvedené konstanty.
VERSION_1stringKonstanta pro použití major verze 1 pro moduly. Deprecated.
VERSION_2stringKonstanta pro použití major verze 2 pro moduly.
VERSION_PREFERREDstringKonstanta určující, jakou major verzi Comgate aktuálně preferuje. Může automaticky přepnout na vyšší major verzi.
MODULE_COREstringID Core modulu pro uvedení v modules konfigurace. Nedoporučuje se používat.
MODULE_APPLEPAYstringID Apple Pay modulu pro uvedení v modules v konfiguraci.
MODULE_GOOGLEPAYstringID Google Pay modulu pro uvedení v modules v konfiguraci.

ℹ️ Exportovány jsou také další konstanty, jejichž použití však není doporučeno. Obvykle jde o nestabilní funkce nebo servisní parametry určené pro interní účely.

preloadComgateCheckout(options)

Zahájí bez zbytečného odkladu přednačtení modulů Comgate Checkout SDK do cache a vrátí objekt Promise, který však nečeká na jejich skutečné přednačtení. Pouze oznamuje stav zadání požadavku prohlížeči (vložením elementu link do hlavičky stránky). V případě chyby vrací Promise se stavem rejected a podrobnými detaily.

Využívá <link rel="preload" href="..." as="script" />.

Do seznamu modulů (modules) se neuvádí CORE – Loader jej vždy zařadí automaticky, pokud je vyžadován některým z modulů.

  • Přijímá objekt s konfiguračními parametry
  • Vrací objekt Promise

⚠️ Preload nespouští žádné skripty – pouze je uloží do mezipaměti prohlížeče. Pro jejich zavedení a spuštění použijte funkci loadComgateCheckout.

Použití

import {
preloadComgateCheckout,
VERSION_PREFERRED,
MODULE_GOOGLEPAY,
MODULE_APPLEPAY
} from '@comgate/checkout-js';

preloadComgateCheckout({
checkoutId: '00000000-0000-0000-0000-000000000000',
version: VERSION_PREFERRED,
modules: [MODULE_GOOGLEPAY, MODULE_APPLEPAY],
// debug: true,
// onPreload: (payload: TPreloadComgateCheckoutResult) => {}
})
.then((response: TPreloadComgateCheckoutResult) => {
console.log('Preload response', response);
})
.catch((error: TPreloadComgateCheckoutResult) => {
console.error('Preload error', error);
});

Parametry

Funkce přijímá jediný konfigurační parametr typu TPreloadComgateCheckoutConfig. Tento parametr je objekt a očekává následující atributy:

AtributTypPovinnýDefaultPopis
checkoutIdstringAnoComgate Checkout ID ve formátu UUID
Formát: 00000000-0000-0000-0000-000000000000
modulesTModuleType[]Ne[]Výčet modulů k přednačtení.
versionTCheckoutVersionNeVERSION_PREFERREDVýchozí verze k načtení.
debugbooleanNefalseVypisuje do konzole podrobnější detaily. Nepoužívejte na produkci hodnotu true.
onPreloadFunctionNeundefinedAlternativa k return Promise jako návratový callback.

Návratová hodnota

Návratovou hodnotou je vždy Promise<TPreloadComgateCheckoutResult>, a to jak v případě resolve, tak i reject. Parametr callbacku je tedy vždy typu TPreloadComgateCheckoutResult, což je objekt obsahující následující atributy:

Typ TPreloadComgateCheckoutResult
AtributTypPovinnýPopis
checkoutIdstring | unknownAnoHodnota checkoutId použitá v konfiguraci.
successbooleanAnoUrčuje, zda byla akce zcela úspěšná.
preloadedTModuleType[]AnoVýčet modulů, které byly úspěšně předány k přednačtení. Pole hodnoty: applepay, googlepay, core.
errorobjectNeDetail chyby. První klíč vždy odpovídá názvu modulu (loader, core, applepay, googlepay).
Příklad

Ukázka struktury odpovědi při úspěšném přednačtení skriptů:

{
"success": true,
"checkoutId": "00000000-0000-0000-0000-000000000000",
"preloaded": [
"core",
"applepay",
"googlepay"
]
}

loadComgateCheckout(options)

Načte a zavede do DOMu skripty všech požadovaných modulů. Pokud už běží preloadComgateCheckout(), Loader na něj naváže, takže nedochází k duplicitnímu stahování.

Jakmile jsou všechny moduly úspěšně staženy a zavedeny, funkce vrací objekt Promise.

K načítání skriptů se používá <script src="..."></script>, vkládaný do elementu <head> stránky.

Do seznamu modulů (modules) se neuvádí CORE – Loader jej vždy přidá automaticky, pokud je vyžadován některým z modulů.

  • Přijímá objekt s konfiguračními parametry
  • Vrací objekt Promise

Použití

import {
loadComgateCheckout,
VERSION_PREFERRED,
MODULE_GOOGLEPAY,
MODULE_APPLEPAY
} from '@comgate/checkout-js';

loadComgateCheckout({
checkoutId: '00000000-0000-0000-0000-000000000000',
modules: [MODULE_GOOGLEPAY, MODULE_APPLEPAY],
version: VERSION_PREFERRED,
debug: true,
// timeout: 30000, // 30s
// defer: false,
// async: false,
// onLoad?: (payload: TLoadComgateCheckoutResult) => {}
})
.then((response: TLoadComgateCheckoutResult) => {
console.log('Load response', response);
})
.catch((error: TLoadComgateCheckoutResult) => {
console.error('Load error', error);
});

Parametry

Funkce přijímá jediný konfigurační parametr typu TLoadComgateCheckoutConfig. Tento parametr je objekt a podporuje následující atributy:

AtributTypPovinnýDefaultPopis
checkoutIdstringAnoCheckout ID ve formátu UUID.
Formát: 00000000-0000-0000-0000-000000000000
modulesTModuleType[]Ne[]Výčet modulů, které mají být načteny a použity.
versionTCheckoutVersionNeVERSION_PREFERREDVerze SDK k načtení.
debugbooleanNefalseAktivuje podrobné logování do konzole. Nepoužívat v produkci.
timeoutnumberNe15000Maximální doba (v ms) pro načtení všech skriptů. Rozsah: 50030000.
deferbooleanNefalsePokud je nastaveno, spustí se skript po načtení dokumentu a oddálí událost DOMContentLoaded do načtení všech defer skriptů.
asyncbooleanNefalseNačítá skript paralelně s dokumentem a spustí jej ihned po stažení, bez ohledu na zpracování stránky nebo ostatní skripty.
onLoadFunctionNeundefinedCallback volaný po načtení jako alternativa k návratovému Promise.

Návratová hodnota

Návratovou hodnotou je vždy Promise<TLoadComgateCheckoutResult>, a to jak v případě resolve, tak i reject. Parametr callbacku je tedy vždy typu TLoadComgateCheckoutResult. Tento objekt obsahuje následující atributy:

Typ TLoadComgateCheckoutResult
AtributTypPovinnýPopis
checkoutIdstring | unknownAnoHodnota checkoutId použitá v konfiguraci.
successbooleanAnoUrčuje, zda byla akce zcela úspěšná.
coreTModuleMountCoreNeObjekt obsahující funkce potřebné pro práci s modulem Core.
applepayTModuleMountApplePayNeObjekt poskytující rozhraní pro práci s modulem Apple Pay.
googlepayTModuleMountGooglePayNeObjekt poskytující rozhraní pro práci s modulem Google Pay.
errorobjectNeDetaily chyb. Klíče vždy odpovídají názvům modulů (loader, core, applepay, googlepay).
TModuleMountCore
AtributTypPovinnýPopis
createFunctionAnoFunkce pro vytvoření nové instance CheckoutCore.
versionTFunctionVersionAnoFunkce pro získání detailů o verzi načteného modulu Core.
TModuleMountApplePay
AtributTypPovinnýPopis
createFunctionAnoFunkce pro vytvoření nové instance CheckoutApplePay.
versionTFunctionVersionAnoFunkce pro získání detailů o verzi načteného modulu Apple Pay.
TModuleMountGooglePay
AtributTypPovinnýPopis
createFunctionAnoFunkce pro vytvoření nové instance CheckoutGooglePay.
versionTFunctionVersionAnoFunkce pro získání detailů o verzi načteného modulu Google Pay.
TFunctionVersion

Jedná se o jednoduchou funkci bez parametrů, která vrací string s verzí načteného modulu.

loadResult.core.version(); // vrátí "2.0.12"
Příklady

Ukázka struktury odpovědi v případě úspěšného načtení:

{
"checkoutId": "00000000-0000-0000-0000-000000000000",
"success": true,
"core": {
"create": (props: TCheckoutProps) => Promise<CheckoutCore>,
"version": () => string
},
"applepay": {
"create": (coreInstance: CheckoutCore, props: TApplePayModuleConfig) => Promise<ModuleApplePay>,
"version": () => string
},
"googlepay": {
"create": (coreInstance: CheckoutCore, props: TGooglePayModuleConfig) => Promise<ModuleGooglePay>,
"version": () => string
}
}

getLoaderVersion()

Vrací verzi Loaderu Comgate Checkout SDK.

  • Funkce vrací objekt s verzí a identifikátorem revize.

⚠️ Vrací verzi balíčku @comgate/checkout-js, nikoli verzi celého Comgate Checkout SDK.

Použití

import {
getLoaderVersion
} from '@comgate/checkout-js';

const loaderVersion = getLoaderVersion();

console.log('Loader version:', loaderVersion.version); // vypíše 2.0.12
console.log('Loader revision:', loaderVersion.revision); // vypíše 2025-08-25

Parametry

Funkce nepřijímá žádné parametry.

Návratová hodnota

Návratovou hodnotou je vždy objekt typu TLoaderVersion. Tento objekt obsahuje následující atributy:

TLoaderVersion
AtributTypPovinnýPopis
versionstringAnoHodnota publikované verze Loaderu (balíčku @comgate/checkout-js) ve formátu major.minor.patch.
revisionstringAnoIdentifikátor revize. Datum sestavení.
Příklady

Ukázka struktury odpovědi:

{
"version": "1.0.12",
"revision": "2025-08-25",
}

Implementační ukázka

Níže uvedená ukázka předvádí plnou implementaci Loaderu a jeho použití v e-shopu.

import {
MODULE_APPLEPAY,
MODULE_GOOGLEPAY,
VERSION_2,
VERSION_PREFERRED,
preloadComgateCheckout,
loadComgateCheckout,
type TLoadComgateCheckoutResult,
} from '@comgate/checkout-js';

const checkoutId = '00000000-0000-0000-0000-000000000000';
const checkoutVersion = VERSION_2;
const modules = [MODULE_GOOGLEPAY, MODULE_APPLEPAY] as const;

let coreInstance = null;
let applePayInstance = null;
let googlePayInstance = null;

/**
* Zkontroluje implementovanou major verzi vůči aktuálně preferované verzi Checkout SDK.
* Pokud není použita preferovaná verze, zaloguje upozornění.
*/
if (checkoutVersion !== VERSION_PREFERRED) {
// napojte na vlastní logger, případně odstraňte
console.warn(
`[Comgate Checkout]: Dostupná nová major verze Checkout SDK. Aktualizujte kód, abyste získali nejnovější funkce.`
);
}

/**
* Provádí přednačtení potřebných modulů do cache prohlížeče,
* aby plátce nečekal ve chvíli, kdy se Checkout začne používat.
*
* Pozn.: „fire-and-forget“ – výsledek se dále nezpracovává, stačí ošetřit chybu.
*/
void preloadComgateCheckout({
checkoutId,
version: checkoutVersion,
modules,
})
.catch((error: unknown) => {
console.error('Comgate Checkout: Chyba při přednačtení modulů.', error);
});

/**
* Spustí (případně i stáhne) potřebné moduly, aby byly připraveny k použití.
*/
loadComgateCheckout({
checkoutId,
version: checkoutVersion,
modules: [...modules],
debug: true,
})
.then(async (result: TLoadComgateCheckoutResult) => {
// Core
if (result.core) {
console.log(`[Comgate Checkout]: modul Core v${result.core.version()} je připraven.`);
coreInstance = await createCoreInstance(result.core);
} else {
console.error(`[Comgate Checkout]: Chyba načítání modulu Core.`);
}

if (coreInstance) {
// Apple Pay
if (result.applepay) {
console.log(`[Comgate Checkout]: modul Apple Pay v${result.applepay.version()} je připraven.`);
applePayInstance = await createApplePayInstance(result.applepay, coreInstance);
} else {
console.error(`[Comgate Checkout]: Chyba načítání modulu Apple Pay.`);
}

// Google Pay
if (result.googlepay) {
console.log(`[Comgate Checkout]: modul Google Pay v${result.googlepay.version()} je připraven.`);
googlePayInstance = await createGooglePayInstance(result.googlepay, coreInstance);
} else {
console.error(`[Comgate Checkout]: Chyba načítání modulu Google Pay.`);
}
} else {
console.error('Comgate Checkout: Nepodařilo se vytvořit instanci Checkout Core.');
}

// Agregované detaily chyb (pokud jsou k&nbsp;dispozici)
if (result.error) {
console.error(`[Comgate Checkout]: Detaily chyb při načítání modulů:`, result.error);
}
})
.catch((error: unknown) => {
console.error(`[Comgate Checkout]: Neočekávaná chyba při načítání modulů.`, toError(error));
});