The CardField component does not work as expected in android for co-badged cards

[jorpeicas]

Describe the bug
On iOS all works as expected but on Android we have encountered some unexpected behaviors:

1. When trying to update the card network it only works correctly when changed by having the focus on the card number or card expiration date. If you advance to the CVC field and change the card network it has no effect. Once you have gone through the CVC field even if you go back to the expiration date field or the number field it does not change to the selected network.
   Steps to reproduce the behavior:
   - Enter all the card data (number, expiry date, cvc)
   - Once entered try to change the network.
   This case does not work correctly as no preferred network is sent.
   Part of the response body obtained from the logs:

       "card": {
           "brand": "mastercard",
           "checks": {
           "address_line1_check": null,
           "address_postal_code_check": null,
           "cvc_check": "pass"
           },
           "country": "FR",
           "display_brand": "cartes_bancaires",
           "exp_month": 3,
           "exp_year": 2033,
           "fingerprint": "YrcRlYZ73IBScfoJ",
           "funding": "credit",
           "generated_from": null,
           "last4": "1001",
           "networks": {
           "available": [
               "cartes_bancaires",
               "mastercard"
           ],
           "preferred": null ⚠️
       }

Screen.Recording.2024-10-24.at.14.00.06.mov

---

2. If no network is selected when creating the payment method the default network is not assigned.
   We have CartesBancaires configured by default in the preferredNetworks property of the CardField component but if you register a card with Cartes Bancaires and Visa it is saved with the Visa network and the same for Cartes Bancaires and Mastercard.
   Steps to reproduce the behavior:

• Enter all the card data and without changing the network
• Try to register the payment method.
  In this case the default network is not selected and the preferred network is also set to null. Part of the response body obtained from the logs:

      "card": {
          "brand": "mastercard",
          "checks": {
          "address_line1_check": null,
          "address_postal_code_check": null,
          "cvc_check": "pass"
          },
          "country": "FR",
          "display_brand": "cartes_bancaires",
          "exp_month": 3,
          "exp_year": 2033,
          "fingerprint": "YrcRlYZ73IBScfoJ",
          "funding": "credit",
          "generated_from": null,
          "last4": "1001",
          "networks": {
          "available": [
              "cartes_bancaires",
              "mastercard"
          ],
          "preferred": null ⚠️
      }

---

3. In dark mode it does not display correctly:

• The generic card icon is not visible when entering the card data and makes the network selection process unintuitive.
• When the drop-down is opened, the background and color of the text are similar, which makes the name of the networks difficult to read and only the card icons are correctly displayed.

Steps to reproduce the behavior:

• Activate dark mode on the device
• Insert a co-badged card (5555 5525 0000 1001)
• Open the dropdown to select the appropriate network

---

4. If the card number is not correct, the error style is not applied to the input.
   In the CardField component we pass an object with the style in the cardStyle property but the colour we have defined in textErrorColor is not applied.
   

Steps to reproduce the behavior:

• Introduce a wrong card number

---

Expected behavior
The card must be registered with the network selected in the drop-down menu or with the network configured as default.

Smartphone:

• Device: Samsung Galaxy S22, Google Pixel 7 and Google Pixel 8 PRO (emulated)
• OS: Android 13, Android 14, Android 15
• Version 0.39.0

Additional context
It works correctly when the card number is entered and the network is selected from the number or expiration date field. In this case the operation is as expected and the network selected by the user is saved.
Part of the response body obtained from the logs:

          "card": {
              "brand": "mastercard",
              "checks": {
              "address_line1_check": null,
              "address_postal_code_check": null,
              "cvc_check": "pass"
              },
              "country": "FR",
              "display_brand": "cartes_bancaires",
              "exp_month": 3,
              "exp_year": 2033,
              "fingerprint": "YrcRlYZ73IBScfoJ",
              "funding": "credit",
              "generated_from": null,
              "last4": "1001",
              "networks": {
              "available": [
                  "cartes_bancaires",
                  "mastercard"
              ],
              "preferred": "cartes_bancaires" ✅
          }