@stripe/stripe-react-native 0.9.0 → 0.12.0

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

@@ -1,63 +1,50 @@
 package com.reactnativestripesdk
 
 import android.app.Activity
-import android.content.BroadcastReceiver
-import android.content.Context
 import android.content.Intent
-import android.content.IntentFilter
 import android.os.Parcelable
 import android.util.Log
 import androidx.appcompat.app.AppCompatActivity
-import androidx.localbroadcastmanager.content.LocalBroadcastManager
 import com.facebook.react.bridge.*
 import com.facebook.react.module.annotations.ReactModule
 import com.stripe.android.*
 import com.stripe.android.core.AppInfo
 import com.stripe.android.core.ApiVersion
-import com.stripe.android.googlepaylauncher.GooglePayLauncher
-import com.stripe.android.googlepaylauncher.GooglePayPaymentMethodLauncher
 import com.stripe.android.model.*
 import com.stripe.android.payments.bankaccount.CollectBankAccountConfiguration
-import com.stripe.android.paymentsheet.PaymentSheetResult
 import com.stripe.android.view.AddPaymentMethodActivityStarter
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
 @ReactModule(name = StripeSdkModule.NAME)
-class StripeSdkModule(private val reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
-  var cardFieldView: CardFieldView? = null
-  var cardFormView: CardFormView? = null
-
+class StripeSdkModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
   override fun getName(): String {
     return "StripeSdk"
   }
-  private lateinit var stripe: Stripe
 
-  private lateinit var paymentLauncherFragment: PaymentLauncherFragment
+  var cardFieldView: CardFieldView? = null
+  var cardFormView: CardFormView? = null
 
+  private lateinit var stripe: Stripe
   private lateinit var publishableKey: String
   private var stripeAccountId: String? = null
+  private var urlScheme: String? = null
+
   private var paymentSheetFragment: PaymentSheetFragment? = null
+  private var googlePayFragment: GooglePayFragment? = null
+  private var paymentLauncherFragment: PaymentLauncherFragment? = null
 
-  private var urlScheme: String? = null
   private var confirmPromise: Promise? = null
-  private var confirmPaymentSheetPaymentPromise: Promise? = null
-  private var presentPaymentSheetPromise: Promise? = null
-  private var initPaymentSheetPromise: Promise? = null
   private var confirmPaymentClientSecret: String? = null
 
-  private var googlePayFragment: GooglePayFragment? = null
-  private var initGooglePayPromise: Promise? = null
-  private var presentGooglePayPromise: Promise? = null
-
   private val mActivityEventListener = object : BaseActivityEventListener() {
     override fun onActivityResult(activity: Activity, requestCode: Int, resultCode: Int, data: Intent?) {
       if (::stripe.isInitialized) {
         // BEGIN - Necessary on older versions of React Native (~0.64 and below)
         paymentSheetFragment?.activity?.activityResultRegistry?.dispatchResult(requestCode, resultCode, data)
         googlePayFragment?.activity?.activityResultRegistry?.dispatchResult(requestCode, resultCode, data)
-        paymentLauncherFragment.activity?.activityResultRegistry?.dispatchResult(requestCode, resultCode, data)
+        paymentLauncherFragment?.activity?.activityResultRegistry?.dispatchResult(requestCode, resultCode, data)
         // END
         try {
           val result = AddPaymentMethodActivityStarter.Result.fromIntent(data)
@@ -91,108 +78,6 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     )
   }
 
-  private val googlePayReceiver: BroadcastReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context?, intent: Intent) {
-      if (intent.action == ON_INIT_GOOGLE_PAY) {
-        val isReady = intent.extras?.getBoolean("isReady") ?: false
-        if (isReady) {
-          initGooglePayPromise?.resolve(WritableNativeMap())
-        } else {
-          initGooglePayPromise?.resolve(
-            createError(
-              GooglePayErrorType.Failed.toString(),
-              "Google Pay is not available on this device. You can use isGooglePaySupported to preemptively check for Google Pay support."
-            )
-          )
-        }
-      }
-      if (intent.action == ON_GOOGLE_PAYMENT_METHOD_RESULT) {
-        intent.extras?.getString("error")?.let {
-          presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Failed.toString(), it))
-          return
-        }
-        when (val result = intent.extras?.getParcelable<GooglePayPaymentMethodLauncher.Result>("paymentResult")) {
-          is GooglePayPaymentMethodLauncher.Result.Completed -> {
-            presentGooglePayPromise?.resolve(createResult("paymentMethod", mapFromPaymentMethod(result.paymentMethod)))
-          }
-          GooglePayPaymentMethodLauncher.Result.Canceled -> {
-            presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Canceled.toString(), "Google Pay has been canceled"))
-          }
-          is GooglePayPaymentMethodLauncher.Result.Failed -> {
-            presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Failed.toString(), result.error))
-          }
-        }
-      }
-      if (intent.action == ON_GOOGLE_PAY_RESULT) {
-        intent.extras?.getString("error")?.let {
-          presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Failed.toString(), it))
-          return
-        }
-        when (val result = intent.extras?.getParcelable<GooglePayLauncher.Result>("paymentResult")) {
-          GooglePayLauncher.Result.Completed -> {
-            presentGooglePayPromise?.resolve(WritableNativeMap())
-          }
-          GooglePayLauncher.Result.Canceled -> {
-            presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Canceled.toString(), "Google Pay has been canceled"))
-          }
-          is GooglePayLauncher.Result.Failed -> {
-            presentGooglePayPromise?.resolve(createError(GooglePayErrorType.Failed.toString(), result.error))
-          }
-        }
-      }
-    }
-  }
-
-  private val mPaymentSheetReceiver: BroadcastReceiver = object : BroadcastReceiver() {
-    override fun onReceive(context: Context?, intent: Intent) {
-      if (intent.action == ON_PAYMENT_RESULT_ACTION) {
-        when (val result = intent.extras?.getParcelable<PaymentSheetResult>("paymentResult")) {
-          is PaymentSheetResult.Canceled -> {
-            val message = "The payment has been canceled"
-            confirmPaymentSheetPaymentPromise?.resolve(createError(PaymentSheetErrorType.Canceled.toString(), message))
-            presentPaymentSheetPromise?.resolve(createError(PaymentSheetErrorType.Canceled.toString(), message))
-          }
-          is PaymentSheetResult.Failed -> {
-            confirmPaymentSheetPaymentPromise?.resolve(createError(PaymentSheetErrorType.Failed.toString(), result.error))
-            presentPaymentSheetPromise?.resolve(createError(PaymentSheetErrorType.Failed.toString(), result.error))
-          }
-          is PaymentSheetResult.Completed -> {
-            confirmPaymentSheetPaymentPromise?.resolve(WritableNativeMap())
-            presentPaymentSheetPromise?.resolve(WritableNativeMap())
-          }
-        }
-      } else if (intent.action == ON_PAYMENT_OPTION_ACTION) {
-        val label = intent.extras?.getString("label")
-        val image = intent.extras?.getString("image")
-
-        if (label != null && image != null) {
-          val option: WritableMap = WritableNativeMap()
-          option.putString("label", label)
-          option.putString("image", image)
-          presentPaymentSheetPromise?.resolve(createResult("paymentOption", option))
-        } else {
-          presentPaymentSheetPromise?.resolve(WritableNativeMap())
-        }
-        presentPaymentSheetPromise = null
-      }
-      else if (intent.action == ON_INIT_PAYMENT_SHEET) {
-        initPaymentSheetPromise?.resolve(WritableNativeMap())
-      } else if (intent.action == ON_CONFIGURE_FLOW_CONTROLLER) {
-        val label = intent.extras?.getString("label")
-        val image = intent.extras?.getString("image")
-
-        if (label != null && image != null) {
-          val option: WritableMap = WritableNativeMap()
-          option.putString("label", label)
-          option.putString("image", image)
-          initPaymentSheetPromise?.resolve(createResult("paymentOption", option))
-        } else {
-          initPaymentSheetPromise?.resolve(WritableNativeMap())
-        }
-      }
-    }
-  }
-
   override fun getConstants(): MutableMap<String, Any> =
     hashMapOf(
       "API_VERSIONS" to hashMapOf(
@@ -225,37 +110,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     stripe = Stripe(reactApplicationContext, publishableKey, stripeAccountId)
 
     PaymentConfiguration.init(reactApplicationContext, publishableKey, stripeAccountId)
-
-    paymentLauncherFragment = PaymentLauncherFragment(stripe, publishableKey, stripeAccountId)
-    getCurrentActivityOrResolveWithError(promise)?.let {
-      try {
-        it.supportFragmentManager.beginTransaction()
-          .add(paymentLauncherFragment, "payment_launcher_fragment")
-          .commit()
-      } catch (error: IllegalStateException) {
-        promise.resolve(createError(ErrorType.Failed.toString(), error.message))
-      }
-
-      val localBroadcastManager = LocalBroadcastManager.getInstance(reactApplicationContext)
-      localBroadcastManager.registerReceiver(mPaymentSheetReceiver, IntentFilter(ON_PAYMENT_RESULT_ACTION))
-      localBroadcastManager.registerReceiver(mPaymentSheetReceiver, IntentFilter(ON_PAYMENT_OPTION_ACTION))
-      localBroadcastManager.registerReceiver(mPaymentSheetReceiver, IntentFilter(ON_CONFIGURE_FLOW_CONTROLLER))
-      localBroadcastManager.registerReceiver(mPaymentSheetReceiver, IntentFilter(ON_INIT_PAYMENT_SHEET))
-
-      localBroadcastManager.registerReceiver(googlePayReceiver, IntentFilter(ON_INIT_GOOGLE_PAY))
-      localBroadcastManager.registerReceiver(googlePayReceiver, IntentFilter(ON_GOOGLE_PAY_RESULT))
-      localBroadcastManager.registerReceiver(googlePayReceiver, IntentFilter(ON_GOOGLE_PAYMENT_METHOD_RESULT))
-
-      promise.resolve(null)
-    }
+    promise.resolve(null)
   }
 
   @ReactMethod
   fun initPaymentSheet(params: ReadableMap, promise: Promise) {
     getCurrentActivityOrResolveWithError(promise)?.let { activity ->
-      this.initPaymentSheetPromise = promise
-
-      paymentSheetFragment = PaymentSheetFragment().also {
+      paymentSheetFragment = PaymentSheetFragment(reactApplicationContext, promise).also {
         val bundle = toBundleObject(params)
         it.arguments = bundle
       }
@@ -271,14 +132,12 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
 
   @ReactMethod
   fun presentPaymentSheet(promise: Promise) {
-    this.presentPaymentSheetPromise = promise
-    paymentSheetFragment?.present()
+    paymentSheetFragment?.present(promise)
   }
 
   @ReactMethod
   fun confirmPaymentSheetPayment(promise: Promise) {
-    this.confirmPaymentSheetPaymentPromise = promise
-    paymentSheetFragment?.confirmPayment()
+    paymentSheetFragment?.confirmPayment(promise)
   }
 
   private fun payWithFpx() {
@@ -295,13 +154,17 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     when (result) {
       is AddPaymentMethodActivityStarter.Result.Success -> {
         if (confirmPaymentClientSecret != null && confirmPromise != null) {
-          paymentLauncherFragment.confirm(
+          paymentLauncherFragment = PaymentLauncherFragment.forPayment(
+            context = reactApplicationContext,
+            stripe,
+            publishableKey,
+            stripeAccountId,
+            confirmPromise!!,
+            confirmPaymentClientSecret!!,
             ConfirmPaymentIntentParams.createWithPaymentMethodId(
               result.paymentMethod.id!!,
               confirmPaymentClientSecret!!
-            ),
-            confirmPaymentClientSecret!!,
-            confirmPromise!!
+            )
           )
         } else {
           Log.e("StripeReactNative", "FPX payment failed. Promise and/or client secret is not set.")
@@ -445,9 +308,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
 
   @ReactMethod
   fun handleNextAction(paymentIntentClientSecret: String, promise: Promise) {
-    paymentLauncherFragment.handleNextActionForPaymentIntent(
-      paymentIntentClientSecret,
-      promise
+    paymentLauncherFragment = PaymentLauncherFragment.forNextAction(
+      context = reactApplicationContext,
+      stripe,
+      publishableKey,
+      stripeAccountId,
+      promise,
+      paymentIntentClientSecret
     )
   }
 
@@ -505,10 +372,14 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
         confirmParams.returnUrl = mapToReturnURL(urlScheme)
       }
       confirmParams.shipping = mapToShippingDetails(getMapOrNull(paymentMethodData, "shippingDetails"))
-      paymentLauncherFragment.confirm(
-        confirmParams,
+      paymentLauncherFragment = PaymentLauncherFragment.forPayment(
+        context = reactApplicationContext,
+        stripe,
+        publishableKey,
+        stripeAccountId,
+        promise,
         paymentIntentClientSecret,
-        promise
+        confirmParams
       )
     } catch (error: PaymentMethodCreateParamsException) {
       promise.resolve(createError(ConfirmPaymentErrorType.Failed.toString(), error))
@@ -553,10 +424,14 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
       urlScheme?.let {
         confirmParams.returnUrl = mapToReturnURL(urlScheme)
       }
-      paymentLauncherFragment.confirm(
-        confirmParams,
+      paymentLauncherFragment = PaymentLauncherFragment.forSetup(
+        context = reactApplicationContext,
+        stripe,
+        publishableKey,
+        stripeAccountId,
+        promise,
         setupIntentClientSecret,
-        promise
+        confirmParams
       )
     } catch (error: PaymentMethodCreateParamsException) {
       promise.resolve(createError(ConfirmPaymentErrorType.Failed.toString(), error))
@@ -566,7 +441,7 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
   @ReactMethod
   fun isGooglePaySupported(params: ReadableMap?, promise: Promise) {
     val fragment = GooglePayPaymentMethodLauncherFragment(
-      reactContext,
+      reactApplicationContext,
       getBooleanOrFalse(params, "testEnv"),
       getBooleanOrFalse(params, "existingPaymentMethodRequired"),
       promise
@@ -585,14 +460,12 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
 
   @ReactMethod
   fun initGooglePay(params: ReadableMap, promise: Promise) {
-    googlePayFragment = GooglePayFragment().also {
+    googlePayFragment = GooglePayFragment(promise).also {
       val bundle = toBundleObject(params)
       it.arguments = bundle
     }
 
     getCurrentActivityOrResolveWithError(promise)?.let {
-      initGooglePayPromise = promise
-
       try {
         it.supportFragmentManager.beginTransaction()
           .add(googlePayFragment!!, "google_pay_launch_fragment")
@@ -609,15 +482,15 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
       promise.resolve(createError(GooglePayErrorType.Failed.toString(), "you must provide clientSecret"))
       return
     }
-    presentGooglePayPromise = promise
+
     if (getBooleanOrFalse(params, "forSetupIntent")) {
       val currencyCode = getValOr(params, "currencyCode") ?: run {
         promise.resolve(createError(GooglePayErrorType.Failed.toString(), "you must provide currencyCode"))
         return
       }
-      googlePayFragment?.presentForSetupIntent(clientSecret, currencyCode)
+      googlePayFragment?.presentForSetupIntent(clientSecret, currencyCode, promise)
     } else {
-      googlePayFragment?.presentForPaymentIntent(clientSecret)
+      googlePayFragment?.presentForPaymentIntent(clientSecret, promise)
     }
   }
 
@@ -631,8 +504,7 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
       promise.resolve(createError(GooglePayErrorType.Failed.toString(), "you must provide amount"))
       return
     }
-    presentGooglePayPromise = promise
-    googlePayFragment?.createPaymentMethod(currencyCode, amount)
+    googlePayFragment?.createPaymentMethod(currencyCode, amount, promise)
   }
 
   @ReactMethod
@@ -669,7 +541,7 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     )
 
     val fragment = CollectBankAccountLauncherFragment(
-      reactContext,
+      reactApplicationContext,
       publishableKey,
       clientSecret,
       isPaymentIntent,

package/ios/PaymentSheetAppearance.swift

@@ -0,0 +1,209 @@
+//
+//  PaymentSheetAppearance.swift
+//  stripe-react-native
+//
+//  Created by Charles Cruzan on 5/11/22.
+//
+import Stripe
+
+extension StripeSdk {
+    func buildPaymentSheetAppearance(userParams: NSDictionary) throws -> PaymentSheet.Appearance {
+        var appearance = PaymentSheet.Appearance()
+        
+        if let fontParams = userParams[PaymentSheetAppearanceKeys.FONT] as? NSDictionary {
+            appearance.font = try buildFont(params: fontParams)
+        }
+        if let colorParams = userParams[PaymentSheetAppearanceKeys.COLORS] as? NSDictionary {
+            appearance.colors = try buildColors(params: colorParams)
+        }
+        if let shapeParams = userParams[PaymentSheetAppearanceKeys.SHAPES] as? NSDictionary {
+            appearance.cornerRadius = shapeParams[PaymentSheetAppearanceKeys.BORDER_RADIUS] as? CGFloat ?? PaymentSheet.Appearance.default.cornerRadius
+            appearance.borderWidth = shapeParams[PaymentSheetAppearanceKeys.BORDER_WIDTH] as? CGFloat ?? PaymentSheet.Appearance.default.borderWidth
+            if let shadowParams = shapeParams[PaymentSheetAppearanceKeys.SHADOW] as? NSDictionary {
+                appearance.shadow = try buildShadow(params: shadowParams)
+            }
+        }
+        if let primaryButtonParams = userParams[PaymentSheetAppearanceKeys.PRIMARY_BUTTON] as? NSDictionary {
+            appearance.primaryButton = try buildPrimaryButton(params: primaryButtonParams)
+        }
+        
+        return appearance
+    }
+    
+    private func buildFont(params: NSDictionary) throws -> Stripe.PaymentSheet.Appearance.Font {
+        var font = Stripe.PaymentSheet.Appearance.Font()
+        if let fontName = params[PaymentSheetAppearanceKeys.FAMILY] as? String {
+            guard let customFont = UIFont(name: fontName, size: UIFont.systemFontSize) else {
+                throw PaymentSheetAppearanceError.missingFont(fontName)
+            }
+            font.base = customFont
+        }
+        font.sizeScaleFactor = params[PaymentSheetAppearanceKeys.SCALE] as? CGFloat ?? PaymentSheet.Appearance.default.font.sizeScaleFactor
+        return font
+    }
+    
+    private func buildColors(params: NSDictionary) throws -> Stripe.PaymentSheet.Appearance.Colors {
+        var colors = Stripe.PaymentSheet.Appearance.Colors()
+        
+        if (params.object(forKey: PaymentSheetAppearanceKeys.LIGHT) != nil && params.object(forKey: PaymentSheetAppearanceKeys.DARK) == nil ||
+            params.object(forKey: PaymentSheetAppearanceKeys.DARK) != nil && params.object(forKey: PaymentSheetAppearanceKeys.LIGHT) == nil) {
+            throw PaymentSheetAppearanceError.missingAppearanceMode
+        }
+        
+        let lightModeParams = params[PaymentSheetAppearanceKeys.LIGHT] as? NSDictionary ?? params
+        let darkModeParams = params[PaymentSheetAppearanceKeys.DARK] as? NSDictionary ?? params
+        
+        colors.primary = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.PRIMARY, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.primary
+        colors.background = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.BACKGROUND, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.background
+        colors.componentBackground = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.COMPONENT_BACKGROUND, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.componentBackground
+        colors.componentBorder = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.COMPONENT_BORDER, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.componentBorder
+        colors.componentDivider = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.COMPONENT_DIVIDER, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.componentDivider
+        colors.text = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.PRIMARY_TEXT, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.text
+        colors.textSecondary = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.SECONDARY_TEXT, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.textSecondary
+        colors.componentText = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.COMPONENT_TEXT, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.componentText
+        colors.componentPlaceholderText = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.PLACEHOLDER_TEXT, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.componentPlaceholderText
+        colors.icon = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.ICON, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.icon
+        colors.danger = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.ERROR, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.colors.danger
+        
+        return colors
+    }
+    
+    private func buildShadow(params: NSDictionary) throws -> PaymentSheet.Appearance.Shadow {
+        var shadow = PaymentSheet.Appearance.Shadow()
+        
+        if let color = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.SHADOW_COLOR, lightParams: params, darkParams: params) {
+            shadow.color = color
+        }
+        if let opacity = params[PaymentSheetAppearanceKeys.OPACITY] as? CGFloat {
+            shadow.opacity = opacity
+        }
+        if let radius = params[PaymentSheetAppearanceKeys.BLUR_RADIUS] as? CGFloat {
+            shadow.radius = radius
+        }
+        if let offsetParams = params[PaymentSheetAppearanceKeys.OFFSET] as? NSDictionary {
+            if let x = offsetParams[PaymentSheetAppearanceKeys.X] as? CGFloat, let y = offsetParams[PaymentSheetAppearanceKeys.Y] as? CGFloat {
+                shadow.offset = CGSize(width: x, height:-y)
+            }
+        }
+
+        return shadow
+    }
+    
+    private func buildPrimaryButton(params: NSDictionary) throws -> PaymentSheet.Appearance.PrimaryButton {
+        var primaryButton = PaymentSheet.Appearance.PrimaryButton()
+        
+        if let fontName = (params[PaymentSheetAppearanceKeys.FONT] as? NSDictionary)?[PaymentSheetAppearanceKeys.FAMILY] as? String {
+            guard let customFont = UIFont(name: fontName, size: UIFont.systemFontSize) else {
+                throw PaymentSheetAppearanceError.missingFont(fontName)
+            }
+            primaryButton.font = customFont
+        }
+        if let shapeParams = params[PaymentSheetAppearanceKeys.SHAPES] as? NSDictionary {
+            if let borderRadius = shapeParams[PaymentSheetAppearanceKeys.BORDER_RADIUS] as? CGFloat {
+                primaryButton.cornerRadius = borderRadius
+            }
+            if let borderWidth = shapeParams[PaymentSheetAppearanceKeys.BORDER_WIDTH] as? CGFloat {
+                primaryButton.borderWidth = borderWidth
+            }
+            if let shadowParams = shapeParams[PaymentSheetAppearanceKeys.SHADOW] as? NSDictionary {
+                primaryButton.shadow = try buildShadow(params: shadowParams)
+            }
+        }
+        if let colorParams = params[PaymentSheetAppearanceKeys.COLORS] as? NSDictionary {
+            if (colorParams.object(forKey: PaymentSheetAppearanceKeys.LIGHT) != nil && colorParams.object(forKey: PaymentSheetAppearanceKeys.DARK) == nil ||
+                colorParams.object(forKey: PaymentSheetAppearanceKeys.DARK) != nil && colorParams.object(forKey: PaymentSheetAppearanceKeys.LIGHT) == nil) {
+                throw PaymentSheetAppearanceError.missingAppearanceMode
+            }
+            
+            let lightModeParams = colorParams[PaymentSheetAppearanceKeys.LIGHT] as? NSDictionary ?? colorParams
+            let darkModeParams = colorParams[PaymentSheetAppearanceKeys.DARK] as? NSDictionary ?? colorParams
+            
+            primaryButton.backgroundColor = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.BACKGROUND, lightParams: lightModeParams, darkParams: darkModeParams)
+            primaryButton.textColor = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.TEXT, lightParams: lightModeParams, darkParams: darkModeParams)
+            primaryButton.borderColor = try StripeSdk.buildUserInterfaceStyleAwareColor(key: PaymentSheetAppearanceKeys.BORDER, lightParams: lightModeParams, darkParams: darkModeParams) ?? PaymentSheet.Appearance.default.primaryButton.borderColor
+        }
+        
+        return primaryButton
+    }
+    
+    private static func buildUserInterfaceStyleAwareColor(key: String, lightParams: NSDictionary, darkParams: NSDictionary) throws -> UIColor? {
+        guard let lightHexString = lightParams[key] as? String, let darkHexString = darkParams[key] as? String else {
+            return nil
+        }
+        
+        let darkCount = darkHexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted).count
+        let lightCount = lightHexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted).count
+        if (lightCount != 6 && lightCount != 8) {
+            throw PaymentSheetAppearanceError.unexpectedHexStringLength(lightHexString)
+        } else if (darkCount != 6 && darkCount != 8) {
+            throw PaymentSheetAppearanceError.unexpectedHexStringLength(darkHexString)
+        }
+        
+        let lightColor = UIColor(hexString: lightHexString)
+        let darkColor = UIColor(hexString: darkHexString)
+        
+        if #available(iOS 13.0, *) {
+            return UIColor.init { traits in
+                return traits.userInterfaceStyle == .dark ? darkColor : lightColor
+            }
+        } else {
+            return lightColor
+        }
+    }
+}
+
+enum PaymentSheetAppearanceError : Error {
+    case missingFont(String)
+    case missingAppearanceMode
+    case unexpectedHexStringLength(String)
+}
+    
+extension PaymentSheetAppearanceError: LocalizedError {
+    public var errorDescription: String? {
+        switch self {
+        case .missingFont(let fontFamily):
+            return NSLocalizedString("Failed to set Payment Sheet appearance. Unable to find font: \(fontFamily)", comment: "Failed to set font")
+        case .missingAppearanceMode:
+            return NSLocalizedString("Failed to set Payment Sheet appearance. When providing 'colors.light' or 'colors.dark', you must provide both.", comment: "Failed to set colors")
+        case .unexpectedHexStringLength(let hexString):
+            return NSLocalizedString("Failed to set Payment Sheet appearance. Expected hex string of length 6 or 8, but received: \(hexString)", comment: "Failed to set color")
+        }
+    }
+}
+
+private struct PaymentSheetAppearanceKeys {
+    static let COLORS = "colors"
+    static let LIGHT = "light"
+    static let DARK = "dark"
+    static let PRIMARY = "primary"
+    static let BACKGROUND = "background"
+    static let COMPONENT_BACKGROUND = "componentBackground"
+    static let COMPONENT_BORDER = "componentBorder"
+    static let COMPONENT_DIVIDER = "componentDivider"
+    static let COMPONENT_TEXT = "componentText"
+    static let PRIMARY_TEXT = "primaryText"
+    static let SECONDARY_TEXT = "secondaryText"
+    static let PLACEHOLDER_TEXT = "placeholderText"
+    static let ICON = "icon"
+    static let ERROR = "error"
+    
+    static let FONT = "font"
+    static let FAMILY = "family"
+    static let SCALE = "scale"
+    
+    static let SHAPES = "shapes"
+    static let BORDER_RADIUS = "borderRadius"
+    static let BORDER_WIDTH = "borderWidth"
+
+    static let SHADOW = "shadow"
+    static let SHADOW_COLOR = "color"
+    static let OPACITY = "opacity"
+    static let OFFSET = "offset"
+    static let BLUR_RADIUS = "blurRadius"
+    static let X = "x"
+    static let Y = "y"
+    
+    static let PRIMARY_BUTTON = "primaryButton"
+    static let TEXT = "text"
+    static let BORDER = "border"
+}

package/ios/StripeSdk.swift

@@ -76,6 +76,15 @@ class StripeSdk: RCTEventEmitter, STPApplePayContextDelegate, STPBankSelectionVi
         var configuration = PaymentSheet.Configuration()
         self.paymentSheetFlowController = nil
         
+        if let appearanceParams = params["appearance"] as? NSDictionary {
+            do {
+                configuration.appearance = try buildPaymentSheetAppearance(userParams: appearanceParams)
+            } catch {
+                resolve(Errors.createError(ErrorType.Failed, error.localizedDescription))
+                return
+            }
+        }
+        
         if  params["applePay"] as? Bool == true {
             if let merchantIdentifier = self.merchantIdentifier, let merchantCountryCode = params["merchantCountryCode"] as? String {
                 configuration.applePay = .init(merchantId: merchantIdentifier,
@@ -94,11 +103,6 @@ class StripeSdk: RCTEventEmitter, STPApplePayContextDelegate, STPBankSelectionVi
             configuration.returnURL = returnURL
         }
         
-        if let buttonColorHexStr = params["primaryButtonColor"] as? String {
-            let primaryButtonColor = UIColor(hexString: buttonColorHexStr)
-            configuration.primaryButtonColor = primaryButtonColor
-        }
-        
         if let allowsDelayedPaymentMethods = params["allowsDelayedPaymentMethods"] as? Bool {
             configuration.allowsDelayedPaymentMethods = allowsDelayedPaymentMethods
         }

package/ios/StripeSdk.xcodeproj/project.pbxproj

@@ -180,7 +180,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -230,7 +230,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;

package/lib/typescript/example/src/screens/PaymentSheetAppearance.d.ts

@@ -0,0 +1,3 @@
+import type { PaymentSheet } from '@stripe/stripe-react-native';
+declare const appearance: PaymentSheet.AppearanceParams;
+export default appearance;