@stripe/stripe-react-native 0.64.0 → 0.64.1

package/src/types/EmbeddedPaymentElement.tsx

@@ -13,6 +13,7 @@ import type {
   CardBrand,
 } from './Common';
 import type { PaymentMethod } from '.';
+import type { Checkout } from './Checkout';
 import type * as ConfirmationToken from './ConfirmationToken';
 import * as PaymentSheetTypes from './PaymentSheet';
 import NativeStripeSdkModule from '../specs/NativeStripeSdkModule';
@@ -222,21 +223,38 @@ export interface EmbeddedPaymentElementConfiguration {
   opensCardScannerAutomatically?: boolean;
 }
 
+// Narrows a value to `Checkout` vs. `IntentConfiguration`.
+const isCheckoutSession = (
+  value: PaymentSheetTypes.IntentConfiguration | Checkout
+): value is Checkout =>
+  typeof value === 'object' &&
+  value !== null &&
+  'sessionKey' in value &&
+  !('mode' in value);
+
 // -----------------------------------------------------------------------------
 // Embedded API
 // -----------------------------------------------------------------------------
 
 class EmbeddedPaymentElement {
   /**
-   * Call this when the intent configuration changes (e.g., amount or currency).
+   * Call this when the intent configuration or Checkout Session changes.
    * Cancels any in-progress update. Ensures the correct payment methods are shown and fields are collected.
    * If the selected payment option becomes invalid, it may be cleared.
    * Returns the final result of the update; earlier in-flight updates will return `{ status: 'canceled' }`.
    */
-  async update(intentConfig: PaymentSheetTypes.IntentConfiguration) {
-    const result =
-      await NativeStripeSdkModule.updateEmbeddedPaymentElement(intentConfig);
-    return result;
+  async updateIntent(
+    intentConfig: PaymentSheetTypes.IntentConfiguration
+  ): Promise<unknown> {
+    return await NativeStripeSdkModule.updateEmbeddedPaymentElement(
+      intentConfig
+    );
+  }
+
+  async updateCheckout(checkout: Checkout): Promise<unknown> {
+    return await NativeStripeSdkModule.updateEmbeddedPaymentElementWithCheckout(
+      checkout.sessionKey
+    );
   }
 
   /**
@@ -268,21 +286,28 @@ let customPaymentMethodConfirmCallback: EventSubscription | null = null;
 let rowSelectionCallback: EventSubscription | null = null;
 
 async function createEmbeddedPaymentElement(
-  intentConfig: PaymentSheetTypes.IntentConfiguration,
+  intent: PaymentSheetTypes.IntentConfiguration | Checkout,
   configuration: EmbeddedPaymentElementConfiguration
 ): Promise<EmbeddedPaymentElement> {
-  setupConfirmAndSelectionHandlers(intentConfig, configuration);
+  setupConfigurationHandlers(configuration);
 
-  await NativeStripeSdkModule.createEmbeddedPaymentElement(
-    intentConfig,
-    configuration
-  );
+  if (isCheckoutSession(intent)) {
+    await NativeStripeSdkModule.createEmbeddedPaymentElementWithCheckout(
+      intent.sessionKey,
+      configuration
+    );
+  } else {
+    setupIntentConfirmHandlers(intent);
+    await NativeStripeSdkModule.createEmbeddedPaymentElement(
+      intent,
+      configuration
+    );
+  }
   return new EmbeddedPaymentElement();
 }
 
-function setupConfirmAndSelectionHandlers(
-  intentConfig: PaymentSheetTypes.IntentConfiguration,
-  configuration: EmbeddedPaymentElementConfiguration
+function setupIntentConfirmHandlers(
+  intentConfig: PaymentSheetTypes.IntentConfiguration
 ) {
   const confirmHandler = intentConfig.confirmHandler;
   if (confirmHandler) {
@@ -323,7 +348,11 @@ function setupConfirmAndSelectionHandlers(
       }
     );
   }
+}
 
+function setupConfigurationHandlers(
+  configuration: EmbeddedPaymentElementConfiguration
+) {
   if (configuration.formSheetAction?.type === 'confirm') {
     const confirmFormSheetHandler =
       configuration.formSheetAction.onFormSheetConfirmComplete;
@@ -409,7 +438,16 @@ export interface UseEmbeddedPaymentElementResult {
    * @note Upon completion, `paymentOption` may become null if it's no longer available.
    * @note If you call `update` while a previous call to `update` is still in progress, the previous call is canceled.
    */
-  update: (intentConfig: PaymentSheetTypes.IntentConfiguration) => void;
+  update: {
+    (intentConfig: PaymentSheetTypes.IntentConfiguration): void;
+    /**
+     * Call this method when the Checkout Session values you used to initialize
+     * `EmbeddedPaymentElement` change.
+     * @checkoutSessionsPreview
+     * @internal
+     */
+    (checkout: Checkout): void;
+  };
   // Sets the currently selected payment option to null
   clearPaymentOption: () => void;
   // Any error encountered during creation/update, or null
@@ -429,6 +467,38 @@ export interface UseEmbeddedPaymentElementResult {
 export function useEmbeddedPaymentElement(
   intentConfig: PaymentSheetTypes.IntentConfiguration,
   configuration: EmbeddedPaymentElementConfiguration
+): UseEmbeddedPaymentElementResult;
+/**
+ * Initializes an `EmbeddedPaymentElement` from a Stripe Checkout Session.
+ *
+ * Pass a loaded handle from `useCheckout`. Render the consumer in a child
+ * component so the hook only runs once `state.status === 'loaded'`.
+ *
+ * @example
+ * function Cart() {
+ *   const { checkout, state } = useCheckout(clientSecret);
+ *   if (state?.status !== 'loaded') return null;
+ *   return <EmbeddedCheckout checkout={checkout} />;
+ * }
+ *
+ * function EmbeddedCheckout({ checkout }: { checkout: Checkout }) {
+ *   const { embeddedPaymentElementView } =
+ *     useEmbeddedPaymentElement(checkout, configuration);
+ *   return embeddedPaymentElementView;
+ * }
+ *
+ * @param checkout - A loaded `Checkout` handle from `useCheckout`.
+ * @param configuration - Configuration for the embedded element.
+ * @checkoutSessionsPreview
+ * @internal
+ */
+export function useEmbeddedPaymentElement(
+  checkout: Checkout,
+  configuration: EmbeddedPaymentElementConfiguration
+): UseEmbeddedPaymentElementResult;
+export function useEmbeddedPaymentElement(
+  intent: PaymentSheetTypes.IntentConfiguration | Checkout,
+  configuration: EmbeddedPaymentElementConfiguration
 ): UseEmbeddedPaymentElementResult {
   const isAndroid = Platform.OS === 'android';
   const elementRef = useRef<EmbeddedPaymentElement | null>(null);
@@ -454,12 +524,18 @@ export function useEmbeddedPaymentElement(
     return ref.current;
   }
 
+  // Re-key on the session key (Checkout) or intent object so we only
+  // recreate the element when the source actually changes.
+  const intentKey = isCheckoutSession(intent) ? intent.sessionKey : intent;
+  const intentRef = useRef(intent);
+  intentRef.current = intent;
+
   // Create embedded payment element
   useEffect(() => {
     let active = true;
     (async () => {
       const el = await createEmbeddedPaymentElement(
-        intentConfig,
+        intentRef.current,
         configuration
       );
       if (!active) return;
@@ -471,7 +547,7 @@ export function useEmbeddedPaymentElement(
       elementRef.current = null;
       setElement(null);
     };
-  }, [intentConfig, configuration, viewRef, isAndroid]);
+  }, [intentKey, configuration, viewRef, isAndroid]);
 
   useEffect(() => {
     const sub = addListener(
@@ -509,13 +585,19 @@ export function useEmbeddedPaymentElement(
 
   // Render the embedded view
   const embeddedPaymentElementView = useMemo(() => {
-    if (isAndroid && configuration && intentConfig) {
+    // `intentKey` is the session key string for Checkout, the IntentConfiguration object otherwise.
+    const intentProps =
+      typeof intentKey === 'string'
+        ? { checkout: { sessionKey: intentKey } }
+        : { intentConfiguration: intentKey };
+
+    if (isAndroid && configuration && intentKey) {
       return (
         <NativeEmbeddedPaymentElement
           ref={viewRef}
           style={[{ width: '100%', height: height }]}
           configuration={configuration}
-          intentConfiguration={intentConfig}
+          {...intentProps}
         />
       );
     }
@@ -525,10 +607,10 @@ export function useEmbeddedPaymentElement(
         ref={viewRef}
         style={{ width: '100%', height }}
         configuration={configuration}
-        intentConfiguration={intentConfig}
+        {...intentProps}
       />
     );
-  }, [configuration, element, height, intentConfig, isAndroid]);
+  }, [configuration, element, height, intentKey, isAndroid]);
 
   // Other APIs
   const confirm = useCallback((): Promise<EmbeddedPaymentElementResult> => {
@@ -560,19 +642,25 @@ export function useEmbeddedPaymentElement(
     return getElementOrThrow(elementRef).confirm();
   }, [isAndroid]);
   const update = useCallback(
-    (cfg: PaymentSheetTypes.IntentConfiguration) => {
+    (
+      updateSource: PaymentSheetTypes.IntentConfiguration | Checkout
+    ): Promise<unknown> => {
       if (isAndroid) {
         const currentRef = viewRef.current;
         if (currentRef) {
-          return new Promise<{ status: string } | null>((resolve) => {
+          return new Promise((resolve) => {
             const sub = addListener(
               'embeddedPaymentElementUpdateComplete',
-              (result: { status: string } | null) => {
+              (result) => {
                 sub.remove();
                 resolve(result);
               }
             );
-            Commands.update(currentRef, JSON.stringify(cfg));
+            if (isCheckoutSession(updateSource)) {
+              Commands.updateWithCheckout(currentRef, updateSource.sessionKey);
+            } else {
+              Commands.update(currentRef, JSON.stringify(updateSource));
+            }
           });
         }
         return Promise.reject(
@@ -581,7 +669,10 @@ export function useEmbeddedPaymentElement(
       }
 
       // iOS: use native module directly
-      return getElementOrThrow(elementRef).update(cfg);
+      const embeddedElement = getElementOrThrow(elementRef);
+      return isCheckoutSession(updateSource)
+        ? embeddedElement.updateCheckout(updateSource)
+        : embeddedElement.updateIntent(updateSource);
     },
     [isAndroid]
   );

package/src/types/PaymentMethod.ts

@@ -20,7 +20,6 @@ export interface Result {
   Fpx: FpxResult;
   Ideal: IdealResult;
   SepaDebit: SepaDebitResult;
-  Upi: UpiResult;
   USBankAccount: USBankAccountResult;
 }
 
@@ -254,10 +253,6 @@ export interface SepaDebitResult {
   last4?: string;
 }
 
-export interface UpiResult {
-  vpa?: string;
-}
-
 export type USBankAccountResult = {
   routingNumber?: string;
   accountHolderType?: BankAcccountHolderType;
@@ -286,7 +281,6 @@ export type Type =
   | 'Bancontact'
   | 'Multibanco'
   | 'Oxxo'
-  | 'Upi'
   | 'USBankAccount'
   | 'PayPal'
   | 'Unknown';

package/src/types/PaymentSheet.ts

@@ -15,6 +15,7 @@ import type { FutureUsage } from './PaymentIntent';
 import type { Result } from './PaymentMethod';
 import type { StripeError } from './Errors';
 import type { Result as ConfirmationTokenResult } from './ConfirmationToken';
+import type { Checkout } from './Checkout';
 
 export type SetupParamsBase = IntentParams & {
   /** Your customer-facing business name. On Android, this is required and cannot be an empty string. */
@@ -46,7 +47,7 @@ export type SetupParamsBase = IntentParams & {
   defaultShippingDetails?: AddressDetails;
   /** If true, allows payment methods that do not move money at the end of the checkout. Defaults to false.
    *
-   * Some payment methods can’t guarantee you will receive funds from your customer at the end of the checkout
+   * Some payment methods can't guarantee you will receive funds from your customer at the end of the checkout
    * because they take time to settle (eg. most bank debits, like SEPA or ACH) or require customer action to
    * complete (e.g. OXXO, Konbini, Boleto). If this is set to true, make sure your integration listens to webhooks
    * for notifications on whether a payment has succeeded or not.
@@ -65,7 +66,7 @@ export type SetupParamsBase = IntentParams & {
    *  You can override the default order in which payment methods are displayed in PaymentSheet with a list of payment method types.
    *  See https://stripe.com/docs/api/payment_methods/object#payment_method_object-type for the list of valid types.  You may also pass external payment methods.
    *  - Example: ["card", "external_paypal", "klarna"]
-   *  - Note: If you omit payment methods from this list, they’ll be automatically ordered by Stripe after the ones you provide. Invalid payment methods are ignored.
+   *  - Note: If you omit payment methods from this list, they'll be automatically ordered by Stripe after the ones you provide. Invalid payment methods are ignored.
    */
   paymentMethodOrder?: Array<String>;
   /** This is an experimental feature that may be removed at any time.
@@ -112,9 +113,30 @@ export type SetupParamsBase = IntentParams & {
   };
 };
 
+/**
+ * Parameters for initializing PaymentSheet from a Checkout Session.
+ * Use when you have called `useCheckout` and the state is `loaded`.
+ * @checkoutSessionsPreview
+ * @internal
+ */
+export type CheckoutSetupParams = {
+  /** A fully loaded Checkout instance whose `state.status` is `'loaded'`. */
+  checkout: Checkout;
+  paymentIntentClientSecret?: never;
+  setupIntentClientSecret?: never;
+  intentConfiguration?: never;
+  customerEphemeralKeySecret?: never;
+  customerSessionClientSecret?: never;
+} & Omit<
+  SetupParamsBase,
+  | 'paymentIntentClientSecret'
+  | 'setupIntentClientSecret'
+  | 'intentConfiguration'
+>;
+
 export type SetupParams =
   | (SetupParamsBase & {
-      /** A short-lived token that allows the SDK to access a Customer’s payment methods. */
+      /** A short-lived token that allows the SDK to access a Customer's payment methods. */
       customerEphemeralKeySecret: string;
       customerSessionClientSecret?: never;
     })
@@ -123,7 +145,8 @@ export type SetupParams =
       /** The client secret of this Customer Session. Used on the client to set up secure access to the given customer. */
       customerSessionClientSecret: string;
     })
-  | SetupParamsBase;
+  | SetupParamsBase
+  | CheckoutSetupParams;
 
 export type IntentParams =
   | {
@@ -406,7 +429,7 @@ export type PrimaryButtonColorConfig = {
   successTextColor?: ThemedColor;
 };
 
-/** A color that’s either a single hex or a light/dark pair */
+/** A color that's either a single hex or a light/dark pair */
 export type ThemedColor = string | { light: string; dark: string };
 
 /** Represents edge insets */
@@ -649,7 +672,7 @@ export type Mode = PaymentMode | SetupMode;
 export enum CaptureMethod {
   /** (Default) Stripe automatically captures funds when the customer authorizes the payment. */
   Automatic = 'Automatic',
-  /** Place a hold on the funds when the customer authorizes the payment, but don’t capture the funds until later. (Not all payment methods support this.) */
+  /** Place a hold on the funds when the customer authorizes the payment, but don't capture the funds until later. (Not all payment methods support this.) */
   Manual = 'Manual',
   /** Asynchronously capture funds when the customer authorizes the payment.
   - Note: Recommended over `CaptureMethod.Automatic` due to improved latency, but may require additional integration changes.

package/src/types/components/PaymentMethodMessagingElementComponent.tsx

@@ -25,9 +25,25 @@ export enum PaymentMethodMessagingElementStyle {
   Light = 'light',
 }
 
+export interface PaymentMethodMessagingElementFont {
+  /**
+   * The font used for the element text.
+   *
+   * 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 font size for text in the element. This value is required to be greater than 0.
+   * @default The OS's default text size.
+   */
+  size?: number;
+}
+
 export interface PaymentMethodMessagingElementAppearance {
   /** Font settings for the element. */
-  font?: PaymentSheetTypes.FontConfig;
+  font?: PaymentMethodMessagingElementFont;
   /** The color used for the element text. */
   textColor?: PaymentSheetTypes.ThemedColor;
   /** The color used for the text that links to available BNPL plans. */

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 = '~> 25.11.0'
+stripe_version = '~> 25.12.0'
 
 fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 
@@ -17,13 +17,6 @@ Pod::Spec.new do |s|
   s.platforms    = { ios: '13.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.exclude_files = [ 'ios/Tests/', 'ios/NewArch/' ]
-  # These headers contain c++ code so make sure they are private to avoid
-  # being exported to the umbrella header, which is used by swift interop.
-  # StripeSwiftInterop.h will cause circular dependency issues.
-  s.private_header_files = [ 'ios/StripeSdk.h', 'ios/StripeSwiftInterop.h' ]
-
   s.header_dir = 'stripe_react_native'
   s.pod_target_xcconfig = {
     'USE_HEADERMAP' => 'YES',
@@ -44,6 +37,12 @@ Pod::Spec.new do |s|
   end
 
   s.subspec 'Core' do |core|
+    core.source_files = 'ios/**/*.{h,m,mm,swift}'
+    core.exclude_files = [ 'ios/Tests/', 'ios/NewArch/', 'ios/StripeOnrampSdk.h', 'ios/StripeOnrampSdk.mm' ]
+    # These headers contain c++ code so make sure they are private to avoid
+    # being exported to the umbrella header, which is used by swift interop.
+    # StripeSwiftInterop.h will cause circular dependency issues.
+    core.private_header_files = [ 'ios/StripeSdk.h', 'ios/StripeSwiftInterop.h' ]
     core.dependency 'React-Core'
     core.dependency 'Stripe', stripe_version
     core.dependency 'StripePaymentSheet', stripe_version
@@ -54,6 +53,7 @@ Pod::Spec.new do |s|
   end
 
   s.subspec 'Onramp' do |onramp|
+    onramp.source_files = [ 'ios/StripeOnrampSdk.h', 'ios/StripeOnrampSdk.mm' ]
     onramp.dependency 'stripe-react-native/Core'
     onramp.dependency 'StripeCryptoOnramp', stripe_version
   end

package/android/spotless.gradle

@@ -1,19 +0,0 @@
-apply plugin: 'com.diffplug.spotless'
-
-allprojects {
-    repositories {
-        google()
-        mavenCentral()
-    }
-}
-
-
-spotless {
-    kotlin {
-        target 'src/**/*.kt'
-        ktlint("1.5.0").setEditorConfigPath("$projectDir/../.editorconfig")
-        trimTrailingWhitespace()
-        indentWithSpaces()
-        endWithNewline()
-    }
-}