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

initStripe

  • Parameters

    Returns Promise<void>

createPaymentMethod

createToken

retrievePaymentIntent

retrieveSetupIntent

confirmPayment

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

handleNextAction

  • Handles any nextAction required to authenticate the PaymentIntent. Call this method if you are using manual confirmation. See https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom

    Parameters

    • paymentIntentClientSecret: string

      The client secret associated with the PaymentIntent.

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

handleNextActionForSetup

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

confirmSetupIntent

createTokenForCVCUpdate

handleURLCallback

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

verifyMicrodepositsForPayment

verifyMicrodepositsForSetup

initPaymentSheet

presentPaymentSheet

confirmPaymentSheetPayment

resetPaymentSheetCustomer

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

collectBankAccountForPayment

collectBankAccountForSetup

collectBankAccountToken

collectFinancialConnectionsAccounts

  • collectFinancialConnectionsAccounts(clientSecret: string): Promise<SessionResult>

  • Use collectFinancialConnectionsAccounts in the Collect an account to build data-powered products flow. When called, it will load the Authentication Flow, an on-page modal UI which allows your user to securely link their external financial account.

    Parameters

    Returns Promise<SessionResult>

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

canAddCardToWallet

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

isCardInWallet

  • deprecated

    Please use canAddCardToWallet instead.

    Parameters

    • params: { cardLastFour: string }
      • cardLastFour: string

    Returns Promise<IsCardInWalletResult>

isPlatformPaySupported

  • Check if the relevant native wallet (Apple Pay on iOS, Google Pay on Android) is supported.

    Parameters

    Returns Promise<boolean>

    A boolean indicating whether or not the native wallet is supported.

confirmPlatformPaySetupIntent

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

confirmPlatformPayPayment

  • 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

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

createPlatformPayPaymentMethod

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

createPlatformPayToken

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

updatePlatformPaySheet

  • 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

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

useConfirmPayment

useConfirmSetupIntent

useFinancialConnectionsSheet

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

  • React hook for accessing functions on the Financial Connections sheet.

    Retuns the collectBankAccountToken and collectFinancialConnectionsAccounts functions, and a loading boolean that you can use to display loading state (like showing a spinner).

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

usePaymentSheet

usePlatformPay

useStripe

ReactComponents Functions

AddToWalletButton

  • 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

AddressSheet

  • example
     <AddressSheet

     />

    Parameters

    Returns Element

    JSX.Element

AuBECSDebitForm

  • 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

  • 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

StripeContainer

  • StripeContainer Component

    Parameters

    Returns Element

    JSX.Element

StripeProvider

  • 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

Const CustomerSheet

CustomerSheet: { Component: (__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

Const Constants

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

Type declaration

  • API_VERSIONS: { CORE: string; ISSUING: string }
    • CORE: string
    • ISSUING: string

Const MissingRoutingNumber

MissingRoutingNumber: { code: Failed; message: string } = ...

Type declaration

ReactComponents Variables

Const CardField

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

Const CardForm

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

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

Props

StripeProviderProps

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

Stripe Provider Component Props

AddressDetails

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

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; allowsRemovalOfLastSavedPaymentMethod?: boolean }

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.

  • Optional allowsRemovalOfLastSavedPaymentMethod?: boolean

    This is an experimental feature that may be removed at any time. Defaults to true. If true, the customer can delete all saved payment methods. If false, the customer can't delete if they only have one saved payment method remaining.

CustomerSheetPresentParams

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

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

Type declaration

CustomerPaymentOption

CustomerPaymentOption: "apple_pay" | "google_pay" | "link" | string

ErrorType

ErrorType: "api_connection_error" | "api_error" | "authentication_error" | "card_error" | "idempotency_error" | "invalid_request_error" | "rate_limit_error"

GooglePayCardToken

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

IsCardInWalletResult: { isInWallet: boolean; token?: GooglePayCardToken; error?: undefined } | { isInWallet?: undefined; token?: undefined; error: StripeError<GooglePayError> }

CanAddCardToWalletParams

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

CanAddCardToWalletResult: { canAddCard: boolean; details?: { token?: GooglePayCardToken; status?: CanAddCardToWalletStatus }; error?: undefined } | { canAddCard?: undefined; details?: undefined; error: StripeError<GooglePayError> }

CreatePaymentMethodResult

CreatePaymentMethodResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<CreatePaymentMethodError> }

RetrievePaymentIntentResult

RetrievePaymentIntentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<RetrievePaymentIntentError> }

RetrieveSetupIntentResult

RetrieveSetupIntentResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<RetrieveSetupIntentError> }

ConfirmPaymentResult

ConfirmPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<ConfirmPaymentError> }

HandleNextActionResult

HandleNextActionResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<CardActionError> }

HandleNextActionForSetupResult

HandleNextActionForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<CardActionError> }

ConfirmSetupIntentResult

ConfirmSetupIntentResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<ConfirmSetupIntentError> }

CreateTokenForCVCUpdateResult

CreateTokenForCVCUpdateResult: { tokenId: string; error?: undefined } | { tokenId?: undefined; error: StripeError<ConfirmSetupIntentError> }

InitPaymentSheetResult

InitPaymentSheetResult: { paymentOption?: PaymentOption; error?: undefined } | { paymentOption?: undefined; error: StripeError<PaymentSheetError> }

PresentPaymentSheetResult

PresentPaymentSheetResult: { paymentOption?: PaymentOption; error?: StripeError<PaymentSheetError> }

Type declaration

CreateTokenResult

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

ConfirmPaymentSheetPaymentResult

ConfirmPaymentSheetPaymentResult: { error?: StripeError<PaymentSheetError> }

Type declaration

ApplePayResult

ApplePayResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<ApplePayError> }

GooglePayInitResult

GooglePayInitResult: { error?: undefined } | { error: StripeError<GooglePayError> }

PayWithGooglePayResult

PayWithGooglePayResult: { error?: undefined } | { error: StripeError<GooglePayError> }

CreateGooglePayPaymentMethodResult

CreateGooglePayPaymentMethodResult: { paymentMethod: PaymentMethod.Result; error?: undefined } | { paymentMethod?: undefined; error: StripeError<GooglePayError> }

OpenApplePaySetupResult

OpenApplePaySetupResult: { error?: undefined } | { error: StripeError<ApplePayError> }

VerifyMicrodepositsParams

VerifyMicrodepositsParams: { amounts: number[]; descriptorCode?: undefined } | { amounts?: undefined; descriptorCode: string }

VerifyMicrodepositsForPaymentResult

VerifyMicrodepositsForPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<VerifyMicrodepositsError> }

VerifyMicrodepositsForSetupResult

VerifyMicrodepositsForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<VerifyMicrodepositsError> }

CollectBankAccountForPaymentResult

CollectBankAccountForPaymentResult: { paymentIntent: PaymentIntent.Result; error?: undefined } | { paymentIntent?: undefined; error: StripeError<CollectBankAccountError> }

CollectBankAccountForSetupResult

CollectBankAccountForSetupResult: { setupIntent: SetupIntent.Result; error?: undefined } | { setupIntent?: undefined; error: StripeError<CollectBankAccountError> }

References

Props

Renames and re-exports CustomerSheetProps

PaymentMethodLayout

Re-exports PaymentMethodLayout

Generated using TypeDoc