@stripe/stripe-react-native 0.6.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # CHANGELOG
 
+## 0.9.0
+
+- [#913](https://github.com/stripe/stripe-react-native/pull/913) BREAKING CHANGE: Changed props for the `<AddToWalletButton />` component. Instead of passing `cardHolderName`, `cardLastFour`, `cardDescription`, and `cardBrand` directly as props, you will instead pass a `cardDetails` prop, which is an object containing the following fields:
+  - `primaryAccountIdentifier`: The `wallet.primary_account_identifier` value from the issued card.
+  - `name`: The card holder name (previously `cardHolderName`).
+  - `description`: A user-facing description of the card (previously `cardDescription`).
+  - `lastFour`: Last 4 digits of the card, optional (previously `cardLastFour`).
+  - `brand`: The card brand, optional (previously `cardBrand`).
+- [#925](https://github.com/stripe/stripe-react-native/pull/925) Feat: `us_bank_account` payment method is now available in the payment sheet on iOS. (& Updated `stripe-ios` from 22.2.0 to 22.3.0)
+- [#929](https://github.com/stripe/stripe-react-native/pull/929) Feat: added PayPal support (not currently supported for SetupIntents)
+- [#928](https://github.com/stripe/stripe-react-native/pull/928) feat: expose 'cvc' when `dangerouslyGetCardDetails` is set to true
+- [#931](https://github.com/stripe/stripe-react-native/pull/931) feat: add token & paymentMethodId handling to confirmPayment for Cards
+- [#932](https://github.com/stripe/stripe-react-native/pull/932) fix: manually forward activity results to paymentLauncherFragment
+- [#933](https://github.com/stripe/stripe-react-native/pull/933) fix: address "Can not perform this action after onSaveInstanceState" crashes on Android
+- [#914](https://github.com/stripe/stripe-react-native/pull/914) fix: add `fingerprint` to Card result object on Android (already present on iOS)
+- [#912](https://github.com/stripe/stripe-react-native/pull/912) fix: allow for providing zip code straight from `CardField` component on Android
+
+## 0.8.0
+
+- **Breaking: This version requires you use `react-native@0.64.0` or above**
+- [#902](https://github.com/stripe/stripe-react-native/pull/902) fix: create custom babel plugin for package.json imports in src/
+- [#889](https://github.com/stripe/stripe-react-native/pull/889) Feat: add support for push provisioning (adding cards to native wallets)
+- [#890](https://github.com/stripe/stripe-react-native/pull/890) BREAKING CHANGE: Changed parameters for: `createPaymentMethod`, `confirmPayment`, `confirmSetupIntent`, `collectBankAccountForPayment`, and `collectBankAccountForSetup`. Please read [this migration guide](./docs/upgrading-from-v0.7.0.md) for details.
+  - Renamed `type` field to `paymentMethodType` on `PaymentMethod.Result`, `PaymentIntent.Result`, and `SetupIntent.Result` (result of `createPaymentMethod`, `retrieveSetupIntent`, `confirmSetupIntent`, `confirmPayment`, `collectBankAccountForPayment`, `collectBankAccountForSetup`, `verifyMicrodepositsForPayment`, and `verifyMicrodepositsForSetup`).
+- [#849](https://github.com/stripe/stripe-react-native/pull/849) BREAKING CHANGE: Renamed `placeholder` prop on `<CardField />` and `<CardForm />` to `placeholders`.
+- [#849](https://github.com/stripe/stripe-react-native/pull/849) Feat: Added customized styling options to `<CardForm />` on Android.
+
+## 0.7.0
+
+- [#894](https://github.com/stripe/stripe-react-native/pull/894) Fix: `<CardField />` `onBlur` callback will now be called appropriately on Android
+- [#846](https://github.com/stripe/stripe-react-native/pull/846) Fix: Avoid crashes when `currentActivity` is null
+- [#879](https://github.com/stripe/stripe-react-native/pull/879) Feat: Add support for ACHv2 payments on Android (already existed on iOS).
+- [#879](https://github.com/stripe/stripe-react-native/pull/879) Chore: Upgraded `stripe-android` from v19.3.+ to v20.1.+
+- [#837](https://github.com/stripe/stripe-react-native/pull/837) BREAKING CHANGE: Mostly fixes and changes to types, but some method's now accept slightly different parameters:
+  - Removed `setUrlSchemeOnAndroid` in favor of `setReturnUrlSchemeOnAndroid`. `setReturnUrlSchemeOnAndroid` functions exactly the same, this is just a rename.
+  - Removed `handleCardAction` in favor of `handleNextAction`. `handleNextAction` functions exactly the same, this is just a rename.
+  - `createPaymentMethod`'s `billingDetails` and `shippingDetails` parameters no longer accept the `addressPostalCode`, `addressCity`, `addressCountry`, `addressLine1`, `addressLine2`, or `addressState` keys. Instead, they accept an `address` object containing: `city`, `country`, `line1`, `line2`, `postalCode`, `state`.
+  - `confirmPayment`'s `billingDetails` and `shippingDetails` parameters no longer accept the `addressPostalCode`, `addressCity`, `addressCountry`, `addressLine1`, `addressLine2`, or `addressState` keys. Instead, they accept an `address` object containing: `city`, `country`, `line1`, `line2`, `postalCode`, `state`.
+  - `BillingDetails` no longer includes `addressPostalCode`, `addressCity`, `addressCountry`, `addressLine1`, `addressLine2`, or `addressState` keys. Instead, it includes an `address` object containing: `city`, `country`, `line1`, `line2`, `postalCode`, `state` keys.
+  - `ShippingDetails` no longer includes `addressPostalCode`, `addressCity`, `addressCountry`, `addressLine1`, `addressLine2`, or `addressState` keys. Instead, it includes an `address` object containing: `city`, `country`, `line1`, `line2`, `postalCode`, `state` keys.
+  - `PaymentIntents` was renamed `PaymentIntent`. (If you were using `PaymentIntents.Status`, now you must change it to `PaymentIntent.Status`)
+  - `SetupIntents` was renamed `SetupIntent`. (If you were using `SetupIntents.Status`, now you must change it to `SetupIntent.Status`)
+  - (Typescript) `Card.Token` is now `Token.Result`
+  - (Typescript) `Card.Brand` is now `Token.CardBrand`
+  - (Typescript) `Card.TokenType` is now `Token.Type`
+  - (Typescript) `Card.BankAccount` is now `Token.BankAccount`
+  - (Typescript) `Card.Params` is now `Token.Params`
+  - (Typescript) `CardFormView.Names` is now `CardFormView.FieldName`
+  - (Typescript) `CardFieldInput.Names` is now `CardFieldInput.FieldName`
+  - (Typescript) `ApplePayButtonComponent.Styles` is now `ApplePayButtonComponent.Style`
+  - (Typescript) `ApplePayButtonComponent.Types` is now `ApplePayButtonComponent.Type`
+  - (Typescript) `PaymentMethod` is now `PaymentMethod.Result`
+  - (Typescript) `PaymentIntent` is now `PaymentIntent.Result`
+  - (Typescript) `SetupIntent` is now `SetupIntent.Result`
+  - (Typescript) Exports that were under the `Card` namespace are now under `Token`
+  - (Typescript) `CreateTokenParams` is now `Token.CreateParams`
+  - (Typescript) `BankAcccountHolderType` is now `Token.BankAcccountHolderType`
+  - (Typescript) `ThreeDSecureConfigurationParams` is now `ThreeDSecure.ConfigurationParams`
+  - (Typescript) `PaymentMethodCreateParams.Params` is now `PaymentMethod.CreateParams`
+  - (Typescript) `PaymentMethodCreateParams.Options` is now `PaymentMethod.ConfirmOptions`
+  - (Typescript) `CreateTokenParams` is now `Token.CreateParams`
+  - (Typescript) `ConfirmSetupIntent.Params` is now `SetupIntent.ConfirmParams`
+  - (Typescript) `ConfirmSetupIntent.Options` is now `SetupIntent.ConfirmOptions`
+  - (Typescript) `confirmPayment` now accepts the `PaymentIntent.ConfirmParams` (same type, just renamed).
+  - (Typescript) `BillingDetails` type is now exported directly, instead of under the `PaymentMethodCreateParams` object.
+  - (Typescript) `presentGooglePay` now accepts `GooglePay.PresentParams`
+  - (Typescript) `GooglePay.PresentGooglePayParams` is now `GooglePay.PresentParams`
+  - (Typescript) `GooglePay.PresentGooglePayType` is now `GooglePay.PresentType`
+  - (Typescript) `GooglePay.IsGooglePaySupportedParams` is now `GooglePay.IsSupportedParams`
+  - (Typescript) Removed `GooglePay.SetupIntentParams`
+
 ## 0.6.0
 
 - [#861](https://github.com/stripe/stripe-react-native/pull/861) BREAKING: This library now supports iOS 12 and up, due to `stripe-ios` increasing the deployment target. If you would like to build for iOS 11, please continue to use `@stripe/stripe-react-native@0.5.0`.

package/README.md

@@ -7,7 +7,7 @@ The Stripe React Native SDK allows you to build delightful payment experiences i
 
 ## Getting started
 
-Get started with our [📚 integration guides](https://stripe.com/docs/payments/accept-a-payment?platform=react-native) and [example project](#run-the-example-app), or [📘 browse the SDK reference](https://stripe.dev/stripe-react-native).
+Get started with our [📚 integration guides](https://stripe.com/docs/payments/accept-a-payment?platform=react-native) and [example project](./CONTRIBUTING.md#running-the-example-app), or [📘 browse the SDK reference](https://stripe.dev/stripe-react-native).
 
 > Updating to a newer version of the SDK? See our [changelog](https://github.com/stripe/stripe-react-native/blob/master/CHANGELOG.md).
 
@@ -23,7 +23,7 @@ Get started with our [📚 integration guides](https://stripe.com/docs/payments/
 
 **Native UI**: We provide native screens and elements to securely collect payment details on Android and iOS.
 
-**PaymentSheet**: [Learn how to integrate](https://stripe.com/docs/payments/accept-a-payment) PaymentSheet, our new pre-built payments UI for mobile apps. PaymentSheet lets you accept cards, Apple Pay, Google Pay, and much more out of the box and also supports saving & reusing payment methods. PaymentSheet currently accepts the following payment methods: Card, Apple Pay, Google Pay, SEPA Debit, Bancontact, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, and Sofort.
+**PaymentSheet**: [Learn how to integrate](https://stripe.com/docs/payments/accept-a-payment) PaymentSheet, our new pre-built payments UI for mobile apps. PaymentSheet lets you accept cards, Apple Pay, Google Pay, and much more out of the box and also supports saving & reusing payment methods. PaymentSheet currently accepts the following payment methods: Card, Apple Pay, Google Pay, SEPA Debit, Bancontact, iDEAL, EPS, P24, Afterpay/Clearpay, Klarna, Giropay, Sofort, and ACH.
 
 #### Recommended usage
 
@@ -96,7 +96,7 @@ implementation 'com.google.android.material:material:<version>'
 
 #### iOS
 
-Compatible with apps targeting iOS 11 or above.
+Compatible with apps targeting iOS 12 or above.
 
 The SDK uses TypeScript features available in Babel version `7.9.0` and above.
 Alternatively use the `plugin-transform-typescript` plugin in your project.
@@ -129,7 +129,7 @@ export default function PaymentScreen() {
   return (
     <CardField
       postalCodeEnabled={true}
-      placeholder={{
+      placeholders={{
         number: '4242 4242 4242 4242',
       }}
       cardStyle={{

package/android/build.gradle

@@ -126,15 +126,24 @@ repositories {
 }
 
 def kotlin_version = getExtOrDefault('kotlinVersion')
+def stripe_version = getExtOrDefault('stripeVersion')
 
 dependencies {
   // noinspection GradleDynamicVersion
   api 'com.facebook.react:react-native:+'
+  implementation 'com.github.bumptech.glide:glide:4.12.0'
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
-  implementation 'com.stripe:stripe-android:19.3.+'
+  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'
+
+  // play-services-wallet is already included in stripe-android
+  compileOnly "com.google.android.gms:play-services-wallet:19.1.0"
+
+  // Users need to declare this dependency on their own, otherwise all methods are a no-op
+  compileOnly 'com.stripe:stripe-android-issuing-push-provisioning:1.1.0'
 }

package/android/gradle.properties

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

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

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

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

@@ -42,6 +42,7 @@ internal class CardChangedEvent constructor(viewTag: Int, private val cardDetail
 
     if (dangerouslyGetFullCardDetails) {
       eventData.putString("number", cardDetails["number"]?.toString()?.replace(" ", ""))
+      eventData.putString("cvc", cardDetails["cvc"]?.toString())
     }
 
     return eventData

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

@@ -23,18 +23,18 @@ import com.stripe.android.view.CardValidCallback
 
 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? = context.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
   private var dangerouslyGetFullCardDetails: Boolean = false
+  private var currentFocusedField: String? = null
 
   init {
-
-    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()
@@ -44,37 +44,37 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
 
   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)
@@ -85,7 +85,11 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
     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) {
@@ -148,23 +152,22 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   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
     }
   }
 
@@ -180,7 +183,7 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
     return cardDetails
   }
 
-  fun onValidCardChange() {
+  private fun onValidCardChange() {
     mCardWidget.paymentMethodCard?.let {
       cardParams = it
       cardAddress = Address.Builder()
@@ -207,6 +210,23 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   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"
@@ -224,13 +244,7 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
       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 {
@@ -272,6 +286,9 @@ class CardFieldView(context: ThemedReactContext) : FrameLayout(context) {
       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) {
+        if (dangerouslyGetFullCardDetails) {
+          cardDetails["cvc"] = var1.toString()
+        }
         sendCardDetailsEvent()
       }
     })

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

@@ -27,33 +27,28 @@ class CardFieldViewManager : SimpleViewManager<CardFieldView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  @SuppressWarnings("unused")
   fun setDangerouslyGetFullCardDetails(view: CardFieldView, dangerouslyGetFullCardDetails: Boolean = false) {
     view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  @SuppressWarnings("unused")
   fun setPostalCodeEnabled(view: CardFieldView, postalCodeEnabled: Boolean = true) {
     view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
   @ReactProp(name = "autofocus")
-  @SuppressWarnings("unused")
   fun setAutofocus(view: CardFieldView, autofocus: Boolean = false) {
     view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  @SuppressWarnings("unused")
   fun setCardStyle(view: CardFieldView, cardStyle: ReadableMap) {
     view.setCardStyle(cardStyle)
   }
 
-  @ReactProp(name = "placeholder")
-  @SuppressWarnings("unused")
-  fun setPlaceHolders(view: CardFieldView, placeholder: ReadableMap) {
-    view.setPlaceHolders(placeholder)
+  @ReactProp(name = "placeholders")
+  fun setPlaceHolders(view: CardFieldView, placeholders: ReadableMap) {
+    view.setPlaceHolders(placeholders)
   }
 
   override fun createViewInstance(reactContext: ThemedReactContext): CardFieldView {

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

@@ -30,6 +30,7 @@ internal class CardFormCompleteEvent constructor(viewTag: Int, private val cardD
 
     if (dangerouslyGetFullCardDetails) {
       eventData.putString("number", cardDetails["number"]?.toString()?.replace(" ", ""))
+      eventData.putString("cvc", cardDetails["cvc"]?.toString())
     }
 
     return eventData

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

@@ -2,6 +2,8 @@ package com.reactnativestripesdk
 
 import android.content.res.ColorStateList
 import android.graphics.Color
+import android.graphics.Typeface
+import android.os.Build
 import android.view.View
 import android.view.View.OnFocusChangeListener
 import android.widget.FrameLayout
@@ -9,7 +11,9 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
+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.CardMultilineWidgetBinding
 import com.stripe.android.databinding.StripeCardFormViewBinding
 import com.stripe.android.model.Address
@@ -38,35 +42,31 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   fun setPostalCodeEnabled(value: Boolean) {
-    val cardFormView = StripeCardFormViewBinding.bind(cardForm)
     val visibility = if (value) View.VISIBLE else View.GONE
 
-    cardFormView.cardMultilineWidget.postalCodeRequired = false
-    cardFormView.postalCodeContainer.visibility = visibility
+    cardFormViewBinding.cardMultilineWidget.postalCodeRequired = false
+    cardFormViewBinding.postalCodeContainer.visibility = visibility
   }
 
-  // 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 setPlaceHolders(value: ReadableMap) {
+    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 {
+      cardFormViewBinding.postalCodeContainer.hint = it
+    }
+  }
 
   fun setAutofocus(value: Boolean) {
     if (value) {
@@ -101,11 +101,81 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
   }
 
   fun setCardStyle(value: ReadableMap) {
-    val binding = StripeCardFormViewBinding.bind(cardForm)
     val backgroundColor = getValOr(value, "backgroundColor", null)
+    val textColor = getValOr(value, "textColor", null)
+    val borderWidth = getIntOrNull(value, "borderWidth")
+    val borderColor = getValOr(value, "borderColor", null)
+    val borderRadius = getIntOrNull(value, "borderRadius") ?: 0
+    val fontSize = getIntOrNull(value, "fontSize")
+    val fontFamily = getValOr(value, "fontFamily")
+    val placeholderColor = getValOr(value, "placeholderColor", null)
+    val textErrorColor = getValOr(value, "textErrorColor", null)
+    val cursorColor = getValOr(value, "cursorColor", null)
+
+    val editTextBindings = setOf(
+      cardFormViewBinding.cardMultilineWidget.cardNumberEditText,
+      cardFormViewBinding.cardMultilineWidget.cvcEditText,
+      cardFormViewBinding.cardMultilineWidget.expiryDateEditText,
+      cardFormViewBinding.postalCode
+    )
+
+    textColor?.let {
+      for (binding in editTextBindings) {
+        binding.setTextColor(Color.parseColor(it))
+      }
+      cardFormViewBinding.countryLayout.countryAutocomplete.setTextColor(Color.parseColor(it))
+    }
+    textErrorColor?.let {
+      for (binding in editTextBindings) {
+        binding.setErrorColor(Color.parseColor(it))
+        cardFormViewBinding.postalCode.setErrorColor(Color.parseColor(it))
+      }
+    }
+    placeholderColor?.let {
+      multilineWidgetBinding.tlExpiry.defaultHintTextColor = ColorStateList.valueOf(Color.parseColor(it))
+      multilineWidgetBinding.tlCardNumber.defaultHintTextColor = ColorStateList.valueOf(Color.parseColor(it))
+      multilineWidgetBinding.tlCvc.defaultHintTextColor = ColorStateList.valueOf(Color.parseColor(it))
+      cardFormViewBinding.postalCodeContainer.defaultHintTextColor = ColorStateList.valueOf(Color.parseColor(it))
+    }
+    fontSize?.let {
+      for (binding in editTextBindings) {
+        binding.textSize = it.toFloat()
+      }
+    }
+    fontFamily?.let {
+      for (binding in editTextBindings) {
+        binding.typeface = Typeface.create(it, Typeface.NORMAL)
+      }
+    }
+    cursorColor?.let {
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+        val color = Color.parseColor(it)
+        for (binding in editTextBindings) {
+          binding.textCursorDrawable?.setTint(color)
+          binding.textSelectHandle?.setTint(color)
+          binding.textSelectHandleLeft?.setTint(color)
+          binding.textSelectHandleRight?.setTint(color)
+          binding.highlightColor = color
+        }
+      }
+    }
 
-    binding.cardMultilineWidgetContainer.background = MaterialShapeDrawable().also { shape ->
+    cardFormViewBinding.cardMultilineWidgetContainer.setPadding(40, 0, 40, 0)
+    cardFormViewBinding.cardMultilineWidgetContainer.background = MaterialShapeDrawable(
+      ShapeAppearanceModel()
+        .toBuilder()
+        .setAllCorners(CornerFamily.ROUNDED, (borderRadius * 2).toFloat())
+        .build()
+    ).also { shape ->
+      shape.strokeWidth = 0.0f
+      shape.strokeColor = ColorStateList.valueOf(Color.parseColor("#000000"))
       shape.fillColor = ColorStateList.valueOf(Color.parseColor("#FFFFFF"))
+      borderWidth?.let {
+        shape.strokeWidth = (it * 2).toFloat()
+      }
+      borderColor?.let {
+        shape.strokeColor = ColorStateList.valueOf(Color.parseColor(it))
+      }
       backgroundColor?.let {
         shape.fillColor = ColorStateList.valueOf(Color.parseColor(it))
       }
@@ -132,6 +202,7 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
 
           if (dangerouslyGetFullCardDetails) {
             cardDetails["number"] = cardParamsMap["number"] as String
+            cardDetails["cvc"] = cardParamsMap["cvc"] as String
           }
 
           mEventDispatcher?.dispatchEvent(
@@ -142,8 +213,7 @@ class CardFormView(context: ThemedReactContext) : FrameLayout(context) {
             .setCountry(it.address?.country)
             .build()
 
-          val binding = StripeCardFormViewBinding.bind(cardForm)
-          binding.cardMultilineWidget.paymentMethodCard?.let { params -> cardParams = params }
+          cardFormViewBinding.cardMultilineWidget.paymentMethodCard?.let { params -> cardParams = params }
         }
       } else {
         cardParams = null

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

@@ -27,30 +27,26 @@ class CardFormViewManager : SimpleViewManager<CardFormView>() {
   }
 
   @ReactProp(name = "dangerouslyGetFullCardDetails")
-  @SuppressWarnings("unused")
   fun setDangerouslyGetFullCardDetails(view: CardFormView, dangerouslyGetFullCardDetails: Boolean = false) {
     view.setDangerouslyGetFullCardDetails(dangerouslyGetFullCardDetails)
   }
 
   @ReactProp(name = "postalCodeEnabled")
-  @SuppressWarnings("unused")
   fun setPostalCodeEnabled(view: CardFormView, postalCodeEnabled: Boolean = false) {
     view.setPostalCodeEnabled(postalCodeEnabled)
   }
 
-  // @ReactProp(name = "placeholder")
-  // fun setPlaceHolders(view: CardFormView, placeholder: ReadableMap) {
-  //   view.setPlaceHolders(placeholder)
-  // }
+   @ReactProp(name = "placeholders")
+   fun setPlaceHolders(view: CardFormView, placeholders: ReadableMap) {
+     view.setPlaceHolders(placeholders);
+   }
 
   @ReactProp(name = "autofocus")
-  @SuppressWarnings("unused")
   fun setAutofocus(view: CardFormView, autofocus: Boolean = false) {
     view.setAutofocus(autofocus)
   }
 
   @ReactProp(name = "cardStyle")
-  @SuppressWarnings("unused")
   fun setCardStyle(view: CardFormView, cardStyle: ReadableMap) {
     view.setCardStyle(cardStyle)
   }