@stripe/stripe-react-native 0.20.0 → 0.21.0

package/lib/typescript/src/components/AddressSheet.d.ts

@@ -0,0 +1,53 @@
+import { AccessibilityProps } from 'react-native';
+import type { PaymentSheet, AddressDetails, StripeError, AddressSheetError } from '../types';
+/**
+ *  Props
+ */
+export interface Props extends AccessibilityProps {
+    /** Whether the sheet is visible. Defaults to false. */
+    visible: boolean;
+    /** Controls how the modal is presented (after animation). iOS only. Defaults to `popover`. */
+    presentationStyle?: 'fullscreen' | 'popover';
+    /** Controls how the modal animates. iOS only. */
+    animationStyle?: 'flip' | 'curl' | 'slide' | 'dissolve';
+    /** Configuration for the look and feel of the UI. */
+    appearance?: PaymentSheet.AppearanceParams;
+    /** The values to prepopulate the sheet's fields with. */
+    defaultValues?: AddressDetails;
+    /** Configuration for additional fields besides the physical address */
+    additionalFields?: {
+        /** Determines whether the phone number is hidden, required, or optional. Defaults to hidden. */
+        phoneNumber?: 'hidden' | 'optional' | 'required';
+        /** The label of a checkbox displayed below other fields. If null or undefined, the checkbox is not displayed. */
+        checkboxLabel?: string;
+    };
+    /** A list of two-letter country codes representing countries the customers can select. If the list is empty (the default), we display all countries. */
+    allowedCountries?: Array<string>;
+    /** A list of two-letter country codes representing countries that support address autocomplete. Defaults to a list of countries that Stripe has audited to ensure a good autocomplete experience. */
+    autocompleteCountries?: Array<string>;
+    /** The title of the primary button displayed at the bottom of the screen. Defaults to "Save Address". */
+    primaryButtonTitle?: string;
+    /** Title displayed at the top of the sheet. Defaults to "Address". */
+    sheetTitle?: string;
+    /** Android only. Google Places api key used to provide autocomplete suggestions. When null, autocomplete is disabled on Android. */
+    googlePlacesApiKey?: string;
+    /** Called when the user submits their information */
+    onSubmit: (result: CollectAddressResult) => void;
+    /** Called when the user taps the button to close the sheet before submitting their information, or when an error occurs. */
+    onError: (error: StripeError<AddressSheetError>) => void;
+}
+export declare type CollectAddressResult = Required<AddressDetails>;
+/**
+ *
+ *
+ * @example
+ * ```ts
+ *  <AddressSheet
+ *
+ *  />
+ * ```
+ * @param __namedParameters Props
+ * @returns JSX.Element
+ * @category ReactComponents
+ */
+export declare function AddressSheet({ onSubmit, onError, ...props }: Props): JSX.Element;

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

@@ -13,5 +13,6 @@ export { AuBECSDebitForm, Props as AuBECSDebitFormProps, } from './components/Au
 export { StripeContainer, Props as StripeContainerProps, } from './components/StripeContainer';
 export { GooglePayButton, Props as GooglePayButtonProps, } from './components/GooglePayButton';
 export { AddToWalletButton, Props as AddToWalletButtonProps, } from './components/AddToWalletButton';
+export { AddressSheet, Props as AddressSheetProps, } from './components/AddressSheet';
 export * from './functions';
 export * from './types/index';

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

@@ -12,3 +12,15 @@ export interface Address {
     postalCode?: string;
     state?: string;
 }
+export declare type AddressDetails = {
+    /** The customer's full name. */
+    name?: string;
+    /** The customer's address. */
+    address?: Address;
+    /** The customer's phone number. */
+    phone?: string;
+    /** Whether or not the checkbox is initally selected. Defaults to false.
+     *  Note: The checkbox is displayed below the other fields when additionalFields.checkboxLabel is set.
+     *  */
+    isCheckboxSelected?: boolean;
+};

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

@@ -62,3 +62,7 @@ export declare enum CollectBankAccountError {
     Failed = "Failed",
     Unknown = "Unknown"
 }
+export declare const enum AddressSheetError {
+    Failed = "Failed",
+    Canceled = "Canceled"
+}

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

