Loki Checkout Billing First
Some scenarios require the billing step to come first and then the shipping step to come second (being the last checkout). The Loki Checkout Billing First module allows you to do this easily.
On an architectural level, this module simply moves the right blocks in the right positions using the XML layout. Next, the module changes a couple of innerworkings of the checkout: For instance, the Magento core offers a feature to re-use the shipping address as the billing address. However, this feature simply needs to be swapped, so that the billing address is used as shipping address.
Watch the video
Caveat: Not all PSP methods support this
There is an important caveat here to take note of: A lot of the payment providers assume that the billing step is the last step in the checkout. Especially, PSPs that are integrated via JavaScript offer their own "web components" with fields for details like credit card and so on. If these fields retain state (as in: the PSP API remembers the value entered in those fields), you could just redirect to another page, come back, redirect to the PSP portal and it works. If it does not retain state though, you might be loading the shipping step (hiding the billing step by removing it from the DOM) at which point all entered details in the PSP form are lost. This has little to do with the Loki Checkout, Magento or the Alpine JavaScript framework, but everything with the PSP architecture.
Simply put: It depends on the PSP on whether this is actually is working. The LokiCheckout BillingFirst module works. The rest of the checkout architecture (which is in your hands as an implementation partner) determines if it really is going to work. For example, the Mollie PSP of our demo works fine if only the payment method icon is displayed and a redirect to the Mollie portal is given. It does not work if Mollie Payment Components (like with creditcard) is shown in the checkout.
Make sure the watch the video as well for an explanation.