The “Payment Information” checkout pane is missing a label and a wrapper for the payment method

I agree that this is a bit too inflexible. At least it should have a wrapping class so it can be picked up by CSS.
Even better this could be run through a twig template before.

Any yes, having the payment method above the address is really confusing, especially because the style can not be changed currently.

@thomas.frobieter, not sure what version of commerce you are using, but right now those sections are shown like this:

Could you specify the commerce version?

@thomas.frobieter: In the case of PayPal you don't have a payment method to render, so we fallback to rendering the payment gateway display label, so this is the reason for the difference. If you were using a different payment gateway where tokenization would happen in checkout, it'd look more like the screenshot from @tbkot.

    $payment_method = $this->order->get('payment_method')->entity;
    if ($payment_method) {
      $view_builder = $this->entityTypeManager->getViewBuilder('commerce_payment_method');
      $summary = $view_builder->view($payment_method, 'default');
    }
    else {
      $summary = [
        'payment_gateway' => [
          '#markup' => $payment_gateway->getPlugin()->getDisplayLabel(),
        ],
      ];
      if ($billing_profile) {
        $view_builder = $this->entityTypeManager->getViewBuilder('profile');
        $summary['profile'] = $view_builder->view($billing_profile, 'default');
      }
    }

Maybe it might make sense to at least wrap the summary and its parts somehow, e.g. running it through a twig template? (In Commerce)
That might at least mitigate this result and would allow you to target the element by classes?

What do you think @jsacksick?

@thomas.frobieter I was a bit confused by the first screenshot as it looks more like an order view than a checkout, and my screenshot is from the order view. Unfortunately, there is no way to modify the view on checkout without updates in the Commerce module or in the theme. The fastest way you could meet your needs is by creating/updating the commerce-payment-method.html.twig template in your theme and reorder elements.

I've created an MR with changes in the templates and put the address before the payment method label. View mode in the PaymentInformation pane is changed to not affect other places where those templates may be used.

Thanks @tbkot that makes sense! I left a comment with a question / suggestion which would make this even more flexible for theming.
What do you think?

@jsacksick what's your opinion on #13 and #14?
Maybe we can then fix this soon.

I'm not sure the template helps with the reported issue? Also, where is the template coming from?

For example, the default commerce-payment-method.html.twig template that already exists in core uses <div> tags and not ><span> so we should at least be consistent?

@anybody:
Regarding:

Shouldn't this also better run though a twig template instead of #plain_text?
Or alternatively run the whole summary through a twig template?

I guess we could, but in this scenario (the one reported), there is only a payment gateway set, no payment method so not much room for customization (besides maybe adding wrappers and what not).

The only reason for using <span> is to keep all information inline.
Pane with <span>

Pane with <div>

It is only a matter of taste what tag to use. I like <div> more, but don't like the new line started with brackets

Thanks @tbkot - I'd personally vote for the div then, to keep things like they are, but I think span is also fine, we should just do it.

My personal preference would be the template, because it gives flexibility and follows the standard of not doing such things in code and let the theme developer access things easily. We know the pain of not having this flexibility from Drupal 7 and it was good to get away from that.

But in the end I think, just decide and let's do it, it will be an improvement anyway :)
So how should we finish this?