@stripe/stripe-react-native 0.7.0 → 0.10.0

package/lib/typescript/src/types/components/CardFormView.d.ts

@@ -17,9 +17,19 @@ export interface Details {
      * See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance
      */
     number?: string;
+    cvc?: string;
 }
 export interface Styles {
     backgroundColor?: string;
+    borderWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    textColor?: string;
+    fontSize?: number;
+    placeholderColor?: string;
+    cursorColor?: string;
+    textErrorColor?: string;
+    fontFamily?: string;
 }
 export interface Placeholders {
     number?: string;
@@ -34,6 +44,8 @@ export interface NativeProps {
     style?: StyleProp<ViewStyle>;
     autofocus?: boolean;
     cardStyle?: Styles;
+    /** Android only */
+    placeholders?: Placeholders;
     onFocusChange(event: NativeSyntheticEvent<{
         focusedField: FieldName | null;
     }>): void;

package/lib/typescript/src/types/index.d.ts

@@ -177,3 +177,20 @@ export declare type CollectBankAccountForSetupResult = {
     setupIntent?: undefined;
     error: StripeError<CollectBankAccountError>;
 };
+export declare type GooglePayCardToken = {
+    id: string;
+    cardLastFour: string;
+    network: number;
+    serviceProvider: number;
+    issuer: string;
+    status: 'TOKEN_STATE_NEEDS_IDENTITY_VERIFICATION' | 'TOKEN_STATE_PENDING' | 'TOKEN_STATE_SUSPENDED' | 'TOKEN_STATE_ACTIVE' | 'TOKEN_STATE_FELICA_PENDING_PROVISIONING' | 'TOKEN_STATE_UNTOKENIZED';
+};
+export declare type IsCardInWalletResult = {
+    isInWallet: boolean;
+    token?: GooglePayCardToken;
+    error?: undefined;
+} | {
+    isInWallet?: undefined;
+    token?: undefined;
+    error: StripeError<GooglePayError>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/stripe-react-native",
-  "version": "0.7.0",
+  "version": "0.10.0",
   "author": "Stripe",
   "description": "Stripe SDK for React Native",
   "main": "lib/commonjs/index",
@@ -25,7 +25,7 @@
     "prepare": "bob build",
     "release": "./scripts/publish",
     "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
+    "pods": "cd example && npx pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "bootstrap-no-pods": "yarn example && yarn",
     "docs": "yarn typedoc ./src/index.tsx --out ./docs/api-reference --tsconfig ./tsconfig.json --readme none",
@@ -60,7 +60,7 @@
     "@wdio/sync": "^7.16.15",
     "appium": "^1.22.2",
     "appium-chromedriver": "4.26.2",
-    "eslint": "^7.14.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "expect-webdriverio": "^2.0.1",
@@ -68,10 +68,9 @@
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.67.0",
     "mocha": "^8.3.2",
-    "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "17.0.2",
-    "react-native": "0.66.4",
+    "react-native": "0.68.1",
     "ts-node": "^9.1.1",
     "typedoc": "^0.22.12",
     "typescript": "~4.4.4",
@@ -154,6 +153,6 @@
     ]
   },
   "dependencies": {
-    "@expo/config-plugins": "^3.0.5"
+    "@expo/config-plugins": "^4.1.4"
   }
 }

package/src/NativeStripeSdk.tsx

@@ -24,6 +24,7 @@ import type {
   OpenApplePaySetupResult,
   Token,
   VerifyMicrodepositsParams,
+  IsCardInWalletResult,
 } from './types';
 
 type NativeStripeSdkType = {
@@ -86,6 +87,10 @@ type NativeStripeSdkType = {
     clientSecret: string,
     params: PaymentMethod.CollectBankAccountParams
   ): Promise<ConfirmSetupIntentResult | ConfirmPaymentResult>;
+  getConstants(): { API_VERSIONS: { CORE: string; ISSUING: string } };
+  isCardInWallet(params: {
+    cardLastFour: string;
+  }): Promise<IsCardInWalletResult>;
 };
 
 const { StripeSdk } = NativeModules;

