Praxis Wiki logo

Cashier API JavaScript SDK


<!DOCTYPE html>
<html>
<head>
    <title>Cashier</title>
    <!-- SANDBOX -->
    <!-- <script src="https://cdn.cashier-test.com/sdk/js/praxis_cashier.v1_3.js"></script> -->

    <!-- LIVE -->
    <script src="https://cdn-gateway.praxispay.com/sdk/js/praxis_cashier.v1_3.js"></script>
</head>

<body>
    <div id="cashier-block">
        <!-- Cashier will be rendered here -->
    </div>

    <script>
        const AUTH_TOKEN = '8a7sd87a8sd778ac961062c6bedddb8'; 
        const CONTAINER = document.getElementById('cashier-block');
        const AUTOCLOSE = false;
        const MODE = 'iframe';
        const LOCALE = 'en-GB';

        let cashier = PraxisCashier({
            auth_token: AUTH_TOKEN,  // auth_token received in response to API call
            container: CONTAINER, // block where the cashier iframe or cashier window controls will be added
            autoclose: AUTOCLOSE, // whether to close the cashier window upon transaction attempt
            mode: MODE, // supported values: 'iframe', 'tab', 'window'
            locale: LOCALE // optional, locale for Praxis login button, browser locale is default
        }); 

        // if you override this method, please make sure to adjust the iframe size
        cashier.on('resize', function(data) {
            if (MODE === 'iframe') {
                let iframe = cashier.getCashierIframe();

                if (iframe) {
                    iframe.style.height = data.height + 'px';
                }
            }
        });

        cashier.on('payment_method_selected', function(data) {
            console.log(data.payment_method);
        });

        // if set, this callback will override the autoclose setting
        cashier.on('transaction_attempted', function(data) {
            console.log(data.transaction.amount);
            console.log(data.transaction.currency);
            console.log(data.transaction.transaction_status);
        });

        cashier.render();
    </script>
</body>
</html>