Informacija Atsiprašome, šis skyrius galimas tik anglų kalba.

Currently, only library for PHP programming language is provided.

Javascript SDK is available for better integration with Paysera system - this library can be used independently on language used on back-end. This library does not provide any way to call API methods themselves.

Downloads

Description

Link

PHP library

Available on GitHub

Javascript SDK

Production version
Development version

PHP library

PHP library can be found on GitHub, together with more information about installing and using it. Please feel free to fork and make pull requests for added functionality or fixed bugs.

Javascript SDK

Overview

The JavaScript SDK provides methods for loading transaction confirmation and OAuth pages in a lightbox or a pop-up. Also it manages communication between pages in different domains: confirmation page and your page. Library has no required dependencies.

If you use full-page redirect to confirmation page, you don't need to use this library.

Loading

To use the library, you need to include SDK file into your page and provide your client ID (mac_id parameter from authentication credentials).

You can also optionally pass language parameter. Only lt for Lithuanian (default) and en for English is supported at the moment.

<html>
<head>
    <!-- ... -->
    <script src="WebToPayWallet.js"></script>
    <script>
        WebToPayWallet.init({
            'client_id': YOUR_CLIENT_ID,
            'language': 'en'
        });
    </script>
</head>
<body>
    ...
</body>
</html>

Informacija YOUR_CLIENT_ID is the same as the one used for encoding API requests.

Confirmation page dialog

Confirmation dialog can be opened in several ways, depending on your implementation.

Creating transaction and redirecting to confirmation page: You should use openDialog method, which takes any URI to load in the dialog.
Creating transaction before opening the dialog: You should use openConfirmationDialog method, which takes transaction key and makes the correct URI for you.
Creating transaction by ajax request: You should use openDeferredConfirmationDialog method, which first opens empty dialog, then loads the confirmation page in it. 2 steps are needed to avoid pop-up blockers in case pop-up is used.

Creating transaction and redirecting to confirmation page

In this workflow, the dialog with your provided URI is opened. The script in the provided URI should create transaction using the API, then redirect it to the confirmation page by Location header.

Įspėjimas This workflow requires that you would create transaction using request with GET method. This is not recommended - POST method should be used if the state of the system is being modified.

Client-side example

<html>
<head>
    <!-- ... -->
    <script src="WebToPayWallet.js"></script>
    <script>
        WebToPayWallet.init({
            'client_id': YOUR_CLIENT_ID
        });
    </script>
</head>
<body>
    <button onclick="WebToPayWallet.openDialog('buy.php?item_id=123')">Buy</button>
</body>
</html>

Creating transaction before opening the dialog

In this workflow, transaction is created before opening the dialog, for example, with current page request.

Įspėjimas You should always use click event handler to open the dialog - this usually prevents pop-ups being blocked by the pop-up blockers. This means that loading the dialog on page load is not recommended, if you are not allowed to use lightbox approach.

Client-side example

<html>
<head>
    <!-- ... -->
    <script src="WebToPayWallet.js"></script>
    <script>
        WebToPayWallet.init({
            'client_id': YOUR_CLIENT_ID
        });
        var transactionKey = KEY_OF_TRANSACTION;
    </script>
</head>
<body>
    <button onclick="WebToPayWallet.openConfirmationDialog(transactionKey)">Pay with Paysera wallet</button>
</body>
</html>

Creating transaction by ajax request

In this workflow, the transaction is created using AJAX request just before opening the dialog. As pop-ups must be opened in the click handler, 2 steps are used: 1) the empty pop-up or lightbox is opened, 2) when AJAX response is available, confirmation page is opened in the already existing dialog.

Informacija This is recommended workflow - it can use any method for transaction creation and transaction is being created only when "buy" button has been clicked, not before that.

Method return value

Method openDeferredConfirmationDialog returns JavaScript function, which should be called with one parameter - transaction key - after it is already known.

Client-side example

$(function() {
    $('button#buy').click(function() {
        var callback = WebToPayWallet.openDeferredConfirmationDialog();
        $.ajax({
            type: 'POST',
            url: 'create.php',    // some custom parameters for transaction creation
            data: {
                orderid: 123
            },
            dataType: 'text',
            success: function(key) {
                callback(key);    // load the URI for confirmation
            },
            error: function() {
                WebToPayWallet.close();
                // handle error somehow
            }
        });
    });
});

Informacija This example is using jQuery library.

Using with OAuth

To use OAuth, additional script page is always required to pass and check for correct parameters. To open OAuth dialog, use WebToPayWallet.openDialog function with URI to your OAuth script. The script should redirect user to authentication page on Paysera system. When user is redirected back to your site, page should retrieve access_token and pass message to the parent window from pop-up or lightbox.

