Options
All
  • Public
  • Public/Protected
  • All
Menu

@stripe/stripe-react-native

Index

Interfaces

Functions Other

Functions ReactComponents

Variables Other

Variables ReactComponents

Type aliases

References

Namespaces

Enumerations

Other Functions

  • Confirm and, if necessary, authenticate a PaymentIntent.

    Parameters

    • paymentIntentClientSecret: string

      The client_secret of the associated PaymentIntent.

    • Optional params: PaymentIntent.ConfirmParams

      An optional object that contains data related to the payment method used to confirm this payment. If no object is provided (undefined), then it is assumed that the payment method has already been attached to the Payment Intent.

    • options: CreateOptions = {}

      An optional object that contains options for this payment method.

    Returns Promise<ConfirmPaymentResult>

    A promise that resolves to an object containing either a paymentIntent field, or an error field.

  • Handles any nextAction required to authenticate the SetupIntent. Call this method if you are confirming the SetupIntent on your backend and get a status of requires_action.

    Parameters

    • setupIntentClientSecret: string

      The client secret associated with the SetupIntent.

    • Optional returnURL: string

      An optional return URL so the Stripe SDK can redirect back to your app after authentication. This should match the return_url you specified during PaymentIntent confirmation.

    Returns Promise<HandleNextActionForSetupResult>

  • handleURLCallback(url: string): Promise<boolean>
  • Call this method in your app whenever you receive a URL for a Stripe callback. For convenience, you can pass all URLs you receive to this method first, and check the return value to easily determine whether it is a callback URL that Stripe will handle or if your app should process it normally. This is iOS-only, and will always return false on Android.

    Parameters

    • url: string

    Returns Promise<boolean>

  • resetPaymentSheetCustomer(): Promise<null>
  • You must call this method when the user logs out from your app. This will ensure that any persisted authentication state in the PaymentSheet, such as authentication cookies, is also cleared during logout.

    Returns Promise<null>

  • collectFinancialConnectionsAccounts(clientSecret: string): Promise<SessionResult>
  • Check if the app & device support adding this card to the native wallet.

    Parameters

    Returns Promise<CanAddCardToWalletResult>

    A promise resolving to an object of type CanAddCardToWalletResult. Check the canAddCard field, if it's true, you should show the <AddToWalletButton />

  • Launches the relevant native wallet sheet (Apple Pay on iOS, Google Pay on Android) in order to confirm a Stripe SetupIntent.

    Parameters

    • clientSecret: string

      The client secret of the SetupIntent.

    • params: PlatformPay.ConfirmParams

      an object describing the Apple Pay and Google Pay configurations.

    Returns Promise<PlatformPay.ConfirmSetupIntentResult>

    An object with an error field if something went wrong or the flow was cancelled, otherwise an object with both setupIntent and paymentMethod fields.

  • Launches the relevant native wallet sheet (Apple Pay on iOS, Google Pay on Android) in order to confirm a Stripe PaymentIntent.

    Parameters

    • clientSecret: string

      The client secret of the PaymentIntent.

    • params: PlatformPay.ConfirmParams

      an object describing the Apple Pay and Google Pay configurations.

    Returns Promise<PlatformPay.ConfirmPaymentResult>

    An object with an error field if something went wrong or the flow was cancelled, otherwise an object with both paymentIntent and paymentMethod fields.

  • dismissPlatformPay(): Promise<boolean>
  • iOS only, this will always return false on Android. Dismisses the Apple Pay sheet if it is open.

    Returns Promise<boolean>

    A boolean indicating whether or not the sheet was successfully closed. Will return false if the Apple Pay sheet was not open.

  • Launches the relevant native wallet sheet (Apple Pay on iOS, Google Pay on Android) in order to create a Stripe PaymentMethod.

    Parameters

    Returns Promise<PaymentMethodResult>

    An object with an error field if something went wrong or the flow was cancelled, otherwise an object with a paymentMethod field.

  • deprecated

    The Tokens API is deprecated, you should use Payment Methods and createPlatformPayPaymentMethod instead. Launches the relevant native wallet sheet (Apple Pay on iOS, Google Pay on Android) in order to create a Stripe token.

    Parameters

    Returns Promise<PlatformPay.TokenResult>

    An object with an error field if something went wrong or the flow was cancelled, otherwise an object with a token field.

  • iOS only. Update different items on the Apple Pay sheet, including the summary items, the shipping methods, and any errors shown. iOS only, this is a no-op on Android.

    Parameters

    Returns Promise<{ error?: StripeError<PlatformPayError> }>

    An object with an optional 'error' field, which is only populated if something went wrong.

  • openPlatformPaySetup(): Promise<void>
  • iOS only, this is a no-op on Android. Use this method to move users to the interface for adding credit cards. This method transfers control to the Wallet app on iPhone or to the Settings app on iPad. For devices that don’t support Apple Pay, this method does nothing.

    Returns Promise<void>

  • useFinancialConnectionsSheet(): { collectBankAccountToken: (clientSecret: string) => Promise<FinancialConnections.TokenResult>; collectFinancialConnectionsAccounts: (clientSecret: string) => Promise<SessionResult>; loading: boolean }

