fix: set cardbrand tint color for CardField (#851)

stripe · Jun 1, 2022 · 280ed67 · 280ed67
1 parent 0ab5bfc
commit 280ed67
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 - Fixed cases where Android apps would crash with the error: `Unable to instantiate fragment com.reactnativestripesdk.PaymentLauncherFragment`. [#965](https://github.com/stripe/stripe-react-native/pull/965)
 - Fixed `appearance.shapes.shadow.offset` and `appearance.primaryButton.shapes.shadow.offset` not applying the y-coordinate in the correct direction. [#962](https://github.com/stripe/stripe-react-native/pull/962)
+- The card brand tint color is now correctly set in the `CardField` component on Android via the `cardStyle.textColor` prop. [#851](https://github.com/stripe/stripe-react-native/pull/851)
 
 ## 0.11.0
 

diff --git a/android/src/main/java/com/reactnativestripesdk/CardFieldView.kt b/android/src/main/java/com/reactnativestripesdk/CardFieldView.kt
@@ -6,6 +6,7 @@ import android.graphics.Typeface
 import android.os.Build
 import android.text.Editable
 import android.text.TextWatcher
+import android.util.Log
 import android.widget.FrameLayout
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
@@ -21,6 +22,7 @@ import com.stripe.android.view.CardInputListener
 import com.stripe.android.view.CardInputWidget
 import com.stripe.android.view.CardValidCallback
 import com.stripe.android.view.StripeEditText
+import java.lang.Exception
 
 class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   private var mCardWidget: CardInputWidget = CardInputWidget(context)
@@ -90,7 +92,8 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
       cardInputWidgetBinding.cardNumberEditText,
       cardInputWidgetBinding.cvcEditText,
       cardInputWidgetBinding.expiryDateEditText,
-      cardInputWidgetBinding.postalCodeEditText)
+      cardInputWidgetBinding.postalCodeEditText
+    )
 
     textColor?.let {
       for (editTextBinding in bindings) {
@@ -106,6 +109,7 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
       for (editTextBinding in bindings) {
         editTextBinding.setHintTextColor(Color.parseColor(it))
       }
+      setCardBrandTint(Color.parseColor(it))
     }
     fontSize?.let {
       for (editTextBinding in bindings) {
@@ -152,6 +156,19 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
     }
   }
 
+  private fun setCardBrandTint(color: Int) {
+    try {
+      cardInputWidgetBinding.cardBrandView::class.java.getDeclaredField("tintColorInt").let { internalTintColor ->
+        internalTintColor.isAccessible = true
+        internalTintColor.set(cardInputWidgetBinding.cardBrandView, color)
+      }
+    } catch (e: Exception) {
+      Log.e(
+        "StripeReactNative",
+        "Unable to set card brand tint color: " + e.message)
+    }
+  }
+
   fun setPlaceHolders(value: ReadableMap) {
     val numberPlaceholder = getValOr(value, "number", null)
     val expirationPlaceholder = getValOr(value, "expiration", null)

diff --git a/example/src/screens/WebhookPaymentScreen.tsx b/example/src/screens/WebhookPaymentScreen.tsx
@@ -151,4 +151,5 @@ const inputStyles: CardFieldInput.Styles = {
   borderRadius: 8,
   fontSize: 14,
   placeholderColor: '#A020F0',
+  textColor: '#0000ff',
 };