@stripe/stripe-react-native 0.10.0 → 0.13.0

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

@@ -37,6 +37,10 @@ export interface Placeholders {
     cvc?: string;
     postalCode?: string;
 }
+export declare type DefaultValues = {
+    /** The 2-letter country code for the country selected by default on Android. If this is null, it is set by the device's configured region in the Settings app. */
+    countryCode?: string;
+};
 /**
  * @ignore
  */
@@ -46,6 +50,8 @@ export interface NativeProps {
     cardStyle?: Styles;
     /** Android only */
     placeholders?: Placeholders;
+    /** Android only */
+    defaultValues?: DefaultValues;
     onFocusChange(event: NativeSyntheticEvent<{
         focusedField: FieldName | null;
     }>): void;

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

@@ -83,10 +83,7 @@ export declare type InitPaymentSheetResult = {
     error: StripeError<PaymentSheetError>;
 };
 export declare type PresentPaymentSheetResult = {
-    paymentOption?: undefined;
-    error?: undefined;
-} | {
-    paymentOption?: PaymentSheet.PaymentOption;
+    paymentOption: PaymentSheet.PaymentOption;
     error?: undefined;
 } | {
     paymentOption?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/stripe-react-native",
-  "version": "0.10.0",
+  "version": "0.13.0",
   "author": "Stripe",
   "description": "Stripe SDK for React Native",
   "main": "lib/commonjs/index",

package/src/components/CardField.tsx

@@ -30,7 +30,10 @@ const CardFieldNative =
  */
 export interface Props extends AccessibilityProps {
   style?: StyleProp<ViewStyle>;
+  /** Controls if a postal code entry field can be displayed to the user. Defaults to false. If true, the type of code entry shown is controlled by the set countryCode prop. Some country codes may result in no postal code entry being shown if those countries do not commonly use postal codes. If false, no postal code entry will ever be displayed. */
   postalCodeEnabled?: boolean;
+  /** Controls the postal code entry shown (if the postalCodeEnabled prop is set to true). Defaults to the device's default locale. */
+  countryCode?: string;
   cardStyle?: CardFieldInput.Styles;
   placeholders?: CardFieldInput.Placeholders;
   autofocus?: boolean;
@@ -74,6 +77,7 @@ export const CardField = forwardRef<CardFieldInput.Methods, Props>(
       cardStyle,
       placeholders,
       postalCodeEnabled,
+      countryCode,
       ...props
     },
     ref
@@ -175,6 +179,7 @@ export const CardField = forwardRef<CardFieldInput.Methods, Props>(
         onCardChange={onCardChangeHandler}
         onFocusChange={onFocusHandler}
         postalCodeEnabled={postalCodeEnabled ?? true}
+        countryCode={countryCode ?? null}
         cardStyle={{
           backgroundColor: cardStyle?.backgroundColor,
           borderColor: cardStyle?.borderColor,

package/src/components/CardForm.tsx

@@ -42,6 +42,8 @@ export interface Props extends AccessibilityProps {
 
   /** Android only */
   placeholders?: CardFormView.Placeholders;
+  /** Android only */
+  defaultValues?: CardFormView.DefaultValues;
   // onBlur?(): void;
   // onFocus?(focusedField: CardFormView.FieldNames | null): void;
   onFormComplete?(card: CardFormView.Details): void;
@@ -81,6 +83,7 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
       // onFocus,
       // onBlur,
       placeholders,
+      defaultValues,
       ...props
     },
     ref
@@ -185,6 +188,9 @@ export const CardForm = forwardRef<CardFormView.Methods, Props>(
           cvc: placeholders?.cvc,
           postalCode: placeholders?.postalCode,
         }}
+        defaultValues={{
+          ...(defaultValues ?? {}),
+        }}
         onFocusChange={onFocusHandler}
         // postalCodeEnabled={postalCodeEnabled}
         {...props}

package/src/functions.ts

@@ -406,7 +406,7 @@ export const presentPaymentSheet =
         };
       }
       return {
-        paymentOption: paymentOption,
+        paymentOption: paymentOption!,
       };
     } catch (error: any) {
       return {

package/src/types/PaymentSheet.ts

@@ -9,10 +9,9 @@ export type SetupParams = ClientSecretParams &
     merchantDisplayName?: string;
     style?: 'alwaysLight' | 'alwaysDark' | 'automatic';
     returnURL?: string;
-    primaryButtonColor?: string;
     defaultBillingDetails?: BillingDetails;
     allowsDelayedPaymentMethods?: boolean;
-  };
+  } & { appearance?: AppearanceParams };
 
 type ClientSecretParams =
   | {
@@ -47,6 +46,164 @@ type GooglePayParams =
       currencyCode?: string;
       testEnv?: boolean;
     };
+
+/**
+ * Used to customize the appearance of your PaymentSheet
+ */
+export type AppearanceParams = RecursivePartial<{
+  /** Describes the appearance of fonts in your PaymentSheet */
+  font: FontConfig;
+  /** Describes the colors in your PaymentSheet. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode.  */
+  colors:
+    | GlobalColorConfig
+    | { light: GlobalColorConfig; dark: GlobalColorConfig };
+  /** Describes the appearance of shapes in the PaymentSheet, such as buttons, inputs, and tabs. */
+  shapes: {
+    /** The border radius used for buttons, inputs, and tabs in your PaymentSheet.
+     * @default 6.0
+     */
+    borderRadius: number;
+    /** The border width used for inputs and tabs in your PaymentSheet.
+     * @default 1.0
+     */
+    borderWidth: number;
+    /** iOS only. The shadow used for buttons, inputs, and tabs in your PaymentSheet */
+    shadow: ShadowConfig;
+  };
+  /** Describes the appearance of the primary "Pay" button at the bottom of your Payment Sheet */
+  primaryButton: PrimaryButtonConfig;
+}>;
+
+export type FontConfig = {
+  /**
+   * The font used for regular text. PaymentSheet will attempt to use medium and bold versions of this font if they exist.
+   *
+   * On iOS, this should be the "PostScript name" found in Font Book after installing the font.
+   * On Android, this should be the name of the font file (containing only lowercase alphanumeric characters) in android/app/src/main/res/font
+   *
+   * @default The OS's system font
+   */
+  family: string;
+  /** The scale factor for all fonts in your PaymentSheet. This value is required to be greater than 0. Font sizes are multiplied by this value before being displayed. For example, setting this to 1.2 increases the size of all text by 20%.
+   * @default 1.0
+   */
+  scale: number;
+};
+
+export type ShadowConfig = {
+  /** The color of the shadow.
+   * @default "#000000"
+   * */
+  color: string;
+  /** The alpha or opacity of the shadow.
+   * @default 0.05
+   */
+  opacity: number;
+  /** The positioning of the shadow relative to the component. For example, a negative x and y will result in a shadow placed below and to the left of the component.
+   * @default {x: 0, y: 2}
+   */
+  offset: { x: number; y: number };
+  /** The blur radius of the shadow.
+   * @default 4
+   */
+  blurRadius: number;
+};
+
+export type GlobalColorConfig = {
+  /** A primary color used throughout your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System blue color on iOS, and "#007AFF" (light) / "#0074D4" (dark) on Android.
+   */
+  primary: string;
+  /** The color used for the background of your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System background color on iOS, and "#ffffff" (light) / "#2e2e2e" (dark) on Android.
+   */
+  background: string;
+  /** The color used for the background of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System background color (light) / System secondary background color (dark) on iOS, and "#ffffff" (light) / "#a9a9a9" (dark) on Android.
+   */
+  componentBackground: string;
+  /** The color used for the external border of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
+   */
+  componentBorder: string;
+  /** The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System gray (3) color on iOS, and "#33787880" (light) / "#787880" (dark) on Android.
+   */
+  componentDivider: string;
+  /** The color of the header text in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
+   */
+  primaryText: string;
+  /** The color of the label text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System seconday label color on iOS, and "#000000" (light) / "#ffffff" (dark) on Android.
+   */
+  secondaryText: string;
+  /** The color of the input text in your PaymentSheet components, such as the user's card number or zip code, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default "#000000"
+   */
+  componentText: string;
+  /** The color of the placeholder text of input fields, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System label color on iOS, and "#99000000" (light) / "#99ffffff" (dark) on Android.
+   */
+  placeholderText: string;
+  /** The color used for icons in your Payment Sheet, such as the close or back icons, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System seconday label color on iOS, and "#99000000" (light) / "#ffffff" (dark) on Android.
+   */
+  icon: string;
+  /** The color used to indicate errors or destructive actions in your Payment Sheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System red color on iOS, and "#ff0000" (light) / "#ff0000" (dark) on Android.
+   */
+  error: string;
+};
+
+export type PrimaryButtonConfig = {
+  /** The font family used specifically for the primary button.
+   * @default The root `appearance.font.family`
+   */
+  font: Pick<FontConfig, 'family'>;
+  /** The colors used specifically for the primary button. Provide either a base config, or both `light` and `dark` configs, which will be useed based on whether the user is in Light or Dark mode.  */
+  colors:
+    | PrimaryButtonColorConfig
+    | { light: PrimaryButtonColorConfig; dark: PrimaryButtonColorConfig };
+  /** Describes the border and shadow of the primary button. */
+  shapes: {
+    /** The border radius used for the primary button in your PaymentSheet
+     * @default The root `appearance.shapes.borderRadius`
+     */
+    borderRadius: number;
+    /** The border width used for the primary button in your PaymentSheet
+     * @default The root `appearance.shapes.borderWidth`
+     */
+    borderWidth: number;
+    /** iOS only. The shadow used for the primary button in your PaymentSheet
+     * @default The root `appearance.shapes.shadow`
+     */
+    shadow: ShadowConfig;
+  };
+};
+
+export type PrimaryButtonColorConfig = {
+  /** The background color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The root `appearance.colors.primary`
+   */
+  background: string;
+  /** The color of the text for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default White or black, depending on the color of the button.
+   */
+  text: string;
+  /** The border color used for the primary button in your PaymentSheet, represented as a hex string with format #RRGGBB or #AARRGGBB.
+   * @default The System quaternary label on iOS, transparent on Android.
+   */
+  border: string;
+};
+
+type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? RecursivePartial<U>[]
+    : T[P] extends object
+    ? RecursivePartial<T[P]>
+    : T[P];
+};
 export interface PaymentOption {
   label: string;
   image: string;

package/src/types/Token.ts

@@ -50,8 +50,12 @@ export interface Card {
   name?: string;
 }
 
-export type CreateParams = CreateCardTokenParams | CreateBankAccountTokenParams;
+export type CreateParams =
+  | CreateCardTokenParams
+  | CreateBankAccountTokenParams
+  | CreatePiiTokenParams;
 
+/** Creates a single-use token that represents a credit card’s details. Use this in combination with either the CardField or CardForm components. This token can be used in place of a credit card object with any API method. See https://stripe.com/docs/api/tokens/create_card*/
 export type CreateCardTokenParams = {
   type: 'Card';
   address?: Address;
@@ -63,6 +67,7 @@ export type BankAcccountHolderType = 'Company' | 'Individual';
 
 export type BankAcccountType = 'Checking' | 'Savings';
 
+/** Creates a single-use token that represents a bank account’s details. This token can be used with any API method in place of a bank account object. See https://stripe.com/docs/api/tokens/create_bank_account */
 export type CreateBankAccountTokenParams = {
   type: 'BankAccount';
   accountHolderName?: string;
@@ -72,3 +77,10 @@ export type CreateBankAccountTokenParams = {
   currency: string;
   routingNumber?: string;
 };
+
+/** Creates a single-use token that represents the details of personally identifiable information (PII). See https://stripe.com/docs/api/tokens/create_pii */
+export type CreatePiiTokenParams = {
+  type: 'Pii';
+  /** The user's personal ID number */
+  personalId: string;
+};

package/src/types/components/CardFieldInput.ts

@@ -59,6 +59,7 @@ export interface NativeProps {
   value?: Partial<Details>;
   postalCodeEnabled?: boolean;
   autofocus?: boolean;
+  countryCode: string | null;
   onCardChange(event: NativeSyntheticEvent<Details>): void;
   onFocusChange(
     event: NativeSyntheticEvent<{ focusedField: FieldName | null }>

package/src/types/components/CardFormView.ts

@@ -44,6 +44,11 @@ export interface Placeholders {
   postalCode?: string;
 }
 
+export type DefaultValues = {
+  /** The 2-letter country code for the country selected by default on Android. If this is null, it is set by the device's configured region in the Settings app. */
+  countryCode?: string;
+};
+
 /**
  * @ignore
  */
@@ -54,6 +59,8 @@ export interface NativeProps {
   cardStyle?: Styles;
   /** Android only */
   placeholders?: Placeholders;
+  /** Android only */
+  defaultValues?: DefaultValues;
   // postalCodeEnabled: boolean;
   onFocusChange(
     event: NativeSyntheticEvent<{ focusedField: FieldName | null }>

package/src/types/index.ts

@@ -140,11 +140,7 @@ export type InitPaymentSheetResult =
 
 export type PresentPaymentSheetResult =
   | {
-      paymentOption?: undefined;
-      error?: undefined;
-    }
-  | {
-      paymentOption?: PaymentSheet.PaymentOption;
+      paymentOption: PaymentSheet.PaymentOption;
       error?: undefined;
     }
   | {

package/stripe-react-native.podspec

@@ -1,7 +1,7 @@
 require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
-stripe_version = '~> 22.3.0'
+stripe_version = '~> 22.4.0'
 
 Pod::Spec.new do |s|
   s.name         = 'stripe-react-native'

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

@@ -1,10 +0,0 @@
-package com.reactnativestripesdk
-
-var ON_PAYMENT_RESULT_ACTION = "com.reactnativestripesdk.PAYMENT_RESULT_ACTION"
-var ON_PAYMENT_OPTION_ACTION = "com.reactnativestripesdk.PAYMENT_OPTION_ACTION"
-var ON_CONFIGURE_FLOW_CONTROLLER = "com.reactnativestripesdk.CONFIGURE_FLOW_CONTROLLER_ACTION"
-var ON_INIT_PAYMENT_SHEET = "com.reactnativestripesdk.INIT_PAYMENT_SHEET"
-
-var ON_INIT_GOOGLE_PAY = "com.reactnativestripesdk.ON_INIT_GOOGLE_PAY"
-var ON_GOOGLE_PAY_RESULT = "com.reactnativestripesdk.ON_GOOGLE_PAY_RESULT"
-var ON_GOOGLE_PAYMENT_METHOD_RESULT = "com.reactnativestripesdk.ON_GOOGLE_PAYMENT_METHOD_RESULT"