@stripe/stripe-react-native 0.8.0 → 0.11.0

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

@@ -18,7 +18,7 @@ export interface Result {
     Upi: UpiResult;
     USBankAccount: USBankAccountResult;
 }
-export declare type CreateParams = CardParams | IdealParams | OxxoParams | P24Params | AlipayParams | GiropayParams | SepaParams | EpsParams | AuBecsDebitParams | SofortParams | GrabPayParams | FPXParams | AfterpayClearpayParams | KlarnaParams | BancontactParams | USBankAccountParams;
+export declare type CreateParams = CardParams | IdealParams | OxxoParams | P24Params | AlipayParams | GiropayParams | SepaParams | EpsParams | AuBecsDebitParams | SofortParams | GrabPayParams | FPXParams | AfterpayClearpayParams | KlarnaParams | BancontactParams | USBankAccountParams | PayPalParams;
 export declare type ConfirmParams = CreateParams;
 export declare type CreateOptions = {
     setupFutureUsage?: FutureUsage;
@@ -149,6 +149,12 @@ export declare type USBankAccountParams = {
         accountType?: BankAcccountType;
     };
 };
+export declare type PayPalParams = {
+    paymentMethodType: 'PayPal';
+    paymentMethodData?: {
+        billingDetails?: BillingDetails;
+    };
+};
 export interface AuBecsDebitResult {
     fingerprint?: string;
     last4?: string;
@@ -198,7 +204,7 @@ export declare type USBankAccountResult = {
     preferredNetwork?: string;
     supportedNetworks?: string[];
 };
-export declare type Type = 'AfterpayClearpay' | 'Card' | 'Alipay' | 'GrabPay' | 'Ideal' | 'Fpx' | 'CardPresent' | 'SepaDebit' | 'AuBecsDebit' | 'BacsDebit' | 'Giropay' | 'P24' | 'Eps' | 'Bancontact' | 'Oxxo' | 'Sofort' | 'Upi' | 'USBankAccount' | 'Unknown';
+export declare type Type = 'AfterpayClearpay' | 'Card' | 'Alipay' | 'GrabPay' | 'Ideal' | 'Fpx' | 'CardPresent' | 'SepaDebit' | 'AuBecsDebit' | 'BacsDebit' | 'Giropay' | 'P24' | 'Eps' | 'Bancontact' | 'Oxxo' | 'Sofort' | 'Upi' | 'USBankAccount' | 'PayPal' | 'Unknown';
 export declare type CollectBankAccountParams = {
     paymentMethodType: 'USBankAccount';
     paymentMethodData: {

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

@@ -6,9 +6,10 @@ export declare type SetupParams = ClientSecretParams & GooglePayParams & ApplePa
     merchantDisplayName?: string;
     style?: 'alwaysLight' | 'alwaysDark' | 'automatic';
     returnURL?: string;
-    primaryButtonColor?: string;
     defaultBillingDetails?: BillingDetails;
     allowsDelayedPaymentMethods?: boolean;
+} & {
+    appearance?: AppearanceParams;
 };
 declare type ClientSecretParams = {
     paymentIntentClientSecret: string;
@@ -35,6 +36,158 @@ declare type GooglePayParams = {
     currencyCode?: string;
     testEnv?: boolean;
 };
+/**
+ * Used to customize the appearance of your PaymentSheet
+ */
+export declare 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 declare 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 declare 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 border radius of the shadow.
+     * @default 4
+     */
+    borderRadius: number;
+};
+export declare 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 declare 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 declare 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;
+};
+declare 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/lib/typescript/src/types/SetupIntent.d.ts

@@ -15,7 +15,7 @@ export interface Result {
     description: string | null;
     nextAction: NextAction | null;
 }
-export declare type ConfirmParams = PaymentMethod.CreateParams;
+export declare 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;
 export declare type ConfirmOptions = {};
 export declare type FutureUsage = 'Unknown' | 'None' | 'OnSession' | 'OffSession' | 'OneTime';
 export declare enum Status {

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

@@ -25,6 +25,7 @@ export interface Details {
      * See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance
      */
     number?: string;
+    cvc?: string;
 }
 export interface Styles {
     borderWidth?: number;

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

@@ -17,6 +17,7 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stripe/stripe-react-native",
-  "version": "0.8.0",
+  "version": "0.11.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/components/AddToWalletButton.tsx

@@ -29,14 +29,19 @@ export interface Props extends AccessibilityProps {
   testID?: string;
   /** Only set to `false` when shipping through TestFlight || App Store */
   testEnv?: boolean;
-  /** Sets the card holder name (used only on iOS) */
-  cardHolderName: string;
-  /** Last 4 digits of the card. Required on Android. */
-  cardLastFour: string;
-  /** Sets the card holder name (used only on iOS) */
-  cardDescription?: string;
-  /** Optional, only used on iOS */
-  cardBrand?: Token.CardBrand;
+  /** 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. */
@@ -54,9 +59,11 @@ export interface Props extends AccessibilityProps {
  *    testEnv={true}
  *    style={styles.myButtonStyle}
  *    iOSButtonStyle="onLightBackground"
- *    cardHolderName="David Wallace"
- *    cardLastFour="4242"
- *    cardBrand="Visa"
+ *    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(

package/src/components/CardField.tsx

@@ -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`

package/src/components/CardForm.tsx

@@ -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`

package/src/types/PaymentMethod.ts

@@ -41,7 +41,8 @@ export type CreateParams =
   | KlarnaParams
   // | WeChatPayParams
   | BancontactParams
-  | USBankAccountParams;
+  | USBankAccountParams
+  | PayPalParams;
 
 export type ConfirmParams = CreateParams;
 
@@ -191,6 +192,13 @@ export type USBankAccountParams = {
   };
 };
 
+export type PayPalParams = {
+  paymentMethodType: 'PayPal';
+  paymentMethodData?: {
+    billingDetails?: BillingDetails;
+  };
+};
+
 export interface AuBecsDebitResult {
   fingerprint?: string;
   last4?: string;
@@ -268,6 +276,7 @@ export type Type =
   | 'Sofort'
   | 'Upi'
   | 'USBankAccount'
+  | 'PayPal'
   | 'Unknown';
 
 export type CollectBankAccountParams = {

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 border radius of the shadow.
+   * @default 4
+   */
+  borderRadius: 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/SetupIntent.ts

@@ -16,7 +16,24 @@ 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 = {};
 

package/src/types/components/CardFieldInput.ts

@@ -28,6 +28,7 @@ export interface Details {
    * See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance
    */
   number?: string;
+  cvc?: string;
 }
 
 export interface Styles {

package/src/types/components/CardFormView.ts

@@ -19,6 +19,7 @@ export interface Details {
    * See the docs for details: https://stripe.com/docs/security/guide#validating-pci-compliance
    */
   number?: string;
+  cvc?: string;
 }
 
 export interface Styles {

package/stripe-react-native.podspec

@@ -1,6 +1,7 @@
 require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+stripe_version = '~> 22.4.0'
 
 Pod::Spec.new do |s|
   s.name         = 'stripe-react-native'
@@ -16,6 +17,6 @@ Pod::Spec.new do |s|
   s.source_files = 'ios/**/*.{h,m,mm,swift}'
 
   s.dependency 'React-Core'
-  s.dependency 'Stripe', '~> 22.0.0'
-  s.dependency 'StripeConnections', '~> 22.0.0'
+  s.dependency 'Stripe', stripe_version
+  s.dependency 'StripeFinancialConnections', stripe_version
 end

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"