@stripe/stripe-react-native 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,7 +1,25 @@
 # 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.

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
 

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

@@ -286,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/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

@@ -202,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(

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

@@ -78,7 +78,7 @@ class CollectBankAccountLauncherFragment(
           promise.resolve(createError(ErrorType.Failed.toString(), result.error))
         }
       }
-      (context.currentActivity as? AppCompatActivity)?.supportFragmentManager?.beginTransaction()?.remove(this)?.commit()
+      (context.currentActivity as? AppCompatActivity)?.supportFragmentManager?.beginTransaction()?.remove(this)?.commitAllowingStateLoss()
     }
   }
 }

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

@@ -37,7 +37,7 @@ class GooglePayPaymentMethodLauncherFragment(
       ),
       readyCallback = {
         promise.resolve(it)
-        (context.currentActivity as? AppCompatActivity)?.supportFragmentManager?.beginTransaction()?.remove(this)?.commit()
+        (context.currentActivity as? AppCompatActivity)?.supportFragmentManager?.beginTransaction()?.remove(this)?.commitAllowingStateLoss()
       },
       resultCallback = {}
     )

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

@@ -107,6 +107,7 @@ internal fun mapPaymentMethodType(type: PaymentMethod.Type?): String {
     PaymentMethod.Type.WeChatPay -> "WeChatPay"
     PaymentMethod.Type.Klarna -> "Klarna"
     PaymentMethod.Type.USBankAccount -> "USBankAccount"
+    PaymentMethod.Type.PayPal -> "PayPal"
     else -> "Unknown"
   }
 }
@@ -134,6 +135,7 @@ internal fun mapToPaymentMethodType(type: String?): PaymentMethod.Type? {
     "WeChatPay" -> PaymentMethod.Type.WeChatPay
     "Klarna" -> PaymentMethod.Type.Klarna
     "USBankAccount" -> PaymentMethod.Type.USBankAccount
+    "PayPal" -> PaymentMethod.Type.PayPal
     else -> null
   }
 }
@@ -317,7 +319,6 @@ internal fun mapFromPaymentMethod(paymentMethod: PaymentMethod): WritableMap {
 
   card.putString("brand", mapCardBrand(paymentMethod.card?.brand))
   card.putString("country", paymentMethod.card?.country)
-
   paymentMethod.card?.expiryYear?.let {
     card.putInt("expYear", it)
   }
@@ -326,6 +327,7 @@ internal fun mapFromPaymentMethod(paymentMethod: PaymentMethod): WritableMap {
   }
   card.putString("funding", paymentMethod.card?.funding)
   card.putString("last4", paymentMethod.card?.last4)
+  card.putString("fingerprint", paymentMethod.card?.fingerprint)
 
   sepaDebit.putString("bankCode", paymentMethod.sepaDebit?.bankCode)
   sepaDebit.putString("country", paymentMethod.sepaDebit?.country)
@@ -504,24 +506,25 @@ fun getValOr(map: ReadableMap?, key: String, default: String? = ""): String? {
   } ?: default
 }
 
