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