@stripe/stripe-react-native 0.4.0 → 0.7.0

package/android/build.gradle

@@ -126,15 +126,17 @@ repositories {
 }
 
 def kotlin_version = getExtOrDefault('kotlinVersion')
+def stripe_version = getExtOrDefault('stripeVersion')
 
 dependencies {
   // noinspection GradleDynamicVersion
   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.2.+'
+  implementation "com.stripe:stripe-android:$stripe_version"
+  implementation "com.stripe:connections:$stripe_version"
   implementation 'com.google.android.material:material:1.3.0'
-  implementation 'androidx.appcompat:appcompat:1.2.0'
+  implementation 'androidx.appcompat:appcompat:1.4.1'
   implementation 'androidx.legacy:legacy-support-v4:1.0.0'
   implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.0'
 }

package/android/gradle.properties

@@ -1 +1,2 @@
 StripeSdk_kotlinVersion=1.5.10
+StripeSdk_stripeVersion=20.1.+

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

@@ -16,12 +16,12 @@ class AuBECSDebitFormViewManager : SimpleViewManager<AuBECSDebitFormView>() {
 
   @ReactProp(name = "companyName")
   fun setCompanyName(view: AuBECSDebitFormView, name: String?) {
-    view.setCompanyName(name);
+    view.setCompanyName(name)
   }
 
   @ReactProp(name = "formStyle")
   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}

@@ -21,23 +21,20 @@ 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)
+  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?
+  private var mEventDispatcher: EventDispatcher? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
+  private var currentFocusedField: String? = null
 
   init {
-    mCardWidget = CardInputWidget(context);
-    mEventDispatcher = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
-
-    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()
@@ -47,37 +44,37 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
 
   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)
@@ -88,7 +85,11 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
     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) {
@@ -151,23 +152,22 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
   }
 
   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
     }
   }
 
@@ -183,7 +183,7 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
     return cardDetails
   }
 
-  fun onValidCardChange() {
+  private fun onValidCardChange() {
     mCardWidget.paymentMethodCard?.let {
       cardParams = it
       cardAddress = Address.Builder()
@@ -210,6 +210,23 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
   }
 
   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"
@@ -227,23 +244,17 @@ class StripeSdkCardView(private val context: ThemedReactContext) : FrameLayout(c
       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 {
       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()
         }
 

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,33 @@ class StripeSdkCardViewManager : SimpleViewManager<StripeSdkCardView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  fun setDangerouslyGetFullCardDetails(view: StripeSdkCardView, dangerouslyGetFullCardDetails: Boolean = false) {
-    view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails);
+  fun setDangerouslyGetFullCardDetails(view: CardFieldView, dangerouslyGetFullCardDetails: Boolean = false) {
+    view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  fun setPostalCodeEnabled(view: StripeSdkCardView, postalCodeEnabled: Boolean = true) {
-    view.setPostalCodeEnabled(postalCodeEnabled);
+  fun setPostalCodeEnabled(view: CardFieldView, postalCodeEnabled: Boolean = true) {
+    view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
   @ReactProp(name = "autofocus")
-  fun setAutofocus(view: StripeSdkCardView, autofocus: Boolean = false) {
-    view.setAutofocus(autofocus);
+  fun setAutofocus(view: CardFieldView, autofocus: Boolean = false) {
+    view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  fun setCardStyle(view: StripeSdkCardView, cardStyle: ReadableMap) {
-    view.setCardStyle(cardStyle);
+  fun setCardStyle(view: CardFieldView, cardStyle: ReadableMap) {
+    view.setCardStyle(cardStyle)
   }
 
   @ReactProp(name = "placeholder")
-  fun setPlaceHolders(view: StripeSdkCardView, placeholder: ReadableMap) {
-    view.setPlaceHolders(placeholder);
+  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 +61,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)