diff --git a/addons/website_sale_delivery/controllers/main.py b/addons/website_sale_delivery/controllers/main.py
index 425c3d711ca..1e94a0362ce 100644
--- a/addons/website_sale_delivery/controllers/main.py
+++ b/addons/website_sale_delivery/controllers/main.py
@@ -55,3 +55,16 @@ class WebsiteSaleDelivery(WebsiteSale):
 
         values['delivery_action_id'] = request.env.ref('delivery.action_delivery_carrier_form').id
         return values
+
+    @http.route(['/shop/update_carrier'], type='json', auth='public', methods=['POST'], website=True, csrf=False)
+    def update_eshop_carrier(self, **post):
+        order = request.website.sale_get_order()
+        carrier_id = int(post['carrier_id'])
+        if order:
+            order._check_carrier_quotation(force_carrier_id=carrier_id)
+            return {'status': order.delivery_rating_success,
+                    'error_message': order.delivery_message,
+                    'carrier_id': carrier_id,
+                    'new_amount_delivery': order.delivery_price,
+                    'new_amount_untaxed': order.amount_untaxed,
+                    'new_amount_tax': order.amount_tax}
diff --git a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
index f6f8386a515..3405faf5daf 100644
--- a/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
+++ b/addons/website_sale_delivery/static/src/js/website_sale_delivery.js
@@ -1,19 +1,45 @@
 'use strict';
-$(document).ready(function () {
+odoo.define('website_sale_delivery.checkout', function (require) {
 
+    require('web.dom_ready');
+    var ajax = require('web.ajax');
+
+    /* Handle interactive carrier choice + cart update */
     var $pay_button = $('.oe_sale_acquirer_button button');
     $pay_button.prop('disabled', false);
 
-    // When choosing an delivery carrier, update the quotation and the acquirers. Disable the 'Pay
-    // Now' button to avoid being redirected to payment acquier if the delivery carrier update is
-    // not over.
-    var $carrier = $("#delivery_carrier");
-    $carrier.find("input[name='delivery_type']").click(function (ev) {
+    var _onCarrierUpdateAnswer = function(result) {
+        var $amount_delivery = $('#order_delivery span.oe_currency_value');
+        var $amount_untaxed = $('#order_total_untaxed span.oe_currency_value');
+        var $amount_tax = $('#order_total_taxes span.oe_currency_value');
+        if (result.status === true) {
+            $amount_delivery.text(result.new_amount_delivery);
+            $amount_untaxed.text(result.new_amount_untaxed);
+            $amount_tax.text(result.new_amount_tax);
+            var $carrier_badge = $(`#delivery_carrier input[name="delivery_type"][value=${result.carrier_id}] ~ .badge.hidden`);
+            $carrier_badge.children('span').text(result.new_amount_delivery);
+            $carrier_badge.removeClass('hidden');
+            var $compute_badge = $(`#delivery_carrier input[name="delivery_type"][value=${result.carrier_id}] ~ .o_delivery_compute`);
+            $compute_badge.addClass('hidden');
+        }
+        else {
+            console.error(result.error_message);
+        }
+        $pay_button.prop('disabled', false);
+    };
+
+    var _onCarrierClick = function(ev) {
         $pay_button.prop('disabled', true);
         var carrier_id = $(ev.currentTarget).val();
-        window.location.href = '/shop/payment?carrier_id=' + carrier_id;
-    });
+        var values = {'carrier_id': carrier_id};
+        ajax.jsonRpc('/shop/update_carrier', 'call', values)
+          .then(_onCarrierUpdateAnswer);
+    };
 
+    var $carriers = $("#delivery_carrier input[name='delivery_type']");
+    $carriers.click(_onCarrierClick);
+
+    /* Handle stuff */
     $(".oe_website_sale select[name='shipping_id']").on('change', function () {
         var value = $(this).val();
         var $provider_free = $("select[name='country_id']:not(.o_provider_restricted), select[name='state_id']:not(.o_provider_restricted)");
diff --git a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
index 536c21c41a3..40b3d24ef23 100644
--- a/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
+++ b/addons/website_sale_delivery/views/website_sale_delivery_templates.xml
@@ -23,27 +23,37 @@
 
     <template id="payment_delivery" name="Delivery Costs" inherit_id="website_sale.payment">
         <xpath expr="//div[@id='payment_method']" position="before">
-            <div t-if="deliveries" class="col-md-12 row o_website_sale_rightfit" id="delivery_carrier">
-                <div class="col-lg-7 col-sm-8">
-                <h3 title="Delivery price will be updated after choosing a new delivery method">Choose a delivery method</h3>
-                <ul class="list-unstyled">
-                    <li t-foreach="deliveries" t-as="delivery">
-                            <div id="delivery_method">
-                                <label>
-                                    <input t-att-value="delivery.id" type="radio" name="delivery_type"
-                                        t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False"/>
-                                    <abbr t-att-title="delivery.website_description"><span t-field="delivery.name"/></abbr>
-                                    <div t-field="delivery.website_description" class="text-muted"/>
-                                </label>
-                            </div>
-                    </li>
-                </ul>
+            <div t-if="deliveries" class="col-md-12 o_website_sale_rightfit" id="delivery_carrier">
+                <h3 class="mb24">Choose a delivery method</h3>
+                <div class="panel panel-default" id="delivery_method">
+                    <ul class="list-group">
+                    <t t-set="delivery_nb" t-value="len(deliveries)" />
+                    <t t-foreach="deliveries" t-as="delivery">
+                        <li class="list-group-item">
+                            <input t-att-value="delivery.id" t-att-id="'delivery_%i' % delivery.id" type="radio" name="delivery_type" t-att-checked="order.carrier_id and order.carrier_id.id == delivery.id and 'checked' or False" t-att-class="'hidden' if delivery_nb == 1 else ''"/>
+                            <label class="label-optional" t-field="delivery.name" t-att-for="'delivery_%i' % delivery.id"/>
+                            <t t-if="delivery.delivery_type == 'fixed'">
+                                <span t-if="delivery.fixed_price > 0.0" class="badge pull-right"
+                                      t-field="delivery.fixed_price" t-options='{"widget": "monetary", "display_currency": website_sale_order.currency_id}'/>
+                                <span t-else="" class="badge pull-right">Free</span>
+                            </t>
+                            <t t-else="">
+                                <span class="badge pull-right hidden" t-field="delivery.fixed_price" t-options='{"widget": "monetary",
+                                                                                                          "display_currency": website_sale_order.currency_id}'/>
+                                <span class="badge pull-right o_delivery_compute">Select to compute delivery rate</span>
+                            </t>
+                            <t t-if="delivery.website_description">
+                                <div t-field="delivery.website_description" class="text-muted mt8"/>
+                            </t>
+                        </li>
+                    </t>
+                    </ul>
+                </div>
                 <a class="btn-link"
                         groups="base.group_system"
                         t-attf-href="/web#return_label=Website&amp;action=#{delivery_action_id}">
                     <i class="fa fa-arrow-right" aria-hidden="true"></i> Add delivery methods
                 </a>
-                </div>
             </div>
         </xpath>
     </template>