@stripe/stripe-react-native 0.47.1 → 0.49.0

package/package.json

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

package/src/events.ts

@@ -34,6 +34,7 @@ type Events =
   | 'onCustomerAdapterFetchSelectedPaymentOptionCallback'
   | 'onCustomerAdapterSetupIntentClientSecretForCustomerAttachCallback'
   | 'embeddedPaymentElementFormSheetConfirmComplete'
+  | 'embeddedPaymentElementRowSelectionImmediateAction'
   | 'embeddedPaymentElementDidUpdatePaymentOption'
   | 'embeddedPaymentElementDidUpdateHeight'
   | 'embeddedPaymentElementLoadingFailed';

package/src/types/EmbeddedPaymentElement.tsx

@@ -92,6 +92,32 @@ export type EmbeddedFormSheetAction =
       type: 'continue';
     };
 
+/**
+ * Describes how you handle row selections in EmbeddedPaymentElement.
+ * The embedded view may show payment method options that can be selected without further collecting further details in a form sheet.
+ * This type determines what happens upon a user tapping one of these payment options methods:
+ * - In the `default` case, the payment method option row enters a selected state.
+ * - In the `immediateAction` case, `onSelectPaymentOption` is called.
+ */
+export type EmbeddedRowSelectionBehavior =
+  | {
+      /**
+       * When a payment method option is selected, the customer taps a button to continue or confirm payment.
+       * This is the default recommended integration.
+       */
+      type: 'default';
+    }
+  | {
+      /**
+       * When a payment method option is selected, `onSelectPaymentOption` is triggered.
+       * You can implement this function to immediately perform an action such as going back to the checkout screen or confirming the payment.
+       * Note that certain payment options like Apple Pay and saved payment methods are disabled in this mode if you set
+       * `EmbeddedPaymentElementConfiguration.formSheetAction` to `continue`
+       */
+      type: 'immediateAction';
+      onSelectPaymentOption?: () => void;
+    };
+
 /**
  * Configuration object (subset of EmbeddedPaymentElement.Configuration).
  */
@@ -166,6 +192,10 @@ export interface EmbeddedPaymentElementConfiguration {
    * The sheet has a button at the bottom. `formSheetAction` controls the action the button performs.
    */
   formSheetAction?: EmbeddedFormSheetAction;
+  /** The view can display payment methods that, when tapped, do not open a sheet to collect additional details.
+   * `rowSelectionBehavior` controls the behavior tapping on these payment methods performs.
+   */
+  rowSelectionBehavior?: EmbeddedRowSelectionBehavior;
 }
 
 // -----------------------------------------------------------------------------