-internal fun mapToAddress(addressMap: ReadableMap?, cardAddress: Address?): Address? {
-  if (addressMap == null) {
-    return null
-  }
+internal fun mapToAddress(addressMap: ReadableMap?, cardAddress: Address?): Address {
   val address = Address.Builder()
-    .setPostalCode(getValOr(addressMap, "postalCode"))
-    .setCity(getValOr(addressMap, "city"))
-    .setCountry(getValOr(addressMap, "country"))
-    .setLine1(getValOr(addressMap, "line1"))
-    .setLine2(getValOr(addressMap, "line2"))
-    .setState(getValOr(addressMap, "state"))
-
-  cardAddress?.let { ca ->
-    ca.postalCode?.let {
-      address.setPostalCode(it)
+
+  addressMap?.let {
+    address
+      .setPostalCode(getValOr(it, "postalCode"))
+      .setCity(getValOr(it, "city"))
+      .setCountry(getValOr(it, "country"))
+      .setLine1(getValOr(it, "line1"))
+      .setLine2(getValOr(it, "line2"))
+      .setState(getValOr(it, "state"))
+  }
+
+  cardAddress?.let {
+    if (!it.postalCode.isNullOrEmpty()) {
+      address.setPostalCode(it.postalCode)
     }
-    ca.country?.let {
-      address.setCountry(it)
+    if (!it.country.isNullOrEmpty()) {
+      address.setCountry(it.country)
     }
   }
 
@@ -532,19 +535,17 @@ internal fun mapToBillingDetails(billingDetails: ReadableMap?, cardAddress: Addr
   if (billingDetails == null && cardAddress == null) {
     return null
   }
-  var address: Address? = null
+  val address = mapToAddress(getMapOrNull(billingDetails, "address"), cardAddress)
   val paymentMethodBillingDetailsBuilder =  PaymentMethod.BillingDetails.Builder()
 
   if (billingDetails != null) {
-    address = mapToAddress(getMapOrNull(billingDetails, "address"), cardAddress)
-
     paymentMethodBillingDetailsBuilder
       .setName(getValOr(billingDetails, "name"))
       .setPhone(getValOr(billingDetails, "phone"))
       .setEmail(getValOr(billingDetails, "email"))
   }
 
-  paymentMethodBillingDetailsBuilder.setAddress(address ?: Address.Builder().build())
+  paymentMethodBillingDetailsBuilder.setAddress(address)
   return paymentMethodBillingDetailsBuilder.build()
 }
 
@@ -554,7 +555,6 @@ internal fun mapToShippingDetails(shippingDetails: ReadableMap?): ConfirmPayment
   }
 
   val address = mapToAddress(getMapOrNull(shippingDetails, "address"), null)
-    ?: Address.Builder().build()
 
   return ConfirmPaymentIntentParams.Shipping(
     name = getValOr(shippingDetails, "name") ?: "",

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

@@ -32,6 +32,7 @@ class PaymentMethodCreateParamsFactory(
         PaymentMethod.Type.AuBecsDebit -> createAuBecsDebitPaymentConfirmParams()
         PaymentMethod.Type.Klarna -> createKlarnaPaymentConfirmParams()
         PaymentMethod.Type.USBankAccount -> createUSBankAccountPaymentConfirmParams()
+        PaymentMethod.Type.PayPal -> createPayPalPaymentConfirmParams()
         else -> {
           throw Exception("This paymentMethodType is not supported yet")
         }
@@ -52,6 +53,7 @@ class PaymentMethodCreateParamsFactory(
         PaymentMethod.Type.SepaDebit -> createSepaPaymentSetupParams()
         PaymentMethod.Type.AuBecsDebit -> createAuBecsDebitPaymentSetupParams()
         PaymentMethod.Type.USBankAccount -> createUSBankAccountPaymentSetupParams()
+        PaymentMethod.Type.PayPal -> createPayPalPaymentSetupParams()
         else -> {
           throw Exception("This paymentMethodType is not supported yet")
         }
@@ -172,14 +174,31 @@ class PaymentMethodCreateParamsFactory(
 
   @Throws(PaymentMethodCreateParamsException::class)
   private fun createCardPaymentSetupParams(): ConfirmSetupIntentParams {
+    val paymentMethodId = getValOr(paymentMethodData, "paymentMethodId", null)
+    val token = getValOr(paymentMethodData, "token", null)
     val cardParams = cardFieldView?.cardParams ?: cardFormView?.cardParams
-    ?: throw PaymentMethodCreateParamsException("Card details not complete")
 
-    val paymentMethodCreateParams =
-      PaymentMethodCreateParams.create(cardParams, billingDetailsParams)
+    if (paymentMethodId != null) {
+      return ConfirmSetupIntentParams.create(
+        paymentMethodId,
+        clientSecret
+      )
+    }
 
-    return ConfirmSetupIntentParams
-      .create(paymentMethodCreateParams, clientSecret)
+    val paymentMethodCreateParams =
+      if (token != null)
+        PaymentMethodCreateParams.create(PaymentMethodCreateParams.Card.create(token), billingDetailsParams)
+      else if (cardParams != null)
+        PaymentMethodCreateParams.create(cardParams, billingDetailsParams)
+      else
+        null
+
+    if (paymentMethodCreateParams != null) {
+      return ConfirmSetupIntentParams
+        .create(paymentMethodCreateParams, clientSecret)
+    } else {
+      throw PaymentMethodCreateParamsException("Card details not complete")
+    }
   }
 
   @Throws(PaymentMethodCreateParamsException::class)
@@ -450,6 +469,10 @@ class PaymentMethodCreateParamsFactory(
     }
   }
 
+  @Throws(PaymentMethodCreateParamsException::class)
+  private fun createPayPalPaymentSetupParams(): ConfirmSetupIntentParams {
+    throw PaymentMethodCreateParamsException("PayPal is not yet supported through SetupIntents.")
+  }
 
   @Throws(PaymentMethodCreateParamsException::class)
   private fun createKlarnaPaymentConfirmParams(): ConfirmPaymentIntentParams {
@@ -492,6 +515,14 @@ class PaymentMethodCreateParamsFactory(
     }
   }
 
+  @Throws(PaymentMethodCreateParamsException::class)
+  private fun createPayPalPaymentConfirmParams(): ConfirmPaymentIntentParams {
+    return ConfirmPaymentIntentParams.createWithPaymentMethodCreateParams(
+      paymentMethodCreateParams = PaymentMethodCreateParams.createPayPal(null),
+      clientSecret = clientSecret,
+    )
+  }
+
   @Throws(PaymentMethodCreateParamsException::class)
   private fun createUSBankAccountParams(params: ReadableMap): PaymentMethodCreateParams {
     val accountNumber = getValOr(params, "accountNumber", null)

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

@@ -54,8 +54,11 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
   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)
+        // END
         try {
           val result = AddPaymentMethodActivityStarter.Result.fromIntent(data)
           if (data?.getParcelableExtra<Parcelable>("extra_activity_result") != null) {
@@ -225,9 +228,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
 
     paymentLauncherFragment = PaymentLauncherFragment(stripe, publishableKey, stripeAccountId)
     getCurrentActivityOrResolveWithError(promise)?.let {
-      it.supportFragmentManager.beginTransaction()
-        .add(paymentLauncherFragment, "payment_launcher_fragment")
-        .commit()
+      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))
@@ -252,9 +259,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
         val bundle = toBundleObject(params)
         it.arguments = bundle
       }
-      activity.supportFragmentManager.beginTransaction()
-        .add(paymentSheetFragment!!, "payment_sheet_launch_fragment")
-        .commit()
+      try {
+        activity.supportFragmentManager.beginTransaction()
+          .add(paymentSheetFragment!!, "payment_sheet_launch_fragment")
+          .commit()
+      } catch (error: IllegalStateException) {
+        promise.resolve(createError(ErrorType.Failed.toString(), error.message))
+      }
     }
   }
 
@@ -562,9 +573,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     )
 
     getCurrentActivityOrResolveWithError(promise)?.let {
-      it.supportFragmentManager.beginTransaction()
-        .add(fragment, "google_pay_support_fragment")
-        .commit()
+      try {
+        it.supportFragmentManager.beginTransaction()
+          .add(fragment, "google_pay_support_fragment")
+          .commit()
+      } catch (error: IllegalStateException) {
+        promise.resolve(createError(ErrorType.Failed.toString(), error.message))
+      }
     }
   }
 
@@ -578,9 +593,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
     getCurrentActivityOrResolveWithError(promise)?.let {
       initGooglePayPromise = promise
 
-      it.supportFragmentManager.beginTransaction()
-        .add(googlePayFragment!!, "google_pay_launch_fragment")
-        .commit()
+      try {
+        it.supportFragmentManager.beginTransaction()
+          .add(googlePayFragment!!, "google_pay_launch_fragment")
+          .commit()
+      } catch (error: IllegalStateException) {
+        promise.resolve(createError(ErrorType.Failed.toString(), error.message))
+      }
     }
   }
 
@@ -658,9 +677,13 @@ class StripeSdkModule(private val reactContext: ReactApplicationContext) : React
       promise
     )
     getCurrentActivityOrResolveWithError(promise)?.let {
-      it.supportFragmentManager.beginTransaction()
-        .add(fragment, "collect_bank_account_launcher_fragment")
-        .commit()
+      try {
+        it.supportFragmentManager.beginTransaction()
+          .add(fragment, "collect_bank_account_launcher_fragment")
+          .commit()
+      } catch (error: IllegalStateException) {
+        promise.resolve(createError(ErrorType.Failed.toString(), error.message))
+      }
     }
   }
 