package/src/components/AddToWalletButton.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  StyleProp,
+  ViewStyle,
+  requireNativeComponent,
+  NativeSyntheticEvent,
+  ImageSourcePropType,
+} from 'react-native';
+import type {
+  Token,
+  CardActionError,
+  StripeError,
+  GooglePayCardToken,
+} from '../types';
+
+const AddToWalletButtonNative =
+  requireNativeComponent<any>('AddToWalletButton');
+
+/**
+ *  Add to wallet button component props
+ */
+export interface Props extends AccessibilityProps {
+  style?: StyleProp<ViewStyle>;
+  /** 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'. */
+  iOSButtonStyle?: 'onDarkBackground' | 'onLightBackground';
+  /** 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 */
+  androidAssetSource: ImageSourcePropType;
+  testID?: string;
+  /** Only set to `false` when shipping through TestFlight || App Store */
+  testEnv?: boolean;
+  /** Details of the Issued Card you'd like added to the device's wallet */
+  cardDetails: {
+    /** The `primary_account_identifier` value from the issued card. */
+    primaryAccountIdentifier: string | null;
+    /** The card holder name (used only on iOS) */
+    name: string;
+    /** A user-facing description of the card. Required on Android.*/
+    description: string;
+    /** Last 4 digits of the card, only used on iOS */
+    lastFour?: string;
+    /** Optional, only used on iOS */
+    brand?: Token.CardBrand;
+  };
+  // 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.
+  token?: GooglePayCardToken | null;
+  /** Used by stripe to securely obtain card info of the card being provisioned. */
+  ephemeralKey: object;
+  /** Called when the flow completes. If the `error` field is `null`, then the card was successfully added to the user's native wallet. */
+  onComplete(result: { error: StripeError<CardActionError> | null }): void;
+}
+
+/**
+ *  Add to wallet button
+ *
+ * @example
+ * ```ts
+ *  <AddToWalletButton
+ *    testEnv={true}
+ *    style={styles.myButtonStyle}
+ *    iOSButtonStyle="onLightBackground"
+ *    cardDetails={{
+ *      primaryAccountIdentifier: "V-123",
+ *      name: "David Wallace",
+ *      lastFour: "4242",
+ *    }}
+ *    ephemeralKey={myEphemeralKey} // This object is retrieved from your server. See https://stripe.com/docs/issuing/cards/digital-wallets?platform=react-native#update-your-backend
+ *    onComplete={(error) => {
+ *      Alert.alert(
+ *        error ? error.code : 'Success',
+ *        error
+ *          ? error.message
+ *          : 'Card was successfully added to the wallet.'
+ *      );
+ *    }}
+ *  />
+ * ```
+ * @param __namedParameters Props
+ * @returns JSX.Element
+ * @category ReactComponents
+ */
+export function AddToWalletButton({ onComplete, ...props }: Props) {
+  return (
+    <AddToWalletButtonNative
+      {...props}
+      onCompleteAction={(
+        value: NativeSyntheticEvent<{
+          error: StripeError<CardActionError> | null;
+        }>
+      ) => onComplete(value.nativeEvent)}
+    />
+  );
+}

package/src/components/CardField.tsx

