fix: onBlur callback on CardField (#894)

CHANGELOG.md

@@ -1,5 +1,6 @@
 # CHANGELOG
 
+- [#894](https://github.com/stripe/stripe-react-native/pull/894) Fix: `<CardField />` `onBlur` callback will now be called appropriately on Android
 - [#846](https://github.com/stripe/stripe-react-native/pull/846) Fix: Avoid crashes when `currentActivity` is null
 - [#879](https://github.com/stripe/stripe-react-native/pull/879) Feat: Add support for ACHv2 payments on Android (already existed on iOS).
 - [#879](https://github.com/stripe/stripe-react-native/pull/879) Chore: Upgraded `stripe-android` from v19.3.+ to v20.0.+

android/src/main/java/com/reactnativestripesdk/AuBECSDebitFormViewManager.kt

@@ -15,13 +15,11 @@ class AuBECSDebitFormViewManager : SimpleViewManager<AuBECSDebitFormView>() {
   }
 
   @ReactProp(name = "companyName")
-  @SuppressWarnings("unused")
   fun setCompanyName(view: AuBECSDebitFormView, name: String?) {
     view.setCompanyName(name)
   }
 
   @ReactProp(name = "formStyle")
-  @SuppressWarnings("unused")
   fun setFormStyle(view: AuBECSDebitFormView, style: ReadableMap) {
     view.setFormStyle(style)
   }

android/src/main/java/com/reactnativestripesdk/CardFieldView.kt

@@ -23,18 +23,18 @@ import com.stripe.android.view.CardValidCallback
 
 class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   private var mCardWidget: CardInputWidget = CardInputWidget(context)
+  private val cardInputWidgetBinding = CardInputWidgetBinding.bind(mCardWidget)
   val cardDetails: MutableMap<String, Any?> = mutableMapOf("brand" to "", "last4" to "", "expiryMonth" to null, "expiryYear" to null, "postalCode" to "", "validNumber" to "Unknown", "validCVC" to "Unknown", "validExpiryDate" to "Unknown")
   var cardParams: PaymentMethodCreateParams.Card? = null
   var cardAddress: Address? = null
   private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
+  private var currentFocusedField: String? = null
 
   init {
-
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
-    binding.container.isFocusable = true
-    binding.container.isFocusableInTouchMode = true
-    binding.container.requestFocus()
+    cardInputWidgetBinding.container.isFocusable = true
+    cardInputWidgetBinding.container.isFocusableInTouchMode = true
+    cardInputWidgetBinding.container.requestFocus()
 
     addView(mCardWidget)
     setListeners()
@@ -44,37 +44,37 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
 
   fun setAutofocus(value: Boolean) {
     if (value) {
-      val binding = CardInputWidgetBinding.bind(mCardWidget)
-      binding.cardNumberEditText.requestFocus()
-      binding.cardNumberEditText.showSoftKeyboard()
+      cardInputWidgetBinding.cardNumberEditText.requestFocus()
+      cardInputWidgetBinding.cardNumberEditText.showSoftKeyboard()
     }
   }
 
   fun requestFocusFromJS() {
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
-    binding.cardNumberEditText.requestFocus()
-    binding.cardNumberEditText.showSoftKeyboard()
+    cardInputWidgetBinding.cardNumberEditText.requestFocus()
+    cardInputWidgetBinding.cardNumberEditText.showSoftKeyboard()
   }
 
   fun requestBlurFromJS() {
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
-    binding.cardNumberEditText.hideSoftKeyboard()
-    binding.cardNumberEditText.clearFocus()
-    binding.container.requestFocus()
+    cardInputWidgetBinding.cardNumberEditText.hideSoftKeyboard()
+    cardInputWidgetBinding.cardNumberEditText.clearFocus()
+    cardInputWidgetBinding.container.requestFocus()
   }
 
   fun requestClearFromJS() {
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
-    binding.cardNumberEditText.setText("")
-    binding.cvcEditText.setText("")
-    binding.expiryDateEditText.setText("")
+    cardInputWidgetBinding.cardNumberEditText.setText("")
+    cardInputWidgetBinding.cvcEditText.setText("")
+    cardInputWidgetBinding.expiryDateEditText.setText("")
     if (mCardWidget.postalCodeEnabled) {
-      binding.postalCodeEditText.setText("")
+      cardInputWidgetBinding.postalCodeEditText.setText("")
     }
   }
 
+  private fun onChangeFocus() {
+    mEventDispatcher?.dispatchEvent(
+      CardFocusEvent(id, currentFocusedField))
+  }
+
   fun setCardStyle(value: ReadableMap) {
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
     val borderWidth = getIntOrNull(value, "borderWidth")
     val backgroundColor = getValOr(value, "backgroundColor", null)
     val borderColor = getValOr(value, "borderColor", null)
@@ -85,7 +85,11 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
     val placeholderColor = getValOr(value, "placeholderColor", null)
     val textErrorColor = getValOr(value, "textErrorColor", null)
     val cursorColor = getValOr(value, "cursorColor", null)
-    val bindings = setOf(binding.cardNumberEditText, binding.cvcEditText, binding.expiryDateEditText, binding.postalCodeEditText)
+    val bindings = setOf(
+      cardInputWidgetBinding.cardNumberEditText,
+      cardInputWidgetBinding.cvcEditText,
+      cardInputWidgetBinding.expiryDateEditText,
+      cardInputWidgetBinding.postalCodeEditText)
 
     textColor?.let {
       for (editTextBinding in bindings) {
@@ -148,23 +152,22 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   fun setPlaceHolders(value: ReadableMap) {
-    val binding = CardInputWidgetBinding.bind(mCardWidget)
     val numberPlaceholder = getValOr(value, "number", null)
     val expirationPlaceholder = getValOr(value, "expiration", null)
     val cvcPlaceholder = getValOr(value, "cvc", null)
     val postalCodePlaceholder = getValOr(value, "postalCode", null)
 
     numberPlaceholder?.let {
-      binding.cardNumberEditText.hint = it
+      cardInputWidgetBinding.cardNumberEditText.hint = it
     }
     expirationPlaceholder?.let {
-      binding.expiryDateEditText.hint = it
+      cardInputWidgetBinding.expiryDateEditText.hint = it
     }
     cvcPlaceholder?.let {
       mCardWidget.setCvcLabel(it)
     }
     postalCodePlaceholder?.let {
-      binding.postalCodeEditText.hint = it
+      cardInputWidgetBinding.postalCodeEditText.hint = it
     }
   }
 
@@ -180,7 +183,7 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
     return cardDetails
   }
 
-  fun onValidCardChange() {
+  private fun onValidCardChange() {
     mCardWidget.paymentMethodCard?.let {
       cardParams = it
       cardAddress = Address.Builder()
@@ -207,6 +210,23 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   private fun setListeners() {
+    cardInputWidgetBinding.cardNumberEditText.setOnFocusChangeListener { _, hasFocus ->
+      currentFocusedField = if (hasFocus) CardInputListener.FocusField.CardNumber.name else null
+      onChangeFocus()
+    }
+    cardInputWidgetBinding.expiryDateEditText.setOnFocusChangeListener { _, hasFocus ->
+      currentFocusedField = if (hasFocus) CardInputListener.FocusField.ExpiryDate.name else null
+      onChangeFocus()
+    }
+    cardInputWidgetBinding.cvcEditText.setOnFocusChangeListener { _, hasFocus ->
+      currentFocusedField = if (hasFocus) CardInputListener.FocusField.Cvc.name else null
+      onChangeFocus()
+    }
+    cardInputWidgetBinding.postalCodeEditText.setOnFocusChangeListener { _, hasFocus ->
+      currentFocusedField = if (hasFocus) CardInputListener.FocusField.PostalCode.name else null
+      onChangeFocus()
+    }
+
     mCardWidget.setCardValidCallback { isValid, invalidFields ->
       cardDetails["validNumber"] = if (invalidFields.contains(CardValidCallback.Fields.Number)) "Invalid" else "Valid"
       cardDetails["validCVC"] = if (invalidFields.contains(CardValidCallback.Fields.Cvc)) "Invalid" else "Valid"
@@ -224,13 +244,7 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
       override fun onExpirationComplete() {}
       override fun onCvcComplete() {}
       override fun onPostalCodeComplete() {}
-
-      override fun onFocusChange(focusField: CardInputListener.FocusField) {
-        if (mEventDispatcher != null) {
-          mEventDispatcher?.dispatchEvent(
-            CardFocusEvent(id, focusField.name))
-        }
-      }
+      override fun onFocusChange(focusField: CardInputListener.FocusField) {}
     })
 
     mCardWidget.setExpiryDateTextWatcher(object : TextWatcher {

android/src/main/java/com/reactnativestripesdk/CardFieldViewManager.kt

@@ -27,31 +27,26 @@ class CardFieldViewManager : SimpleViewManager<CardFieldView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  @SuppressWarnings("unused")
   fun setDangerouslyGetFullCardDetails(view: CardFieldView, dangerouslyGetFullCardDetails: Boolean = false) {
     view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  @SuppressWarnings("unused")
   fun setPostalCodeEnabled(view: CardFieldView, postalCodeEnabled: Boolean = true) {
     view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
   @ReactProp(name = "autofocus")
-  @SuppressWarnings("unused")
   fun setAutofocus(view: CardFieldView, autofocus: Boolean = false) {
     view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  @SuppressWarnings("unused")
   fun setCardStyle(view: CardFieldView, cardStyle: ReadableMap) {
     view.setCardStyle(cardStyle)
   }
 
   @ReactProp(name = "placeholder")
-  @SuppressWarnings("unused")
   fun setPlaceHolders(view: CardFieldView, placeholder: ReadableMap) {
     view.setPlaceHolders(placeholder)
   }

android/src/main/java/com/reactnativestripesdk/CardFormViewManager.kt

@@ -27,13 +27,11 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  @SuppressWarnings("unused")
   fun setDangerouslyGetFullCardDetails(view: CardFormView, dangerouslyGetFullCardDetails: Boolean = false) {
     view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  @SuppressWarnings("unused")
   fun setPostalCodeEnabled(view: CardFormView, postalCodeEnabled: Boolean = false) {
     view.setPostalCodeEnabled(postalCodeEnabled)
   }
@@ -44,13 +42,11 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
   // }
 
   @ReactProp(name = "autofocus")
-  @SuppressWarnings("unused")
   fun setAutofocus(view: CardFormView, autofocus: Boolean = false) {
     view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  @SuppressWarnings("unused")
   fun setCardStyle(view: CardFormView, cardStyle: ReadableMap) {
     view.setCardStyle(cardStyle)
   }

android/src/main/java/com/reactnativestripesdk/GooglePayButtonManager.kt

@@ -16,7 +16,6 @@ class GooglePayButtonManager : SimpleViewManager<GooglePayButtonView?>() {
   }
 
   @ReactProp(name = "buttonType")
-  @SuppressWarnings("unused")
   fun buttonType(view: GooglePayButtonView, buttonType: String) {
     view.setType(buttonType)
   }

android/src/main/java/com/reactnativestripesdk/PaymentLauncherFragment.kt

@@ -18,11 +18,10 @@ class PaymentLauncherFragment(
   private val publishableKey: String,
   private val stripeAccountId: String?,
 ) : Fragment() {
-  lateinit var paymentLauncher: PaymentLauncher
-
-  var clientSecret: String? = null
-  var promise: Promise? = null
-  var isPaymentIntent: Boolean = true
+  private lateinit var paymentLauncher: PaymentLauncher
+  private var clientSecret: String? = null
+  private var promise: Promise? = null
+  private var isPaymentIntent: Boolean = true
 
   override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                             savedInstanceState: Bundle?): View {

android/src/main/java/com/reactnativestripesdk/StripeContainerManager.kt

@@ -8,7 +8,6 @@ class StripeContainerManager : ViewGroupManager<StripeContainerView>() {
   override fun getName() = "StripeContainer"
 
   @ReactProp(name = "keyboardShouldPersistTaps")
-  @SuppressWarnings("unused")
   fun setKeyboardShouldPersistTaps(view: StripeContainerView, keyboardShouldPersistTaps: Boolean) {
     view.setKeyboardShouldPersistTaps(keyboardShouldPersistTaps)
   }