Skip to main content

Implementation examples

The best way to understand the integration is to see it in action. Below you will find examples from the simplest to more complex ones — choose the one that matches your environment, and you are done.

1. Complete example — CDN​

This is the simplest path. The whole example works in a single HTML file — just fill in your CHECKOUT_ID and TRANSACTION_ID and you have a functional payment page.

Show the complete example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comgate Checkout — example</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>Order payment</h1>

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

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

    <!-- Card form -->
    <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">Pay by card</button>
            </div>
        </div>
    </div>

    <!-- Messages -->
    <div id="messages"></div>

    <!-- SDK script -->
    <script src="https://checkout.comgate.cz/sdk/@3" crossorigin></script>
    <script>
    (function () {
        // === CONFIGURATION ===
        var CHECKOUT_ID = '00000000-0000-0000-0000-000000000000'; // from the client portal
        var TRANSACTION_ID = 'XXXX-XXXX-XXXX'; // from the API after creating the payment

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

        // === HANDLERS ===
        function onPaid(payload) {
            showMessage('Payment successful! (status: ' + payload.status + ', method: ' + payload.service + ')', 'success');
        }

        function onCancelled(payload) {
            showMessage('Payment was cancelled. (' + payload.message + ')', 'error');
        }

        function onPending(payload) {
            showMessage('Attempt did not succeed — please try again. (' + payload.message + ')', 'error');
        }

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

        // === INITIALIZATION ===
        window.comgateCheckoutJs.useCheckout({
            checkoutId: CHECKOUT_ID,
            core: {
                transactionId: TRANSACTION_ID,
                locale: 'en',
                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);

            // Hide unavailable methods
            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('Failed to load payment methods.', 'error');
        });
    })();
    </script>
</body>
</html>

2. Apple Pay and Google Pay only​

If you do not need the card form, simply omit the card key:

window.comgateCheckoutJs.useCheckout({
    checkoutId: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx',
    core: {
        transactionId: 'XXXX-XXXX-XXXX',
        locale: 'en',
        onPaid:      (p) => { alert('Paid! ' + p.status); },
        onCancelled: (p) => { alert('Cancelled: ' + p.message); },
        onPending:   (p) => { alert('Try again: ' + p.message); },
        onError:     (p) => { console.error(p); },
    },
    applepay: {
        mountPoint: '#cg-applepay-box',
    },
    googlepay: {
        mountPoint: '#cg-googlepay-box',
    },
});

3. Card payment only​

window.comgateCheckoutJs.useCheckout({
    checkoutId: 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx',
    core: {
        transactionId: 'XXXX-XXXX-XXXX',
        locale: 'en',
        onPaid:      (p) => { window.location.href = '/thank-you?id=' + p.transactionId; },
        onCancelled: (p) => { window.location.href = '/payment-cancelled'; },
        onPending:   (p) => { document.getElementById('error-msg').textContent = 'Payment did not go through, try again.'; },
        onError:     (p) => { document.getElementById('error-msg').textContent = 'An error occurred: ' + p.message; },
    },
    card: {
        mountPoint: '#cg-card-box',
        appearance: {
            version: 1, // increase by 1 on every change
            rules: {
                input: { borderRadius: '6px', paddingBlock: '10px', paddingInline: '12px' },
                inputFocus: { boxShadow: '0 0 0 2px rgba(0, 102, 204, 0.25)' },
                inputInvalid: { borderColor: '#dc3545' },
            },
        },
    },
});

4. Integration via 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: 'en',
                onPaid:      (p) => { navigate('/success'); },
                onCancelled: (p) => { navigate('/cancelled'); },
                onPending:   (p) => { alert('Try the payment again'); },
                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>Complete the payment</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">Pay by card</button>
                </div>
            </div>
        </div>
    );
}

5. Integration via 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: 'en',
            onPaid:      (p) => { router.push('/success'); },
            onCancelled: (p) => { router.push('/cancelled'); },
            onPending:   (p) => { alert('Try the payment again'); },
            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>Complete the payment</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">Pay by card</button>
        </div>
    </div>
</template>