@stripe/stripe-react-native 0.2.0 → 0.2.4

package/src/helpers.ts

@@ -1,6 +1,8 @@
 import type { StripeError } from './types';
 import { Platform, NativeModules } from 'react-native';
 
+const TextInputState = require('react-native/Libraries/Components/TextInput/TextInputState');
+
 /**
  * Determines whether or not this library is being used inside of
  * an "Expo" project by identifying if Expo's native module
@@ -27,3 +29,46 @@ export function createError<T>(error: StripeError<T>) {
     type: error.type,
   };
 }
+
+export const unsupportedMethodMessage = (field: string) =>
+  `${field} method is not supported. Consider to upgrade react-native version to 0.63.x or higher`;
+
+export const focusInput = (ref: React.MutableRefObject<any>) => {
+  if ('focusInput' in TextInputState) {
+    TextInputState.focusInput(ref);
+  } else {
+    if (__DEV__) {
+      console.log(unsupportedMethodMessage('focusInput'));
+    }
+  }
+};
+
+export const registerInput = (ref: React.MutableRefObject<any>) => {
+  if ('registerInput' in TextInputState) {
+    TextInputState.registerInput(ref);
+  } else {
+    if (__DEV__) {
+      console.log(unsupportedMethodMessage('registerInput'));
+    }
+  }
+};
+
+export const unregisterInput = (ref: React.MutableRefObject<any>) => {
+  if ('unregisterInput' in TextInputState) {
+    TextInputState.unregisterInput(ref);
+  } else {
+    if (__DEV__) {
+      console.log(unsupportedMethodMessage('unregisterInput'));
+    }
+  }
+};
+
+export const currentlyFocusedInput = () => {
+  if ('currentlyFocusedInput' in TextInputState) {
+    return TextInputState.currentlyFocusedInput();
+  } else {
+    if (__DEV__) {
+      console.log(unsupportedMethodMessage('currentlyFocusedInput'));
+    }
+  }
+};

package/src/hooks/useApplePay.tsx

@@ -68,9 +68,10 @@ export function useApplePay({
 }: Props = {}) {
   const {
     isApplePaySupported,
-    presentApplePay: presentApplePayNative,
-    confirmApplePayPayment: confirmApplePayPaymentNative,
+    presentApplePay: _presentApplePay,
+    confirmApplePayPayment: _confirmApplePayPayment,
     updateApplePaySummaryItems,
+    openApplePaySetup: _openApplePaySetup,
   } = useStripe();
   const [items, setItems] = useState<ApplePay.CartSummaryItem[] | null>(null);
   const [loading, setLoading] = useState(false);
@@ -104,24 +105,18 @@ export function useApplePay({
   );
 
   useEffect(() => {
-    eventEmitter.addListener(
+    const didSetShippingMethodListener = eventEmitter.addListener(
       SET_SHIPPING_METHOD_CALLBACK_NAME,
       onDidSetShippingMethod
     );
-    eventEmitter.addListener(
+    const didSetShippingContactListener = eventEmitter.addListener(
       SET_SHIPPING_CONTACT_CALLBACK_NAME,
       onDidSetShippingContact
     );
 
     return () => {
-      eventEmitter.removeListener(
-        SET_SHIPPING_METHOD_CALLBACK_NAME,
-        onDidSetShippingMethod
-      );
-      eventEmitter.removeListener(
-        SET_SHIPPING_CONTACT_CALLBACK_NAME,
-        onDidSetShippingContact
-      );
+      didSetShippingMethodListener.remove();
+      didSetShippingContactListener.remove();
     };
   }, [onDidSetShippingContact, onDidSetShippingMethod]);
 
@@ -129,25 +124,32 @@ export function useApplePay({
     async (params: ApplePay.PresentParams) => {
       setLoading(true);
       setItems(params.cartItems);
-      const result = await presentApplePayNative(params);
+      const result = await _presentApplePay(params);
       if (result.error) {
         setItems(null);
       }
       setLoading(false);
       return result;
     },
-    [presentApplePayNative]
+    [_presentApplePay]
   );
 
+  const openApplePaySetup = useCallback(async () => {
+    setLoading(true);
+    const result = await _openApplePaySetup();
+    setLoading(false);
+    return result;
+  }, [_openApplePaySetup]);
+
   const confirmApplePayPayment = useCallback(
     async (clientSecret: string) => {
       setLoading(true);
-      const result = await confirmApplePayPaymentNative(clientSecret);
+      const result = await _confirmApplePayPayment(clientSecret);
       setItems(null);
       setLoading(false);
       return result;
     },
-    [confirmApplePayPaymentNative]
+    [_confirmApplePayPayment]
   );
 
   return {
@@ -155,5 +157,6 @@ export function useApplePay({
     presentApplePay,
     confirmApplePayPayment,
     isApplePaySupported,
+    openApplePaySetup,
   };
 }

package/src/hooks/useConfirmSetupIntent.tsx

@@ -7,9 +7,9 @@ import { useStripe } from './useStripe';
  */
 export function useConfirmSetupIntent() {
   const [loading, setLoading] = useState(false);
-  const { confirmSetupIntent: confirmSetupIntentNative } = useStripe();
+  const { confirmSetupIntent: confirmSetupIntent } = useStripe();
 
-  const confirmSetupIntent = useCallback(
+  const _confirmSetupIntent = useCallback(
     async (
       paymentIntentClientSecret: string,
       data: ConfirmSetupIntent.Params,
@@ -17,7 +17,7 @@ export function useConfirmSetupIntent() {
     ) => {
       setLoading(true);
 
-      const result = await confirmSetupIntentNative(
+      const result = await confirmSetupIntent(
         paymentIntentClientSecret,
         data,
         options
@@ -27,11 +27,11 @@ export function useConfirmSetupIntent() {
 
       return result;
     },
-    [confirmSetupIntentNative]
+    [confirmSetupIntent]
   );
 
   return {
-    confirmSetupIntent,
+    confirmSetupIntent: _confirmSetupIntent,
     loading,
   };
 }

package/src/hooks/useGooglePay.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import type { GooglePay } from 'src/types';
+import type { GooglePay } from '../types';
 import { useStripe } from './useStripe';
 
 /**

package/src/hooks/usePaymentSheet.tsx

@@ -20,9 +20,9 @@ export function usePaymentSheet() {
     return result;
   };
 
-  const presentPaymentSheet = async (params: PaymentSheet.PresentParams) => {
+  const presentPaymentSheet = async () => {
     setLoading(true);
-    const result = await presentPaymentSheetNative(params);
+    const result = await presentPaymentSheetNative();
     setLoading(false);
     return result;
   };

package/src/hooks/useStripe.tsx

@@ -17,11 +17,12 @@ import type {
   ConfirmPaymentSheetPaymentResult,
   ConfirmSetupIntent,
   CreateTokenResult,
-  Card,
   PayWithGooglePayResult,
   GooglePayInitResult,
   GooglePay,
   CreateGooglePayPaymentMethodResult,
+  OpenApplePaySetupResult,
+  CreateTokenParams,
 } from '../types';
 import { useCallback, useEffect, useState } from 'react';
 import { isiOS } from '../helpers';
@@ -45,13 +46,16 @@ import {
   initGooglePay,
   createGooglePayPaymentMethod,
   presentGooglePay,
+  openApplePaySetup,
 } from '../functions';
 
 /**
  * useStripe hook
  */
 export function useStripe() {
-  const [isApplePaySupported, setApplePaySupported] = useState(false);
+  const [isApplePaySupported, setApplePaySupported] = useState<boolean | null>(
+    null
+  );
 
   useEffect(() => {
     async function checkApplePaySupport() {
@@ -74,7 +78,7 @@ export function useStripe() {
   );
 
   const _createToken = useCallback(
-    async (params: Card.CreateTokenParams): Promise<CreateTokenResult> => {
+    async (params: CreateTokenParams): Promise<CreateTokenResult> => {
       return createToken(params);
     },
     []
@@ -170,14 +174,10 @@ export function useStripe() {
     []
   );
 
-  const _presentPaymentSheet = useCallback(
-    async (
-      params?: PaymentSheet.PresentParams
-    ): Promise<PresentPaymentSheetResult> => {
-      return presentPaymentSheet(params);
-    },
-    []
-  );
+  const _presentPaymentSheet =
+    useCallback(async (): Promise<PresentPaymentSheetResult> => {
+      return presentPaymentSheet();
+    }, []);
 
   const _confirmPaymentSheetPayment =
     useCallback(async (): Promise<ConfirmPaymentSheetPaymentResult> => {
@@ -211,11 +211,16 @@ export function useStripe() {
     async (
       params: GooglePay.CreatePaymentMethodParams
     ): Promise<CreateGooglePayPaymentMethodResult> => {
-      return _createGooglePayPaymentMethod(params);
+      return createGooglePayPaymentMethod(params);
     },
     []
   );
 
+  const _openApplePaySetup =
+    useCallback(async (): Promise<OpenApplePaySetupResult> => {
+      return openApplePaySetup();
+    }, []);
+
   return {
     retrievePaymentIntent: _retrievePaymentIntent,
     retrieveSetupIntent: _retrieveSetupIntent,
@@ -235,6 +240,7 @@ export function useStripe() {
     createToken: _createToken,
     initGooglePay: _initGooglePay,
     presentGooglePay: _presentGooglePay,
-    createGooglePayPaymentMethod: createGooglePayPaymentMethod,
+    createGooglePayPaymentMethod: _createGooglePayPaymentMethod,
+    openApplePaySetup: _openApplePaySetup,
   };
 }

package/src/types/Card.ts

@@ -57,10 +57,4 @@ export namespace Card {
     postalCode?: string;
     state?: string;
   }
-
-  export interface CreateTokenParams {
-    type: 'Account' | 'BankAccount' | 'Card' | 'CvcUpdate' | 'Person' | 'Pii';
-    address?: Address;
-    name?: string;
-  }
 }

package/src/types/GooglePay.ts

@@ -46,7 +46,7 @@ export namespace GooglePay {
      * If `true`, Google Pay is considered ready if the customer's Google Pay wallet
      * has existing payment methods.
      *
-     * Default to `true`.
+     * Default to `false`.
      */
     existingPaymentMethodRequired?: boolean;
   }

package/src/types/PaymentMethods.ts

@@ -33,7 +33,7 @@ export namespace PaymentMethodCreateParams {
     | GrabPayParams
     | FPXParams
     | AfterpayClearpayParams
-    | WeChatPayParams
+    // | WeChatPayParams
     | BancontactParams;
 
   export type BillingDetails = {

package/src/types/PaymentSheet.ts

@@ -7,13 +7,12 @@ export declare namespace PaymentSheet {
       customFlow?: boolean;
       merchantDisplayName?: string;
       style?: 'alwaysLight' | 'alwaysDark' | 'automatic';
+      returnURL?: string;
+      primaryButtonColor?: string;
+      defaultBillingDetails?: BillingDetails;
+      allowsDelayedPaymentMethods?: boolean;
     };
 
-  export type PresentParams = {
-    confirmPayment?: boolean;
-    clientSecret?: string;
-  };
-
   type ClientSecretParams =
     | {
         paymentIntentClientSecret: string;
@@ -38,14 +37,29 @@ export declare namespace PaymentSheet {
     | {
         googlePay?: true;
         merchantCountryCode: string;
+        currencyCode?: string;
         testEnv?: boolean;
       }
     | {
         googlePay?: false;
         merchantCountryCode?: string;
+        currencyCode?: string;
         testEnv?: boolean;
       };
-
+  export interface Address {
+    city?: string;
+    country?: string;
+    line1?: string;
+    line2?: string;
+    postalCode?: string;
+    state?: string;
+  }
+  export interface BillingDetails {
+    address: Address;
+    name?: string;
+    email?: string;
+    phone?: string;
+  }
   export interface PaymentOption {
     label: string;
     image: string;

package/src/types/components/AuBECSDebitForm.ts

@@ -1,6 +1,9 @@
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
 export namespace AuBECSDebitFormComponent {
+  /**
+   * @ignore
+   */
   export interface NativeProps {
     companyName: string;
     style?: StyleProp<ViewStyle>;

package/src/types/components/CardFieldInput.ts

@@ -4,6 +4,12 @@ import type { Card } from '../Card';
 
 export namespace CardFieldInput {
   export type Names = 'CardNumber' | 'Cvc' | 'ExpiryDate' | 'PostalCode';
+  export enum ValidationState {
+    Valid = 'Valid',
+    Invalid = 'Invalid',
+    Incomplete = 'Incomplete',
+    Unknown = 'Unknown',
+  }
 
   export interface Details {
     last4: string;
@@ -12,6 +18,9 @@ export namespace CardFieldInput {
     postalCode?: string;
     brand: Card.Brand;
     complete: boolean;
+    validExpiryDate: ValidationState;
+    validCVC: ValidationState;
+    validNumber: ValidationState;
     /**
      * WARNING: Full card details are only returned when the `dangerouslyGetFullCardDetails` prop
      * on the `CardField` component is set to `true`.
@@ -42,6 +51,9 @@ export namespace CardFieldInput {
     postalCode?: string;
   }
 
+  /**
+   * @ignore
+   */
   export interface NativeProps {
     style?: StyleProp<ViewStyle>;
     value?: Partial<Details>;

package/src/types/components/CardFormView.ts

@@ -36,6 +36,9 @@ export namespace CardFormView {
     postalCode?: string;
   }
 
+  /**
+   * @ignore
+   */
   export interface NativeProps {
     style?: StyleProp<ViewStyle>;
     autofocus?: boolean;

package/src/types/index.ts

@@ -207,3 +207,33 @@ export type CreateGooglePayPaymentMethodResult =
       paymentMethod?: undefined;
       error: StripeError<GooglePayError>;
     };
+
+export type OpenApplePaySetupResult =
+  | {
+      error?: undefined;
+    }
+  | {
+      error: StripeError<ApplePayError>;
+    };
+
+export type CreateTokenParams =
+  | CreateTokenCardParams
+  | CreateTokenBankAccountParams;
+
+export type CreateTokenCardParams = {
+  type: 'Card';
+  address?: Card.Address;
+  name?: string;
+};
+
+export type BankAcccountHolderType = 'Company' | 'Individual';
+
+export type CreateTokenBankAccountParams = {
+  type: 'BankAccount';
+  accountHolderName?: string;
+  accountHolderType?: BankAcccountHolderType;
+  accountNumber: string;
+  country: string;
+  currency: string;
+  routingNumber?: string;
+};

package/stripe-react-native.podspec

@@ -1,22 +1,20 @@
-require "json"
+require 'json'
 
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
-  s.name         = "stripe-react-native"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.homepage     = package["homepage"]
-  s.license      = package["license"]
-  s.authors      = package["author"]
+  s.name         = 'stripe-react-native'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.authors      = package['author']
 
-  s.platforms    = { :ios => "11.0" }
-  s.source       = { :git => "https://github.com/stripe/stripe-react-native.git", :tag => "#{s.version}" }
+  s.platforms    = { ios: '11.0' }
+  s.source       = { git: 'https://github.com/stripe/stripe-react-native.git', tag: s.version.to_s }
 
+  s.source_files = 'ios/**/*.{h,m,mm,swift}'
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-
-
-  s.dependency "React"
-  s.dependency 'Stripe', '~> 21.7.0'
+  s.dependency 'React-Core'
+  s.dependency 'Stripe', '~> 21.11.1'
 end

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

@@ -1 +0,0 @@
-export default function WeChatPaymentScreen(): JSX.Element;