Recurring credit card payments extend the regular credit card payments, so please walk it through first.
When the dialog is used for recurring payment it is returning a payment_token that can be used multiple times. The token is associated with the specific credit card and with this specific Shop only. The shop can store the token and use it later on to take payments according to its own business logic.
The flow:
  1. on your site you express clearly that customer is about to subscribe to a service that has recurring periodic payments. You ask customer to make the first payment to enroll
  2. when customer wants to proceed to paymeyt - create a transaction in MK API
  3. prepare parameters for the checkout.js script (including the reccurring specific attributes) and trigger it
  4. in the dialog the customer fills in CC data and submits the data to MK backend
  5. MK backend returns payment_token and checkout.js passes it back to your page
    • note that on 3D Secure payment the browser is redirected to return_url with token_return message instead
  6. verify the returned data, did you get payment_token correctly
  7. store the token in your database
  8. create first payment with the token in API
  9. when it's time to take next payment for the subscription renewal:
    1. create a new transaction over API
    2. use the stored payment token to make payment for the transaction
    3. examine the response, if the payment failed (card expired etc) you need ask customer to make the payment through the dialog again

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 Transaction ID:


      5444870724493746    | expiration date: any in future | CVC: anything is valid | (expand for more cards..)
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.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', 
            'recurringRequired' : 'true',
            'recurringTitle' : 'MyService.com subscription',
            'recurringDescription' : 'membership fee is 10€ monthly',
            'recurringConfirmation' : 'i agree that the fee will be taken from my credit card each month automatically',
            'completed' : 'cc_callback', 
            'cancelled' : 'cc_callback' }
        );
    </script>


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




See all the dialog parameters ... (expand)

The payment token you got is just an authorization to take the money. To actually take it you have to create now the Payment with it: