BREAKING: Typescript upgrade + type audit (stripe#837)

CHANGELOG.md

@@ -1,5 +1,43 @@
 # CHANGELOG
 
+- [#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/[email protected]`.

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

@@ -477,31 +477,19 @@ internal fun mapToBillingDetails(billingDetails: ReadableMap?, cardAddress: Addr
   if (billingDetails == null && cardAddress == null) {
     return null
   }
-  val addressBuilder = Address.Builder()
+  var address: Address? = null
   val paymentMethodBillingDetailsBuilder =  PaymentMethod.BillingDetails.Builder()
 
   if (billingDetails != null) {
-    addressBuilder
-      .setPostalCode(getValOr(billingDetails, "addressPostalCode"))
-      .setCity(getValOr(billingDetails, "addressCity"))
-      .setCountry(getValOr(billingDetails, "addressCountry"))
-      .setLine1(getValOr(billingDetails, "addressLine1"))
-      .setLine2(getValOr(billingDetails, "addressLine2"))
-      .setState(getValOr(billingDetails, "addressState"))
+    address = mapToAddress(getMapOrNull(billingDetails, "address"), cardAddress)
+
     paymentMethodBillingDetailsBuilder
       .setName(getValOr(billingDetails, "name"))
       .setPhone(getValOr(billingDetails, "phone"))
       .setEmail(getValOr(billingDetails, "email"))
   }
 
-  if (cardAddress?.postalCode?.isNotEmpty() == true) {
-    addressBuilder.setPostalCode(cardAddress.postalCode)
-  }
-  if (cardAddress?.country?.isNotEmpty() == true) {
-    addressBuilder.setCountry(cardAddress.country)
-  }
-
-  paymentMethodBillingDetailsBuilder.setAddress(addressBuilder.build())
+  paymentMethodBillingDetailsBuilder.setAddress(address ?: Address.Builder().build())
   return paymentMethodBillingDetailsBuilder.build()
 }
 
@@ -510,16 +498,12 @@ internal fun mapToShippingDetails(shippingDetails: ReadableMap?): ConfirmPayment
     return null
   }
 
+  val address = mapToAddress(getMapOrNull(shippingDetails, "address"), null)
+    ?: Address.Builder().build()
+
   return ConfirmPaymentIntentParams.Shipping(
     name = getValOr(shippingDetails, "name") ?: "",
-    address = Address.Builder()
-      .setLine1(getValOr(shippingDetails, "addressLine1"))
-      .setLine2(getValOr(shippingDetails, "addressLine2"))
-      .setCity(getValOr(shippingDetails, "addressCity"))
-      .setState(getValOr(shippingDetails, "addressState"))
-      .setCountry(getValOr(shippingDetails, "addressCountry"))
-      .setPostalCode(getValOr(shippingDetails, "addressPostalCode"))
-      .build()
+    address = address
   )
 }
 

e2e/paymentsWithRedirects.test.ts

@@ -201,7 +201,7 @@ describe('Payment scenarios with redirects', () => {
     $('~payment-screen').waitForDisplayed({ timeout: 30000 });
 
     BasicPaymentScreen.pay({ email: '[email protected]' });
-    BasicPaymentScreen.authorize();
+    BasicPaymentScreen.authorize({ elementType: 'a' });
     BasicPaymentScreen.checkStatus();
   });
 

example/ios/Podfile.lock

@@ -292,7 +292,7 @@ PODS:
     - StripeApplePay (= 22.0.0)
     - StripeCore (= 22.0.0)
     - StripeUICore (= 22.0.0)
-  - stripe-react-native (0.4.0):
+  - stripe-react-native (0.6.0):
     - React-Core
     - Stripe (~> 22.0.0)
     - StripeConnections (~> 22.0.0)
@@ -470,7 +470,7 @@ SPEC CHECKSUMS:
   RNCPicker: cb57c823d5ce8d2d0b5dfb45ad97b737260dc59e
   RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
   Stripe: ee32e594fa4dee4bdf2a8a3039f7fb07a21075dc
-  stripe-react-native: 8f3fde51668ca1af4ebb717710f7f05665395d76
+  stripe-react-native: c49c29072a98114ca534ff12f8792d9dba3b0d10
   StripeApplePay: e09964f3e2c6b318e53a05c12f3cb7efc592484d
   StripeConnections: d3068bf688679a51932abb94d956d8a73c213bd7
   StripeCore: 689b9605ccb78e507f59ddc5e677615e0af16583

example/server/index.ts

