PaymentSheet | @stripe/stripe-react-native

Type aliases

SetupParams

SetupParams: IntentParams & { merchantDisplayName: string; customerId?: string; customerEphemeralKeySecret?: string; customFlow?: boolean; applePay?: ApplePayParams; googlePay?: GooglePayParams; style?: "alwaysLight" | "alwaysDark" | "automatic"; returnURL?: string; billingDetailsCollectionConfiguration?: BillingDetailsCollectionConfiguration; defaultBillingDetails?: BillingDetails; defaultShippingDetails?: AddressDetails; allowsDelayedPaymentMethods?: boolean; appearance?: AppearanceParams; primaryButtonLabel?: string; removeSavedPaymentMethodMessage?: string }

IntentParams

IntentParams: { paymentIntentClientSecret: string; setupIntentClientSecret?: undefined; intentConfiguration?: never } | { setupIntentClientSecret: string; paymentIntentClientSecret?: undefined; intentConfiguration?: never } | { setupIntentClientSecret?: never; paymentIntentClientSecret?: never; intentConfiguration: IntentConfiguration }

ApplePayParams

ApplePayParams: { merchantCountryCode: string; cartItems?: ApplePay.CartSummaryItem[]; buttonType?: ButtonType; request?: RecurringPaymentRequest | AutomaticReloadPaymentRequest | MultiMerchantRequest; setOrderTracking?: any }

Type declaration

merchantCountryCode: string

The two-letter ISO 3166 code of the country of your business, e.g. "US"
Optional cartItems?: ApplePay.CartSummaryItem[]

An array of CartSummaryItem item objects that summarize the amount of the payment. If you're using a SetupIntent for a recurring payment, you should set this to display the amount you intend to charge.
Optional buttonType?: ButtonType

Sets the text displayed by the call to action button in the Apple Pay sheet.
Optional request?: RecurringPaymentRequest | AutomaticReloadPaymentRequest | MultiMerchantRequest

A typical request is for a one-time payment. To support different types of payment requests, include a PaymentRequestType. Only supported on iOS 16 and up.
setOrderTracking?:function
- setOrderTracking(completion: (orderIdentifier: string, orderTypeIdentifier: string, authenticationToken: string, webServiceUrl: string) => void): void
- - Defined in src/types/PaymentSheet.ts:92
  Callback function for setting the order details (retrieved from your server) to give users the ability to track and manage their purchases in Wallet. Stripe calls your implementation after the payment is complete, but before iOS dismisses the Apple Pay sheet. You must call the completion function, or else the Apple Pay sheet will hang.
  
  Parameters
  - completion: (orderIdentifier: string, orderTypeIdentifier: string, authenticationToken: string, webServiceUrl: string) => void
    - - (orderIdentifier: string, orderTypeIdentifier: string, authenticationToken: string, webServiceUrl: string): void
      - Parameters
        orderIdentifier: string
        orderTypeIdentifier: string
        authenticationToken: string
        webServiceUrl: string
        Returns void
  Returns void

GooglePayParams

GooglePayParams: { merchantCountryCode: string; currencyCode?: string; testEnv?: boolean; label?: string; amount?: string }

Type declaration

merchantCountryCode: string

The two-letter ISO 3166 code of the country of your business, e.g. "US"
Optional currencyCode?: string

The three-letter ISO 4217 alphabetic currency code, e.g. "USD" or "EUR". Required in order to support Google Pay when processing a Setup Intent.
Optional testEnv?: boolean

Whether or not to use the Google Pay test environment. Set to true until you have applied for and been granted access to the Production environment.
Optional label?: string

An optional label to display with the amount. Google Pay may or may not display this label depending on its own internal logic. Defaults to a generic label if none is provided.
Optional amount?: string

An optional amount to display for setup intents. Google Pay may or may not display this amount depending on its own internal logic. Defaults to 0 if none is provided.

AppearanceParams

AppearanceParams: RecursivePartial<{ font: FontConfig; colors: GlobalColorConfig | { light: GlobalColorConfig; dark: GlobalColorConfig }; shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig }; primaryButton: PrimaryButtonConfig }>

Used to customize the appearance of your PaymentSheet

FontConfig

FontConfig: { family: string; scale: number }

Type declaration

family: string

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
scale: number

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

ShadowConfig

ShadowConfig: { color: string; opacity: number; offset: { x: number; y: number }; blurRadius: number }

Type declaration

color: string

The color of the shadow.

default
"#000000"
opacity: number

The alpha or opacity of the shadow.

default
0.05
offset: { x: number; y: 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}
- x: number
- y: number
blurRadius: number

The blur radius of the shadow.

default
4

GlobalColorConfig

GlobalColorConfig: { primary: string; background: string; componentBackground: string; componentBorder: string; componentDivider: string; primaryText: string; secondaryText: string; componentText: string; placeholderText: string; icon: string; error: string }

Type declaration

primary: string

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.
background: 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.
componentBackground: 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.
componentBorder: 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.
componentDivider: 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.
primaryText: 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.
secondaryText: 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.
componentText: 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"
placeholderText: 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.
icon: 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.
error: 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.

PrimaryButtonConfig

PrimaryButtonConfig: { font: Pick<FontConfig, "family">; colors: PrimaryButtonColorConfig | { light: PrimaryButtonColorConfig; dark: PrimaryButtonColorConfig }; shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig } }

Type declaration

font: Pick<FontConfig, "family">

The font family used specifically for the primary button.

default
The root appearance.font.family
colors: PrimaryButtonColorConfig | { light: PrimaryButtonColorConfig; dark: PrimaryButtonColorConfig }

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.
shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig }

