Praxis Wiki logo

Cashier API JavaScript SDK


Overview

The payment terminal page is a standalone web app that is placed either inside an iframe or in a new tab, so it’s not connected directly to the host page, which serves as the entry point for the payment process within the terminal. This is sometimes causing the inconvenience of the host page reflecting the outdated state during the payment process in the terminal

The JavaScript SDK is a way for the host page to communicate with the terminal in a form of notifications to reflect the current state or the choices made by the customer while progressing through the payment process. This communication includes the visual instructions, such as the document size change which is important for the iframe terminal layout, as well as the functional instructions - payment method chosen, payment attempt status, etc. On a technical level the JavaScript SDK operates using the postMessage() cross-domain message sharing feature. Which is why the SDK requires the domain whitelist to be enabled and properly configured to preserve the security for this communication.

Example

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