Web In-Site payment module

Ez a dokumentáció a Paynance azon webes fizetési modulját mutatja be, amelynél a felhasználót nem irányítjuk el a weboldalról.

Szükséges fájlok betöltése#

Az első lépés a szükséges JS- és CSS-fájlok betöltése. Ehhez a következő két sort kell beilleszteni az oldal<head> részébe:

Csatlakozás TST környezethez#

<script src="https://cdn-tst.paynance.hu/checkout/v1/paynance-checkout.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn-tst.paynance.hu/checkout/v1/paynance-checkout.css" crossorigin="anonymous">

Csatlakozás Live környezethez#

<script src="https://cdn.paynance.hu/checkout/v1/paynance-checkout.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.paynance.hu/checkout/v1/paynance-checkout.css" crossorigin="anonymous">

A linkek környezetenként változnak.

HTML elem létrehozása#

Szükséges egy HTML elem, amelyben a fizetési modul meg fog jelenni, például:

<div id="dropin-container"></div>

Fizetés kezdeményezése#

A következő JavaScript-kód szükséges a fizetési modul inicializálásához:

PaynanceCheckout({
    auth: {
        api_key: "***",
    },
    store: "***",
    reference: crypto.randomUUID(), // Egyedi azonosító generálása
    amount: {
        value: 10000,   // Fizetendő összeg (pl. 10000 = 100 Ft)
        currency: 'HUF'
    },
    additionalData: {   // Borravaló hozzáadása (opcionális)
        extraCostsValue: 9900,   // Borravaló értéke (pl. 9900 = 99 Ft)
        extraCostsCurrency: 'HUF'
    },
    shopperEmail: "***",
    type: "dropin",
    target: "#dropin-container",
    locale: 'hu-HU',
    countryCode: 'HU',
    analytics: {
        enabled: true
    },
    onPaymentCompleted: (result, component) => {
        console.info(result, component);
    },
    onPaymentFailed: (result, component) => {
        console.info(result, component);
    },
    onError: (error, component) => {
        console.error(error.name, error.message, error.stack, component);
    }
});

A fenti kódban az auth (api_key, illetve merchantId és password), a store és a shopperEmail értékeket ki kell cserélni a saját adatokra.

Fizetési felület#

A fizetési felület így fog kinézni; itt a felhasználó kiválaszthatja a kívánt fizetési módot:

Stilizálás#

A Paynance Web testreszabható CSS-változókat használ, amelyek felülírhatók a kívánt stílus eléréséhez.

Példa a stílusok felülírására#

Az iframe-en kívüli elemek stílusai egy saját CSS-fájlban felülírhatók.

A legtöbb stílus CSS-változóként, alapértelmezett értékkel van meghatározva. Ezek a változók a DOM vizsgálatával megtalálhatók, és értékük globálisan vagy egy adott elem szintjén módosítható. Ha egy változó értéke globálisan (a:root szinten) módosul, az minden olyan gyermekelemre érvényes lesz, amely ezt a változót használja.

1. override.css fájl létrehozása a kívánt változókkal#

:root {
    --adyen-sdk-color-background-secondary: #f7f7f8;
}

2. override.css importálása a könyvtár fő CSS-fájlja után#

<link rel="stylesheet" href="https://cdn-tst.paynance.hu/checkout/v1/paynance-checkout.css">
<link rel="stylesheet" href="override.css">

Hol vannak meghatározva ezek a CSS-változók, és mi az alapértelmezett értékük?#

CSS-változó	Alapértelmezett érték	Hatókör
`--adyen-sdk-color-label-primary`	`#00112c`	Címkék színe űrlapokban, mezőcímkék, súgószövegek, beviteli mezők szövegszíne, fizetési módok fejléce, állapotüzenetek, segédszövegek stb.
`--adyen-sdk-color-label-secondary`	`#5c687c`	Másodlagos címkék, megjegyzések, QR-visszaszámláló színe.
`--adyen-sdk-color-label-tertiary`	`#8d95a3`	„Click to Pay” címkék színe.
`--adyen-sdk-color-label-disabled`	`#8d95a3`	Letiltott gombok és szövegek színe.
`--adyen-sdk-color-label-critical`	`#e22d2d`	Hibás mezők és hibaüzenetek színe.
`--adyen-sdk-color-label-highlight`	`#0070f5`	Hivatkozások és kiemelt szövegek színe.
`--adyen-sdk-color-label-on-color`	`#ffffff`	Gombszövegek, jelölőnégyzet-pipák színe.
`--adyen-sdk-color-background-primary`	`#ffffff`	Háttérszín fizetési űrlapelemekhez (pl. beviteli mezők, rádiógombok, jelölőnégyzetek stb.).
`--adyen-sdk-color-background-secondary`	`#f7f7f8`	Kiválasztott fizetési mód háttérszíne.
`--adyen-sdk-color-background-disabled`	`#eeeff1`	Letiltott mezők háttérszíne.
`--adyen-sdk-color-background-critical-strong`	`#e22d2d`	Törlési megerősítés gomb háttérszíne.
`--adyen-sdk-color-outline-primary`	`#dbdee2`	Fizetési módok listaelemeinek keretszíne.
`--adyen-sdk-color-outline-critical`	`#e22d2d`	Hibás lenyíló menü keretszíne.
`--adyen-sdk-text-caption-font-size`	`12px`	Figyelmeztetések, további információk és hibaüzenetek betűmérete.
`--adyen-sdk-text-body-font-size`	`14px`	Alapértelmezett szövegméret.
`--adyen-sdk-text-subtitle-font-size`	`16px`	Kiemelt címek és alfejezetek betűmérete.
`--adyen-sdk-text-title-font-size`	`16px`	Fő címek és gombok szövege.
`--adyen-sdk-text-title-l-font-size`	`24px`	Nagyméretű címek (pl. utalványreferencia).
`--adyen-sdk-spacer-100`	`32px`	Margók és távolságok.
`--adyen-sdk-spacer-140`	`64px`	Nagyobb margók és távolságok.
`--adyen-sdk-border-radius-m`	`8px`	Kerekítési sugár közepes méretben.
`--adyen-sdk-border-radius-l`	`12px`	Kerekítési sugár nagyobb méretben.
`--adyen-sdk-shadow-low`	`0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02)`	Árnyékhatás a kártyákhoz és utalványokhoz.