PaymentSheet | @stripe/stripe-react-native

Index

Type aliases

Interfaces

PaymentOption

Type aliases

SetupParams

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

ClientSecretParams

ClientSecretParams: { paymentIntentClientSecret: string; setupIntentClientSecret?: undefined } | { setupIntentClientSecret: string; paymentIntentClientSecret?: undefined }

ApplePayParams

ApplePayParams: { merchantCountryCode: string; paymentSummaryItems?: ApplePay.CartSummaryItem[] }

Type declaration

merchantCountryCode: string

The two-letter ISO 3166 code of the country of your business, e.g. "US"
Optional paymentSummaryItems?: 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.

GooglePayParams

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

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.

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.

Index

Type aliases

Interfaces

Type aliases

SetupParams

ClientSecretParams

ApplePayParams

Type declaration

merchantCountryCode: string

Optional paymentSummaryItems?: ApplePay.CartSummaryItem[]

GooglePayParams

Type declaration

merchantCountryCode: string

Optional currencyCode?: string

Optional testEnv?: boolean

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