The HTML for the Order Summary – Checkout widget instances on both the Shipping and Promotions tab and the Billing and Payments tab must be modified to support the two order approval-related checkout layouts. You can make these changes using Code view, which is described in Modify a widget or stack template’s HTML in the Using Oracle Commerce Cloud guide.

For the Shipping and Promotions tab

Edit the instance of the Order Summary – Checkout widget that resides on the Shipping and Promotions tab to remove the following code from the widget’s HTML template:

<!-- ko ifnot : (order().approvalRequired()) -->
<div class="paymentoptions hidden-xs">
  <h3 data-bind="widgetLocaleText:'paymentOptionsText'"></h3>
  <div class="row-payments">
    <!-- ko foreach: payment().cards -->
    <span data-bind="css : ($index() % 4) == 0 ? 'row-first' : '' ,
       attr:{id: 'CC-checkoutOrderSummary-payment'+$parents[1].id()+value}">
    <img data-bind="attr:{src: img}" alt=""/>
    </span>
    <!-- /ko -->
  </div>
</div>
<!-- /ko -->
<!-- ko ifnot : (order().showSchedule) -->
<div id="CC-checkoutOrderSummary-placeOrder" class="checkout row">
<button class="cc-button-primary col-xs-12" data-bind="click: handleCreateOrder,
enable: order().enableOrderButton">
<span data-bind="widgetLocaleText:'placeOrderText'"></span></button></div>
<!-- /ko -->
<!-- ko if : (order().showSchedule) -->
<div id="CC-checkoutOrderSummary-placeOrder" class="checkout row">
<button class="cc-button-primary col-xs-12" data-bind="click: handleCreateOrder,
enable: order().enableOrderButton">
<span data-bind="widgetLocaleText:'scheduleOrderText'"></span></button></div>
<!-- /ko -->
<p><span data-bind="widgetLocaleText:'paymentMessage'"></span></p>
<!-- ko if : $data.payment().gateways.paypalGateway.enabled -->
<!-- ko ifnot : (order().approvalRequired()) -->
<!-- ko ifnot : (order().isPaypalVerified()) -->
<div id="CC-checkoutOrderSummary-paypal" class="checkout row">
  <!-- ko if: (order().showSchedule() &&
       !order().paymentDetails().isPaypalEnabledForScheduledOrder()) -->
  <span id="CC-checkoutOrderSummary-paymentAvailablability"
    data-bind="widgetLocaleText: 'paymentMethodNotAvilable'"></span><br>
  <img class="img-responsive center-block" alt="checkoutWithPayPal"
    data-bind="attr: {src: paypalImageSrc}">
  <!-- /ko -->
  <!-- ko ifnot: (order().showSchedule() &&
       !order().paymentDetails().isPaypalEnabledForScheduledOrder()) -->
  <a data-bind="attr : { id: 'CC-checkoutOrderSummary-checkoutWithPaypal'},
    disabled: {condition: cart().items().length == 0,
    click: order().handleCheckoutWithPaypal.bind(order()) }" href="#">
  <img class="img-responsive center-block" alt="checkoutWithPayPal"
    data-bind="attr: {src: paypalImageSrc}">
  </a>
  <!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->

For the Billing and Payments tab

Edit the instance of the Order Summary – Checkout widget that resides on the Billing and Payments tab to replace this portion of the widget’s HTML template:

<button id="cc-shippingOptions-dropDown" class="btn dropdown-toggle col-xs-12"
data-toggle="dropdown" tabindex="0" data-bind="click:
displayShippingMethodsDropdown,disable: !order().isOrderEditable(),
attr: {'aria-label': ''}" style="border-color:#ddd;background-color:white;">

With the following code:

<button id="cc-shippingOptions-dropDown" class="btn dropdown-toggle col-xs-12"
data-toggle="dropdown" tabindex="0" data-bind="click:
displayShippingMethodsDropdown,disable: true, attr: {'aria-label': ''}"
style="border-color:#ddd;background-color:white;">