@@ -32,7 +32,7 @@ export interface Props extends AccessibilityProps {
   style?: StyleProp<ViewStyle>;
   postalCodeEnabled?: boolean;
   cardStyle?: CardFieldInput.Styles;
-  placeholder?: CardFieldInput.Placeholders;
+  placeholders?: CardFieldInput.Placeholders;
   autofocus?: boolean;
   onCardChange?(card: CardFieldInput.Details): void;
   onBlur?(): void;
@@ -72,7 +72,7 @@ export const CardField = forwardRef<CardFieldInput.Methods, Props>(
       onFocus,
       onBlur,
       cardStyle,
-      placeholder,
+      placeholders,
       postalCodeEnabled,
       ...props
     },
@@ -98,8 +98,9 @@ export const CardField = forwardRef<CardFieldInput.Methods, Props>(
         if (card.hasOwnProperty('postalCode')) {
           data.postalCode = card.postalCode || '';
         }
-        if (card.hasOwnProperty('number')) {
+        if (card.hasOwnProperty('number') || card.hasOwnProperty('cvc')) {
           data.number = card.number || '';
+          data.cvc = card.cvc || '';
           if (__DEV__ && onCardChange && card.complete) {
             console.warn(
               `[stripe-react-native] ⚠️ WARNING: You've enabled \`dangerouslyGetFullCardDetails\`, meaning full card details are being returned. Only do this if you're certain that you fulfill the necessary PCI compliance requirements. Make sure that you're not mistakenly logging or storing full card details! See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance`
@@ -186,11 +187,11 @@ export const CardField = forwardRef<CardFieldInput.Methods, Props>(
           textErrorColor: cardStyle?.textErrorColor,
           fontFamily: cardStyle?.fontFamily,
         }}
-        placeholder={{
-          number: placeholder?.number,
-          expiration: placeholder?.expiration,
-          cvc: placeholder?.cvc,
-          postalCode: placeholder?.postalCode,
+        placeholders={{
+          number: placeholders?.number,
+          expiration: placeholders?.expiration,
+          cvc: placeholders?.cvc,
+          postalCode: placeholders?.postalCode,
         }}
         {...props}
       />

package/src/components/CardForm.tsx

@@ -33,15 +33,15 @@ export interface Props extends AccessibilityProps {
   autofocus?: boolean;
   testID?: string;
 
-  // props iOS only
+  /** All styles except backgroundColor are Android only */
   cardStyle?: CardFormView.Styles;
   // isUserInteractionEnabled?: boolean;
 
   // TODO: will make it public when android-sdk allows for this
   // postalCodeEnabled?: boolean;
 
-  // TODO: will make it public when ios-sdk allows for this
-  // placeholder: CardFormView.Placeholders;
+  /** Android only */
+  placeholders?: CardFormView.Placeholders;
   // onBlur?(): void;
   // onFocus?(focusedField: CardFormView.FieldNames | null): void;
   onFormComplete?(card: CardFormView.Details): void;
@@ -80,7 +80,7 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
       // postalCodeEnabled = true,
       // onFocus,
       // onBlur,
-      // placeholder,
+      placeholders,
       ...props
     },
     ref
@@ -101,8 +101,9 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
           postalCode: card.postalCode,
         };
 
-        if (card.hasOwnProperty('number')) {
+        if (card.hasOwnProperty('number') || card.hasOwnProperty('cvc')) {
           data.number = card.number || '';
+          data.cvc = card.cvc || '';
           if (__DEV__ && onFormComplete && card.complete) {
             console.warn(
               `[stripe-react-native] ⚠️ WARNING: You've enabled \`dangerouslyGetFullCardDetails\`, meaning full card details are being returned. Only do this if you're certain that you fulfill the necessary PCI compliance requirements. Make sure that you're not mistakenly logging or storing full card details! See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance`
@@ -165,16 +166,25 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
         onFormComplete={onFormCompleteHandler}
         cardStyle={{
           backgroundColor: cardStyle?.backgroundColor,
+          borderColor: cardStyle?.borderColor,
+          borderWidth: cardStyle?.borderWidth,
+          borderRadius: cardStyle?.borderRadius,
+          cursorColor: cardStyle?.cursorColor,
+          fontSize: cardStyle?.fontSize,
+          placeholderColor: cardStyle?.placeholderColor,
+          textColor: cardStyle?.textColor,
+          textErrorColor: cardStyle?.textErrorColor,
+          fontFamily: cardStyle?.fontFamily,
           // disabledBackgroundColor: cardStyle?.disabledBackgroundColor,
           // type: cardStyle?.type,
         }}
         // isUserInteractionEnabledValue={isUserInteractionEnabled}
-        // placeholder={{
-        //   number: placeholder?.number,
-        //   expiration: placeholder?.expiration,
-        //   cvc: placeholder?.cvc,
-        //   postalCode: placeholder?.postalCode,
-        // }}
+        placeholders={{
+          number: placeholders?.number,
+          expiration: placeholders?.expiration,
+          cvc: placeholders?.cvc,
+          postalCode: placeholders?.postalCode,
+        }}
         onFocusChange={onFocusHandler}
         // postalCodeEnabled={postalCodeEnabled}
         {...props}

package/src/functions.ts

@@ -32,6 +32,7 @@ import {
   VerifyMicrodepositsForSetupResult,
   CollectBankAccountForPaymentResult,
   CollectBankAccountForSetupResult,
+  IsCardInWalletResult,
 } from './types';
 
 const APPLE_PAY_NOT_SUPPORTED_MESSAGE =
@@ -563,3 +564,29 @@ export const collectBankAccountForSetup = async (
     };
   }
 };
+
+export const isCardInWallet = async (params: {
+  cardLastFour: string;
+}): Promise<IsCardInWalletResult> => {
+  try {
+    const { isInWallet, token, error } = await NativeStripeSdk.isCardInWallet(
+      params
+    );
+
+    if (error) {
+      return {
+        error,
+      };
+    }
+    return {
+      isInWallet: isInWallet as boolean,
+      token: token,
+    };
+  } catch (error: any) {
+    return {
+      error: createError(error),
+    };
+  }
+};
+
+export const Constants = NativeStripeSdk.getConstants();

package/src/index.tsx

@@ -30,6 +30,10 @@ export {
   GooglePayButton,
   Props as GooglePayButtonProps,
 } from './components/GooglePayButton';
+export {
+  AddToWalletButton,
+  Props as AddToWalletButtonProps,
+} from './components/AddToWalletButton';
 
 export * from './functions';
 

package/src/types/PaymentMethod.ts

@@ -12,7 +12,7 @@ export interface Result {
   liveMode: boolean;
   customerId: string;
   billingDetails: BillingDetails;
-  type: Type;
+  paymentMethodType: Type;
   AuBecsDebit: AuBecsDebitResult;
   BacsDebit: BacsDebitResult;
   Card: CardResult;
@@ -21,6 +21,7 @@ export interface Result {
   SepaDebit: SepaDebitResult;
   Sofort: SofortResult;
   Upi: UpiResult;
+  USBankAccount: USBankAccountResult;
 }
 
 export type CreateParams =
@@ -40,118 +41,162 @@ export type CreateParams =
   | KlarnaParams
   // | WeChatPayParams
   | BancontactParams
-  | USBankAccountParams;
+  | USBankAccountParams
+  | PayPalParams;
 
 export type ConfirmParams = CreateParams;
 
-export type CreateOptions = {};
+export type CreateOptions = {
+  setupFutureUsage?: FutureUsage;
+};
 
 export type ConfirmOptions = CreateOptions;
 
 export type ShippingDetails = BillingDetails;
 
-interface BaseParams {
-  billingDetails?: BillingDetails;
-}
-
 export type CardParams =
-  | (BaseParams & {
-      type: 'Card';
-      token?: string;
-      setupFutureUsage?: FutureUsage;
-    })
-  | (BaseParams & {
-      type: 'Card';
-      paymentMethodId: string;
-      cvc?: string;
-    });
-
-export interface IdealParams extends BaseParams {
-  type: 'Ideal';
-  bankName?: string;
-  setupFutureUsage?: FutureUsage;
+  | {
+      paymentMethodType: 'Card';
+      paymentMethodData?: {
+        token?: string;
+        billingDetails?: BillingDetails;
+      };
+    }
+  | {
+      paymentMethodType: 'Card';
+      paymentMethodData: {
+        paymentMethodId: string;
+        cvc?: string;
+        billingDetails?: BillingDetails;
+      };
+    };
+
+export interface IdealParams {
+  paymentMethodType: 'Ideal';
+  paymentMethodData?: {
+    bankName?: string;
+    billingDetails?: BillingDetails;
+  };
 }
 
 export interface FPXParams {
-  type: 'Fpx';
-  testOfflineBank?: boolean;
+  paymentMethodType: 'Fpx';
+  paymentMethodData?: { testOfflineBank?: boolean };
 }
 
 export interface AlipayParams {
-  type: 'Alipay';
+  paymentMethodType: 'Alipay';
 }
 
-export interface OxxoParams extends Required<BaseParams> {
-  type: 'Oxxo';
+export interface OxxoParams {
+  paymentMethodType: 'Oxxo';
+  paymentMethodData: {
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface SofortParams extends BaseParams {
-  type: 'Sofort';
-  country: string;
-  setupFutureUsage?: FutureUsage;
+export interface SofortParams {
+  paymentMethodType: 'Sofort';
+  paymentMethodData: {
+    country: string;
+    billingDetails: BillingDetails;
+  };
 }
-export interface GrabPayParams extends BaseParams {
-  type: 'GrabPay';
+export interface GrabPayParams {
+  paymentMethodType: 'GrabPay';
+  paymentMethodData?: {
+    billingDetails?: BillingDetails;
+  };
 }
 
-export interface BancontactParams extends Required<BaseParams> {
-  type: 'Bancontact';
-  setupFutureUsage?: FutureUsage;
+export interface BancontactParams {
+  paymentMethodType: 'Bancontact';
+  paymentMethodData: {
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface SepaParams extends Required<BaseParams> {
-  type: 'SepaDebit';
-  iban: string;
-  setupFutureUsage?: FutureUsage;
+export interface SepaParams {
+  paymentMethodType: 'SepaDebit';
+  paymentMethodData: {
+    iban: string;
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface GiropayParams extends Required<BaseParams> {
-  type: 'Giropay';
+export interface GiropayParams {
+  paymentMethodType: 'Giropay';
+  paymentMethodData: {
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface AfterpayClearpayParams extends Required<BaseParams> {
-  type: 'AfterpayClearpay';
-  shippingDetails: ShippingDetails;
+export interface AfterpayClearpayParams {
+  paymentMethodType: 'AfterpayClearpay';
+  paymentMethodData: {
+    shippingDetails: ShippingDetails;
+    billingDetails: BillingDetails;
+  };
 }
 
 export type KlarnaParams = {
-  type: 'Klarna';
-  billingDetails: Pick<Required<BillingDetails>, 'email'> & {
-    address: Pick<Required<Address>, 'country'>;
-  } & BillingDetails;
+  paymentMethodType: 'Klarna';
+  paymentMethodData: {
+    billingDetails: Pick<Required<BillingDetails>, 'email'> & {
+      address: Pick<Required<Address>, 'country'>;
+    } & BillingDetails;
+  };
 };
 
-export interface EpsParams extends Required<BaseParams> {
-  type: 'Eps';
+export interface EpsParams {
+  paymentMethodType: 'Eps';
+  paymentMethodData: {
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface P24Params extends Required<BaseParams> {
-  type: 'P24';
+export interface P24Params {
+  paymentMethodType: 'P24';
+  paymentMethodData: {
+    billingDetails: BillingDetails;
+  };
 }
 
-export interface WeChatPayParams extends BaseParams {
-  type: 'WeChatPay';
-  appId: string;
+export interface WeChatPayParams {
+  paymentMethodType: 'WeChatPay';
+  paymentMethodData: {
+    appId: string;
+    billingDetails?: BillingDetails;
+  };
 }
 
 export interface AuBecsDebitParams {
-  type: 'AuBecsDebit';
-  formDetails: FormDetails;
+  paymentMethodType: 'AuBecsDebit';
+  paymentMethodData: { formDetails: FormDetails };
 }
 
-/** Before using this payment method type, ensure you have already collected the bank information
- * for this intent with `collectBankAccountForPayment`. Otherwise, you will need to pass in the bank account
- * details manually.*/
+/**
+ * If paymentMethodData is null, it is assumed that the bank account details have already been attached
+ * via `collectBankAccountForPayment` or `collectBankAccountForSetup`.
+ */
 export type USBankAccountParams = {
-  type: 'USBankAccount';
-  billingDetails?: Pick<Required<BillingDetails>, 'name'> & BillingDetails;
-  accountNumber?: string;
-  routingNumber?: string;
-  /** Defaults to Individual */
-  accountHolderType?: BankAcccountHolderType;
-  /** Defaults to Checking */
-  accountType?: BankAcccountType;
-  setupFutureUsage?: FutureUsage;
+  paymentMethodType: 'USBankAccount';
+  paymentMethodData?: {
+    billingDetails: Pick<Required<BillingDetails>, 'name'> & BillingDetails;
+    accountNumber: string;
+    routingNumber: string;
+    /** Defaults to Individual */
+    accountHolderType?: BankAcccountHolderType;
+    /** Defaults to Checking */
+    accountType?: BankAcccountType;
+  };
+};
+
+export type PayPalParams = {
+  paymentMethodType: 'PayPal';
+  paymentMethodData?: {
+    billingDetails?: BillingDetails;
+  };
 };
 
 export interface AuBecsDebitResult {
@@ -231,12 +276,15 @@ export type Type =
   | 'Sofort'
   | 'Upi'
   | 'USBankAccount'
+  | 'PayPal'
   | 'Unknown';
 
 export type CollectBankAccountParams = {
-  type: 'USBankAccount';
-  billingDetails: {
-    name: string;
-    email?: string;
+  paymentMethodType: 'USBankAccount';
+  paymentMethodData: {
+    billingDetails: {
+      name: string;
+      email?: string;
+    };
   };
 };

package/src/types/SetupIntent.ts

@@ -16,9 +16,26 @@ export interface Result {
   nextAction: NextAction | null;
 }
 
-export type ConfirmParams = PaymentMethod.CreateParams;
+export type ConfirmParams =
+  | PaymentMethod.CardParams
+  | PaymentMethod.IdealParams
+  | PaymentMethod.OxxoParams
+  | PaymentMethod.P24Params
+  | PaymentMethod.AlipayParams
+  | PaymentMethod.GiropayParams
+  | PaymentMethod.SepaParams
+  | PaymentMethod.EpsParams
+  | PaymentMethod.AuBecsDebitParams
+  | PaymentMethod.SofortParams
+  | PaymentMethod.GrabPayParams
+  | PaymentMethod.FPXParams
+  | PaymentMethod.AfterpayClearpayParams
+  | PaymentMethod.KlarnaParams
+  | PaymentMethod.BancontactParams
+  | PaymentMethod.USBankAccountParams;
+// TODO: Change the above back to PaymentMethod.CreateParams when PayPal is supported through SetupIntents
 
-export type ConfirmOptions = PaymentMethod.ConfirmOptions;
+export type ConfirmOptions = {};
 
 export type FutureUsage =
   | 'Unknown'