English
v1.2 v1.3 v1.4 v1.5
v1.6

Payment window

The functionality in the payment window is available for the following payments:

  • Payments by card when the payment parameter is equal to card.
  • Payments with payment methods which use the payment initiation service (PIS).

In order to display a settlement window on the site, you can use our library.

1. Create a button.

Create a button that will call a payment window, give the button a unique tag (for example: id="payNow"). 

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

2. Generate parameters.

Using the WebToPay library ( Integration with a library ) or a specification ( Integration with detailed specification ), generate the data and the sign parameters.

Additional list of parameters with descriptions:

Parameter
Length
Required
Description
frame
1
Yes
Activates the use of the frame (0 - no, 1 - yes).
payment
20
Yes
The payment method which should have the value either code to accept payments by card or one of the bank_key value from the list (first column): Payment types .
PIS must be enabled for a specific payment method. How to enable PIS service for a specific payment method can be found here .
amount
11
Yes
Amount in cents the client has to pay.
currency
3
Yes
Payment currency (i.e USD, EUR, etc.) you want the client to pay in. If the selected currency cannot be accepted by a specific payment method, the system will convert it automatically to the acceptable currency, according to the currency rate of the day. Payamount and paycurrency answers will be sent to your website.
p_email
255
Yes
Paysera system will inform the payer about the payment status by this address.
test
1
Yes
Must be 0, as test payments are not available using iframe.
card_type
6
No
Card type (credit, debit). This parameter allows to accept only certain types of cards.
card_brand
12
No
Card brand (visa, maestro, visaelectron, mastercard). This parameter allows to accept only certain brands of cards.

3. Data processing after clicking the button.

Create methods responsible for data transfer after clicking the button, displaying errors and the whole sequence of actions after a successful payment. 

<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>