@stripe/stripe-react-native 0.9.0 → 0.12.0

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

@@ -0,0 +1,173 @@
+package com.reactnativestripesdk
+
+import android.graphics.Color
+import android.os.Bundle
+import com.stripe.android.paymentsheet.PaymentSheet
+
+fun PaymentSheetFragment.buildPaymentSheetAppearance(userParams: Bundle?): PaymentSheet.Appearance {
+  val colorParams = userParams?.getBundle(PaymentSheetAppearanceKeys.COLORS)
+  val lightColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
+  val darkColorParams = colorParams?.getBundle(PaymentSheetAppearanceKeys.DARK) ?: colorParams
+
+  return PaymentSheet.Appearance(
+    typography = buildTypography(userParams?.getBundle(PaymentSheetAppearanceKeys.FONT)),
+    colorsLight = buildColors(lightColorParams, PaymentSheet.Colors.defaultLight),
+    colorsDark = buildColors(darkColorParams, PaymentSheet.Colors.defaultDark),
+    shapes = buildShapes(userParams?.getBundle(PaymentSheetAppearanceKeys.SHAPES)),
+    primaryButton = buildPrimaryButton(userParams?.getBundle(PaymentSheetAppearanceKeys.PRIMARY_BUTTON))
+  )
+}
+
+private fun PaymentSheetFragment.buildTypography(fontParams: Bundle?): PaymentSheet.Typography {
+  return PaymentSheet.Typography.default.copy(
+    sizeScaleFactor = getFloatOr(fontParams, PaymentSheetAppearanceKeys.SCALE, PaymentSheet.Typography.default.sizeScaleFactor),
+    fontResId = getFontResId(fontParams, PaymentSheetAppearanceKeys.FAMILY, PaymentSheet.Typography.default.fontResId)
+  )
+}
+
+@Throws(PaymentSheetAppearanceException::class)
+private fun colorFromHexOrDefault(hexString: String?, default: Int): Int {
+  return hexString?.trim()?.replace("#","")?.let {
+    if (it.length == 6 || it.length == 8) {
+      return Color.parseColor("#$it")
+    } else throw PaymentSheetAppearanceException("Failed to set Payment Sheet appearance. Expected hex string of length 6 or 8, but received: $it")
+  } ?: run {
+    return default
+  }
+}
+
+private fun buildColors(colorParams: Bundle?, default: PaymentSheet.Colors): PaymentSheet.Colors {
+  if (colorParams == null) {
+    return default
+  }
+
+  return default.copy(
+    primary = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.PRIMARY), default.primary),
+    surface = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.BACKGROUND), default.surface),
+    component = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_BACKGROUND), default.component),
+    componentBorder = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_BORDER), default.componentBorder),
+    componentDivider = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_DIVIDER), default.componentDivider),
+    onComponent = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.COMPONENT_TEXT), default.onComponent),
+    onSurface = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.PRIMARY_TEXT), default.onSurface),
+    subtitle = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.SECONDARY_TEXT), default.subtitle),
+    placeholderText = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.PLACEHOLDER_TEXT), default.placeholderText),
+    appBarIcon = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.ICON), default.appBarIcon),
+    error = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.ERROR), default.error),
+  )
+}
+
+private fun buildShapes(shapeParams: Bundle?): PaymentSheet.Shapes {
+  return PaymentSheet.Shapes.default.copy(
+    cornerRadiusDp = getFloatOr(shapeParams, PaymentSheetAppearanceKeys.BORDER_RADIUS, PaymentSheet.Shapes.default.cornerRadiusDp),
+    borderStrokeWidthDp = getFloatOr(shapeParams, PaymentSheetAppearanceKeys.BORDER_WIDTH, PaymentSheet.Shapes.default.borderStrokeWidthDp)
+  )
+}
+
+private fun PaymentSheetFragment.buildPrimaryButton(params: Bundle?): PaymentSheet.PrimaryButton {
+  if (params == null) {
+    return PaymentSheet.PrimaryButton()
+  }
+
+  val fontParams = params.getBundle(PaymentSheetAppearanceKeys.FONT) ?: Bundle.EMPTY
+  val shapeParams = params.getBundle(PaymentSheetAppearanceKeys.SHAPES) ?: Bundle.EMPTY
+  val colorParams = params.getBundle(PaymentSheetAppearanceKeys.COLORS) ?: Bundle.EMPTY
+  val lightColorParams = colorParams.getBundle(PaymentSheetAppearanceKeys.LIGHT) ?: colorParams
+  val darkColorParams = colorParams.getBundle(PaymentSheetAppearanceKeys.DARK) ?: colorParams
+
+  return PaymentSheet.PrimaryButton(
+    colorsLight = buildPrimaryButtonColors(lightColorParams, PaymentSheet.PrimaryButtonColors.defaultLight),
+    colorsDark = buildPrimaryButtonColors(darkColorParams, PaymentSheet.PrimaryButtonColors.defaultDark),
+    shape = PaymentSheet.PrimaryButtonShape(
+      cornerRadiusDp = getFloatOrNull(shapeParams, PaymentSheetAppearanceKeys.BORDER_RADIUS),
+      borderStrokeWidthDp = getFloatOrNull(shapeParams, PaymentSheetAppearanceKeys.BORDER_WIDTH),
+    ),
+    typography = PaymentSheet.PrimaryButtonTypography(
+      fontResId = getFontResId(fontParams, PaymentSheetAppearanceKeys.FAMILY, null)
+    )
+  )
+}
+
+@Throws(PaymentSheetAppearanceException::class)
+private fun buildPrimaryButtonColors(colorParams: Bundle, default: PaymentSheet.PrimaryButtonColors): PaymentSheet.PrimaryButtonColors {
+  return PaymentSheet.PrimaryButtonColors(
+    background = colorParams.getString(PaymentSheetAppearanceKeys.BACKGROUND)?.trim()?.replace("#", "")?.let {
+      if (it.length == 6 || it.length == 8) {
+        Color.parseColor("#$it")
+      } else throw PaymentSheetAppearanceException("Failed to set Payment Sheet appearance. Expected hex string of length 6 or 8, but received: $it")
+    } ?: run {
+      null
+    },
+    onBackground = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.TEXT), default.onBackground),
+    border = colorFromHexOrDefault(colorParams.getString(PaymentSheetAppearanceKeys.BORDER), default.border),
+  )
+}
+
+private fun getFloatOr(bundle: Bundle?, key: String, defaultValue: Float): Float {
+  return if (bundle?.containsKey(key) == true) {
+    bundle.getFloat(key, bundle.getInt(key).toFloat())
+  } else {
+    defaultValue
+  }
+}
+
+private fun getFloatOrNull(bundle: Bundle?, key: String): Float? {
+  return if (bundle?.containsKey(key) == true) {
+    bundle.getFloat(key, bundle.getInt(key).toFloat())
+  } else {
+    null
+  }
+}
+
+@Throws(PaymentSheetAppearanceException::class)
+private fun PaymentSheetFragment.getFontResId(bundle: Bundle?, key: String, defaultValue: Int?): Int? {
+  val fontErrorPrefix = "Encountered an error when setting a custom font:"
+  if (bundle?.containsKey(key) != true) {
+    return defaultValue
+  }
+
+  val fontFileName = bundle.getString(key)
+          ?: throw PaymentSheetAppearanceException("$fontErrorPrefix expected String for font.$key, but received null.")
+  if (Regex("[^a-z0-9]").containsMatchIn(fontFileName)) {
+    throw PaymentSheetAppearanceException(
+      "$fontErrorPrefix appearance.font.$key should only contain lowercase alphanumeric characters on Android, but received '$fontFileName'. This value must match the filename in android/app/src/main/res/font"
+    )
+  }
+
+  val id = resources.getIdentifier(fontFileName, "font", context?.packageName)
+  if (id == 0) {
+    throw PaymentSheetAppearanceException("$fontErrorPrefix Failed to find font: $fontFileName")
+  } else {
+    return id
+  }
+}
+
+private class PaymentSheetAppearanceKeys {
+  companion object {
+    const val COLORS = "colors"
+    const val LIGHT = "light"
+    const val DARK = "dark"
+    const val PRIMARY = "primary"
+    const val BACKGROUND = "background"
+    const val COMPONENT_BACKGROUND = "componentBackground"
+    const val COMPONENT_BORDER = "componentBorder"
+    const val COMPONENT_DIVIDER = "componentDivider"
+    const val COMPONENT_TEXT = "componentText"
+    const val PRIMARY_TEXT = "primaryText"
+    const val SECONDARY_TEXT = "secondaryText"
+    const val PLACEHOLDER_TEXT = "placeholderText"
+    const val ICON = "icon"
+    const val ERROR = "error"
+
+    const val FONT = "font"
+    const val FAMILY = "family"
+    const val SCALE = "scale"
+
+    const val SHAPES = "shapes"
+    const val BORDER_RADIUS = "borderRadius"
+    const val BORDER_WIDTH = "borderWidth"
+
+    const val PRIMARY_BUTTON = "primaryButton"
+    const val TEXT = "text"
+    const val BORDER = "border"
+  }
+}

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

