Our Credit Card Dialog is a secure way to take payments from your clients so that the sensitive card data does not pass through your systems, thus avoiding the PCI DSS compliancy requirement on you.
Our checkout.js builds a card data collection dialog as a semi-transparent iFrame layer on top of shop checkout page. The sensitive card data is submitted directly within this iFrame to Maksekeskus backend. If applicable the user is redirected through 3DS dialog. On sucessful authorization teh payment is completed and result is passed back to the shop.
The request contains a payment token that - if you requested as 'multi-use token' - you could store in your system for later reuse. See more about it: recurring credit card payments

  1. when customer wants to pay w credit card - create a transaction in API
  2. prepare parameters for the checkout.js script and trigger it:
    1. place an hidden form on your checkout page that checkout.js will use to post the data to your backend
      OR
    2. invoke checkout.js with a callback function to process the data returned
  3. checkout.js now builds an iFrame with dialog where the customer fills in CC data and submits the data to MK backend
  4. MK backend will process the payment through respective card networks
  5. MK backend returns token_return message and checkout.js in browser passes it back to shop - either the form submit or callback function
  6. verify the transaction state within the message returned: if state='COMPLETED' you may consider the payment successful and proceed with your order fulfillment logic
  7. display sucess message to buyer
Not all the 3D Secure payments can be processed within iFrame. They will involve redirecting user to extenal authorization page, and when done, the user is redirected back to thereturn_url of the shop. Thus the return_url of your shop must be always ready to process also the token_return message.
  1. when customer wants to pay w credit card - create a transaction in API
  2. prepare parameters for the checkout.js script and trigger it:
    1. place an hidden form on your checkout page that checkout.js will use to post the data to your backend
      OR
    2. invoke checkout.js with a callback function to process the data returned
  3. checkout.js now builds an iFrame with dialog where the customer fills in CC data and submits the data to MK backend
  4. customer is redirected to card issuer bank's authentication dialog
  5. after authentication the customer is redirected back to MK systems, our backend will process the payment through respective card networks
  6. the customer is redirected back to the shop return_url by making POST request with (token_return message)
  7. verify the transaction state within the message returned. if state='COMPLETED' you may consider the payment succesful and proceed with order fulfillment logic
  8. display sucess message

Create a transaction

<?php

$request_body = array(
    'transaction' => array(
        'amount' => $context->transaction->amount,
        'currency' => $context->transaction->currency,
        'reference' => $context->transaction->reference
    ),
    'customer' => array(
        'email' => $context->customer->email,
        'ip' => $context->customer->ip,
        'country' => $context->customer->country,
        'locale' => $context->customer->locale
    )
);

$transaction = $MK->createTransaction($request_body);

?>
Request
Content type
Headers
Body
Response
Content type
Headers
Body

    So we have now a Transaction, ID:


      4012001037141112    | expiration date: any in future | CVC: anything is valid | (expand for more cards..)
There are 2 approaches how to invoke the checkout.js and receive back data from the dialog:
  • place an hidden form on page that checkout.js will use to post the data to your backend, OR
  • invoke checkout.js with a callback function

checkout.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="hidden" name="transaction" id="transaction" value="<?php echo $transaction->id; ?>" />

    <script src="/checkout/dist/checkout.min.js"
        data-key=""
        data-transaction=""
        data-amount=""
        data-email=""
        data-client-name=""
        data-locale=""
        data-name="Merchant Name"
        data-description="Order no. "
        data-selector="#checkoutBtn"
        data-backdrop-close="false">
    </script>

</form>

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; ?>/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' : '<?php echo $context->shop->publishableKey; ?>', 
        'transaction' : '<?php echo $transaction->id; ?>',
        'amount' : '<?php echo $transaction->amount; ?>', 
        'currency' : '<?php echo $transaction->currency; ?>', 
        'email' : 'john@diehard.ly', 
        'clientName' : 'John McLane', 
        'locale' : 'en', 
        'name' : 'MyService.com', 
        'description' : 'Order no. 123abc', 
        '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> 






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: