Why a new payment gateway for Payment Element? How to switch from Card Element to Payment Element without losing stored credit cards and end up with two Stripe accounts per user?

In the end, I decided not to go with duplicating database entries in user__commerce_remote_id and commerce_payment_method. I saw that each payment_method has field values stored in multiple tables so duplicating them would mean having to deal with database transactions I guess so I went with a different approach.

Instead, I just made it so that payment methods stored under 'stripe' (Card Element) would be suggested even when only Payment Element is enabled. And also that when checking if a remote Stripe account already exists, remote Ids stored under 'stripe' (Card Element) would be used even if only Payment Element is enabled.

Technically this is what I've done:

For payment methods, I have overridden the PaymentMethodStorage so that loadReusable() not only loads payment methods stored for Payment Element but also Card Element.

For remote Stripe customer ids, I have overridden the payment gateway class StripePaymentElement so that getRemoteCustomerId() (inherited from PaymentGatewayBase) first tries to find remote customer id for 'stripe' (Card Element) and only if none is found, then looks for remote ids under 'stripe_payment_element'

Overriding PaymentMethodStorage is done by overriding the 'storage' handler class for entity type PaymentMethod using hook_entity_type_alter:

function my_module_payment_entity_type_alter(array &$entity_types) {
  if (isset($entity_types['commerce_payment_method'])) {
    $commerce_payment_method_entity_type = $entity_types['commerce_payment_method'];
    $commerce_payment_method_entity_type->setHandlerClass('storage', 'Drupal\my_module\MyModulePaymentMethodStorage');
  }
}

Overriding StripePaymentElement is done using hook_commerce_payment_gateway_info_alter that is triggered by PaymentGatewayManager construct.

function my_module_payment_commerce_payment_gateway_info_alter(array &$info) {
  if (isset($info['stripe_payment_element'])) {
    $info['stripe_payment_element']['class'] = MyModuleStripePaymentElement::class;
    $info['stripe_payment_element']['provider'] = 'my_module';
  }
}

Here is what MyModulePaymentMethodStorage looks like:

class MyModulePaymentMethodStorage extends PaymentMethodStorage {

  /**
   * {@inheritdoc}
   */
  public function loadReusable(UserInterface $account, PaymentGatewayInterface $payment_gateway, array $billing_countries = []) {
    $payment_methods_of_enabled_payment_gateway = parent::loadReusable($account, $payment_gateway, $billing_countries);

    /** @var \Drupal\commerce_payment\PaymentGatewayStorageInterface $payment_gateway_storage */
    $payment_gateway_storage = $this->entityTypeManager->getStorage('commerce_payment_gateway');
    /** @var PaymentGatewayInterface $stripe_card_element_payment_gateway */
    $stripe_card_element_payment_gateway = $payment_gateway_storage->load('stripe');
    $payment_methods_of_stripe_card_element = parent::loadReusable($account, $stripe_card_element_payment_gateway, $billing_countries);

    return $payment_methods_of_enabled_payment_gateway + $payment_methods_of_stripe_card_element;
  }
}

Here is what MyModuleStripePaymentElement looks like:

class MyModuleStripePaymentElement extends StripePaymentElement {

  public function getRemoteCustomerId(UserInterface $account) {
    $remote_id = NULL;
    if (!$account->isAnonymous()) {
      $provider = 'stripe' . '|' . $this->getMode();
      /** @var \Drupal\commerce\Plugin\Field\FieldType\RemoteIdFieldItemListInterface $remote_ids */
      $remote_ids = $account->get('commerce_remote_id');
      $remote_id = $remote_ids->getByProvider($provider);
      if (!$remote_id) {
        $remote_id = parent::getRemoteCustomerId($account);
      }
    }
    return $remote_id;
  }

}

Please let me know what you think of it and if you would have done things differently.
And I'm still waiting to know why a separate Payment Gateway has been created for Payment Element...

Just a follow up.
Now that I managed to suggest Card Element stored cards along with Payment Element stored cards, even if only Payment Element is enabled, I noticed that the Card Element code inside Stripe.php is used if I select a Card Element stored card. And code inside StripePaymentElement.php gets used for stored cards created with Payment Element.
Even if this makes sense as a consequence of technical choices, I don't like that one exact same kind of operation is executed through two different codes depending on the way the card was created.
Furthermore, I have noticed the two codes in Stripe.php and StripePaymentElement.php is not exactly the same. The code in StripePaymentElement.php seems to be a better rewrite that does not use old deprecated Charges API code anymore.
So I have decided that I wanted to use the code inside StripePaymentElement even for cards created with Card Element.
For that, I have overridden the PaymentMethod class so that I could override the getPaymentGateway() and getPaymentGatewayId() functions to return Payment Element instead of Card Element.

Here is the override code:

function my_module_payment_entity_type_alter(array &$entity_types) {
  if (isset($entity_types['commerce_payment_method'])) {
    $commerce_payment_method_entity_type = $entity_types['commerce_payment_method'];
    $commerce_payment_method_entity_type->setClass(MyModulePaymentMethod::class);
  }
}

class MyModulePaymentMethod extends PaymentMethod {

  /**
   * {@inheritdoc}
   */
  public function getPaymentGateway() {
    $target_id = $this->get('payment_gateway')->target_id;
    if ($target_id === 'stripe') {
      /** @var \Drupal\commerce_payment\PaymentGatewayStorageInterface $payment_gateway_storage */
      $payment_gateway_storage = $this->entityTypeManager()->getStorage('commerce_payment_gateway');
      /** @var PaymentGatewayInterface $stripe_payment_element_payment_gateway */
      $stripe_payment_element_payment_gateway = $payment_gateway_storage->load('stripe_payment_element');
      return $stripe_payment_element_payment_gateway;
    }
    else {
      return $this->get('payment_gateway')->entity;
    }
  }

  /**
   * {@inheritdoc}
   */
  public function getPaymentGatewayId() {
    $target_id = $this->get('payment_gateway')->target_id;
    if ($target_id === 'stripe') {
      $target_id = 'stripe_payment_element';
    }
    return $target_id;
  }

}

I could be mistaken, but I believe the different "methods" comes from the fact that when this module was written, only card sources were allowed. Then came sources API, and the Paymentintents API, and the maintainers felt that it was best to keep them separate rather than migrate from Cards to Payments.

I would suggest, rather than overriding classes, writing patches for the module to allow for a cleaner migration path into using just Payments API, which would help others using this module as well as the maintainers. Perhaps that can be a target for the 2.x version of the module.