@stripe/stripe-react-native 0.2.4 → 0.5.0

package/android/build.gradle

@@ -132,7 +132,7 @@ dependencies {
   api 'com.facebook.react:react-native:+'
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
-  implementation 'com.stripe:stripe-android:19.1.+'
+  implementation 'com.stripe:stripe-android:19.3.+'
   implementation 'com.google.android.material:material:1.3.0'
   implementation 'androidx.appcompat:appcompat:1.2.0'
   implementation 'androidx.legacy:legacy-support-v4:1.0.0'

package/android/src/main/java/com/reactnativestripesdk/AuBECSDebitFormView.kt

@@ -2,26 +2,17 @@ package com.reactnativestripesdk
 
 import android.content.res.ColorStateList
 import android.graphics.Color
-import android.text.Editable
-import android.text.TextWatcher
-import android.view.View
-import android.view.ViewGroup
 import android.widget.FrameLayout
 import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.bridge.WritableMap
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
-import com.stripe.android.databinding.CardInputWidgetBinding
 import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.shape.ShapeAppearanceModel
 import com.stripe.android.databinding.BecsDebitWidgetBinding
 import com.stripe.android.model.PaymentMethodCreateParams
 import com.stripe.android.view.BecsDebitWidget
-import com.stripe.android.view.CardInputListener
-import com.stripe.android.view.CardInputWidget
 import com.stripe.android.view.StripeEditText
 
 class AuBECSDebitFormView(private val context: ThemedReactContext) : FrameLayout(context) {
@@ -30,7 +21,7 @@ class AuBECSDebitFormView(private val context: ThemedReactContext) : FrameLayout
   private var formStyle: ReadableMap? = null
 
   fun setCompanyName(name: String?) {
-    becsDebitWidget = BecsDebitWidget(context = context, companyName = name as String);
+    becsDebitWidget = BecsDebitWidget(context = context, companyName = name as String)
 
     setFormStyle(this.formStyle)
     addView(becsDebitWidget)

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

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

package/android/src/main/java/com/reactnativestripesdk/CardChangedEvent.kt

@@ -14,10 +14,6 @@ internal class CardChangedEvent constructor(viewTag: Int, private val cardDetail
     rctEventEmitter.receiveEvent(viewTag, eventName, serializeEventData())
   }
 
-  private fun getValOr(map: MutableMap<String, Any>, key: String, default: String? = null): String? {
-    return if ((map[key] as CharSequence).isNotEmpty()) map[key] as String? else default
-  }
-
   private fun serializeEventData(): WritableMap {
     val eventData = Arguments.createMap()
     eventData.putString("brand", cardDetails["brand"]?.toString())

package/android/src/main/java/com/reactnativestripesdk/{StripeSdkCardView.kt → CardFieldView.kt}

@@ -1,13 +1,11 @@
 package com.reactnativestripesdk
 
-import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.Typeface
+import android.os.Build
 import android.text.Editable
 import android.text.TextWatcher
-import android.view.View
-import android.view.inputmethod.InputMethodManager
 import android.widget.FrameLayout
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
@@ -23,18 +21,15 @@ import com.stripe.android.view.CardInputListener
 import com.stripe.android.view.CardInputWidget
 import com.stripe.android.view.CardValidCallback
 
-
-class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(context) {
-  private var mCardWidget: CardInputWidget
+class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
+  private var mCardWidget: CardInputWidget = CardInputWidget(context)
   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?
+  private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
 
   init {
-    mCardWidget = CardInputWidget(context);
-    mEventDispatcher = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
 
     val binding = CardInputWidgetBinding.bind(mCardWidget)
     binding.container.isFocusable = true
@@ -89,36 +84,45 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
     val fontFamily = getValOr(value, "fontFamily")
     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)
 
     textColor?.let {
-      binding.cardNumberEditText.setTextColor(Color.parseColor(it))
-      binding.cvcEditText.setTextColor(Color.parseColor(it))
-      binding.expiryDateEditText.setTextColor(Color.parseColor(it))
-      binding.postalCodeEditText.setTextColor(Color.parseColor(it))
+      for (editTextBinding in bindings) {
+        editTextBinding.setTextColor(Color.parseColor(it))
+      }
     }
     textErrorColor?.let {
-      binding.cardNumberEditText.setErrorColor(Color.parseColor(it))
-      binding.cvcEditText.setErrorColor(Color.parseColor(it))
-      binding.expiryDateEditText.setErrorColor(Color.parseColor(it))
-      binding.postalCodeEditText.setErrorColor(Color.parseColor(it))
+      for (editTextBinding in bindings) {
+        editTextBinding.setErrorColor(Color.parseColor(it))
+      }
     }
     placeholderColor?.let {
-      binding.cardNumberEditText.setHintTextColor(Color.parseColor(it))
-      binding.cvcEditText.setHintTextColor(Color.parseColor(it))
-      binding.expiryDateEditText.setHintTextColor(Color.parseColor(it))
-      binding.postalCodeEditText.setHintTextColor(Color.parseColor(it))
+      for (editTextBinding in bindings) {
+        editTextBinding.setHintTextColor(Color.parseColor(it))
+      }
     }
     fontSize?.let {
-      binding.cardNumberEditText.textSize = it.toFloat()
-      binding.cvcEditText.textSize = it.toFloat()
-      binding.expiryDateEditText.textSize = it.toFloat()
-      binding.postalCodeEditText.textSize = it.toFloat()
+      for (editTextBinding in bindings) {
+        editTextBinding.textSize = it.toFloat()
+      }
     }
     fontFamily?.let {
-      binding.cardNumberEditText.typeface = Typeface.create(it, Typeface.NORMAL)
-      binding.cvcEditText.typeface = Typeface.create(it, Typeface.NORMAL)
-      binding.expiryDateEditText.typeface = Typeface.create(it, Typeface.NORMAL)
-      binding.postalCodeEditText.typeface = Typeface.create(it, Typeface.NORMAL)
+      for (editTextBinding in bindings) {
+        editTextBinding.typeface = Typeface.create(it, Typeface.NORMAL)
+      }
+    }
+    cursorColor?.let {
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+        val color = Color.parseColor(it)
+        for (editTextBinding in bindings) {
+          editTextBinding.textCursorDrawable?.setTint(color)
+          editTextBinding.textSelectHandle?.setTint(color)
+          editTextBinding.textSelectHandleLeft?.setTint(color)
+          editTextBinding.textSelectHandleRight?.setTint(color)
+          editTextBinding.highlightColor = color
+        }
+      }
     }
 
     mCardWidget.setPadding(40, 0, 40, 0)
@@ -176,7 +180,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
     return cardDetails
   }
 
-  fun onCardChanged() {
+  fun onValidCardChange() {
     mCardWidget.paymentMethodCard?.let {
       cardParams = it
       cardAddress = Address.Builder()
@@ -194,6 +198,10 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       cardDetails["brand"] = null
       cardDetails["last4"] = null
     }
+    sendCardDetailsEvent()
+  }
+
+  private fun sendCardDetailsEvent() {
     mEventDispatcher?.dispatchEvent(
       CardChangedEvent(id, cardDetails, mCardWidget.postalCodeEnabled, cardParams != null, dangerouslyGetFullCardDetails))
   }
@@ -204,7 +212,10 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       cardDetails["validCVC"] = if (invalidFields.contains(CardValidCallback.Fields.Cvc)) "Invalid" else "Valid"
       cardDetails["validExpiryDate"] = if (invalidFields.contains(CardValidCallback.Fields.Expiry)) "Invalid" else "Valid"
       if (isValid) {
-        onCardChanged()
+        onValidCardChange()
+      } else {
+        cardParams = null
+        cardAddress = null
       }
     }
 
@@ -226,14 +237,14 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {}
       override fun afterTextChanged(p0: Editable?) {}
       override fun onTextChanged(var1: CharSequence?, var2: Int, var3: Int, var4: Int) {
-        val splitted = var1.toString().split("/")
-        cardDetails["expiryMonth"] = splitted[0].toIntOrNull()
+        val splitText = var1.toString().split("/")
+        cardDetails["expiryMonth"] = splitText[0].toIntOrNull()
 
-        if (splitted.size == 2) {
+        if (splitText.size == 2) {
           cardDetails["expiryYear"] = var1.toString().split("/")[1].toIntOrNull()
         }
 
-        onCardChanged()
+        sendCardDetailsEvent()
       }
     })
 
@@ -242,7 +253,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       override fun afterTextChanged(p0: Editable?) {}
       override fun onTextChanged(var1: CharSequence?, var2: Int, var3: Int, var4: Int) {
         cardDetails["postalCode"] = var1.toString()
-        onCardChanged()
+        sendCardDetailsEvent()
       }
     })
 
