Options
All
  • Public
  • Public/Protected
  • All
Menu

Namespace PaymentSheet

Index

Type aliases

Interfaces

Enumerations

Type aliases

SetupParams

SetupParams: ClientSecretParams & { 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 }

ClientSecretParams

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

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

    • 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 }

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.

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.

Generated using TypeDoc