Skip to main content

Payment Window

The Payment Window lets you display a settlement window directly on your site using Paysera's JavaScript library, so customers can pay without being redirected away.

Card payments only

The Payment Window functionality is available only for card payments. Test payments are not available through the iframe you must use the standard redirect flow for testing.

Implementation Steps​

Step 1: Create a button​

Create a button that will open the payment window and give it a unique id (for example payNow):

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

Step 2: Generate parameters​

Generate the data and sign parameters using either the WebToPay library or the Custom Integration specification.

The following additional parameters apply to the Payment Window:

ParameterLengthRequiredDescription
frame1YesActivates the use of the frame (0 - no, 1 - yes).
payment20YesThe payment method. The value must be card for card payments.
amount11YesAmount in cents the client has to pay.
currency3YesPayment currency (e.g. 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_email255YesPaysera will inform the payer about the payment status at this address.
test1YesMust be 0, as test payments are not available using the iframe.
card_type6NoCard type (credit, debit). Allows you to accept only certain types of cards.
card_brand12NoCard brand (visa, maestro, visaelectron, mastercard). Allows you to accept only certain brands of cards.

Step 3: Handle the payment window from JavaScript​

Create the methods responsible for sending the data after the button is clicked, displaying errors, and handling the success flow:

<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 the buyer closes the 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>

Error Codes​

The ERROR event provides a message.code matching one of the following constants on PayseraCheckout.ErrorCode:

CodeDescription
USER_CLOSEDThe buyer closed the payment window.
CARD_INITIAL_RESULT_FAILEDFailed to get payment configuration.
CARD_AUTHORIZATION_FAILEDFailed to authorize the card.
CARD_RESULT_FAILEDWrong payment status after card authorization / 3D Secure.
CARD_SIGNATURE_FAILEDFailed to perform the 3D Secure step.

Security Considerations​

Best practices
  • Generate data and sign server-side - never expose your project password to the client.
  • Verify payment status via the callback - don't rely solely on the frontend SUCCESS event; always confirm payment server-side using the callback.