package/android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonManager.kt

@@ -38,14 +38,9 @@ class AddToWalletButtonManager(applicationContext: ReactApplicationContext) : Si
     view.setSourceMap(source)
   }
 
-  @ReactProp(name = "cardDescription")
-  fun cardDescription(view: AddToWalletButtonView, cardDescription: String) {
-    view.setCardDescription(cardDescription)
-  }
-
-  @ReactProp(name = "cardLastFour")
-  fun cardLastFour(view: AddToWalletButtonView, last4: String) {
-    view.setCardLastFour(last4)
+  @ReactProp(name = "cardDetails")
+  fun cardDetails(view: AddToWalletButtonView, cardDetails: ReadableMap) {
+    view.setCardDetails(cardDetails)
   }
 
   @ReactProp(name = "ephemeralKey")

package/android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonView.kt

@@ -22,8 +22,7 @@ import com.reactnativestripesdk.createError
 
 
 class AddToWalletButtonView(private val context: ThemedReactContext, private val requestManager: RequestManager) : AppCompatImageView(context) {
-  private var cardDescription: String? = null
-  private var cardLastFour: String? = null
+  private var cardDetails: ReadableMap? = null
   private var ephemeralKey: String? = null
   private var sourceMap: ReadableMap? = null
   private var token: ReadableMap? = null
@@ -35,7 +34,8 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
 
   override fun performClick(): Boolean {
     super.performClick()
-    cardDescription?.let { cardDescription ->
+
+    cardDetails?.getString("description")?.let { cardDescription ->
       ephemeralKey?.let { ephemeralKey ->
         PushProvisioningProxy.invoke(
           context.reactApplicationContext,
@@ -50,7 +50,7 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
       }
     } ?: run {
       dispatchEvent(
-        createError("Failed", "Missing parameters. `cardDescription` must be supplied in the props to <AddToWalletButton />")
+        createError("Failed", "Missing parameters. `cardDetails.cardDescription` must be supplied in the props to <AddToWalletButton />")
       )
     }
     return true
@@ -125,12 +125,8 @@ class AddToWalletButtonView(private val context: ThemedReactContext, private val
     sourceMap = map
   }
 
-  fun setCardDescription(description: String) {
-    cardDescription = description
-  }
-
-  fun setCardLastFour(last4: String) {
-    cardLastFour = last4
+  fun setCardDetails(detailsMap: ReadableMap) {
+    cardDetails = detailsMap
   }
 
   fun setEphemeralKey(map: ReadableMap) {

package/ios/CardFieldView.swift

@@ -145,6 +145,7 @@ class CardFieldView: UIView, STPPaymentCardTextFieldDelegate {
             }
             if (dangerouslyGetFullCardDetails) {
                 cardData["number"] = textField.cardParams.number ?? ""
+                cardData["cvc"] = textField.cardParams.cvc ?? ""
             }
             onCardChange!(cardData as [AnyHashable : Any])
         }

package/ios/CardFormView.swift

@@ -52,6 +52,7 @@ class CardFormView: UIView, STPCardFormViewDelegate {
 
             if (dangerouslyGetFullCardDetails) {
                 cardData["number"] = cardForm?.cardParams?.card?.number ?? ""
+                cardData["cvc"] = cardForm?.cardParams?.card?.cvc ?? ""
             }
             if (complete) {
                 self.cardParams = cardForm?.cardParams?.card

package/ios/Mappers.swift

@@ -283,6 +283,7 @@ class Mappers {
         case STPPaymentMethodType.afterpayClearpay: return "AfterpayClearpay"
         case STPPaymentMethodType.klarna: return "Klarna"
         case STPPaymentMethodType.USBankAccount: return "USBankAccount"
+        case STPPaymentMethodType.payPal: return "PayPal"
         case STPPaymentMethodType.unknown: return "Unknown"
         default: return "Unknown"
         }
@@ -311,6 +312,7 @@ class Mappers {
             case "Klarna": return STPPaymentMethodType.klarna
             case "WeChatPay": return STPPaymentMethodType.weChatPay
             case "USBankAccount": return STPPaymentMethodType.USBankAccount
+            case "PayPal": return STPPaymentMethodType.payPal
             default: return STPPaymentMethodType.unknown
             }
         }

package/ios/PaymentMethodFactory.swift

@@ -51,6 +51,8 @@ class PaymentMethodFactory {
                 return try createKlarnaPaymentMethodParams()
             case STPPaymentMethodType.USBankAccount:
                 return try createUSBankAccountPaymentMethodParams()
+            case STPPaymentMethodType.payPal:
+                return try createPayPalPaymentMethodParams()
 //            case STPPaymentMethodType.weChatPay:
 //                return try createWeChatPayPaymentMethodParams()
             default:
@@ -98,6 +100,8 @@ class PaymentMethodFactory {
                 return try createWeChatPayPaymentMethodOptions()
             case STPPaymentMethodType.USBankAccount:
                 return try createUSBankAccountPaymentMethodOptions()
+            case STPPaymentMethodType.payPal:
+                return nil
             default:
                 throw PaymentMethodError.paymentNotSupported
             }
@@ -353,6 +357,10 @@ class PaymentMethodFactory {
             throw PaymentMethodError.usBankAccountPaymentMissingParams
         }
     }
+    
+    private func createPayPalPaymentMethodParams() throws -> STPPaymentMethodParams {
+        return STPPaymentMethodParams(payPal: STPPaymentMethodPayPalParams(), billingDetails: billingDetailsParams, metadata: nil)
+    }
 }
 
 enum PaymentMethodError: Error {

package/ios/StripeSdk.swift

@@ -275,10 +275,14 @@ class StripeSdk: RCTEventEmitter, STPApplePayContextDelegate, STPBankSelectionVi
         let paymentMethodData = params["paymentMethodData"] as? NSDictionary
         let type = Mappers.mapToPaymentMethodType(type: params["paymentMethodType"] as? String)
         guard let paymentMethodType = type else {
-            resolve(Errors.createError(ErrorType.Failed, "You must provide paymentMethodType"))
+            resolve(Errors.createError(ErrorType.Failed, "You must provide paymentMethodType."))
             return
         }
         
+        if (paymentMethodType == .payPal) {
+            resolve(Errors.createError(ErrorType.Failed, "PayPal is not yet supported through SetupIntents."))
+        }
+        
         var err: NSDictionary? = nil
         let setupIntentParams: STPSetupIntentConfirmParams = {
             // If payment method data is not supplied, assume payment method was attached through via collectBankAccount

package/ios/pushprovisioning/AddToWalletButtonManager.m

@@ -12,10 +12,7 @@
 @interface RCT_EXTERN_MODULE(AddToWalletButtonManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(testEnv, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(iOSButtonStyle, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardHolderName, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardDescription, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardLastFour, NSString)
-RCT_EXPORT_VIEW_PROPERTY(cardBrand, NSString)
+RCT_EXPORT_VIEW_PROPERTY(cardDetails, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(ephemeralKey, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(onCompleteAction, RCTDirectEventBlock)
 @end

package/ios/pushprovisioning/AddToWalletButtonView.swift

@@ -15,10 +15,7 @@ class AddToWalletButtonView: UIView {
 
     @objc var testEnv: Bool = false
     @objc var iOSButtonStyle: NSString?
-    @objc var cardHolderName: NSString?
-    @objc var cardDescription: NSString?
-    @objc var cardLastFour: NSString?
-    @objc var cardBrand: NSString?
+    @objc var cardDetails: NSDictionary?
     @objc var ephemeralKey: NSDictionary?
     @objc var onCompleteAction: RCTDirectEventBlock?
 
@@ -65,22 +62,22 @@ class AddToWalletButtonView: UIView {
             )
             return
         }
-        
-        guard let cardHolderName = cardHolderName as String? else {
+
+        guard let cardHolderName = cardDetails?["name"] as? String else {
             onCompleteAction!(
                 Errors.createError(
                     ErrorType.Failed,
-                    "Missing parameters. `cardHolderName` must be supplied in the props to <AddToWalletButton />"
+                    "Missing parameters. `cardDetails.name` must be supplied in the props to <AddToWalletButton />"
                 ) as? [AnyHashable : Any]
             )
             return
         }
-        
+
         if (cardHolderName.isEmpty) {
             onCompleteAction!(
                 Errors.createError(
                     ErrorType.Failed,
-                    "`cardHolderName` is required, but the passed string was empty"
+                    "`cardDetails.name` is required, but the passed string was empty"
                 ) as? [AnyHashable : Any]
             )
             return
@@ -88,17 +85,18 @@ class AddToWalletButtonView: UIView {
 
         let config = STPPushProvisioningContext.requestConfiguration(
             withName: cardHolderName,
-            description: cardDescription as String?,
-            last4: cardLastFour as String?,
-            brand: Mappers.mapToCardBrand(cardBrand as String?)
+            description: cardDetails?["description"] as? String,
+            last4: cardDetails?["lastFour"] as? String,
+            brand: Mappers.mapToCardBrand(cardDetails?["brand"] as? String),
+            primaryAccountIdentifier: cardDetails?["primaryAccountIdentifier"] as? String
         )
-        
+
         // We can use STPFakeAddPaymentPassViewController ONLY IN TEST MODE. If STPFakeAddPaymentPassViewController is
         // used with a live mode card, the flow will fail and show a 'Signing certificate was invalid' error.
         let controller = {
             return self.testEnv ? STPFakeAddPaymentPassViewController(requestConfiguration: config, delegate: self) : PKAddPaymentPassViewController(requestConfiguration: config, delegate: self)
         }()
-        
+
         let vc = findViewControllerPresenter(from: UIApplication.shared.delegate?.window??.rootViewController ?? UIViewController())
         vc.present(controller!, animated: true, completion: nil)
     }

package/lib/commonjs/components/AddToWalletButton.js

@@ -1,2 +1,2 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AddToWalletButton=AddToWalletButton;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/acomley/stripe/stripe-react-native/src/components/AddToWalletButton.tsx";var _excluded=["onComplete"];var AddToWalletButtonNative=(0,_reactNative.requireNativeComponent)('AddToWalletButton');function AddToWalletButton(_ref){var onComplete=_ref.onComplete,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);return _react.default.createElement(AddToWalletButtonNative,(0,_extends2.default)({},props,{onCompleteAction:function onCompleteAction(value){return onComplete(value.nativeEvent);},__self:this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:5}}));}
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.AddToWalletButton=AddToWalletButton;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/acomley/stripe/stripe-react-native/src/components/AddToWalletButton.tsx";var _excluded=["onComplete"];var AddToWalletButtonNative=(0,_reactNative.requireNativeComponent)('AddToWalletButton');function AddToWalletButton(_ref){var onComplete=_ref.onComplete,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);return _react.default.createElement(AddToWalletButtonNative,(0,_extends2.default)({},props,{onCompleteAction:function onCompleteAction(value){return onComplete(value.nativeEvent);},__self:this,__source:{fileName:_jsxFileName,lineNumber:84,columnNumber:5}}));}
 //# sourceMappingURL=AddToWalletButton.js.map

package/lib/commonjs/components/AddToWalletButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AddToWalletButton.tsx"],"names":["AddToWalletButtonNative","AddToWalletButton","onComplete","props","value","nativeEvent"],"mappings":"wXAAA,oDACA,yC,+HAeA,GAAMA,CAAAA,uBAAuB,CAC3B,wCAA4B,mBAA5B,CADF,CA0DO,QAASC,CAAAA,iBAAT,MAA4D,IAA/BC,CAAAA,UAA+B,MAA/BA,UAA+B,CAAhBC,KAAgB,uDACjE,MACE,8BAAC,uBAAD,0BACMA,KADN,EAEE,gBAAgB,CAAE,0BAChBC,KADgB,QAIbF,CAAAA,UAAU,CAACE,KAAK,CAACC,WAAP,CAJG,EAFpB,6EADF,CAUD","sourcesContent":["import React from 'react';\nimport {\n  AccessibilityProps,\n  StyleProp,\n  ViewStyle,\n  requireNativeComponent,\n  NativeSyntheticEvent,\n  ImageSourcePropType,\n} from 'react-native';\nimport type {\n  Token,\n  CardActionError,\n  StripeError,\n  GooglePayCardToken,\n} from '../types';\n\nconst AddToWalletButtonNative =\n  requireNativeComponent<any>('AddToWalletButton');\n\n/**\n *  Add to wallet button component props\n */\nexport interface Props extends AccessibilityProps {\n  style?: StyleProp<ViewStyle>;\n  /** Sets the Apple Wallet/Google Pay button style. If the button is placed over a dark background, set this to 'onDarkBackground', otherwise set to 'onLightBackground'. */\n  iOSButtonStyle?: 'onDarkBackground' | 'onLightBackground';\n  /** The image asset to use as the Google Pay button. Downloadable from https://developers.google.com/pay/issuers/apis/push-provisioning/android/downloads/flutter/googlepay_flutter_buttons.zip */\n  androidAssetSource: ImageSourcePropType;\n  testID?: string;\n  /** Only set to `false` when shipping through TestFlight || App Store */\n  testEnv?: boolean;\n  /** Sets the card holder name (used only on iOS) */\n  cardHolderName: string;\n  /** Last 4 digits of the card. Required on Android. */\n  cardLastFour: string;\n  /** Sets the card holder name (used only on iOS) */\n  cardDescription?: string;\n  /** Optional, only used on iOS */\n  cardBrand?: Token.CardBrand;\n  // Optional, only for Android and only for cards that are in the \"yellow path\" (as defined by Google- https://developers.google.com/pay/issuers/apis/push-provisioning/android/wallet-operations#resolving_yellow_path). Obtain this value via the `isCardInWallet` method.\n  token?: GooglePayCardToken | null;\n  /** Used by stripe to securely obtain card info of the card being provisioned. */\n  ephemeralKey: object;\n  /** Called when the flow completes. If the `error` field is `null`, then the card was successfully added to the user's native wallet. */\n  onComplete(result: { error: StripeError<CardActionError> | null }): void;\n}\n\n/**\n *  Add to wallet button\n *\n * @example\n * ```ts\n *  <AddToWalletButton\n *    testEnv={true}\n *    style={styles.myButtonStyle}\n *    iOSButtonStyle=\"onLightBackground\"\n *    cardHolderName=\"David Wallace\"\n *    cardLastFour=\"4242\"\n *    cardBrand=\"Visa\"\n *    ephemeralKey={myEphemeralKey} // This object is retrieved from your server. See https://stripe.com/docs/issuing/cards/digital-wallets?platform=react-native#update-your-backend\n *    onComplete={(error) => {\n *      Alert.alert(\n *        error ? error.code : 'Success',\n *        error\n *          ? error.message\n *          : 'Card was successfully added to the wallet.'\n *      );\n *    }}\n *  />\n * ```\n * @param __namedParameters Props\n * @returns JSX.Element\n * @category ReactComponents\n */\nexport function AddToWalletButton({ onComplete, ...props }: Props) {\n  return (\n    <AddToWalletButtonNative\n      {...props}\n      onCompleteAction={(\n        value: NativeSyntheticEvent<{\n          error: StripeError<CardActionError> | null;\n        }>\n      ) => onComplete(value.nativeEvent)}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["AddToWalletButton.tsx"],"names":["AddToWalletButtonNative","AddToWalletButton","onComplete","props","value","nativeEvent"],"mappings":"wXAAA,oDACA,yC,+HAeA,GAAMA,CAAAA,uBAAuB,CAC3B,wCAA4B,mBAA5B,CADF,CAiEO,QAASC,CAAAA,iBAAT,MAA4D,IAA/BC,CAAAA,UAA+B,MAA/BA,UAA+B,CAAhBC,KAAgB,uDACjE,MACE,8BAAC,uBAAD,0BACMA,KADN,EAEE,gBAAgB,CAAE,0BAChBC,KADgB,QAIbF,CAAAA,UAAU,CAACE,KAAK,CAACC,WAAP,CAJG,EAFpB,6EADF,CAUD","sourcesContent":["import React from 'react';\nimport {\n  AccessibilityProps,\n  StyleProp,\n  ViewStyle,\n  requireNativeComponent,\n  NativeSyntheticEvent,\n  ImageSourcePropType,\n} from 'react-native';\nimport type {\n  Token,\n  CardActionError,\n  StripeError,\n  GooglePayCardToken,\n} from '../types';\n\nconst AddToWalletButtonNative =\n  requireNativeComponent<any>('AddToWalletButton');\n\n/**\n *  Add to wallet button component props\n */\nexport interface Props extends AccessibilityProps {\n  style?: StyleProp<ViewStyle>;\n  /** Sets the Apple Wallet/Google Pay button style. If the button is placed over a dark background, set this to 'onDarkBackground', otherwise set to 'onLightBackground'. */\n  iOSButtonStyle?: 'onDarkBackground' | 'onLightBackground';\n  /** The image asset to use as the Google Pay button. Downloadable from https://developers.google.com/pay/issuers/apis/push-provisioning/android/downloads/flutter/googlepay_flutter_buttons.zip */\n  androidAssetSource: ImageSourcePropType;\n  testID?: string;\n  /** Only set to `false` when shipping through TestFlight || App Store */\n  testEnv?: boolean;\n  /** Details of the Issued Card you'd like added to the device's wallet */\n  cardDetails: {\n    /** The `primary_account_identifier` value from the issued card. */\n    primaryAccountIdentifier: string | null;\n    /** The card holder name (used only on iOS) */\n    name: string;\n    /** A user-facing description of the card. Required on Android.*/\n    description: string;\n    /** Last 4 digits of the card, only used on iOS */\n    lastFour?: string;\n    /** Optional, only used on iOS */\n    brand?: Token.CardBrand;\n  };\n  // Optional, only for Android and only for cards that are in the \"yellow path\" (as defined by Google- https://developers.google.com/pay/issuers/apis/push-provisioning/android/wallet-operations#resolving_yellow_path). Obtain this value via the `isCardInWallet` method.\n  token?: GooglePayCardToken | null;\n  /** Used by stripe to securely obtain card info of the card being provisioned. */\n  ephemeralKey: object;\n  /** Called when the flow completes. If the `error` field is `null`, then the card was successfully added to the user's native wallet. */\n  onComplete(result: { error: StripeError<CardActionError> | null }): void;\n}\n\n/**\n *  Add to wallet button\n *\n * @example\n * ```ts\n *  <AddToWalletButton\n *    testEnv={true}\n *    style={styles.myButtonStyle}\n *    iOSButtonStyle=\"onLightBackground\"\n *    cardDetails={{\n *      primaryAccountIdentifier: \"V-123\",\n *      name: \"David Wallace\",\n *      lastFour: \"4242\",\n *    }}\n *    ephemeralKey={myEphemeralKey} // This object is retrieved from your server. See https://stripe.com/docs/issuing/cards/digital-wallets?platform=react-native#update-your-backend\n *    onComplete={(error) => {\n *      Alert.alert(\n *        error ? error.code : 'Success',\n *        error\n *          ? error.message\n *          : 'Card was successfully added to the wallet.'\n *      );\n *    }}\n *  />\n * ```\n * @param __namedParameters Props\n * @returns JSX.Element\n * @category ReactComponents\n */\nexport function AddToWalletButton({ onComplete, ...props }: Props) {\n  return (\n    <AddToWalletButtonNative\n      {...props}\n      onCompleteAction={(\n        value: NativeSyntheticEvent<{\n          error: StripeError<CardActionError> | null;\n        }>\n      ) => onComplete(value.nativeEvent)}\n    />\n  );\n}\n"]}