@@ -1,8 +1,6 @@
 package com.reactnativestripesdk
 
 import android.content.Context
-import android.content.Intent
-import android.content.res.ColorStateList
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Color
@@ -12,29 +10,37 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.graphics.drawable.DrawableCompat
 import androidx.fragment.app.Fragment
-import androidx.localbroadcastmanager.content.LocalBroadcastManager
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.WritableNativeMap
 import com.stripe.android.paymentsheet.PaymentOptionCallback
 import com.stripe.android.paymentsheet.PaymentSheet
+import com.stripe.android.paymentsheet.PaymentSheetResult
 import com.stripe.android.paymentsheet.PaymentSheetResultCallback
 import java.io.ByteArrayOutputStream
 
-class PaymentSheetFragment : Fragment() {
+class PaymentSheetFragment(
+  private val context: ReactApplicationContext,
+  private val initPromise: Promise
+) : Fragment() {
   private var paymentSheet: PaymentSheet? = null
   private var flowController: PaymentSheet.FlowController? = null
   private var paymentIntentClientSecret: String? = null
   private var setupIntentClientSecret: String? = null
   private lateinit var paymentSheetConfiguration: PaymentSheet.Configuration
-  private lateinit var localBroadcastManager: LocalBroadcastManager
+  private var confirmPromise: Promise? = null
+  private var presentPromise: Promise? = null
 
   override fun onCreateView(
     inflater: LayoutInflater,
     container: ViewGroup?,
     savedInstanceState: Bundle?
   ): View {
-    localBroadcastManager = LocalBroadcastManager.getInstance(requireContext())
     return FrameLayout(requireActivity()).also {
       it.visibility = View.GONE
     }
@@ -50,34 +56,50 @@ class PaymentSheetFragment : Fragment() {
     val googlePayEnabled = arguments?.getBoolean("googlePay")
     val testEnv = arguments?.getBoolean("testEnv")
     val allowsDelayedPaymentMethods = arguments?.getBoolean("allowsDelayedPaymentMethods")
-    val primaryButtonColorHexStr = arguments?.getString("primaryButtonColor").orEmpty()
     val billingDetailsBundle = arguments?.getBundle("defaultBillingDetails")
     paymentIntentClientSecret = arguments?.getString("paymentIntentClientSecret").orEmpty()
     setupIntentClientSecret = arguments?.getString("setupIntentClientSecret").orEmpty()
+    val appearance = try {
+      buildPaymentSheetAppearance(arguments?.getBundle("appearance"))
+    } catch (error: PaymentSheetAppearanceException) {
+      initPromise.resolve(createError(ErrorType.Failed.toString(), error))
+      return
+    }
 
     val paymentOptionCallback = PaymentOptionCallback { paymentOption ->
-      val intent = Intent(ON_PAYMENT_OPTION_ACTION)
-
       if (paymentOption != null) {
         val bitmap = getBitmapFromVectorDrawable(context, paymentOption.drawableResourceId)
         val imageString = getBase64FromBitmap(bitmap)
-
-        intent.putExtra("label", paymentOption.label)
-        intent.putExtra("image", imageString)
+        val option: WritableMap = WritableNativeMap()
+        option.putString("label", paymentOption.label)
+        option.putString("image", imageString)
+        presentPromise?.resolve(createResult("paymentOption", option))
       }
-      localBroadcastManager.sendBroadcast(intent)
+      presentPromise?.resolve(WritableNativeMap())
     }
 
     val paymentResultCallback = PaymentSheetResultCallback { paymentResult ->
-      val intent = Intent(ON_PAYMENT_RESULT_ACTION)
-
-      intent.putExtra("paymentResult", paymentResult)
-      localBroadcastManager.sendBroadcast(intent)
-    }
-
-    var primaryButtonColor: ColorStateList? = null
-    if (primaryButtonColorHexStr.isNotEmpty()) {
-      primaryButtonColor = ColorStateList.valueOf(Color.parseColor(primaryButtonColorHexStr))
+      when (paymentResult) {
+        is PaymentSheetResult.Canceled -> {
+          val message = "The payment has been canceled"
+          confirmPromise?.resolve(createError(PaymentSheetErrorType.Canceled.toString(), message))
+            ?: run {
+              presentPromise?.resolve(createError(PaymentSheetErrorType.Canceled.toString(), message))
+            }
+        }
+        is PaymentSheetResult.Failed -> {
+          confirmPromise?.resolve(createError(PaymentSheetErrorType.Failed.toString(), paymentResult.error))
+            ?: run {
+              presentPromise?.resolve(createError(PaymentSheetErrorType.Failed.toString(), paymentResult.error))
+            }
+        }
+        is PaymentSheetResult.Completed -> {
+          confirmPromise?.resolve(WritableNativeMap()) ?: run {
+            presentPromise?.resolve(WritableNativeMap())
+          }
+        }
+      }
+      (context.currentActivity as? AppCompatActivity)?.supportFragmentManager?.beginTransaction()?.remove(this)?.commitAllowingStateLoss()
     }
 
     var defaultBillingDetails: PaymentSheet.BillingDetails? = null
@@ -100,7 +122,6 @@ class PaymentSheetFragment : Fragment() {
     paymentSheetConfiguration = PaymentSheet.Configuration(
       merchantDisplayName = merchantDisplayName,
       allowsDelayedPaymentMethods = allowsDelayedPaymentMethods ?: false,
-      primaryButtonColor = primaryButtonColor,
       defaultBillingDetails=defaultBillingDetails,
       customer = if (customerId.isNotEmpty() && customerEphemeralKeySecret.isNotEmpty()) PaymentSheet.CustomerConfiguration(
         id = customerId,
@@ -110,7 +131,8 @@ class PaymentSheetFragment : Fragment() {
         environment = if (testEnv == true) PaymentSheet.GooglePayConfiguration.Environment.Test else PaymentSheet.GooglePayConfiguration.Environment.Production,
         countryCode = countryCode,
         currencyCode = currencyCode
-      ) else null
+      ) else null,
+      appearance = appearance
     )
 
     if (arguments?.getBoolean("customFlow") == true) {
@@ -118,12 +140,12 @@ class PaymentSheetFragment : Fragment() {
       configureFlowController()
     } else {
       paymentSheet = PaymentSheet(this, paymentResultCallback)
-      val intent = Intent(ON_INIT_PAYMENT_SHEET)
-      localBroadcastManager.sendBroadcast(intent)
+      initPromise.resolve(WritableNativeMap())
     }
   }
 
-  fun present() {
+  fun present(promise: Promise) {
+    this.presentPromise = promise
     if(paymentSheet != null) {
       if (!paymentIntentClientSecret.isNullOrEmpty()) {
         paymentSheet?.presentWithPaymentIntent(paymentIntentClientSecret!!, paymentSheetConfiguration)
@@ -135,23 +157,24 @@ class PaymentSheetFragment : Fragment() {
     }
   }
 
-  fun confirmPayment() {
+  fun confirmPayment(promise: Promise) {
+    this.confirmPromise = promise
     flowController?.confirm()
   }
 
   private fun configureFlowController() {
     val onFlowControllerConfigure = PaymentSheet.FlowController.ConfigCallback { _, _ ->
-      val paymentOption = flowController?.getPaymentOption()
-      val intent = Intent(ON_CONFIGURE_FLOW_CONTROLLER)
-
-      paymentOption?.let {
+      val result = flowController?.getPaymentOption()?.let {
         val bitmap = getBitmapFromVectorDrawable(context, it.drawableResourceId)
         val imageString = getBase64FromBitmap(bitmap)
-
-        intent.putExtra("label", it.label)
-        intent.putExtra("image", imageString)
+        val option: WritableMap = WritableNativeMap()
+        option.putString("label", it.label)
+        option.putString("image", imageString)
+        createResult("paymentOption", option)
+      } ?: run {
+        WritableNativeMap()
       }
-      localBroadcastManager.sendBroadcast(intent)
+      initPromise.resolve(result)
     }
 
     if (!paymentIntentClientSecret.isNullOrEmpty()) {