monri-components-nodejs-expressjs-example.js

function examplesController() {

    const express = require('express');
    const app = express()
    const port = 3001;

    const authenticity_token = ''; // TODO - replace with value provided in merchant dashboard
    const merchantKey = ''; // TODO - replace with value provided in merchant dashboard
    const url = 'https://ipgtest.monri.com'; // TODO - in production env replace with https://ipg.monri.com

    function renderMonriComponentsHandler(req, res) {
        const date = new Date();
        const token = uuidv4();
        const timestamp = date.toISOString()

        const digest = sha512(`${merchantKey}${token}${timestamp}`);
        res.send(`
    <form action="" method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element">
            <!-- A Monri Component will be inserted here. -->
        </div>

        <!-- Used to display Element errors. -->
        <div id="card-errors" role="alert"></div>
    </div>

    <button>Submit Payment</button>
</form>

<footer>
    <!-- <script src="https://ipgtest.webteh.hr/dist/components.js"></script> -->
    <script src="${url}/dist/components.js"></script>
    <script>
        var monri = Monri("${authenticity_token}", {
            locale: "hr",
            fonts: [
                {
                    family: 'Rubik-Light',
                    src: 'https://parkmatix.com/static/fonts/Rubik-Light.ttf'
                },
                {
                    family: 'Rubik-Regular',
                    src: 'https://parkmatix.com/static/fonts/Rubik-Regular.ttf'
                }
            ]
        });
        var components = monri.components("${token}", "${digest}", "${timestamp}");


        var card = components.create("card", {
            style: {
                base: {
                    fontFamily: 'Rubik-Regular'
                },
                invalid: {
                       color: 'red'
                    },
                complete: {
                       color: 'blue'
                },
                label: {
                    base: {
                        color: 'blue',
                        textTransform: 'none'
                    },
                    invalid: {
                        color: 'gray'
                    },
                    complete: {
                       color: 'green'
                    }
                },
                input: {
                    base: {
                        fontSize: '15px',
                        color: "#663399"
                    }
                },
                rememberCardLabel: {
                    base: {
                        color: 'blue',
                        textTransform: 'none'
                    }
                }
            },
            // tokenizePanOffered: true,
            // tokenizePan: true
        });

        card.onChange(event => {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                console.log('error ocurred', event.error);
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        })

        card.mount("card-element");

        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            monri.createToken(card).then(function (result) {
                if (result.error) {
                    console.log(result.error);
                    // Inform the customer that there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    // Send the token to your server.
                    monriTokenHandler(result.result);
                }
            });
        });

        function monriTokenHandler(token) {
            // Insert the token ID into the form so it gets submitted to the server
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'monriToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            form.submit();
        }

    </script>
</footer>
`)
    }

    // Expose routes
    app.get('/monri-components', renderMonriComponentsHandler);
    app.listen(port, () => console.log(`Example app listening on port ${port}!`))
}

module.exports = examplesController;