@@ -1,4 +1,4 @@
-import type { BillingDetails } from './Common';
+import type { BillingDetails, AddressDetails } from './Common';
 import type { CartSummaryItem } from './ApplePay';
 export declare type SetupParams = ClientSecretParams & {
     /** Your customer-facing business name. On Android, this is required and cannot be an empty string. */
@@ -20,6 +20,12 @@ export declare type SetupParams = ClientSecretParams & {
     returnURL?: string;
     /** PaymentSheet pre-populates the billing fields with the values provided. */
     defaultBillingDetails?: BillingDetails;
+    /**
+     * The shipping information for the customer. If set, PaymentSheet will pre-populate the form fields with the values provided.
+     * This is used to display a "Billing address is same as shipping" checkbox if `defaultBillingDetails` is not provided.
+     * If `name` and `line1` are populated, it's also [attached to the PaymentIntent](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-shipping) during payment.
+     */
+    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

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

@@ -14,7 +14,7 @@ import * as Token from './Token';
 import * as FinancialConnections from './FinancialConnections';
 export { ApplePay, PaymentIntent, PaymentMethod, PaymentSheet, SetupIntent, ThreeDSecure, GooglePay, ApplePayButtonComponent, AuBECSDebitFormComponent, CardFieldInput, CardFormView, Token, FinancialConnections, };
 export * from './Errors';
-export { Address, BillingDetails } from './Common';
+export { Address, BillingDetails, AddressDetails } from './Common';
 /**
  * @ignore
  */
@@ -84,11 +84,8 @@ export declare type InitPaymentSheetResult = {
     error: StripeError<PaymentSheetError>;
 };
 export declare type PresentPaymentSheetResult = {
-    paymentOption: PaymentSheet.PaymentOption;
-    error?: undefined;
-} | {
-    paymentOption?: undefined;
-    error: StripeError<PaymentSheetError>;
+    paymentOption?: PaymentSheet.PaymentOption | undefined;
+    error?: StripeError<PaymentSheetError> | undefined;
 };
 export declare type CreateTokenResult = {
     token: Token.Result;

package/package.json

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

package/src/components/AddressSheet.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  requireNativeComponent,
+  NativeSyntheticEvent,
+} from 'react-native';
+import type {
+  PaymentSheet,
+  AddressDetails,
+  StripeError,
+  AddressSheetError,
+} from '../types';
+
+const AddressSheetNative = requireNativeComponent<any>('AddressSheetView');
+
+/**
+ *  Props
+ */
+export interface Props extends AccessibilityProps {
+  /** Whether the sheet is visible. Defaults to false. */
+  visible: boolean;
+  /** Controls how the modal is presented (after animation). iOS only. Defaults to `popover`. */
+  presentationStyle?: 'fullscreen' | 'popover';
+  /** Controls how the modal animates. iOS only. */
+  animationStyle?: 'flip' | 'curl' | 'slide' | 'dissolve';
+  /** Configuration for the look and feel of the UI. */
+  appearance?: PaymentSheet.AppearanceParams;
+  /** The values to prepopulate the sheet's fields with. */
+  defaultValues?: AddressDetails;
+  /** Configuration for additional fields besides the physical address */
+  additionalFields?: {
+    /** Determines whether the phone number is hidden, required, or optional. Defaults to hidden. */
+    phoneNumber?: 'hidden' | 'optional' | 'required';
+    /** The label of a checkbox displayed below other fields. If null or undefined, the checkbox is not displayed. */
+    checkboxLabel?: string;
+  };
+  /** A list of two-letter country codes representing countries the customers can select. If the list is empty (the default), we display all countries. */
+  allowedCountries?: Array<string>;
+  /** A list of two-letter country codes representing countries that support address autocomplete. Defaults to a list of countries that Stripe has audited to ensure a good autocomplete experience. */
+  autocompleteCountries?: Array<string>;
+  /** The title of the primary button displayed at the bottom of the screen. Defaults to "Save Address". */
+  primaryButtonTitle?: string;
+  /** Title displayed at the top of the sheet. Defaults to "Address". */
+  sheetTitle?: string;
+  /** Android only. Google Places api key used to provide autocomplete suggestions. When null, autocomplete is disabled on Android. */
+  googlePlacesApiKey?: string;
+  /** Called when the user submits their information */
+  onSubmit: (result: CollectAddressResult) => void;
+  /** Called when the user taps the button to close the sheet before submitting their information, or when an error occurs. */
+  onError: (error: StripeError<AddressSheetError>) => void;
+}
+
+export type CollectAddressResult = Required<AddressDetails>;
+
+/**
+ *
+ *
+ * @example
+ * ```ts
+ *  <AddressSheet
+ *
+ *  />
+ * ```
+ * @param __namedParameters Props
+ * @returns JSX.Element
+ * @category ReactComponents
+ */
+export function AddressSheet({ onSubmit, onError, ...props }: Props) {
+  return (
+    <AddressSheetNative
+      {...props}
+      onSubmitAction={(value: NativeSyntheticEvent<CollectAddressResult>) =>
+        onSubmit(value.nativeEvent)
+      }
+      onErrorAction={(
+        value: NativeSyntheticEvent<{
+          error: StripeError<AddressSheetError>;
+        }>
+      ) => onError(value.nativeEvent.error)}
+    />
+  );
+}

package/src/index.tsx

@@ -35,7 +35,10 @@ export {
   AddToWalletButton,
   Props as AddToWalletButtonProps,
 } from './components/AddToWalletButton';
-
+export {
+  AddressSheet,
+  Props as AddressSheetProps,
+} from './components/AddressSheet';
 export * from './functions';
 
 export * from './types/index';

package/src/types/Common.ts

@@ -13,3 +13,16 @@ export interface Address {
   postalCode?: string;
   state?: string;
 }
+
+export type AddressDetails = {
+  /** The customer's full name. */
+  name?: string;
+  /** The customer's address. */
+  address?: Address;
+  /** The customer's phone number. */
+  phone?: string;
+  /** Whether or not the checkbox is initally selected. Defaults to false.
+   *  Note: The checkbox is displayed below the other fields when additionalFields.checkboxLabel is set.
+   *  */
+  isCheckboxSelected?: boolean;
+};

package/src/types/Errors.ts

@@ -84,3 +84,8 @@ export enum CollectBankAccountError {
   Failed = 'Failed',
   Unknown = 'Unknown',
 }
+
+export const enum AddressSheetError {
+  Failed = 'Failed',
+  Canceled = 'Canceled',
+}

package/src/types/PaymentSheet.ts

@@ -1,4 +1,4 @@
-import type { BillingDetails } from './Common';
+import type { BillingDetails, AddressDetails } from './Common';
 import type { CartSummaryItem } from './ApplePay';
 
 export type SetupParams = ClientSecretParams & {
@@ -21,6 +21,12 @@ export type SetupParams = ClientSecretParams & {
   returnURL?: string;
   /** PaymentSheet pre-populates the billing fields with the values provided. */
   defaultBillingDetails?: BillingDetails;
+  /**
+   * The shipping information for the customer. If set, PaymentSheet will pre-populate the form fields with the values provided.
+   * This is used to display a "Billing address is same as shipping" checkbox if `defaultBillingDetails` is not provided.
+   * If `name` and `line1` are populated, it's also [attached to the PaymentIntent](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-shipping) during payment.
+   */
+  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

package/src/types/index.ts

@@ -44,7 +44,7 @@ export {
 };
 
 export * from './Errors';
-export { Address, BillingDetails } from './Common';
+export { Address, BillingDetails, AddressDetails } from './Common';
 
 /**
  * @ignore
@@ -140,15 +140,10 @@ export type InitPaymentSheetResult =
       error: StripeError<PaymentSheetError>;
     };
 
-export type PresentPaymentSheetResult =
-  | {
-      paymentOption: PaymentSheet.PaymentOption;
-      error?: undefined;
-    }
-  | {
-      paymentOption?: undefined;
-      error: StripeError<PaymentSheetError>;
-    };
+export type PresentPaymentSheetResult = {
+  paymentOption?: PaymentSheet.PaymentOption | undefined;
+  error?: StripeError<PaymentSheetError> | undefined;
+};
 
 export type CreateTokenResult =
   | {

package/stripe-react-native.podspec

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