Tutoriál - postup implementace

Krok 6: Nastavení zvolené funkcionality

Pro výběr požadované funkcionality použijte parametr modules ve funkci loadComgateCheckout.
Balíček @comgate/checkout-js poskytuje předdefinované konstanty s názvy dostupných modulů, například MODULE_GOOGLEPAY.

V příkladu níže načítáme modul Apple Pay a Google Pay:

loadComgateCheckout({
 checkoutId: '0c31-4b34-8ce4-xxxxxxxxxxxx',
 modules: [MODULE_APPLEPAY, MODULE_GOOGLEPAY],
});

Návod implementace vybrané funkcionality je dostupný níže:

• Postup implementace tlačítka Apple Pay
• Postup implementace tlačítka Google Pay
• Ukázky kompletní implementace

Krok 7: Vytvoření instance CheckoutCore

Pro použití checkout modulů (např. Apple Pay, Google Pay) je nutné vytvořit instanci této třídy s konfiguračními parametry. Tato instance se následně stává centrálním bodem pro ovládání celé funkcionality.

Upozornění

V současné chvíli je možné na stránce používat pouze jednu instanci třídy CheckoutCore. Při vytvoření druhé instance může dojít k neočekávanému chování aplikace.

Vytvoření CheckoutCore třídy a následné vytvoření Google Pay modulu [Kód na GitHubu]

loadComgateCheckout() přidá do globalního objektu window.comgate.checkout specifikované moduly

• Každý endpoint obdrží create metodu, např.: window.comgate.checkout.core.create()
• Po vytvoření instance se instance přída do globálního objektu modulu, např.: window.comgate.checkout.core.instance

loadComgateCheckout({
    checkoutId: '0c31-4b34-8ce4-xxxxxxxxxxxx',
    modules: [MODULE_APPLEPAY, MODULE_GOOGLEPAY],
})
    .then(() => {
        // V tuto chvíli už je create metoda přidána do globálního window objektu
        window.comgate.checkout.core
            .create({
                transactionId: 'XXXX-XXXX-XXXX',
                onPaid: (data) => {
                    // Callback po potvrzení zaplacení platby
                },
                onCancelled: (data) => {
                  // Callback po potvrzení zrušení platby
                },
                onPending: (data) => {
                  // Callback po scénář kdy se platba zpracovává platby
                },
                onError: (data) => {
                  // Callback po chybě
                },
            })
            .then((checkoutInstance) => {
                // V tuto chvíli můžeme vytvořit instance modulů, moduly vyžadují instanci CheckoutCore
                window.comgate.checkout.googlepay.create(checkoutInstance)
                    .then((googlePayModuleInstance) => {
                        if (googlePayModuleInstance.canMakePayments()) {
                            const googlePayMountPoint = document.querySelector('#google-pay-mount-point');

                            googlePayModuleInstance.mount([googlePayMountPoint]);
                        }
                    })
                    .catch((error) => {
                        // Nastala chyba při vytváření modulu Google Pay
                        console.error(error);
                    });
            })
            .catch((error) => {
                // Nastala chyba při vytváření instance CheckoutCore
                console.error(error);
            });
    })
    .catch((error) => {
        // Nastala chyba při načítání modulů
        console.error(error);
    });