ReactComponents Functions

  • Add to wallet button

    example
     <AddToWalletButton
    testEnv={true}
    style={styles.myButtonStyle}
    iOSButtonStyle="onLightBackground"
    cardDetails={{
    primaryAccountIdentifier: "V-123",
    name: "David Wallace",
    lastFour: "4242",
    }}
    ephemeralKey={myEphemeralKey} // This object is retrieved from your server. See https://stripe.com/docs/issuing/cards/digital-wallets?platform=react-native#update-your-backend
    onComplete={(error) => {
    Alert.alert(
    error ? error.code : 'Success',
    error
    ? error.message
    : 'Card was successfully added to the wallet.'
    );
    }}
    />

    Parameters

    Returns Element

    JSX.Element

  • BECS Debit form component

    example
     <AuBECSDebitForm
    companyName="Example Company Inc."
    onComplete={value => onComplete(value)}
    style={{ width: '100%', height: 500 }}
    />

    Parameters

    Returns Element

    JSX.Element

  • PlatformPayButton Component. Display the platform-specific native wallet pay button: Apple Pay on iOS, and Google Pay on Android.

    example
     <PlatformPayButton
    onPress={pay}
    type={PlatformPay.ButtonType.Subscribe}
    appearance={PlatformPay.ButtonStyle.WhiteOutline}
    borderRadius={4}
    disabled={!isApplePaySupported}
    style={styles.payButton}
    />

    Parameters

    Returns Element

    JSX.Element

  • StripeProvider Component

    example
     <StripeProvider
    publishableKey="_publishableKey"
    merchantIdentifier="merchant.com.stripe.react.native"
    threeDSecureParams={{
    backgroundColor: "#FFF",
    timeout: 5,
    }}
    >
    <App />
    </StripeProvider>

    Parameters

    Returns Element

    JSX.Element

Other Variables

CustomerSheetBeta: { CustomerSheet: (__namedParameters: CustomerSheetProps) => null; initialize: (params: CustomerSheetInitParams) => Promise<{ error?: StripeError<CustomerSheetError> }>; present: (params?: CustomerSheetPresentParams) => Promise<CustomerSheetResult>; retrievePaymentOptionSelection: () => Promise<CustomerSheetResult> } = ...

The Customer Sheet is a prebuilt UI component that lets your customers manage their saved payment methods.

Type declaration

Constants: { API_VERSIONS: { CORE: string; ISSUING: string } } = ...

Type declaration

  • API_VERSIONS: { CORE: string; ISSUING: string }
    • CORE: string
    • ISSUING: string
MissingRoutingNumber: { code: Failed; message: string } = ...

Type declaration

ReactComponents Variables

CardField: ForwardRefExoticComponent<CardFieldProps & RefAttributes<CardFieldInput.Methods>> = ...

Card Field Component

example
<CardField
postalCodeEnabled={false}
onCardChange={(cardDetails) => {
console.log('card details', cardDetails);
setCard(cardDetails);
}}
style={{height: 50}}
/>
param __namedParameters

Props

returns

JSX.Element

CardForm: ForwardRefExoticComponent<CardFormProps & RefAttributes<CardFormView.Methods>> = ...

Card Form Component

example
<CardForm
onFormComplete={(cardDetails) => {
console.log('card details', cardDetails);
setCard(cardDetails);
}}
style={{height: 200}}
/>
param __namedParameters

Props

returns

JSX.Element

Type aliases

CustomerSheetProps: { visible: boolean; onResult: any } & CustomerSheetInitParams & CustomerSheetPresentParams

Props

StripeProviderProps: InitStripeParams & { children: React.ReactElement | React.ReactElement[] }

Stripe Provider Component Props