@@ -209,12 +239,13 @@ class EmbeddedPaymentElement {
 // -----------------------------------------------------------------------------
 let confirmHandlerCallback: EventSubscription | null = null;
 let formSheetActionConfirmCallback: EventSubscription | null = null;
+let rowSelectionCallback: EventSubscription | null = null;
 
 async function createEmbeddedPaymentElement(
   intentConfig: PaymentSheetTypes.IntentConfiguration,
   configuration: EmbeddedPaymentElementConfiguration
 ): Promise<EmbeddedPaymentElement> {
-  setupConfirmHandlers(intentConfig, configuration);
+  setupConfirmAndSelectionHandlers(intentConfig, configuration);
 
   await NativeStripeSdkModule.createEmbeddedPaymentElement(
     intentConfig,
@@ -223,7 +254,7 @@ async function createEmbeddedPaymentElement(
   return new EmbeddedPaymentElement();
 }
 
-function setupConfirmHandlers(
+function setupConfirmAndSelectionHandlers(
   intentConfig: PaymentSheetTypes.IntentConfiguration,
   configuration: EmbeddedPaymentElementConfiguration
 ) {
@@ -262,6 +293,20 @@ function setupConfirmHandlers(
       );
     }
   }
+
+  if (configuration.rowSelectionBehavior?.type === 'immediateAction') {
+    const rowSelectionHandler =
+      configuration.rowSelectionBehavior.onSelectPaymentOption;
+    if (rowSelectionHandler) {
+      rowSelectionCallback?.remove();
+      rowSelectionCallback = addListener(
+        'embeddedPaymentElementRowSelectionImmediateAction',
+        () => {
+          rowSelectionHandler();
+        }
+      );
+    }
+  }
 }
 
 // -----------------------------------------------------------------------------

package/src/types/PaymentIntent.ts

@@ -58,7 +58,7 @@ export type LastPaymentError = StripeError<string> & {
   paymentMethod: PaymentMethodResult;
 };
 
-export type FutureUsage = 'OffSession' | 'OnSession';
+export type FutureUsage = 'OffSession' | 'OnSession' | 'None';
 
 export interface ShippingDetails {
   address: Required<Address>;

package/src/types/PaymentSheet.ts

@@ -206,6 +206,9 @@ export type AppearanceParams = RecursivePartial<{
 
   /** Describes the appearance of the Embedded Mobile Payment Element */
   embeddedPaymentElement: EmbeddedPaymentElementAppearance;
+
+  /** Describes the inset values applied to Mobile Payment Element forms */
+  formInsetValues: EdgeInsetsConfig;
 }>;
 
 export type FontConfig = {
@@ -313,6 +316,11 @@ export type PrimaryButtonConfig = {
      * @default The root `appearance.shapes.shadow`
      */
     shadow: ShadowConfig;
+    /**
+     * The height of the primary button
+     * @default 48
+     */
+    height: number;
   };
 };
 
@@ -350,6 +358,10 @@ export enum RowStyle {
   FloatingButton = 'floatingButton',
   /** A flat style with a checkmark */
   FlatWithCheckmark = 'flatWithCheckmark',
+  /** A flat style with a chevron
+   * Note that the EmbeddedPaymentElementConfiguration.rowSelectionBehavior must be set to `immediateAction` to use this style.
+   */
+  FlatWithChevron = 'flatWithChevron',
 }
 
 /** Describes the appearance of the radio button */
@@ -373,6 +385,14 @@ export interface CheckmarkConfig {
   color?: ThemedColor;
 }
 
+/** Describes the appearance of the chevron */
+export interface ChevronConfig {
+  /** The color of the chevron, represented as a hex string #AARRGGBB or #RRGGBB.
+   * @default The iOS or Android system gray color
+   */
+  color?: ThemedColor;
+}
+
 /** Describes the appearance of the flat style row */
 export interface FlatConfig {
   /** The thickness of the separator line between rows.
@@ -387,7 +407,7 @@ export interface FlatConfig {
 
   /** The insets of the separator line between rows.
    * @default { top: 0, left: 30, bottom: 0, right: 0 } for RowStyle.FlatWithRadio
-   * @default { top: 0, left: 0, bottom: 0, right: 0 } for RowStyle.FlatWithCheckmark and RowStyle.FloatingButton
+   * @default { top: 0, left: 0, bottom: 0, right: 0 } for RowStyle.FlatWithCheckmark, RowStyle.FlatWithChevron, and RowStyle.FloatingButton
    */
   separatorInsets?: EdgeInsetsConfig;
 
@@ -406,6 +426,9 @@ export interface FlatConfig {
 
   /** Appearance settings for the checkmark (used when RowStyle is FlatWithCheckmark) */
   checkmark?: CheckmarkConfig;
+
+  /** Appearance settings for the chevron (used when RowStyle is FlatWithChevron) */
+  chevron?: ChevronConfig;
 }
 
 /** Describes the appearance of the floating button style payment method row */
@@ -554,6 +577,17 @@ export type PaymentMode = {
   /* Controls when the funds will be captured.
   Seealso: https://stripe.com/docs/api/payment_intents/create#create_payment_intent-capture_method */
   captureMethod?: CaptureMethod;
+  /** Additional payment method options params.
+  Seealso: https://docs.stripe.com/api/payment_intents/create#create_payment_intent-payment_method_options */
+  paymentMethodOptions?: PaymentMethodOptions;
+};
+
+export type PaymentMethodOptions = {
+  /* This is an experimental feature that may be removed at any time
+  A map of payment method types to setup_future_usage value. (e.g. card: 'OffSession') */
+  setupFutureUsageValues: {
+    [key: string]: FutureUsage;
+  };
 };
 
 /* Use this if your integration creates a SetupIntent */

package/stripe-react-native.podspec

@@ -2,7 +2,7 @@ require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 # Keep stripe_version in sync with https://github.com/stripe/stripe-identity-react-native/blob/main/stripe-identity-react-native.podspec
-stripe_version = '~> 24.14.0'
+stripe_version = '~> 24.16.1'
 
 fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'