Confusion with payment processes

[djkato]

Hello, I'm trying to build a payment app, and found that the docs might be contradicting themselves, or don't explain the differences between "Payment flow" and "Transaction flow".
I want to display the payment methods my app provides in the storefront instead of just showing the app, so for example show "Card", "Bank transfer" etc instead of just "Stripe" or "simple-payment-gateway". To do this, Timur from discord recommended using the PAYMENT_LIST_GATEWAYS webhook, so my app can list methods my app provides in format app:<app-id>:<method>. This looked appealing, so I tried it, but it doesn't work, as from reading the docs I understand this is a soon to be deprecated payment flow using checkoutPaymentCreate instead of transactions.
I set my app up for that webhook and got:

{
  "id": "Q2hlY2tvdXQ6ZDUwZGQ1OTAtZThhYS00NjAyLWFjYTEtZTU5YTNiZDkwZGM2",
   "availablePaymentGateways": [
    {
      "name": "Dobierka",
      "id": "app:simple-payment-gateway:cod",
      "config": []
    },
    {
      "name": "Hotovosť",
      "id": "app:simple-payment-gateway:cash",
      "config": []
    },
    {
      "name": "Bankový prevod",
      "id": "app:simple-payment-gateway:transfer",
      "config": []
    },
    {
      "name": "simple-payment-gateway",
      "id": "simple-payment-gateway",
      "config": []
    }
  ]
}

using any of the methods provided by simple-payment-gateway like:

mutation transactionInitialize($checkout_id: ID!, $gateway_id: String!, $data: JSON) {
  transactionInitialize(
    id: $checkout_id
    paymentGateway: {id: $gateway_id, data: $data}
  ) {
    transaction {
      id
    }
    errors {
      field
      message
      code
    }
  }
}

{
  "checkout_id": "Q2hlY2tvdXQ6ZDUwZGQ1OTAtZThhYS00NjAyLWFjYTEtZTU5YTNiZDkwZGM2",
  "gateway_id": "app:simple-payment-gateway:transfer"
}

I received:

{
  "data": {
    "transactionInitialize": {
      "transaction": null,
      "errors": [
        {
          "field": "paymentGateway",
          "message": "App with provided identifier not found.",
          "code": "NOT_FOUND"
        }
      ]
    }
  }
}

Meaning these seem to be two different flows to handle checkouts.

you can create multiple payment apps, but list them differently using webhook https://docs.saleor.io/docs/3.x/developer/extending/webhooks/synchronous-events/payment#listing-all-available-payment-gateways

https://docs.saleor.io/docs/3.x/developer/checkout/finalizing#finalizing-checkout-with-saleors-payment-gateways says "payment plugins" are being deprecated, and https://docs.saleor.io/docs/3.x/developer/extending/webhooks/synchronous-events/payment doesn't.

The only way to display available payment methods inside the storefront using the "Transaction flow" from what I see is to fiddle with the data field on transactionInitialize, and then extract those in my storefront manually, making this a volatile process because of untyped json.

Assuming I did something wrong, how would I even work with the provided mix of gateways? I can see both the main app and it's payment methods, and would have to manually filter through them somehow, which will make it feel like a workaround, and not the intended way to use this.

How is then meant to be done? Do I just have to show the app name and redirect the user to the payment app, or just assume it's there, hardcode it's payment methods ahead of time and pass the method around in data?

This part of the docs is lacking to me, I would appreciate something to clear this up.