There are 2 approaches how to invoke the mTasku (mobile.js) and receive back data from the dialog:
  • place an hidden form on page that mobile.js will use to post the data to your backend, OR
  • invoke mobile.js with a callback function

mobile.js binds itself to the form within which it was included
We have placed such form to this page:
     <form id="checkoutForm" action="return.php" method="POST">
     <input type="button" id="mtaskuBtn">

     <script src="<?php echo $context->gateway->url; ?>/static/js/mobile/mobile.js"

We use here js callback function to receive the data back from the credit card dialog
We have placed such js script to the page:

<script src="<?php echo $context->gateway->url; ?>/static/js/mobile/mobile.js"></script>
<script type="text/javascript">
    function mobileCancelled() {
        alert("User cancelled (modal close)");

        cancelled: "mobileCancelled",
        noConflict: false,
        persistentModal: true,
        openOnLoad: true,
        transaction: "",
        locale: "",
        backdropClose: false,
        buttonText: "mTasku",
        channel: "MTASKU"

<button type="button" class="btn btn-primary" aria-label="Open mTasku payment dialog" onclick="window.Maksekeskus.MobilePayment.initialize();">Open mTasku Payment dialog</button>

Note that 3D Secure card payment dialog does not end here, instead it will arrive to your return_url
If you use Form Submit based approach, then you examine the data in submit request handler.

Data returned to js callback(will appear here if you complete the tutorial):