Maksekeskus developer portal | mTasku Dialog (mobile.js)

prepare parameters and trigger action

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

1 - Form Submit approach

mobile.js binds itself to the form within which it was included
We have placed such form to this page:

2.2 - js callback function approach

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)");
    }

    Maksekeskus.MobilePayment.initialize({
        cancelled: "mobileCancelled",
        noConflict: false,
        persistentModal: true,
        openOnLoad: true,
        transaction: "",
        locale: "",
        backdropClose: false,
        buttonText: "mTasku",
        channel: "MTASKU"
    });
</script>

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

See all mobile.js options

HTML attribute name

JS option name

Required on initialization

Default value

Description

data-transaction

transaction

Transaction ID (created via Billing API)

data-selector

selector

Hooks quick implementation to the given selector. Note: it is document.querySelector not jQuery so no fancy selectors.

data-locale

locale

Customer's language (ISO 639-1). Defaults to en. Languages available:
en - English
et - Estonian
fi - Finnish
lv - Latvian
lt - Lithuanian
ru - Russian
no - Norwegian

data-backdrop-close

backdropClose

true

Closes iframe on click outside of the iframe

data-channel

locale

true

MTASKU or MOQ

noConflict

true/false

This will return a new instance of MobilePayment, allowing you to run multiple instances on the same page. Defaults to true in quick mode, false in custom mode.

cancelled

JS function name called on cancellation (modal close)

persistentModal

false

When set to true, iframe will not be destroyed on close.

openOnLoad

false

Open modal right away (on script load)

smartphoneApp

false

Hides close button

buttonText

If not using the selector option then a button will be created with specified name

HTML property name	JS option name	Required	Description
`data-key`	`key`	Yes	Shop's Public API Key (available in your Merchant Portal)
`data-transaction`	`transaction`	Yes	Transaction ID (created via Billing API)
`data-amount`	`amount`	Yes	Transaction amount (numeric, up to 2 decimals: xxx.xx)
`data-currency`	`currency`		Transaction currency (ISO 4217). Defaults to EUR
`data-email`	`email`		Pre-filled customer email.
`data-client-name`	`clientName`		Pre-filled customer name.
`data-locale`	`locale`		Customer's language (ISO 639-1). Defaults to en. Languages available: en - English et - Estonian fr - French lv - Latvian lt - Lithuanian ru - Russian es - Spanish sv - Swedish no - Norwegian
`data-name`	`name`		Shop's name to be shown in the form header.
`data-description`	`description`		Short description of the payment for the customer. Will be shown in the form header.
`data-recurring-title`	`recurringTitle`		Title of the subscription/recurring payment the customer is subscribing for. The definition of this option triggers the Checkout form to display recurring payment details.
`data-recurring-description`	`recurringDescription`		Description of the subscription/recurring payment the customer is subscribing for. Include here information about recurring payment amount, interval, etc.
`data-recurring-confirmation`	`recurringConfirmation`		Confirmation text shown next to the approval checkbox for the customer to accept recurring billing.
`data-recurring-checked`	`recurringChecked`		Whether or not the approval checkbox to accept recurring billing is checked by default. Defaults to false. NB! It probably legally more correct that the user does the agreement check by himself.
`data-recurring-required`	`recurringRequired`		Signals that the dialog will not allow make the payent unless user has marked in the 'recurring-confirmation' checkbox.
`data-selector`	`selector`		Hooks quick implementation to the given selector. Note: it is document.querySelector not jQuery so no fancy selectors.
`data-completed`	`completed`		Name of the JavaScript function to be invoked on success. Will be called with the data argument.
`data-cancelled`	`cancelled`		Name of the JavaScript function to be invoked on user cancel action (modal close). No arguments passed.
	`noConflict`		Tells Checkout to run in noConflic mode. This will return a new instance of Checkout, allowing you to run multiple instances on the same page. Defaults to true in quick mode, false in custom mode.
	`persistentModal`		Boolean. When set to true, iframe will not be destroyed on close.
	`openOnLoad`		Open modal right away (on script load).
`data-ocp-enabled`	`ocpEnabled`		add data-ocp-enabled="true" if you want the 'remember me' section to be displayed on the credit card form. Note that OCP feature must also be activated for the Shop by MK administrator
`data-backdrop-close`	`backdropClose`		add data-backdrop-close="false" if you want the CC dialog be truly modal. Defaults to true.

prepare parameters and trigger action

1 - Form Submit approach

2.2 - js callback function approach

6..7. Examine returned data