@@ -253,7 +264,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
         if (dangerouslyGetFullCardDetails) {
           cardDetails["number"] = var1.toString().replace(" ", "")
         }
-        onCardChanged()
+        sendCardDetailsEvent()
       }
     })
 
@@ -261,7 +272,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {}
       override fun afterTextChanged(p0: Editable?) {}
       override fun onTextChanged(var1: CharSequence?, var2: Int, var3: Int, var4: Int) {
-        onCardChanged()
+        sendCardDetailsEvent()
       }
     })
   }

package/android/src/main/java/com/reactnativestripesdk/{StripeSdkCardViewManager.kt → CardFieldViewManager.kt}

@@ -5,10 +5,9 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.annotations.ReactProp
 
-class StripeSdkCardViewManager : SimpleViewManager<StripeSdkCardView>() {
+class CardFieldViewManager : SimpleViewManager<CardFieldView>() {
   override fun getName() = "CardField"
 
   private var reactContextRef: ThemedReactContext? = null
@@ -19,7 +18,7 @@ class StripeSdkCardViewManager : SimpleViewManager<StripeSdkCardView>() {
       CardChangedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onCardChange"))
   }
 
-  override fun receiveCommand(root: StripeSdkCardView, commandId: String?, args: ReadableArray?) {
+  override fun receiveCommand(root: CardFieldView, commandId: String?, args: ReadableArray?) {
     when (commandId) {
       "focus" -> root.requestFocusFromJS()
       "blur" -> root.requestBlurFromJS()
@@ -28,33 +27,38 @@ class StripeSdkCardViewManager : SimpleViewManager<StripeSdkCardView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  fun setDangerouslyGetFullCardDetails(view: StripeSdkCardView, dangerouslyGetFullCardDetails: Boolean = false) {
-    view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails);
+  @SuppressWarnings("unused")
+  fun setDangerouslyGetFullCardDetails(view: CardFieldView, dangerouslyGetFullCardDetails: Boolean = false) {
+    view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  fun setPostalCodeEnabled(view: StripeSdkCardView, postalCodeEnabled: Boolean = true) {
-    view.setPostalCodeEnabled(postalCodeEnabled);
+  @SuppressWarnings("unused")
+  fun setPostalCodeEnabled(view: CardFieldView, postalCodeEnabled: Boolean = true) {
+    view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
   @ReactProp(name = "autofocus")
-  fun setAutofocus(view: StripeSdkCardView, autofocus: Boolean = false) {
-    view.setAutofocus(autofocus);
+  @SuppressWarnings("unused")
+  fun setAutofocus(view: CardFieldView, autofocus: Boolean = false) {
+    view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  fun setCardStyle(view: StripeSdkCardView, cardStyle: ReadableMap) {
-    view.setCardStyle(cardStyle);
+  @SuppressWarnings("unused")
+  fun setCardStyle(view: CardFieldView, cardStyle: ReadableMap) {
+    view.setCardStyle(cardStyle)
   }
 
   @ReactProp(name = "placeholder")
-  fun setPlaceHolders(view: StripeSdkCardView, placeholder: ReadableMap) {
-    view.setPlaceHolders(placeholder);
+  @SuppressWarnings("unused")
+  fun setPlaceHolders(view: CardFieldView, placeholder: ReadableMap) {
+    view.setPlaceHolders(placeholder)
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): StripeSdkCardView {
+  override fun createViewInstance(reactContext: ThemedReactContext): CardFieldView {
     val stripeSdkModule: StripeSdkModule? = reactContext.getNativeModule(StripeSdkModule::class.java)
-    val view = StripeSdkCardView(reactContext)
+    val view = CardFieldView(reactContext)
 
     reactContextRef = reactContext
 
@@ -62,7 +66,7 @@ class StripeSdkCardViewManager : SimpleViewManager<StripeSdkCardView>() {
     return view
   }
 
-  override fun onDropViewInstance(view: StripeSdkCardView) {
+  override fun onDropViewInstance(view: CardFieldView) {
     super.onDropViewInstance(view)
 
     val stripeSdkModule: StripeSdkModule? = reactContextRef?.getNativeModule(StripeSdkModule::class.java)

package/android/src/main/java/com/reactnativestripesdk/CardFormView.kt

@@ -17,7 +17,7 @@ import com.stripe.android.model.PaymentMethodCreateParams
 import com.stripe.android.view.CardFormView
 import com.stripe.android.view.CardInputListener
 
-class CardFormView(private val context: ThemedReactContext) : FrameLayout(context) {
+class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
   private var cardForm: CardFormView = CardFormView(context, null, R.style.StripeCardFormView_Borderless)
   private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
@@ -30,7 +30,6 @@ class CardFormView(private val context: ThemedReactContext) : FrameLayout(contex
   init {
     cardFormViewBinding.cardMultilineWidgetContainer.isFocusable = true
     cardFormViewBinding.cardMultilineWidgetContainer.isFocusableInTouchMode = true
-    cardFormViewBinding.cardMultilineWidgetContainer.requestFocus()
 
     addView(cardForm)
     setListeners()
@@ -46,27 +45,28 @@ class CardFormView(private val context: ThemedReactContext) : FrameLayout(contex
     cardFormView.postalCodeContainer.visibility = visibility
   }
 
-  fun setPlaceHolders(value: ReadableMap) {
-    val cardFormView = StripeCardFormViewBinding.bind(cardForm)
-
-    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 {
-//      multilineWidgetBinding.tlCardNumber.hint = it
-    }
-    expirationPlaceholder?.let {
-      multilineWidgetBinding.tlExpiry.hint = it
-    }
-    cvcPlaceholder?.let {
-      multilineWidgetBinding.tlCvc.hint = it
-    }
-    postalCodePlaceholder?.let {
-      cardFormView.postalCodeContainer.hint = it
-    }
-  }
+  // TODO: uncomment when ios-sdk allows for this
+  //  fun setPlaceHolders(value: ReadableMap) {
+  //    val cardFormView = StripeCardFormViewBinding.bind(cardForm)
+  //
+  //    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 {
+  ////      multilineWidgetBinding.tlCardNumber.hint = it
+  //    }
+  //    expirationPlaceholder?.let {
+  //      multilineWidgetBinding.tlExpiry.hint = it
+  //    }
+  //    cvcPlaceholder?.let {
+  //      multilineWidgetBinding.tlCvc.hint = it
+  //    }
+  //    postalCodePlaceholder?.let {
+  //      cardFormView.postalCodeContainer.hint = it
+  //    }
+  //  }
 
   fun setAutofocus(value: Boolean) {
     if (value) {