@stripe/stripe-react-native 0.44.0 → 0.46.0

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

@@ -65,8 +65,8 @@ class CardFormView(
     cardFormViewBinding.postalCodeContainer.visibility = visibility
   }
 
-  fun setDefaultValues(defaults: ReadableMap) {
-    setCountry(defaults.getString("countryCode"))
+  fun setDefaultValues(defaults: ReadableMap?) {
+    setCountry(defaults?.getString("countryCode"))
   }
 
   fun setDisabled(isDisabled: Boolean) {
@@ -86,7 +86,7 @@ class CardFormView(
     setPostalCodeFilter()
   }
 
-  fun setPlaceHolders(value: ReadableMap) {
+  fun setPlaceHolders(value: ReadableMap?) {
     val numberPlaceholder = getValOr(value, "number", null)
     val expirationPlaceholder = getValOr(value, "expiration", null)
     val cvcPlaceholder = getValOr(value, "cvc", null)
@@ -136,11 +136,11 @@ class CardFormView(
   private fun onChangeFocus() {
     UIManagerHelper
       .getEventDispatcherForReactTag(context, id)
-      ?.dispatchEvent(CardFocusEvent(context.surfaceId, id, currentFocusedField))
+      ?.dispatchEvent(CardFocusChangeEvent(context.surfaceId, id, currentFocusedField))
   }
 
   @SuppressLint("RestrictedApi")
-  fun setCardStyle(value: ReadableMap) {
+  fun setCardStyle(value: ReadableMap?) {
     val backgroundColor = getValOr(value, "backgroundColor", null)
     val textColor = getValOr(value, "textColor", null)
     val borderWidth = getIntOrNull(value, "borderWidth")

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

@@ -1,86 +1,82 @@
 package com.reactnativestripesdk
 
+import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.CardFormManagerDelegate
+import com.facebook.react.viewmanagers.CardFormManagerInterface
+import com.reactnativestripesdk.utils.asMapOrNull
 
 @ReactModule(name = CardFormViewManager.REACT_CLASS)
-class CardFormViewManager : SimpleViewManager<CardFormView>() {
+class CardFormViewManager :
+  SimpleViewManager<CardFormView>(),
+  CardFormManagerInterface<CardFormView> {
+  private val delegate = CardFormManagerDelegate(this)
+  private var reactContextRef: ThemedReactContext? = null
+
   override fun getName() = REACT_CLASS
 
-  private var reactContextRef: ThemedReactContext? = null
+  override fun getDelegate() = delegate
 
   override fun getExportedCustomDirectEventTypeConstants() =
     mutableMapOf(
-      CardFocusEvent.EVENT_NAME to mutableMapOf("registrationName" to "onFocusChange"),
+      CardFocusChangeEvent.EVENT_NAME to mutableMapOf("registrationName" to "onFocusChange"),
       CardFormCompleteEvent.EVENT_NAME to mutableMapOf("registrationName" to "onFormComplete"),
     )
 
-  override fun receiveCommand(
-    root: CardFormView,
-    commandId: String?,
-    args: ReadableArray?,
-  ) {
-    when (commandId) {
-      "focus" -> root.requestFocusFromJS()
-      "blur" -> root.requestBlurFromJS()
-      "clear" -> root.requestClearFromJS()
-    }
-  }
-
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  fun setDangerouslyGetFullCardDetails(
+  override fun setDangerouslyGetFullCardDetails(
     view: CardFormView,
-    dangerouslyGetFullCardDetails: Boolean = false,
+    dangerouslyGetFullCardDetails: Boolean,
   ) {
     view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  fun setPostalCodeEnabled(
+  override fun setPostalCodeEnabled(
     view: CardFormView,
-    postalCodeEnabled: Boolean = false,
+    postalCodeEnabled: Boolean,
   ) {
     view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
   @ReactProp(name = "placeholders")
-  fun setPlaceHolders(
+  override fun setPlaceholders(
     view: CardFormView,
-    placeholders: ReadableMap,
+    placeholders: Dynamic,
   ) {
-    view.setPlaceHolders(placeholders)
+    view.setPlaceHolders(placeholders.asMapOrNull())
   }
 
   @ReactProp(name = "autofocus")
-  fun setAutofocus(
+  override fun setAutofocus(
     view: CardFormView,
-    autofocus: Boolean = false,
+    autofocus: Boolean,
   ) {
     view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  fun setCardStyle(
+  override fun setCardStyle(
     view: CardFormView,
-    cardStyle: ReadableMap,
+    cardStyle: Dynamic,
   ) {
-    view.setCardStyle(cardStyle)
+    view.setCardStyle(cardStyle.asMapOrNull())
   }
 
   @ReactProp(name = "defaultValues")
-  fun setDefaultValues(
+  override fun setDefaultValues(
     view: CardFormView,
-    defaults: ReadableMap,
+    defaults: Dynamic,
   ) {
-    view.setDefaultValues(defaults)
+    view.setDefaultValues(defaults.asMapOrNull())
   }
 
   @ReactProp(name = "disabled")
-  fun setDisabled(
+  override fun setDisabled(
     view: CardFormView,
     isDisabled: Boolean,
   ) {
@@ -88,7 +84,7 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
   }
 
   @ReactProp(name = "preferredNetworks")
-  fun setPreferredNetworks(
+  override fun setPreferredNetworks(
     view: CardFormView,
     preferredNetworks: ReadableArray?,
   ) {
@@ -116,6 +112,16 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
     reactContextRef = null
   }
 
+  // Native commands
+
+  override fun blur(view: CardFormView) {
+    view.requestBlurFromJS()
+  }
+
+  override fun focus(view: CardFormView) {
+    view.requestFocusFromJS()
+  }
+
   companion object {
     const val REACT_CLASS = "CardForm"
   }

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

@@ -1,14 +1,9 @@
 package com.reactnativestripesdk
 
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
-import androidx.fragment.app.Fragment
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.reactnativestripesdk.utils.ErrorType
+import com.reactnativestripesdk.utils.StripeFragment
 import com.reactnativestripesdk.utils.createError
 import com.reactnativestripesdk.utils.createResult
 import com.reactnativestripesdk.utils.mapFromFinancialConnectionsEvent
@@ -23,44 +18,26 @@ import com.stripe.android.payments.bankaccount.CollectBankAccountConfiguration
 import com.stripe.android.payments.bankaccount.CollectBankAccountLauncher
 import com.stripe.android.payments.bankaccount.navigation.CollectBankAccountResult
 
-class CollectBankAccountLauncherFragment(
-  private val context: ReactApplicationContext,
-  private val publishableKey: String,
-  private val stripeAccountId: String?,
-  private val clientSecret: String,
-  private val isPaymentIntent: Boolean,
-  private val collectParams: CollectBankAccountConfiguration.USBankAccount,
-  private val promise: Promise,
-) : Fragment() {
+class CollectBankAccountLauncherFragment : StripeFragment() {
+  private lateinit var context: ReactApplicationContext
+  private lateinit var publishableKey: String
+  private var stripeAccountId: String? = null
+  private lateinit var clientSecret: String
+  private var isPaymentIntent: Boolean = false
+  private lateinit var collectParams: CollectBankAccountConfiguration.USBankAccount
+  private lateinit var promise: Promise
   private lateinit var collectBankAccountLauncher: CollectBankAccountLauncher
 
-  override fun onCreate(savedInstanceState: Bundle?) {
-    super.onCreate(savedInstanceState)
+  override fun prepare() {
+    collectBankAccountLauncher = createBankAccountLauncher()
 
     val stripeSdkModule: StripeSdkModule? = context.getNativeModule(StripeSdkModule::class.java)
-    if (stripeSdkModule != null && stripeSdkModule.eventListenerCount > 0) {
+    if (stripeSdkModule != null) {
       FinancialConnections.setEventListener { event ->
         val params = mapFromFinancialConnectionsEvent(event)
-        stripeSdkModule.sendEvent(context, "onFinancialConnectionsEvent", params)
+        stripeSdkModule.emitOnFinancialConnectionsEvent(params)
       }
     }
-  }
-
-  override fun onCreateView(
-    inflater: LayoutInflater,
-    container: ViewGroup?,
-    savedInstanceState: Bundle?,
-  ): View {
-    collectBankAccountLauncher = createBankAccountLauncher()
-
-    return FrameLayout(requireActivity()).also { it.visibility = View.GONE }
-  }
-
-  override fun onViewCreated(
-    view: View,
-    savedInstanceState: Bundle?,
-  ) {
-    super.onViewCreated(view, savedInstanceState)
 
     if (isPaymentIntent) {
       collectBankAccountLauncher.presentWithPaymentIntent(
@@ -108,11 +85,13 @@ class CollectBankAccountLauncherFragment(
             )
           }
         }
+
         is CollectBankAccountResult.Cancelled -> {
           promise.resolve(
             createError(ErrorType.Canceled.toString(), "Bank account collection was canceled."),
           )
         }
+
         is CollectBankAccountResult.Failed -> {
           promise.resolve(createError(ErrorType.Failed.toString(), result.error))
         }
@@ -122,5 +101,25 @@ class CollectBankAccountLauncherFragment(
 
   companion object {
     internal const val TAG = "collect_bank_account_launcher_fragment"
+
+    fun create(
+      context: ReactApplicationContext,
+      publishableKey: String,
+      stripeAccountId: String? = null,
+      clientSecret: String,
+      isPaymentIntent: Boolean,
+      collectParams: CollectBankAccountConfiguration.USBankAccount,
+      promise: Promise,
+    ): CollectBankAccountLauncherFragment {
+      val instance = CollectBankAccountLauncherFragment()
+      instance.context = context
+      instance.publishableKey = publishableKey
+      instance.stripeAccountId = stripeAccountId
+      instance.clientSecret = clientSecret
+      instance.isPaymentIntent = isPaymentIntent
+      instance.collectParams = collectParams
+      instance.promise = promise
+      return instance
+    }
   }
 }

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

@@ -0,0 +1,224 @@
+package com.reactnativestripesdk
+
+import android.content.Context
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.layout.onPlaced
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.ThemedReactContext
+import com.reactnativestripesdk.utils.KeepJsAwakeTask
+import com.reactnativestripesdk.utils.mapFromPaymentMethod
+import com.stripe.android.paymentelement.EmbeddedPaymentElement
+import com.stripe.android.paymentelement.ExperimentalEmbeddedPaymentElementApi
+import com.stripe.android.paymentelement.rememberEmbeddedPaymentElement
+import com.stripe.android.paymentsheet.CreateIntentResult
+import com.stripe.android.paymentsheet.PaymentSheet
+import kotlinx.coroutines.CompletableDeferred
+import kotlinx.coroutines.channels.Channel
+import kotlinx.coroutines.flow.consumeAsFlow
+import toWritableMap
+
+@OptIn(ExperimentalEmbeddedPaymentElementApi::class)
+class EmbeddedPaymentElementView(
+  context: Context,
+) : StripeAbstractComposeView(context) {
+  private sealed interface Event {
+    data class Configure(
+      val configuration: EmbeddedPaymentElement.Configuration,
+      val intentConfiguration: PaymentSheet.IntentConfiguration,
+    ) : Event
+
+    data object Confirm : Event
+
+    data object ClearPaymentOption : Event
+  }
+
+  var latestIntentConfig: PaymentSheet.IntentConfiguration? = null
+  var latestElementConfig: EmbeddedPaymentElement.Configuration? = null
+
+  private val reactContext get() = context as ThemedReactContext
+  private val events = Channel<Event>(Channel.UNLIMITED)
+
+  private val builder by lazy {
+    EmbeddedPaymentElement.Builder(
+      createIntentCallback = { paymentMethod, shouldSavePaymentMethod ->
+        val stripeSdkModule =
+          try {
+            requireStripeSdkModule()
+          } catch (ex: IllegalArgumentException) {
+            return@Builder CreateIntentResult.Failure(
+              cause =
+                Exception(
+                  "Tried to call confirmHandler, but no callback was found. Please file an issue: https://github.com/stripe/stripe-react-native/issues",
+                ),
+              displayMessage = "An unexpected error occurred",
+            )
+          }
+
+        // Make sure that JS is active since the activity will be paused when stripe ui is presented.
+        val keepJsAwakeTask = KeepJsAwakeTask(reactContext.reactApplicationContext).apply { start() }
+
+        val params =
+          Arguments.createMap().apply {
+            putMap("paymentMethod", mapFromPaymentMethod(paymentMethod))
+            putBoolean("shouldSavePaymentMethod", shouldSavePaymentMethod)
+          }
+
+        stripeSdkModule.emitOnConfirmHandlerCallback(params)
+
+        val resultFromJavascript = stripeSdkModule.embeddedIntentCreationCallback.await()
+        // reset the completable
+        stripeSdkModule.embeddedIntentCreationCallback = CompletableDeferred()
+
+        keepJsAwakeTask.stop()
+
+        resultFromJavascript.getString("clientSecret")?.let {
+          CreateIntentResult.Success(clientSecret = it)
+        } ?: run {
+          val errorMap = resultFromJavascript.getMap("error")
+          CreateIntentResult.Failure(
+            cause = Exception(errorMap?.getString("message")),
+            displayMessage = errorMap?.getString("localizedMessage"),
+          )
+        }
+      },
+      resultCallback = { result ->
+        val map =
+          Arguments.createMap().apply {
+            when (result) {
+              is EmbeddedPaymentElement.Result.Completed -> {
+                putString("status", "completed")
+              }
+              is EmbeddedPaymentElement.Result.Canceled -> {
+                putString("status", "canceled")
+              }
+              is EmbeddedPaymentElement.Result.Failed -> {
+                putString("status", "failed")
+                putString("error", result.error.message ?: "Unknown error")
+              }
+            }
+          }
+        requireStripeSdkModule().emitEmbeddedPaymentElementFormSheetConfirmComplete(map)
+      },
+    )
+  }
+
+  @Composable
+  override fun Content() {
+    val embedded = rememberEmbeddedPaymentElement(builder)
+    var height by remember {
+      mutableIntStateOf(0)
+    }
+
+    // collect events: configure, confirm, clear
+    LaunchedEffect(Unit) {
+      events.consumeAsFlow().collect { ev ->
+        when (ev) {
+          is Event.Configure -> {
+            // call configure and grab the result
+            val result =
+              embedded.configure(
+                intentConfiguration = ev.intentConfiguration,
+                configuration = ev.configuration,
+              )
+
+            when (result) {
+              is EmbeddedPaymentElement.ConfigureResult.Succeeded -> reportHeightChange(1f)
+              is EmbeddedPaymentElement.ConfigureResult.Failed -> {
+                // send the error back to JS
+                val err = result.error
+                val msg = err.localizedMessage ?: err.toString()
+                // build a RN map
+                val payload =
+                  Arguments.createMap().apply {
+                    putString("message", msg)
+                  }
+                requireStripeSdkModule().emitEmbeddedPaymentElementLoadingFailed(payload)
+              }
+            }
+          }
+
+          is Event.Confirm -> {
+            embedded.confirm()
+          }
+          is Event.ClearPaymentOption -> {
+            embedded.clearPaymentOption()
+          }
+        }
+      }
+    }
+
+    LaunchedEffect(embedded) {
+      embedded.paymentOption.collect { opt ->
+        val optMap = opt?.toWritableMap()
+        val payload =
+          Arguments.createMap().apply {
+            putMap("paymentOption", optMap)
+          }
+        requireStripeSdkModule().emitEmbeddedPaymentElementDidUpdatePaymentOption(payload)
+      }
+    }
+
+    val density = LocalDensity.current
+
+    Box(
+      modifier =
+        Modifier
+          .requiredHeight(height.dp)
+          .layout { measurable, constraints ->
+            val minIntrinsicHeight = measurable.minIntrinsicHeight(constraints.maxWidth)
+
+            height = minIntrinsicHeight
+
+            layout(constraints.maxWidth, minIntrinsicHeight) {
+              measurable.measure(constraints).placeRelative(IntOffset.Zero)
+            }
+          }.onPlaced {
+            reportHeightChange(
+              with(density) {
+                height.toDp().value
+              },
+            )
+          },
+    ) {
+      embedded.Content()
+    }
+  }
+
+  private fun reportHeightChange(height: Float) {
+    val params =
+      Arguments.createMap().apply {
+        putDouble("height", height.toDouble())
+      }
+    requireStripeSdkModule().emitEmbeddedPaymentElementDidUpdateHeight(params)
+  }
+
+  // APIs
+  fun configure(
+    config: EmbeddedPaymentElement.Configuration,
+    intentConfig: PaymentSheet.IntentConfiguration,
+  ) {
+    events.trySend(Event.Configure(config, intentConfig))
+  }
+
+  fun confirm() {
+    events.trySend(Event.Confirm)
+  }
+
+  fun clearPaymentOption() {
+    events.trySend(Event.ClearPaymentOption)
+  }
+
+  private fun requireStripeSdkModule() = requireNotNull(reactContext.getNativeModule(StripeSdkModule::class.java))
+}