@@ -139,7 +139,7 @@ app.post(
       return res.send({
         clientSecret: paymentIntent.client_secret,
       });
-    } catch (error) {
+    } catch (error: any) {
       return res.send({
         error: error.raw.message,
       });
@@ -316,7 +316,7 @@ app.post(
       }
 
       return res.sendStatus(400);
-    } catch (e) {
+    } catch (e: any) {
       // Handle "hard declines" e.g. insufficient funds, expired card, etc
       // See https://stripe.com/docs/declines/codes for more.
       return res.send({ error: e.message });
@@ -459,7 +459,7 @@ app.post('/charge-card-off-session', async (req, res) => {
       clientSecret: paymentIntent.client_secret,
       publicKey: stripePublishableKey,
     });
-  } catch (err) {
+  } catch (err: any) {
     if (err.code === 'authentication_required') {
       // Bring the customer back on-session to authenticate the purchase
       // You can do this by sending an email or app notification to let them know

example/src/screens/ACHPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import { PaymentIntents } from '@stripe/stripe-react-native';
+import { PaymentIntent } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput, View } from 'react-native';
 import {
@@ -49,18 +49,18 @@ export default function ACHPaymentScreen() {
     if (error) {
       Alert.alert(`Error code: ${error.code}`, error.message);
     } else if (paymentIntent) {
-      if (paymentIntent.status === PaymentIntents.Status.Processing) {
+      if (paymentIntent.status === PaymentIntent.Status.Processing) {
         Alert.alert(
           'Processing',
           `The debit has been successfully submitted and is now processing.`
         );
-      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
+      } else if (paymentIntent.status === PaymentIntent.Status.Succeeded) {
         Alert.alert(
           'Success',
           `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
         );
       } else if (
-        paymentIntent.status === PaymentIntents.Status.RequiresAction &&
+        paymentIntent.status === PaymentIntent.Status.RequiresAction &&
         paymentIntent?.nextAction?.type === 'verifyWithMicrodeposits'
       ) {
         setAwaitingVerification(true);
@@ -101,14 +101,14 @@ export default function ACHPaymentScreen() {
       console.log(error);
       Alert.alert(`Error code: ${error.code}`, error.message);
     } else if (paymentIntent) {
-      if (paymentIntent.status === PaymentIntents.Status.RequiresConfirmation) {
+      if (paymentIntent.status === PaymentIntent.Status.RequiresConfirmation) {
         Alert.alert(
           'Payment status: RequiresConfirmation',
           "You may now press the 'Confirm' button."
         );
       } else {
         if (
-          paymentIntent.status === PaymentIntents.Status.RequiresAction &&
+          paymentIntent.status === PaymentIntent.Status.RequiresAction &&
           paymentIntent?.nextAction?.type === 'verifyWithMicrodeposits'
         ) {
           setAwaitingVerification(true);

example/src/screens/ACHSetupScreen.tsx

@@ -1,4 +1,4 @@
-import { SetupIntents } from '@stripe/stripe-react-native';
+import { SetupIntent } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput, View } from 'react-native';
 import {
@@ -47,15 +47,15 @@ export default function ACHSetupScreen() {
     if (error) {
       Alert.alert(`Error code: ${error.code}`, error.message);
     } else if (setupIntent) {
-      if (setupIntent.status === SetupIntents.Status.Processing) {
+      if (setupIntent.status === SetupIntent.Status.Processing) {
         Alert.alert(
           'Processing',
           `The setup has been successfully submitted and is now processing.`
         );
-      } else if (setupIntent.status === SetupIntents.Status.Succeeded) {
+      } else if (setupIntent.status === SetupIntent.Status.Succeeded) {
         Alert.alert('Success', `The setup was confirmed successfully!`);
       } else if (
-        setupIntent.status === SetupIntents.Status.RequiresAction &&
+        setupIntent.status === SetupIntent.Status.RequiresAction &&
         setupIntent?.nextAction?.type === 'verifyWithMicrodeposits'
       ) {
         setAwaitingVerification(true);
@@ -96,14 +96,14 @@ export default function ACHSetupScreen() {
       console.log(error);
       Alert.alert(`Error code: ${error.code}`, error.message);
     } else if (setupIntent) {
-      if (setupIntent.status === SetupIntents.Status.RequiresConfirmation) {
+      if (setupIntent.status === SetupIntent.Status.RequiresConfirmation) {
         Alert.alert(
           'Setup status: RequiresConfirmation',
           "You may now press the 'Confirm' button."
         );
       } else {
         if (
-          setupIntent.status === SetupIntents.Status.RequiresAction &&
+          setupIntent.status === SetupIntent.Status.RequiresAction &&
           setupIntent?.nextAction?.type === 'verifyWithMicrodeposits'
         ) {
           setAwaitingVerification(true);

example/src/screens/AfterpayClearpayPaymentScreen.tsx

@@ -1,4 +1,7 @@
-import type { PaymentMethodCreateParams } from '@stripe/stripe-react-native';
+import type {
+  BillingDetails,
+  PaymentMethod,
+} from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput } from 'react-native';
 import { useConfirmPayment } from '@stripe/stripe-react-native';
@@ -38,21 +41,25 @@ export default function AfterpayClearpayPaymentScreen() {
       return;
     }
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       email: '[email protected]',
       phone: '+48888000888',
-      addressCity: 'Houston',
-      addressCountry: 'US',
-      addressLine1: '1459  Circle Drive',
-      addressLine2: 'Texas',
-      addressPostalCode: '77063',
+      address: {
+        city: 'Houston',
+        country: 'US',
+        line1: '1459  Circle Drive',
+        line2: 'Texas',
+        postalCode: '77063',
+      },
       name: 'John Doe',
     };
 
-    const shippingDetails: PaymentMethodCreateParams.ShippingDetails = {
-      addressLine1: '1459  Circle Drive',
-      addressCountry: 'US',
-      addressPostalCode: '77063',
+    const shippingDetails: PaymentMethod.ShippingDetails = {
+      address: {
+        country: 'US',
+        line1: '1459  Circle Drive',
+        postalCode: '77063',
+      },
       name: 'John Doe',
     };
 

example/src/screens/AuBECSDebitPaymentScreen.tsx

@@ -5,7 +5,7 @@ import {
   AuBECSDebitForm,
   useConfirmPayment,
   AuBECSDebitFormComponent,
-  PaymentIntents,
+  PaymentIntent,
 } from '@stripe/stripe-react-native';
 import Button from '../components/Button';
 import { API_URL } from '../Config';
@@ -48,12 +48,12 @@ export default function AuBECSDebitPaymentScreen() {
       Alert.alert(`Error code: ${error.code}`, error.message);
       console.log('Payment confirmation error', error.message);
     } else if (paymentIntent) {
-      if (paymentIntent.status === PaymentIntents.Status.Processing) {
+      if (paymentIntent.status === PaymentIntent.Status.Processing) {
         Alert.alert(
           'Processing',
           `The debit has been successfully submitted and is now processing.`
         );
-      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
+      } else if (paymentIntent.status === PaymentIntent.Status.Succeeded) {
         Alert.alert(
           'Success',
           `The payment was confirmed successfully! currency: ${paymentIntent.currency}`

example/src/screens/BancontactPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import type { PaymentMethodCreateParams } from '@stripe/stripe-react-native';
+import type { BillingDetails } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput, View, Text, Switch } from 'react-native';
 import { useConfirmPayment } from '@stripe/stripe-react-native';
@@ -40,7 +40,7 @@ export default function BancontactPaymentScreen() {
       return;
     }
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       name: 'John Doe',
       email: '[email protected]',
     };

example/src/screens/BancontactSetupFuturePaymentScreen.tsx

@@ -1,5 +1,5 @@
 import {
-  PaymentMethodCreateParams,
+  BillingDetails,
   useConfirmSetupIntent,
 } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
@@ -32,7 +32,7 @@ export default function BancontactSetupFuturePaymentScreen() {
   const handlePayPress = async () => {
     const clientSecret = await createSetupIntentOnBackend(email);
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       name: 'John Doe',
       email,
     };

example/src/screens/EPSPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import type { PaymentMethodCreateParams } from '@stripe/stripe-react-native';
+import type { BillingDetails } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput } from 'react-native';
 import { useConfirmPayment } from '@stripe/stripe-react-native';
@@ -38,7 +38,7 @@ export default function EPSPaymentScreen() {
       return;
     }
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       name: 'John Doe',
     };
 

example/src/screens/GiropayPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import type { PaymentMethodCreateParams } from '@stripe/stripe-react-native';
+import type { BillingDetails } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput } from 'react-native';
 import { useConfirmPayment } from '@stripe/stripe-react-native';
@@ -38,7 +38,7 @@ export default function GiropayPaymentScreen() {
       return;
     }
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       name: 'John Doe',
     };
 

example/src/screens/GrabPayPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import type { PaymentMethodCreateParams } from '@stripe/stripe-react-native';
+import type { BillingDetails } from '@stripe/stripe-react-native';
 import React, { useState } from 'react';
 import { Alert, StyleSheet, TextInput } from 'react-native';
 import { useConfirmPayment } from '@stripe/stripe-react-native';
@@ -39,7 +39,7 @@ export default function GrabPayPaymentScreen() {
       return;
     }
 
-    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
+    const billingDetails: BillingDetails = {
       name: 'John Doe',
     };