AddressDetails: { name?: string; address?: Address; phone?: string; isCheckboxSelected?: boolean }

Type declaration

  • Optional name?: string

    The customer's full name.

  • Optional address?: Address

    The customer's address.

  • Optional phone?: string

    The customer's phone number.

  • Optional isCheckboxSelected?: boolean

    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.

CustomerSheetInitParams: { style?: "alwaysLight" | "alwaysDark" | "automatic"; appearance?: AppearanceParams; setupIntentClientSecret?: string; customerId: string; customerEphemeralKeySecret: string; merchantDisplayName?: string; headerTextForSelectionScreen?: string; defaultBillingDetails?: BillingDetails; billingDetailsCollectionConfiguration?: BillingDetailsCollectionConfiguration; returnURL?: string; removeSavedPaymentMethodMessage?: string; applePayEnabled?: boolean; googlePayEnabled?: boolean; preferredNetworks?: CardBrand[]; customerAdapter?: CustomerAdapter }

Type declaration

  • Optional style?: "alwaysLight" | "alwaysDark" | "automatic"

    The color styling to use for PaymentSheet UI. Defaults to 'automatic'. iOS only.

  • Optional appearance?: AppearanceParams

    Configuration for the look and feel of the UI.

  • Optional setupIntentClientSecret?: string

    Optional but recommended for cards, required for other payment methods. The SetupIntent client secret that will be used to confirm a new payment method. If this is missing, you will only be able to add cards without authentication steps.

  • customerId: string

    The identifier of the Stripe Customer object. See https://stripe.com/docs/api/customers/object#customer_object-id

  • customerEphemeralKeySecret: string

    A short-lived token that allows the SDK to access a Customer's payment methods.

  • Optional merchantDisplayName?: string

    Your customer-facing business name. The default value is the name of your app.

  • Optional headerTextForSelectionScreen?: string

    Optional configuration for setting the header text of the Payment Method selection screen

  • Optional defaultBillingDetails?: BillingDetails

    CustomerSheet pre-populates fields with the values provided. If billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod is true, these values will be attached to the payment method even if they are not collected by the CustomerSheet UI.

  • Optional billingDetailsCollectionConfiguration?: BillingDetailsCollectionConfiguration

    Describes how billing details should be collected. All values default to AUTOMATIC. If NEVER is used for a required field for the Payment Method, you must provide an appropriate value as part of defaultBillingDetails.

  • Optional returnURL?: string

    A URL that redirects back to your app that CustomerSheet can use to auto-dismiss web views used for additional authentication, e.g. 3DS2

  • Optional removeSavedPaymentMethodMessage?: string

    Optional configuration to display a custom message when a saved payment method is removed. iOS only.

  • Optional applePayEnabled?: boolean

    Whether to show Apple Pay as an option. Defaults to false.

  • Optional googlePayEnabled?: boolean

    Whether to show Google Pay as an option. Defaults to false.

  • Optional preferredNetworks?: CardBrand[]

    The list of preferred networks that should be used to process payments made with a co-branded card. This value will only be used if your user hasn't selected a network themselves.

  • Optional customerAdapter?: CustomerAdapter

    Optional override. It is generally recommended to rely on the default behavior, but- provide a CustomerAdapter here if you would prefer retrieving and updating your Stripe customer object via your own backend instead. WARNING: When implementing your own CustomerAdapter, ensure your application complies with all applicable laws and regulations, including data privacy and consumer protection.

CustomerSheetPresentParams: { presentationStyle?: "fullscreen" | "popover" | "pageSheet" | "formSheet" | "automatic" | "overFullScreen"; animationStyle?: "flip" | "curl" | "slide" | "dissolve"; timeout?: number }

Type declaration

  • Optional presentationStyle?: "fullscreen" | "popover" | "pageSheet" | "formSheet" | "automatic" | "overFullScreen"

    Controls how the modal is presented (after animation). iOS only. Defaults to popover. See https://developer.apple.com/documentation/uikit/uimodalpresentationstyle for more info.

  • Optional animationStyle?: "flip" | "curl" | "slide" | "dissolve"

    Controls how the modal animates. iOS only.

  • Optional timeout?: number

    Time (in milliseconds) before the Customer Sheet will automatically dismiss.

CustomerSheetResult: { paymentOption?: PaymentOption; paymentMethod?: PaymentMethod.Result; error?: StripeError<CustomerSheetError> }

Type declaration