Describes the border and shadow of the primary button.
- borderRadius: number
  
  The border radius used for the primary button in your PaymentSheet
  
  default
  The root appearance.shapes.borderRadius
- borderWidth: number
  
  The border width used for the primary button in your PaymentSheet
  
  default
  The root appearance.shapes.borderWidth
- shadow: ShadowConfig
  
  iOS only. The shadow used for the primary button in your PaymentSheet
  
  default
  The root appearance.shapes.shadow

PrimaryButtonColorConfig

PrimaryButtonColorConfig: { background: string; text: string; border: string }

Type declaration

background: string

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
text: 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.
border: 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.

PresentOptions

PresentOptions: { timeout?: number }

Type declaration

Optional timeout?: number

The number of milliseconds (after presenting) before the Payment Sheet closes automatically, at which point presentPaymentSheet will resolve with an error.code of PaymentSheetError.Timeout. The default is no timeout.

BillingDetailsCollectionConfiguration

BillingDetailsCollectionConfiguration: { name?: CollectionMode; phone?: CollectionMode; email?: CollectionMode; address?: AddressCollectionMode; attachDefaultsToPaymentMethod?: Boolean }

Type declaration

Optional name?: CollectionMode

How to collect the name field. Defaults to CollectionMode.automatic.
Optional phone?: CollectionMode

How to collect the phone field. Defaults to CollectionMode.automatic.
Optional email?: CollectionMode

How to collect the email field. Defaults to CollectionMode.automatic.
Optional address?: AddressCollectionMode

How to collect the billing address. Defaults to CollectionMode.automatic.
Optional attachDefaultsToPaymentMethod?: Boolean

Whether the values included in Configuration.defaultBillingDetails should be attached to the payment method, this includes fields that aren't displayed in the form. If false (the default), those values will only be used to prefill the corresponding fields in the form.

IntentCreationError

IntentCreationError: StripeError<"Failed">

IntentCreationCallbackParams

IntentCreationCallbackParams: { clientSecret: string; error?: never } | { clientSecret?: never; error: IntentCreationError }

IntentConfiguration

IntentConfiguration: { confirmHandler: any; mode: Mode; paymentMethodTypes?: string[] }

Type declaration

confirmHandler:function
- confirmHandler(paymentMethod: PaymentMethod.Result, shouldSavePaymentMethod: boolean, intentCreationCallback: (result: IntentCreationCallbackParams) => void): void
- - Defined in src/types/PaymentSheet.ts:336
  Parameters
  - paymentMethod: PaymentMethod.Result
  - shouldSavePaymentMethod: boolean
  - intentCreationCallback: (result: IntentCreationCallbackParams) => void
    - - (result: IntentCreationCallbackParams): void
      - Parameters
        result: IntentCreationCallbackParams
        Returns void
  Returns void
mode: Mode
Optional paymentMethodTypes?: string[]

Mode

Mode: PaymentMode | SetupMode

PaymentMode

PaymentMode: { amount: number; currencyCode: string; setupFutureUsage?: PaymentIntent.FutureUsage; captureMethod?: PaymentSheet.CaptureMethod }

Type declaration

amount: number
currencyCode: string
Optional setupFutureUsage?: PaymentIntent.FutureUsage
Optional captureMethod?: PaymentSheet.CaptureMethod

SetupMode

SetupMode: { currencyCode?: string; setupFutureUsage: PaymentIntent.FutureUsage }

Type declaration

Optional currencyCode?: string
setupFutureUsage: PaymentIntent.FutureUsage

Index

Type aliases

Interfaces

Enumerations

Type aliases

SetupParams

IntentParams

ApplePayParams

Type declaration

merchantCountryCode: string

Optional cartItems?: ApplePay.CartSummaryItem[]

Optional buttonType?: ButtonType

Optional request?: RecurringPaymentRequest | AutomaticReloadPaymentRequest | MultiMerchantRequest

setOrderTracking?:function

Parameters

completion: (orderIdentifier: string, orderTypeIdentifier: string, authenticationToken: string, webServiceUrl: string) => void

Parameters

orderIdentifier: string

orderTypeIdentifier: string

authenticationToken: string

webServiceUrl: string

Returns void

Returns void

GooglePayParams

Type declaration

merchantCountryCode: string

Optional currencyCode?: string

Optional testEnv?: boolean

Optional label?: string

Optional amount?: string

AppearanceParams

FontConfig

Type declaration

family: string

scale: number

ShadowConfig

Type declaration

color: string

opacity: number

offset: { x: number; y: number }

x: number

y: number

blurRadius: number

GlobalColorConfig

Type declaration

primary: string

background: string

componentBackground: string

componentBorder: string

componentDivider: string

primaryText: string

secondaryText: string

componentText: string

placeholderText: string

icon: string

error: string

PrimaryButtonConfig

Type declaration

font: Pick<FontConfig, "family">

colors: PrimaryButtonColorConfig | { light: PrimaryButtonColorConfig; dark: PrimaryButtonColorConfig }

shapes: { borderRadius: number; borderWidth: number; shadow: ShadowConfig }

borderRadius: number

borderWidth: number

shadow: ShadowConfig

PrimaryButtonColorConfig

Type declaration

background: string

text: string

border: string

PresentOptions

Type declaration

Optional timeout?: number

BillingDetailsCollectionConfiguration

Type declaration

Optional name?: CollectionMode

Optional phone?: CollectionMode

Optional email?: CollectionMode

Optional address?: AddressCollectionMode

Optional attachDefaultsToPaymentMethod?: Boolean

IntentCreationError