W oknie płatniczym funkcjonalność jest dostępna dla następujących płatności:

  • Płatności kartą podając payment parametr card.
  • Płatności sposobami, które używają usługi inicjowania płatności (UIP).

Dla wyświetlania okna płatniczego możesz skorzystać z naszej gotowej biblioteki.

1. Przygotuj przycisk.

Przygotuj przycisk, który aktywuje okno płatności kartą, nadaj mu unikatową sygnaturę (np. id="payNow").

<button id="payNow" type="button">Payment Demo</button>

2. Wygeneruj parametry.

Korzystając z biblioteki WebToPay ( Integracja poprzez bibliotekę ) lub specyfikacji ( Integracja za pomocą specyfikacji ) wygeneruj parametry data i sign.

Dodatkowy wykaz parametrów z opisami:

Parametr Długość Obowiązkowy Opis
frame 1 Tak Aktywuj wykorzystanie frame (0 - nie, 1 - tak)
payment 20 Tak Sposób płatności, wartość którego ma być albo card, aby przyjmować płatności kartą, albo jedna z podanych w liście bank_key(pierwszy słupek): Sposoby zapłaty (UIP powinna być aktywowana dla konkretnego sposobu płatności). Jak aktywować UIP dla konkretnego sposobu płatności można znaleźć tutaj.
amount 11 Tak Kwota w centach, którą klient powinien zapłacić.
currency 3 Tak Waluta płatności (np. USD, EUR, itp.), w której chcesz otrzymać płatność od klienta. Jeżeli podana waluta poprzez wybrany sposób płatności nie może być przyjęta, system automatycznie ją wymieni na obsługiwaną walutę według kursu dnia. W odpowiedzi na Twoją stronę będą przekazane payamount i paycurrency.
p_email 255 Tak Na ten adres system Paysera powiadomi płatnika o statusie płatności.
test 1 Tak Ma być 0, gdyż płatności testowe w oknie płatniczym nie są możliwe.
card_type 6 Nie Typ karty (credit – kredytowa, debit – debetowa). Ten parametr definiuje określony typ kart
card_brand 12 Nie Rodzaj karty (visa, maestro, visaelectron, mastercard). Ten parametr definiuje określony rodzaj kart

3. Przetwarzanie danych po kliknięciu przycisku.

Utwórz metody odpowiedzialne za przekazanie danych po kliknięciu przycisku, komunikaty błędów oraz dalszą sekwencję czynności po udanej płatności.

<script>
    var checkoutApp = new PayseraCheckout.App();
    checkoutApp.on(PayseraCheckout.AppEvent.SUCCESS, function () {
        // happens after successful payment, when window is closed
    });

    checkoutApp.on(PayseraCheckout.AppEvent.ERROR, function (message) {
       // happens after unsuccessful payment when window is closed or when buyer closes window.
        switch (message.code) {
            case PayseraCheckout.ErrorCode.USER_CLOSED:
                // buyer closed window
                break;

            case PayseraCheckout.ErrorCode.CARD_INITIAL_RESULT_FAILED:
                // failed to get payment configuration
                break;

            case PayseraCheckout.ErrorCode.CARD_AUTHORIZATION_FAILED:
                // failed to authorize card
                break;

            case PayseraCheckout.ErrorCode.CARD_RESULT_FAILED:
                // wrong payment status after card authorization/3D secure
                break;

            case PayseraCheckout.ErrorCode.CARD_SIGNATURE_FAILED:
                // failed to perform 3D secure step
                break;
        }
    });

    // Button click event
    var payButton = document.getElementById('payNow');
    payButton.addEventListener('click', function () {
        checkoutApp.pay({
            data: '', // generated data
            sign: '' // generated sign
        });
    });
</script>