stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.28k stars 263 forks source link

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

Open jorpeicas opened 4 weeks ago

jorpeicas commented 4 weeks ago

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 ⚠️
      }

https://github.com/user-attachments/assets/db9ffde1-91bf-4666-8dad-0363ebd27ce1


  1. 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 ⚠️
      }

  1. 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. Screenshot 2024-10-24 at 13 59 08

Steps to reproduce the behavior:


  1. 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. image

Steps to reproduce the behavior:


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

Smartphone:

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" ✅
          }