Libraries
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
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>
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 byLocation header.
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.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.Method return value
MethodopenDeferredConfirmationDialog 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
}
});
});
});
Using with OAuth
To use OAuth, additional script page is always required to pass and check for correct parameters. To open OAuth dialog, useWebToPayWallet.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.
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.
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 -
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.
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);
callbacks is optional. Each of the callbacks in it is optional too.
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>