Make Commerce Checkout Form Submit via Ajax I think its a simple question, but I havent find an answer yet. 

I want to make the Commerce Checkout Form Submit as an Ajax Form Submit. I have searched for a while but I havent found something useful. 

There is a module Asaf which can add Ajax Submit to every Drupal Form, but I havent find the important locations in code. 

There is also a Drupal Page AJAX Forms in Drupal 7, so I have tried a form_alter on the 
commerce_checkout_form_checkout and added an Ajax Callback, but the page still reloads.

I have written this code in a custom module to test the ajax submit with an own function:

if($form_id == 'commerce_checkout_form_checkout'){
  $form['#ajax'] = array();
  $form['#ajax']['method'] = 'replace';
  $form['#ajax']['effect'] = 'fade';
  $form['#ajax']['callback'] = 'test_function';
}

function test_function(){
  drupal_set_message('test', 'error');
}


But no message is displayed and no ajax call is done.

Perhaps somebody cant put me on the right turn.

EDIT:

So I have learned that i have to add the ['#ajax] to a specific button or submit element, and not to the whole form. The commerce_checkout_form_checkout has a buttons array with the continue button in it, so i have added the functionality to this button array:

Array
(
    [#type] =&gt; submit
    [#value] =&gt; Kaufen
    [#attributes] =&gt; Array
        (
        [class] =&gt; Array
            (
                [0] =&gt; checkout-continue
            )
    )
[#suffix] =&gt; 
[#validate] =&gt; Array
    (
        [0] =&gt; commerce_checkout_form_validate
        [1] =&gt; commerce_stock_checkout_form_validate
    )
[#submit] =&gt; Array
    (
        [#ajax] =&gt; Array
            (
                [prevent] =&gt; click
                [callback] =&gt; test_function
            )
    )


)

But if I hit the submit button, the page still reloads and doesnt jump into my 'test_function'.
I see two problems with your code:


#ajax should be set on one of button, checkbox, checkboxes, image button, password, radio, radios, select, submit, tableselect, textarea, text_format, textfield. You are setting it directly on form, not on form submit element, so it cannot work.
You should also set ['#ajax']['prevent'] if your form gets reloaded. In theory:



  Description: A JavaScript event to prevent when 'event' is triggered. Defaults to 'click' for #ajax on #type 'submit', 'button', and 'image_button'. 


In practice, it often fails to work as expected and I found it safer to set it explicitly.



In the button's array, be sure your #ajax definition is on the same level  [#type] =&gt; submit is. Don't put it under #submit or any other button's sub-array.