Magento 2 : Place Billing Address Above Payments Methods in Checkout

Starting from Magento 2.1.4 release, the checkout configuration has additional Display Billing Address On option (Stores -> Configuration -> Checkout -> Checkout Options). It has two possible values:

• Payment Method - billing address is displayed per payment method

• Payment Page - billing address is displayed above payment methods

The second option should solve your problem without any changes in the code base. Also, it might be useful for some methods like PayPal Express Checkout and allows to set billing address different to shipping.

I found it myself. Here is the solution

We have to override the payment.html in the checkout module. Copy this file;

\magento\module-checkout\view\frontend\web\template\payment.html 

and place it in your custom theme (we have to create a custom theme for this) with the following structure;

\your-theme\Magento_Checkout\web\template\payment.html

In this file we place

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

just underneath the beforeMethods Like this:

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

Delete your caches in var/view_processed/ and the contents inside pub/static/frontend/.

Do a php bin/magento setup:static-content:deploy in your root and after that a php bin/magento cache:flush

The checked answer might work but is not correct itself. You can't just move the place of the methods. Instead you must move the form itself to beforeMethods.

See https://magento.stackexchange.com/a/170732/42007 You need to create a plugin like in that answer but instead of moving the billing form to the shipping step you just need to move it from the afterMethods to beforeMethods of the billing-step. Something like this:

$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['beforeMethods']['children']['billing-address-form'] = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form'];

unset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['afterMethods']['children']['billing-address-form']);

return $jsLayout;