diff --git a/CHANGELOG.md b/CHANGELOG.md index be23fd6e2..8c315ff84 100644 --- 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 index 20e792c33..7788a4688 100644 --- 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 index 45ed2413e..d2e516d54 100644 --- 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', };