[BUG] CardInputWidget - Expiry Date not always formatted properly

[sandyscoffable]

Summary

When entering an expiry date, the expiry date isn't always formatted with a /, especially if entering the information quickly

Code to reproduce

Layout:

<com.stripe.android.view.CardInputWidget
    android:id="@+id/cardInputWidget"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginVertical="6dp"
    android:layout_marginHorizontal="10dp"/>

Fragment code:

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val inflatedFragmentView = inflater.inflate(R.layout.fragment_....., container, false)

        val cardInputWidget =
            inflatedFragmentView.findViewById<View>(R.id.cardInputWidget) as CardInputWidget

        cardInputWidget.postalCodeEnabled = false

        cardInputWidget.setCardValidCallback { isValid, _ ->
            if (isValid) {
                cardInputWidget.paymentMethodCard?.let { onValidCardEntered(it) }
            }
        }

       ...

        return inflatedFragmentView
    }

Android version

Android 12

Impacted devices

Physical device: Samsung Galaxy A71

Installation method

Gradle dependency

Dependency Versions

kotlin: 1.7.10 stripe-android: 20.11.0 Android Gradle Plugin: 7.2.1 Gradle: 7.3.3

SDK classes

CardInputWidget

Video

https://user-images.githubusercontent.com/20515901/189313304-cfcd72cd-e87f-430c-a5e5-e18cf75b5c23.mp4

[tillh-stripe]

Hi Sandy 👋 Thanks for reporting this. I have a draft pull request up to make this work correctly. Can you do the following in your app to test it and confirm that the input formatting works correctly now?

// 1. Add Jitpack in your root build.gradle:
allprojects {
  repositories {
    // ...
    maven { url 'https://jitpack.io' }
  }
}

// 2. Temporarily replace the stripe-android dependency with this one:
implementation('com.github.stripe:stripe-android:tillh~5539-expiry-date-field-formatting-SNAPSHOT') {
  exclude group: 'com.github.stripe.stripe-android', module: 'stripecardscan-tflite'
}

If everything looks good, let me know and I’ll include this fix in the next release. If not, I’m happy to investigate further.

[sandyscoffable]

Sorry, I've just noticed your message today (I don't think I got a notification - thanks GH!) ... I'll see if I get some time today to try this out.

[sandyscoffable]

Ok, for some reason it's not liking that import. It says read timeout ... private repo?

[sandyscoffable]

Caused by: org.gradle.internal.resolve.ModuleVersionResolveException: Could not resolve com.github.stripe:stripe-android:tillh~5539-expiry-date-field-formatting-SNAPSHOT.

...

Caused by: java.net.SocketTimeoutException: Read timed out

I already have jitpack defined for something else, although it's public.

[sandyscoffable]

Ok, I also had

buildscript {
  repositories {
    maven { url 'https://jitpack.io' }
  }
}

... commenting that out has resolved the issue I think (sorry)

[sandyscoffable]

Ok, I've managed to manually test it now, and I can no longer replicate the buggy behaviour.

So, 👍 👍 for your PR.

[tillh-stripe]

Perfect, thanks for confirming 🙏 I’ll have the fix included in our next release.