Passing dialog status from your script

To pass dialog status from your script to parent window, include the same SDK in the script page, too. Call function WebToPayWallet.sendMessageToParent, passing status and optionally the URI to redirect user to if status message has failed to be sent.

Status should be one of the following: success, reject, error.

Informacija For passing the message, you don't need to call WebToPayWallet.init function.

Client-side example

<html>
<head>
    <script src="WebToPayWallet.js"></script>
    <script>
        WebToPayWallet.sendMessageToParent('success', '/item/123');
    </script>
</head>
<body>
</body>
</html>

Using with other pages

Few other pages are available for displaying in the dialog:

Upload funds: Let's user to upload funds into the wallet.
Cash out: Let's user to make money transfer from the wallet to one of her bank accounts.

To open dialog, use WebToPayWallet.openUploadFundsDialog or WebToPayWallet.openCashOutDialog function accordingly. Two optional parameters are available: params and callbacks. params is an object and can contain these items:

redirect_uri: Redirect URI to redirect user after rejecting the current action or after action success. This parameter is not used if Paysera system is able to pass message to your script. You can handle messages with callbacks parameter.
wallet_id: Wallet ID you are expecting user to use. User will see notification if wallet does not match this parameter.

callbacks parameter takes object, the use is detailed in the callbacks section.

Example

WebToPayWallet.openCashOutDialog({
    'wallet_id': 123
}, {
    'success': function() {
        alert('Success!');
    }
});

Callbacks from dialog

After dialog closes, one of callbacks is fired:

success: User has accepted the transaction or successfully completed requested action (upload funds or cash out).
reject: User has rejected the transaction or specified action (upload funds or cash out).
error: Some error occurred. One of the cases is if transaction state is not suitable for confirmation.
close: User has closed lightbox or pop-up, possibly before confirming or rejecting the transaction.

Callbacks can be passed as an argument to dialog methods.

var callbacks = {
    'success': function() {
        // ...
    },
    'reject': function() {
        // ...
    },
    'close': function() {
        // ...
    },
    'error': function() {
        // ...
    }
};

WebToPayWallet.openDialog(uri, callbacks);

WebToPayWallet.openConfirmationDialog(key, callbacks);

var func = WebToPayWallet.openDeferredConfirmationDialog(callbacks);
func(key);

WebToPayWallet.openCashOutDialog({}, callbacks);

WebToPayWallet.openUploadFundsDialog({}, callbacks);

Informacija Parameter callbacks is optional. Each of the callbacks in it is optional too.

Įspėjimas JavaScript callback functions can be always called by the user, so be sure to check transaction status by using API. These functions are just for redirecting user to corresponding page or showing the right information.

Extending SDK

Library can be extended or some of it's functionality can be replaced without changing the code.

Changing lightbox style

You can change the lightbox library and style if you prefer to. An example is provided how you could change default lightbox to fancyBox.

<html>
<head>
    <!-- ... -->
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>

    <script src="WebToPayWallet.js"></script>

    <script>
        WebToPayWallet.extend({
            lightbox: {
                currentKey: false,
                open: function(url, key, closeCallback) {
                    if (this.currentKey && this.currentKey !== key) {
                        closeCallback(this.currentKey);
                    }

                    if (url == '') {
                        $.fancybox.close(true);
                        $.fancybox.showLoading();
                    } else {
                        var self = this;
                        $.fancybox.open(url, {
                            afterClose: function() {
                                if (self.currentKey) {
                                    closeCallback(self.currentKey);
                                    self.currentKey = false;
                                }
                            },
                            type: 'iframe',
                            helpers: {
                                overlay: {
                                    closeClick: false,
                                    css: {
                                        'cursor': 'default'
                                    }
                                }
                            }
                        });
                    }

                    this.currentKey = key;
                },
                close: function(closeCallback) {
                    if (this.currentKey) {
                        closeCallback(this.currentKey);
                        this.currentKey = false;
                        $.fancybox.close();
                    }
                }
            }
        });
    </script>
    <!-- ... -->
</head>
<body>
</body>
</html>

Informacija This code for replacing the lightbox and the library itself is available in the downloads area.

Libraries

Downloads

PHP library

Javascript SDK

Overview

Loading

Confirmation page dialog

Creating transaction and redirecting to confirmation page

Client-side example

Creating transaction before opening the dialog

Client-side example

Creating transaction by ajax request

Method return value

Client-side example

Using with OAuth

Passing dialog status from your script

Client-side example

Using with other pages

Example

Callbacks from dialog

Extending SDK

Changing lightbox style