JavaScript SDK Guide

Client-side JavaScript library for integrating Paysera payment dialogs and OAuth flows into your web applications.

Downloads

Production: WebToPayWallet.min.js
Development: WebToPayWallet.js

What is JavaScript SDK?

The JavaScript SDK provides client-side methods for:

Opening payment confirmation dialogs (lightbox/popup)
Managing OAuth authentication flows
Handling upload funds and cash-out dialogs
Cross-domain communication

Important

The SDK handles UI only. Payment creation must be done server-side using the PHP Library or direct API calls.

Installation

<html>
<head>
    <!-- Include SDK -->
    <script src="https://developers-old.paysera.com/bundles/evpwallet/downloads/WebToPayWallet.min.js"></script>
    
    <!-- Initialize -->
    <script>
        WebToPayWallet.init({
            'client_id': 'wkVd93h2uS',
            'language': 'en'
        });
    </script>
</head>
</html>

Parameters:

Parameter	Required	Description
`client_id`	✅ Yes	Your MAC authentication client ID
`language`	⚠️ Optional	UI language: `en` or `lt` (default)

Quick Start

1. Backend creates payment (PHP):

$transaction = $client->createTransaction([
    'payments' => [[
        'description' => 'Order #1234',
        'price' => 2999,
    ]],
]);

$transactionKey = $transaction->getKey();

2. Frontend opens dialog (JavaScript):

<button onclick="openPayment()">Pay Now</button>

<script>
function openPayment() {
    var transactionKey = '<?php echo $transactionKey; ?>';
    
    WebToPayWallet.openConfirmationDialog(transactionKey, {
        success: function() {
            window.location = '/success';
        },
        reject: function() {
            alert('Payment cancelled');
        },
        error: function() {
            alert('Payment failed');
        }
    });
}
</script>

Dialog Methods

Method 1: openConfirmationDialog

Opens confirmation dialog for an existing transaction.

Best for: When transaction is already created

WebToPayWallet.openConfirmationDialog(transactionKey, callbacks);

Example:

var key = 'pDAlAZ3z';

WebToPayWallet.openConfirmationDialog(key, {
    success: function() {
        console.log('Payment confirmed!');
    },
    close: function() {
        console.log('Dialog closed');
    }
});

Method 2: openDeferredConfirmationDialog (Recommended)

Opens empty dialog first, then loads confirmation after AJAX response.

Best for: Creating transaction via AJAX

var callback = WebToPayWallet.openDeferredConfirmationDialog(callbacks);

Example with jQuery:

$('#pay-button').click(function() {
    var loadDialog = WebToPayWallet.openDeferredConfirmationDialog({
        success: function() {
            window.location = '/thank-you';
        },
        error: function() {
            alert('Payment failed');
        }
    });
    
    $.ajax({
        type: 'POST',
        url: '/api/create-payment',
        data: { order_id: 123 },
        success: function(response) {
            loadDialog(response.transaction_key);
        },
        error: function() {
            WebToPayWallet.close();
            alert('Failed to create payment');
        }
    });
});

Example with vanilla JS:

document.getElementById('pay-button').addEventListener('click', function() {
    var loadDialog = WebToPayWallet.openDeferredConfirmationDialog();
    
    fetch('/api/create-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ order_id: 123 })
    })
    .then(response => response.json())
    .then(data => {
        loadDialog(data.transaction_key);
    })
    .catch(error => {
        WebToPayWallet.close();
        console.error('Error:', error);
    });
});

Method 3: openDialog

Opens dialog with any custom URL.

Best for: OAuth flows, custom pages

WebToPayWallet.openDialog(url, callbacks);

Example:

var oauthUrl = 'https://yoursite.com/oauth-handler';

WebToPayWallet.openDialog(oauthUrl, {
    success: function() {
        console.log('OAuth successful');
        location.reload();
    }
});

Callback Functions

All dialog methods accept callback object:

var callbacks = {
    success: function() {
        // User completed action successfully
    },
    reject: function() {
        // User cancelled/rejected
    },
    error: function() {
        // Error occurred
    },
    close: function() {
        // Dialog closed (any reason)
    }
};

Callback	When Called	Use Case
`success`	Payment confirmed, OAuth approved	Redirect to success page
`reject`	User cancelled	Show cancellation message
`error`	Error occurred	Show error, maybe retry
`close`	Dialog closed (any reason)	Clean up, track abandonment

Server Verification

Always verify payment status server-side. Callbacks can be triggered by users and are for UX only.

Additional Features

Upload Funds & Cash Out

Upload Funds Dialog:

WebToPayWallet.openUploadFundsDialog({
    wallet_id: 14471,
    redirect_uri: 'https://yoursite.com/return'
}, {
    success: function() {
        alert('Funds added successfully!');
    }
});

Cash Out Dialog:

WebToPayWallet.openCashOutDialog({
    wallet_id: 14471,
    redirect_uri: 'https://yoursite.com/return'
}, {
    success: function() {
        alert('Cash out completed!');
    }
});

OAuth Integration

1. Backend prepares OAuth URL:

$oauthUrl = sprintf(
    'https://wallet.paysera.com/oauth/authorize?client_id=%s&redirect_uri=%s&scope=%s',
    urlencode($clientId),
    urlencode($redirectUri),
    urlencode('email name')
);

