Hjdcti

I want to show billing addresses at last of payment step only 1 time instead of showing for each method. Now the billing addresses are in payment method container. I have checked there is code in form template of each payment method.

<div class="payment-method-billing-address">
 <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 </div>

Which is used to show billing address. I have tried to put it on payment.html without $parent but its not work.

There is a configuration value for this under Stores->Configuration->Sales->Checkout->Checkout Options->Display Billing Address On

Change the setting from Payment Method to Payment Page. The result will be:

if you want to do it through code.

vendormagentomodule-checkoutviewfrontendwebtemplatepayment.html

<li id="payment" role="presentation" class="checkout-payment-method col-12 col-sm-12 col-md-7 col-lg-4 offset-lg-3 billing-sec" data-bind="fadeVisible: isVisible">
<div id="checkout-step-payment"
 class="step-content"
 data-role="content"
 role="tabpanel"
 aria-hidden="false">
 <!-- ko if: (quoteIsVirtual) -->
 <!-- ko foreach: getRegion('customer-email') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 <!--/ko-->
 <form id="co-payment-form" class="form payments" novalidate="novalidate">
 <input data-bind='attr: value: getFormKey()' type="hidden" name="form_key"/>
 <fieldset class="fieldset">
 <legend class="legend">
 <span data-bind="i18n: 'Payment Information'"></span>
 </legend><br />
 <!-- ko foreach: getRegion('beforeMethods') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
 <!-- ko foreach: getRegion('payment-methods-list') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 </div>
 <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
 <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
 </div>
 <!-- ko foreach: getRegion('afterMethods') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 </fieldset>
 </form>
</div>

remove this KO code

<!-- ko foreach: getRegion('afterMethods') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->

and place it after

<legend class="legend">
 <span data-bind="i18n: 'Payment Information'"></span>
 </legend><br />

so, you new code should be like this,

<li id="payment" role="presentation" class="checkout-payment-method col-12 col-sm-12 col-md-7 col-lg-4 offset-lg-3 billing-sec" data-bind="fadeVisible: isVisible">
<div id="checkout-step-payment"
 class="step-content"
 data-role="content"
 role="tabpanel"
 aria-hidden="false">
 <!-- ko if: (quoteIsVirtual) -->
 <!-- ko foreach: getRegion('customer-email') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!--/ko-->
 <!--/ko-->
 <form id="co-payment-form" class="form payments" novalidate="novalidate">
 <input data-bind='attr: value: getFormKey()' type="hidden" name="form_key"/>
 <fieldset class="fieldset">
 <legend class="legend">
 <span data-bind="i18n: 'Payment Information'"></span>
 </legend><br />
 <!-- ko foreach: getRegion('beforeMethods') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->

 <!-- ko foreach: getRegion('afterMethods') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->

 <div id="checkout-payment-method-load" class="opc-payment" data-bind="visible: isPaymentMethodsAvailable">
 <!-- ko foreach: getRegion('payment-methods-list') -->
 <!-- ko template: getTemplate() --><!-- /ko -->
 <!-- /ko -->
 </div>
 <div class="no-quotes-block" data-bind="visible: isPaymentMethodsAvailable() == false">
 <!-- ko i18n: 'No Payment method available.'--><!-- /ko -->
 </div>

 </fieldset>
 </form>
</div>

deploy static content and
Remove cache

Result: http://prntscr.com/nd1fs6