One-time Card Payments

For regular one-time card payments there are two options:

1. Redirect customer to MakeCommerce UI to enter card data
2. Load MakeCommerce card iframe js from your environment

Redirect customer to MakeCommerce UI to enter card data

If you want to redirect cardholder to MakeCommerce UI to enter card data you should follow such steps:

1. Create Transaction
2. Redirect customer to url which is returned under "channel": "Visa" or "channel": "MasterCard" (it is the same URL).
3. Handle transaction in the same way which is described in General Transaction Flow

Load MakeCommerce card iframe js from your environment

You can load MakeCommerce card iframe js from your UI to collect card data without redirect. It looks like that:

• Card iframe checkout.min.js for TEST environment: https://static.cc-test.maksekeskus.ee/checkout/dist/checkout.min.js
• Card iframe checkout.min.js for LIVE environment: https://static.cc.maksekeskus.ee/checkout/dist/checkout.min.js

Important: checkout.min.js could be used only from approved HTTPS domains. In TEST environment you could add as many domains as you want in Merchant self-service portal (Settings -> General settings -> Shop domain). In LIVE environment domains are added by our support team.

If you use Content Security Policy to control from where content could be loaded, for TEST environment you should add:

img-src 'self' https://payment.test.maksekeskus.ee https://static.cc-test.maksekeskus.ee;
script-src 'self' https://payment.test.maksekeskus.ee https://static.cc-test.maksekeskus.ee;
frame-src 'self' https://payment.test.maksekeskus.ee https://cc-test.maksekeskus.ee;

For LIVE environment you should add:

img-src 'self' https://payment.maksekeskus.ee https://static.cc.maksekeskus.ee;
script-src 'self' https://payment.maksekeskus.ee https://static.cc.maksekeskus.ee;
frame-src 'self' https://payment.maksekeskus.ee https://cc.maksekeskus.ee;

If you want to load MakeCommerce card iframe js from your environment, you should follow such steps:

1. Create Transaction
2. Load checkout.min.js in your environment. There are two approaches how to do that:
   • Place a hidden form on your checkout page that checkout.min.js will use to post the data to your backend (check code example)
   • Invoke checkout.min.js with a callback function to process the data returned (check code example)
3. Customer is redirected to bank issuer page to complete 3DS challenge
4. After 3DS challenge customer is redirected back to return_url with POST request containing token_return message (check message structure)

All checkout.min.js options

Code example of hidden form

<form id="checkoutForm" action="return.php" method="POST">
    <input type="hidden" name="transaction" id="transaction" value="f4b5b781-724c-4962-ac14-5d5437d72c21" />

    <script src="https://static.cc-test.maksekeskus.ee/checkout/dist/checkout.min.js"
        data-key="sLDwspx3XZzzptDM8YX2aBdyDsfN7XvqzYNReaK20argtVSsJFkK7o8BHdfF1AWq"
        data-transaction="f4b5b781-724c-4962-ac14-5d5437d72c21"
        data-email="mk.test@maksekeskus.ee"
        data-client-name="Name Surname"
        data-locale="en"
        data-selector="#checkoutBtn"
        data-backdrop-close="false">
    </script>

</form>

Code example when js callback function is used

<script src="https://static.cc-test.maksekeskus.ee/checkout/dist/checkout.min.js"></script>
    
<script>
    window.cc_callback = function(data)
    {   
        alert( 'The CC dialog returned: \r\n \r\n'+ JSON.stringify(data) ); 
    }

    window.Maksekeskus.Checkout.initialize(
    {   'key' : 'sLDwspx3XZzzptDM8YX2aBdyDsfN7XvqzYNReaK20argtVSsJFkK7o8BHdfF1AWq', 
        'transaction' : 'f4b5b781-724c-4962-ac14-5d5437d72c21',
        'email' : 'mk.test@maksekeskus.ee', 
        'clientName' : 'Name Surname', 
        'locale' : 'en',
        'completed' : 'cc_callback', 
        'cancelled' : 'cc_callback' }
    );
</script>

<button type="button" class="btn btn-primary" aria-label="Open CC Payment dialog" onclick="window.Maksekeskus.Checkout.open();">Open CC Payment dialog</button>