2. Frontend opens OAuth dialog:

var oauthUrl = '<?php echo $oauthUrl; ?>';

WebToPayWallet.openDialog(oauthUrl, {
    success: function() {
        window.location.reload();
    },
    reject: function() {
        alert('Authorization cancelled');
    }
});

3. OAuth callback page:

<script src="https://developers-old.paysera.com/bundles/evpwallet/downloads/WebToPayWallet.min.js"></script>
<script>
    WebToPayWallet.sendMessageToParent('success', '/dashboard');
</script>

Close Dialog Programmatically

WebToPayWallet.close();

Example:

setTimeout(function() {
    WebToPayWallet.close();
    alert('Payment timeout');
}, 300000);

Custom Lightbox

You can replace the default lightbox with your preferred library:

WebToPayWallet.extend({
    lightbox: {
        currentKey: false,
        
        open: function(url, key, closeCallback) {
            if (url == '') {
                $.fancybox.showLoading();
            } else {
                $.fancybox.open(url, {
                    type: 'iframe',
                    afterClose: function() {
                        if (this.currentKey) {
                            closeCallback(this.currentKey);
                        }
                    }
                });
            }
            this.currentKey = key;
        },
        
        close: function(closeCallback) {
            if (this.currentKey) {
                closeCallback(this.currentKey);
                this.currentKey = false;
                $.fancybox.close();
            }
        }
    }
});

Complete Examples

E-Commerce Checkout

<?php
session_start();
require 'vendor/autoload.php';

$transaction = $client->createTransaction([
    'payments' => [[
        'description' => 'Order #' . $_SESSION['order_id'],
        'price' => $_SESSION['cart_total'],
    ]],
]);

$_SESSION['transaction_key'] = $transaction->getKey();
?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://developers-old.paysera.com/bundles/evpwallet/downloads/WebToPayWallet.min.js"></script>
    <script>
        WebToPayWallet.init({
            client_id: '<?php echo $clientId; ?>'
        });
    </script>
</head>
<body>
    <h1>Checkout</h1>
    <p>Total: €<?php echo $_SESSION['cart_total'] / 100; ?></p>
    
    <button onclick="pay()">Pay with Paysera</button>
    
    <script>
    function pay() {
        WebToPayWallet.openConfirmationDialog(
            '<?php echo $transaction->getKey(); ?>',
            {
                success: function() {
                    window.location = '/thank-you';
                },
                reject: function() {
                    alert('Payment cancelled');
                },
                error: function() {
                    alert('Payment failed');
                }
            }
        );
    }
    </script>
</body>
</html>

AJAX Payment Creation

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://developers-old.paysera.com/bundles/evpwallet/downloads/WebToPayWallet.min.js"></script>
    <script>
        WebToPayWallet.init({
            client_id: 'wkVd93h2uS'
        });
    </script>
</head>
<body>
    <button id="pay-btn">Pay €29.99</button>
    
    <script>
    $('#pay-btn').click(function() {
        var btn = $(this);
        btn.prop('disabled', true).text('Processing...');
        
        var loadConfirmation = WebToPayWallet.openDeferredConfirmationDialog({
            success: function() {
                window.location = '/success';
            },
            error: function() {
                alert('Payment failed');
                btn.prop('disabled', false).text('Pay €29.99');
            },
            close: function() {
                btn.prop('disabled', false).text('Pay €29.99');
            }
        });
        
        $.ajax({
            url: '/api/create-payment',
            method: 'POST',
            data: JSON.stringify({
                amount: 2999,
                description: 'Premium Plan'
            }),
            contentType: 'application/json',
            success: function(response) {
                loadConfirmation(response.transaction_key);
            },
            error: function() {
                WebToPayWallet.close();
                alert('Failed to create payment');
                btn.prop('disabled', false).text('Pay €29.99');
            }
        });
    });
    </script>
</body>
</html>

Troubleshooting

Common Issues

Popup Blocked:

// ❌ Bad - might be blocked
setTimeout(function() {
    WebToPayWallet.openConfirmationDialog(key);
}, 1000);

// ✅ Good - direct click handler
button.onclick = function() {
    WebToPayWallet.openConfirmationDialog(key);
};

Dialog Not Opening:

Check:

SDK is loaded
SDK is initialized with client_id
Transaction key is valid
No JavaScript errors in console

Callbacks Not Firing:

Problem: Cross-domain messaging failed
Solution: Ensure both pages use HTTPS

Browser Compatibility

Browser	Version	Status
Chrome	Latest	✅ Full support
Firefox	Latest	✅ Full support
Safari	Latest	✅ Full support
Edge	Latest	✅ Full support
IE11	-	⚠️ Limited support

Resources

Download SDK - Production version
PHP Library - Server-side integration
Use Cases - Real-world examples
API Documentation - Complete reference
Support - Technical support

Pro Tip

Combine JavaScript SDK with PHP Library for best user experience: backend handles security, frontend handles UX.

What is JavaScript SDK?​

Installation​

Quick Start​

Dialog Methods​

Callback Functions​

Additional Features​

Complete Examples​

Troubleshooting​

Resources​

What is JavaScript SDK?

Installation

Quick Start

Dialog Methods

Callback Functions

Additional Features

Complete Examples

Troubleshooting

Resources