Drupal - Commerce checkout - Update cart pane after user select a shipping option (ajax)

You are right. Shipping rates are applied only after you submit the form (Click "Next").

On submit all your shipping rules(or flat rates) applied and order is saved with new line items (Shipping is implemented via custom line item type).

The calculation is executed in the commerce_shipping_pane_checkout_form_submit()

So you can try to execute this function (or some parts of it) in the ajax callback before the cart is updated.

Here is an example how to apply shipping rates if you are using using Flat Rate Module: Adding shipping to order programmatically via module.

Firstly, thanks for posting this solution!

I was getting this 500 error from the AJAX response: "EntityMetadataWrapperException: Missing data values. in EntityMetadataWrapper->value().

I wanted to offer free shipping on orders over $100 so enabled the commerce_order_total module (https://www.drupal.org/sandbox/joshmiller/2718047) which highlighted the error when selecting a shipping method.

After some debugging, I found it was only occurring when the commerce_order_save() line was included.

Since I have set my checkout Panes to all appear on the same page and my Review Pane is disabled, I wrapped this line in an IF statement:

//get checkout panes
$panes = commerce_checkout_panes();

//check if the Review pane is enabled
if ($panes['checkout_review']['enabled']){
  //review is enabled
  commerce_order_save($order);
}

Comments/improvements are encouraged!