Přeskočit na hlavní obsah

Příklady implementace

Nejlepší způsob, jak pochopit integraci, je vidět ji v akci. Níže najdete příklady od nejjednoduššího po složitější — vyberte si ten, který odpovídá vašemu prostředí, a máte hotovo.

1. Kompletní příklad — CDN​

Toto je nejjednodušší cesta. Celý příklad funguje v jednom HTML souboru — stačí doplnit vaše CHECKOUT_ID a TRANSACTION_ID a máte funkční platební stránku.

Zobrazit kompletní příklad
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comgate Checkout — příklad</title>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; padding: 0 20px; }
        h1 { font-size: 1.4rem; }
        .payment-box { margin: 16px 0; }
        .button-box { width: 240px; height: 45px; }
        #cg-card-box { min-height: 280px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; }
        #cg-card-box-button button { margin-top: 12px; padding: 12px 24px; background: #0066cc; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; }
        #cg-card-box-button button:hover { background: #0052a3; }
        .hidden { display: none; }
        .message { padding: 12px; border-radius: 6px; margin: 12px 0; }
        .message--success { background: #d4edda; color: #155724; }
        .message--error { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <h1>Platba objednávky</h1>

    <!-- Apple Pay tlačítko -->
    <div class="payment-box">
        <div id="cg-applepay-box" class="button-box"></div>
    </div>

    <!-- Google Pay tlačítko -->
    <div class="payment-box">
        <div id="cg-googlepay-box" class="button-box"></div>
    </div>

    <!-- Karetní formulář -->
    <div class="payment-box">
        <div id="cg-card-box">
            <div id="cg-card-box-ibox"></div>
            <div id="cg-card-box-button">
                <button type="button">Zaplatit kartou</button>
            </div>
        </div>
    </div>

    <!-- Zprávy -->
    <div id="messages"></div>

    <!-- SDK script -->
    <script src="https://checkout.comgate.cz/sdk/@3" crossorigin></script>
    <script>
    (function () {
        // === KONFIGURACE ===
        var CHECKOUT_ID = '00000000-0000-0000-0000-000000000000'; // z klientského portálu
        var TRANSACTION_ID = 'XXXX-XXXX-XXXX'; // z API po založení platby

        // === HELPERY ===
        function showMessage(text, type) {
            var el = document.getElementById('messages');
            el.innerHTML = '<div class="message message--' + type + '">' + text + '</div>';
        }

        // === HANDLERY ===
        function onPaid(payload) {
            showMessage('Platba úspěšná! (stav: ' + payload.status + ', metoda: ' + payload.service + ')', 'success');
        }

        function onCancelled(payload) {
            showMessage('Platba byla zrušena. (' + payload.message + ')', 'error');
        }

        function onPending(payload) {
            showMessage('Pokus neuspěl — zkuste to znovu. (' + payload.message + ')', 'error');
        }

        function onError(payload) {
            showMessage('Chyba: ' + payload.message, 'error');
            console.error('Checkout SDK error:', payload);
        }

        // === INICIALIZACE ===
        window.comgateCheckoutJs.useCheckout({
            checkoutId: CHECKOUT_ID,
            core: {
                transactionId: TRANSACTION_ID,
                locale: 'cs',
                onPaid: onPaid,
                onCancelled: onCancelled,
                onPending: onPending,
                onError: onError,
            },
            applepay: {
                mountPoint: '#cg-applepay-box',
                ui: { type: 'pay', color: 'black' },
            },
            googlepay: {
                mountPoint: '#cg-googlepay-box',
                ui: { type: 'pay', color: 'black' },
            },
            card: {
                mountPoint: '#cg-card-box',
            },
        })
        .then(function (result) {
            console.log('Checkout initialized:', result);

            // Skrýt nedostupné metody
            if (result.applepay && !result.applepay.success) {
                document.getElementById('cg-applepay-box').parentElement.classList.add('hidden');
            }
            if (result.googlepay && !result.googlepay.success) {
                document.getElementById('cg-googlepay-box').parentElement.classList.add('hidden');
            }
        })
        .catch(function (error) {
            console.error('Checkout failed:', error);
            showMessage('Nepodařilo se načíst platební metody.', 'error');
        });
    })();
    </script>
</body>
</html>

2. Pouze Apple Pay a Google Pay​

Pokud nepotřebujete karetní formulář, prostě vynechte klíč card:

window.comgateCheckoutJs.useCheckout({
    checkoutId: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx',
    core: {
        transactionId: 'XXXX-XXXX-XXXX',
        locale: 'cs',
        onPaid:      (p) => { alert('Zaplaceno! ' + p.status); },
        onCancelled: (p) => { alert('Zrušeno: ' + p.message); },
        onPending:   (p) => { alert('Zkuste znovu: ' + p.message); },
        onError:     (p) => { console.error(p); },
    },
    applepay: {
        mountPoint: '#cg-applepay-box',
    },
    googlepay: {
        mountPoint: '#cg-googlepay-box',
    },
});

3. Pouze platba kartou​

window.comgateCheckoutJs.useCheckout({
    checkoutId: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx',
    core: {
        transactionId: 'XXXX-XXXX-XXXX',
        locale: 'cs',
        onPaid:      (p) => { window.location.href = '/dekujeme?id=' + p.transactionId; },
        onCancelled: (p) => { window.location.href = '/platba-zrusena'; },
        onPending:   (p) => { document.getElementById('error-msg').textContent = 'Platba neprošla, zkuste to znovu.'; },
        onError:     (p) => { document.getElementById('error-msg').textContent = 'Nastala chyba: ' + p.message; },
    },
    card: {
        mountPoint: '#cg-card-box',
        appearance: {
            version: 1, // zvedněte o 1 při každé změně
            rules: {
                input: { borderRadius: '6px', paddingBlock: '10px', paddingInline: '12px' },
                inputFocus: { boxShadow: '0 0 0 2px rgba(0, 102, 204, 0.25)' },
                inputInvalid: { borderColor: '#dc3545' },
            },
        },
    },
});

4. Integrace pomocí NPM (React)​

import { useCheckout, type TUseCheckoutResult } from '@comgate/checkout-js';
import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

export function CheckoutPage({ transactionId }: { transactionId: string }) {
    const navigate = useNavigate();
    const resultRef = useRef<TUseCheckoutResult | null>(null);

    useEffect(() => {
        let cancelled = false;

        useCheckout({
            checkoutId: import.meta.env.VITE_COMGATE_CHECKOUT_ID,
            core: {
                transactionId,
                locale: 'cs',
                onPaid:      (p) => { navigate('/success'); },
                onCancelled: (p) => { navigate('/cancelled'); },
                onPending:   (p) => { alert('Zkuste platbu znovu'); },
                onError:     (p) => { console.error('SDK error', p); },
            },
            applepay: { mountPoint: '#cg-applepay-box' },
            googlepay: { mountPoint: '#cg-googlepay-box' },
            card: { mountPoint: '#cg-card-box' },
        }).then((result) => {
            if (cancelled) return;
            resultRef.current = result;

            if (result.applepay && !result.applepay.success) {
                document.getElementById('cg-applepay-box')!.style.display = 'none';
            }
            if (result.googlepay && !result.googlepay.success) {
                document.getElementById('cg-googlepay-box')!.style.display = 'none';
            }
        });

        return () => {
            cancelled = true;
            resultRef.current?.applepay?.instance?.destroy();
            resultRef.current?.googlepay?.instance?.destroy();
            resultRef.current?.card?.instance?.destroy();
        };
    }, [transactionId]);

    return (
        <div>
            <h1>Dokončení platby</h1>
            <div id="cg-applepay-box" style={{ width: 240, height: 45, marginBottom: 12 }} />
            <div id="cg-googlepay-box" style={{ width: 240, height: 45, marginBottom: 12 }} />
            <div id="cg-card-box">
                <div id="cg-card-box-ibox" />
                <div id="cg-card-box-button">
                    <button type="button">Zaplatit kartou</button>
                </div>
            </div>
        </div>
    );
}

5. Integrace pomocí NPM (Vue 3)​

<script setup lang="ts">
import { useCheckout, type TUseCheckoutResult } from '@comgate/checkout-js';
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const props = defineProps<{ transactionId: string }>();
const router = useRouter();

const applePayVisible = ref(true);
const googlePayVisible = ref(true);

let checkoutResult: TUseCheckoutResult | null = null;

onMounted(async () => {
    const result = await useCheckout({
        checkoutId: import.meta.env.VITE_COMGATE_CHECKOUT_ID,
        core: {
            transactionId: props.transactionId,
            locale: 'cs',
            onPaid:      (p) => { router.push('/success'); },
            onCancelled: (p) => { router.push('/cancelled'); },
            onPending:   (p) => { alert('Zkuste platbu znovu'); },
            onError:     (p) => { console.error('SDK error', p); },
        },
        applepay: { mountPoint: '#cg-applepay-box' },
        googlepay: { mountPoint: '#cg-googlepay-box' },
        card: { mountPoint: '#cg-card-box' },
    });

    checkoutResult = result;
    if (result.applepay && !result.applepay.success) applePayVisible.value = false;
    if (result.googlepay && !result.googlepay.success) googlePayVisible.value = false;
});

onUnmounted(() => {
    checkoutResult?.applepay?.instance?.destroy();
    checkoutResult?.googlepay?.instance?.destroy();
    checkoutResult?.card?.instance?.destroy();
});
</script>

<template>
    <h1>Dokončení platby</h1>
    <div v-show="applePayVisible" id="cg-applepay-box" style="width: 240px; height: 45px; margin-bottom: 12px;" />
    <div v-show="googlePayVisible" id="cg-googlepay-box" style="width: 240px; height: 45px; margin-bottom: 12px;" />
    <div id="cg-card-box">
        <div id="cg-card-box-ibox"></div>
        <div id="cg-card-box-button">
            <button type="button">Zaplatit kartou</button>
        </div>
    </div>
</template>