CustomerPaymentOption: "apple_pay" | "google_pay" | "link" | string
ErrorType: "api_connection_error" | "api_error" | "authentication_error" | "card_error" | "idempotency_error" | "invalid_request_error" | "rate_limit_error"
GooglePayCardToken: { id: string; fpanLastFour: string; dpanLastFour: string; network: number; serviceProvider: number; issuer: string; status: GooglePayCardTokenStatus; cardLastFour: string }

Type declaration

  • id: string

    The token reference ID.

  • fpanLastFour: string

    Last four digits of the FPAN

  • dpanLastFour: string

    Last four digits of the DPAN

  • network: number
  • serviceProvider: number
  • issuer: string

    The name of the issuer.

  • status: GooglePayCardTokenStatus

    The GooglePayCardTokenStatus.

  • cardLastFour: string

    Deprecated. Use fpanLastFour or dpanLastFour.

IsCardInWalletResult: { isInWallet: boolean; token?: GooglePayCardToken; error?: undefined } | { isInWallet?: undefined; token?: undefined; error: StripeError<GooglePayError> }
CanAddCardToWalletParams: { primaryAccountIdentifier: string | null; cardLastFour: string; testEnv?: boolean; hasPairedAppleWatch?: boolean; supportsTapToPay?: boolean }

Type declaration

  • primaryAccountIdentifier: string | null

    The primary_account_identifier value from the issued card. Can be an empty string.

  • cardLastFour: string

    Last 4 digits of the card number. Required for Android.

  • Optional testEnv?: boolean

    iOS only. Set this to true until shipping through TestFlight || App Store. If false, you must be using live cards, and have the proper iOS entitlement set up. See https://stripe.com/docs/issuing/cards/digital-wallets?platform=react-native#requesting-access-for-ios

  • Optional hasPairedAppleWatch?: boolean

    iOS only. Set this to true if: your user has an Apple Watch device currently paired, and you want to check that device for the presence of the specified card.

  • Optional supportsTapToPay?: boolean

    Android only, defaults to true. Set this to false if you'd like to allow users without NFC-enabled devices to add cards to the wallet. NFC is required for paying in stores.

CanAddCardToWalletResult: { canAddCard: boolean; details?: { token?: GooglePayCardToken; status?: CanAddCardToWalletStatus }; error?: undefined } | { canAddCard?: undefined; details?: undefined; error: StripeError<GooglePayError> }
CreatePaymentMethodResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<CreatePaymentMethodError> }
RetrievePaymentIntentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<RetrievePaymentIntentError> }
RetrieveSetupIntentResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<RetrieveSetupIntentError> }
ConfirmPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<ConfirmPaymentError> }
HandleNextActionResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<CardActionError> }
HandleNextActionForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<CardActionError> }
ConfirmSetupIntentResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<ConfirmSetupIntentError> }
CreateTokenForCVCUpdateResult: { tokenId: string; error?: undefined } | { tokenId?: undefined; error: StripeError<ConfirmSetupIntentError> }
InitPaymentSheetResult: { paymentOption?: PaymentOption; error?: undefined } | { paymentOption?: undefined; error: StripeError<PaymentSheetError> }
PresentPaymentSheetResult: { paymentOption?: PaymentOption; error?: StripeError<PaymentSheetError> }

Type declaration

CreateTokenResult: { token: Token.Result; error?: undefined } | { token?: undefined; error: StripeError<CreateTokenError> }
ConfirmPaymentSheetPaymentResult: { error?: StripeError<PaymentSheetError> }

Type declaration

ApplePayResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<ApplePayError> }
GooglePayInitResult: { error?: undefined } | { error: StripeError<GooglePayError> }
PayWithGooglePayResult: { error?: undefined } | { error: StripeError<GooglePayError> }
CreateGooglePayPaymentMethodResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<GooglePayError> }
OpenApplePaySetupResult: { error?: undefined } | { error: StripeError<ApplePayError> }
VerifyMicrodepositsParams: { amounts: number[]; descriptorCode?: undefined } | { amounts?: undefined; descriptorCode: string }
VerifyMicrodepositsForPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<VerifyMicrodepositsError> }
VerifyMicrodepositsForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<VerifyMicrodepositsError> }
CollectBankAccountForPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<CollectBankAccountError> }
CollectBankAccountForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<CollectBankAccountError> }

References

Renames and re-exports CustomerSheetProps

Generated using TypeDoc