### Get App Info Example
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Example of how to use the `appInfo` method to fetch application details and handle potential errors.
```typescript
import { APIError } from './api/StripeConnectAPI';
try {
const appInfo = await client.appInfo();
console.log('Publishable Key:', appInfo.publishable_key);
console.log('Merchants:', appInfo.available_merchants);
} catch (error) {
if ((error as APIError).type === 'responseError') {
console.error('API Error:', error.response.error);
} else if ((error as APIError).type === 'networkError') {
console.error('Network Error:', error.message);
} else {
console.error('Unknown Error:', error);
}
}
```
--------------------------------
### Install Dependencies
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Run this command to install the necessary project dependencies.
```bash
npm install
```
--------------------------------
### isPlatformPaySupported example
Source: https://github.com/stripe/stripe-react-native/blob/master/MIGRATING.md
Replaced isGooglePaySupported with isPlatformPaySupported.
```diff
- isGooglePaySupported(myParams);
+ isPlatformPaySupported({googlePay: myParams});
```
--------------------------------
### Run example app on iOS
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Starts the Metro bundler and then builds and runs the example app on an iOS simulator.
```sh
# Terminal 1: Start Metro bundler
yarn example start
# Terminal 2: Build and run on simulator
yarn example ios
```
--------------------------------
### Run example app on Android
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Starts the Metro bundler and then builds and runs the example app on an Android emulator or device.
```sh
# Terminal 1: Start Metro bundler
yarn example start
# Terminal 2: Build and run on emulator/device
yarn example android
```
--------------------------------
### Start Expo Development Server
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Use this command to start the Expo development server for running the application.
```bash
npm start
```
--------------------------------
### Example App Info Response
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Example JSON object representing a successful response from the /app_info endpoint.
```json
{
"publishable_key": "pk_test_...",
"available_merchants": [
{
"display_name": "Example Merchant",
"merchant_id": "acct_..."
}
]
}
```
--------------------------------
### Create Account Session Example
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Example of how to use the `accountSession` method to create a session for a merchant and handle potential errors.
```typescript
import { APIError } from './api/StripeConnectAPI';
try {
const session = await client.accountSession('acct_123');
console.log('Client Secret:', session.client_secret);
} catch (error) {
if ((error as APIError).type === 'responseError') {
console.error('API Error:', error.response.error);
}
}
```
--------------------------------
### Install CocoaPods
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs CocoaPods using Homebrew.
```sh
brew install cocoapods
```
--------------------------------
### Install SwiftLint
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs SwiftLint using Homebrew, required for pre-commit hooks.
```sh
brew install swiftlint
```
--------------------------------
### Example Account Session Response
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Example JSON object for a successful response from the POST /account_session endpoint.
```json
{
"client_secret": "cas_..."
}
```
--------------------------------
### React Query Integration Examples
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Examples demonstrating how to integrate the Stripe Connect API client with React Query for data fetching.
```typescript
import { useQuery } from '@tanstack/react-query';
import { createAPIClient } from '../api/StripeConnectAPI';
// Hook to fetch app info
export function useAppInfo(baseURL: string) {
return useQuery({
queryKey: ['appInfo', baseURL],
queryFn: async () => {
const client = createAPIClient(baseURL);
return await client.appInfo();
},
});
}
// Hook to fetch account session
export function useAccountSession(merchantId: string, baseURL: string) {
return useQuery({
queryKey: ['accountSession', merchantId, baseURL],
queryFn: async () => {
const client = createAPIClient(baseURL);
return await client.accountSession(merchantId);
},
});
}
```
--------------------------------
### Retry pod install
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Retries the 'pod install' command for the iOS example app, useful if CocoaPods CDN is flaky.
```sh
cd example/ios && pod install --repo-update
```
--------------------------------
### Install Maestro
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs Maestro, a tool for end-to-end testing, using Homebrew.
```sh
brew tap mobile-dev-inc/tap
brew install maestro
```
--------------------------------
### Confirm Setup Intent
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Confirms a Setup Intent, typically used for setting up recurring payments or one-time payments where the final amount is determined later.
```APIDOC
## POST /confirmSetupIntent
### Description
Confirms a Setup Intent for future payments.
### Method
POST
### Endpoint
/confirmSetupIntent
### Parameters
#### Request Body
- **clientSecret** (string) - Required - The client secret of the Setup Intent.
- **type** (string) - Required - The type of payment method, e.g., 'Card'.
- **billingDetails** (object) - Required - Billing details for the payment method.
### Request Example
```json
{
"clientSecret": "seti_12345_secret_67890",
"type": "Card",
"billingDetails": {
"email": "test@example.com"
}
}
```
### Response
#### Success Response (200)
- **setupIntent** (object) - The confirmed SetupIntent object.
- **error** (object) - An error object if the confirmation failed.
#### Response Example
```json
{
"setupIntent": {
"id": "seti_12345",
"status": "succeeded"
},
"error": null
}
```
```
--------------------------------
### Install patch-package for Automatic Patching
Source: https://github.com/stripe/stripe-react-native/blob/master/patches/README.md
Install `patch-package` as a development dependency to manage patches automatically. This is the recommended approach.
```bash
npm install --save-dev patch-package
```
--------------------------------
### Usage example
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Example of how to integrate StripeProvider and use the useStripe hook for payment sheet.
```typescript
// App.ts
import { StripeProvider } from '@stripe/stripe-react-native';
function App() {
return (
);
}
// PaymentScreen.ts
import { useStripe } from '@stripe/stripe-react-native';
export default function PaymentScreen() {
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const setup = async () => {
const { error } = await initPaymentSheet({
merchantDisplayName: 'Example, Inc.',
paymentIntentClientSecret: paymentIntent, // retrieve this from your server
});
if (error) {
// handle error
}
};
useEffect(() => {
setup();
}, []);
const checkout = async () => {
const { error } = await presentPaymentSheet();
if (error) {
// handle error
} else {
// success
}
};
return (
);
}
```
--------------------------------
### Jest mock setup
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Setup the Jest mock file for stripe-react-native.
```typescript
import mock from '@stripe/stripe-react-native/jest/mock.js';
jest.mock('@stripe/stripe-react-native', () => mock);
```
--------------------------------
### Install Yarn 1.x
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs Yarn version 1.x globally if not already present.
```sh
npm install --global yarn@1
```
--------------------------------
### Confirm Setup Intent for Future Payments
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
This method is used to confirm a SetupIntent, typically for setting up recurring payments or one-time payments where the final amount is determined later. It requires the client secret and billing details.
```typescript
try {
const result = await stripe.confirmSetupIntent({ clientSecret: '...' });
} catch (e) {
// handle exception here
}
```
```typescript
const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
type: 'Card',
billingDetails,
});
// ...
return (
);
```
--------------------------------
### Install stripe-react-native
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Install the stripe-react-native package using either yarn or npm.
```sh
yarn add @stripe/stripe-react-native
or
npm install @stripe/stripe-react-native
```
--------------------------------
### Install Watchman
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs Watchman using Homebrew, required for Metro file watching on macOS.
```sh
brew install watchman
```
--------------------------------
### Example Error Response
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Example JSON object for an API error response.
```json
{
"error": "Invalid merchant ID"
}
```
--------------------------------
### Configure postinstall Script for patch-package
Source: https://github.com/stripe/stripe-react-native/blob/master/patches/README.md
Add this script to your `package.json` to ensure that `patch-package` automatically applies all defined patches whenever `npm install` is executed.
```json
{
"scripts": {
"postinstall": "patch-package"
}
}
```
--------------------------------
### GET /app_info
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Retrieves application information including the publishable key and available merchants. This endpoint is typically called on app initialization.
```APIDOC
## GET /app_info
### Description
Retrieves application information including the publishable key and available merchants.
### Method
GET
### Endpoint
/app_info
### Parameters
#### Query Parameters
None
#### Request Body
None
### Request Example
```json
{
"Content-Type": "application/json"
}
```
### Response
#### Success Response (200 OK)
- **publishable_key** (string) - The Stripe publishable key.
- **available_merchants** (array) - A list of available merchants.
- **display_name** (string | null) - The display name of the merchant.
- **merchant_id** (string) - The unique identifier for the merchant.
#### Response Example
```json
{
"publishable_key": "pk_test_...",
"available_merchants": [
{
"display_name": "Example Merchant",
"merchant_id": "acct_..."
}
]
}
```
```
--------------------------------
### Confirm Setup Intent Function
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Defines the signature for the confirmSetupIntent function, used to confirm a setup intent.
```typescript
// @public (undocumented)
export const confirmSetupIntent: (paymentIntentClientSecret: string, params: SetupIntent.ConfirmParams, options?: SetupIntent.ConfirmOptions) => Promise;
```
--------------------------------
### Install nodenv and Node 22
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs the pinned Node version if not already present using nodenv.
```sh
nodenv install
```
--------------------------------
### Get App Info Request Headers
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Headers required for the GET /app_info endpoint. Content-Type must be application/json.
```typescript
{
'Content-Type': 'application/json'
}
```
--------------------------------
### Run E2E tests with Maestro
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Builds the example app and then runs all end-to-end tests for iOS or Android using Maestro.
```sh
# Build the example app first
yarn run-example-ios # or: yarn run-example-android
# Run all e2e tests
yarn test:e2e:ios # or: yarn test:e2e:android
# Run a single test
yarn test-ios ./e2e-tests/ios-only/financial-connections-token.yml
```
--------------------------------
### Install OpenJDK 17
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Installs OpenJDK version 17 using Homebrew, a requirement for Android Gradle Plugin.
```sh
brew install openjdk@17
```
--------------------------------
### verifyMicrodepositsForSetup Function
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Function to verify microdeposits for a setup intent.
```typescript
export const verifyMicrodepositsForSetup: (clientSecret: string, params: VerifyMicrodepositsParams) => Promise;
```
--------------------------------
### Clone and bootstrap the project
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Clones the stripe-react-native repository and runs the bootstrap command to install dependencies and prepare the project.
```sh
git clone https://github.com/stripe/stripe-react-native.git
cd stripe-react-native
yarn bootstrap
```
--------------------------------
### Navigation Structure Example
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Illustrates the navigation hierarchy within the React Native application, including stack navigators, tab groups, and modal stacks.
```plaintext
Stack Navigator
├── Home Screen (index)
├── Account Onboarding Screen
├── Payouts Screen
├── Payments Screen
├── (tabs) Group - Dynamic component routing with NativeTabs
└── Modals:
├── Settings Modal Stack
│ ├── Settings Screen (index)
│ ├── Onboarding Settings Screen
│ ├── Payments Filter Settings Screen
│ └── View Controller Options Screen
└── Configure Appearance Modal
```
--------------------------------
### Install for Expo
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Install the correct version of stripe-react-native for your Expo SDK version.
```sh
expo install @stripe/stripe-react-native
```
--------------------------------
### iOS UnsupportedModulePropertyParserError Example
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Example of the 'UnsupportedModulePropertyParserError' that can occur on iOS with older versions.
```text
UnsupportedModulePropertyParserError: Module NativeStripeSdkModule: TypeScript interfaces extending TurboModule must only contain 'FunctionTypeAnnotation's. Property 'onConfirmHandlerCallback' refers to a 'TSTypeReference'.
```
--------------------------------
### Confirm Platform Pay Setup Intent Function
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Defines the signature for the confirmPlatformPaySetupIntent function, used to confirm a setup intent using platform pay.
```typescript
// @public
export const confirmPlatformPaySetupIntent: (clientSecret: string, params: PlatformPay.ConfirmParams) => Promise;
```
--------------------------------
### iOS Undefined Symbols Error Example
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Example of the 'Undefined symbols for architecture x86_64' error that can occur on iOS.
```text
Undefined symbols for architecture x86_64:
"(extension in Foundation):__C.NSScanner.scanUpToString(Swift.String) -> Swift.String?", referenced from:
static Stripe.STPPhoneNumberValidator.formattedRedactedPhoneNumber(for: Swift.String, forCountryCode: Swift.String?) -> Swift.String in libStripe.a(STPPhoneNumberValidator.o)
"__swift_FORCE_LOAD$_swiftUniformTypeIdentifiers", referenced from:
__swift_FORCE_LOAD$_swiftUniformTypeIdentifiers_$_Stripe in libStripe.a(PKPaymentAuthorizationViewController+Stripe_Blocks.o)
```
--------------------------------
### collectBankAccountForSetup Function
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Function to collect a bank account for setup.
```typescript
// @public (undocumented)
export const collectBankAccountForSetup: (clientSecret: string, params: PaymentMethod.CollectBankAccountParams) => Promise;
```
--------------------------------
### Android SDK 36 requirement
Source: https://github.com/stripe/stripe-react-native/blob/master/MIGRATING.md
Update your app's android/build.gradle to meet the compileSdkVersion, targetSdkVersion, and minSdkVersion requirements.
```groovy
android {
compileSdkVersion 36
defaultConfig {
minSdkVersion 23
targetSdkVersion 36
}
}
```
--------------------------------
### Private/Public Preview API Tagging
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Example of how to tag a private or public preview API with a feature-specific tag.
```typescript
/**
* @CheckoutSessionsPrivatePreview
*/
export type CheckoutSetupParams = { ... }
```
--------------------------------
### Check Apple Pay Support (Hook)
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use the `useApplePay` hook to get the `isApplePaySupported` boolean. This determines if the user's device supports Apple Pay and has a card added. Note: The iOS Simulator always returns true.
```typescript
import stripe from 'tipsi-stripe'
// ...
const isApplePaySupported = await stripe.deviceSupportsNativePay()
// ...
return (
// ...
{isApplePaySupported && (
)}
);
```
```typescript
import { useApplePay } from '@stripe/stripe-react-native'
// ...
const { isApplePaySupported } = useApplePay()
// ...
return (
// ...
{isApplePaySupported && (
)}
);
```
--------------------------------
### Default Backend URL Configuration
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Specifies the default URL for the backend API server used by the Stripe Connect mobile example. This URL is used for fetching publishable keys and merchant information.
```plaintext
https://stripe-connect-mobile-example-v1.stripedemos.com/
```
--------------------------------
### Create LaunchActivity for Entry Point
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/android-chrome-tab-closes-on-background.md
Implement a `LaunchActivity` that checks if `MainActivity` is already in the back stack before launching it. This activity will serve as the new entry point.
```java
public class LaunchActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
BaseApplication application = (BaseApplication) getApplication();
// check that MainActivity is not started yet
if (!application.isActivityInBackStack(MainActivity.class)) {
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
}
finish();
}
}
```
--------------------------------
### handleNextActionForSetup
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Handles the next action for a SetupIntent.
```typescript
export const handleNextActionForSetup: (setupIntentClientSecret: string, returnURL?: string) => Promise;
```
--------------------------------
### Initialize Google Pay
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Initializes Google Pay with merchant information and configuration.
```APIDOC
## POST /stripe/stripe-react-native/init-google-pay
### Description
Initializes the Google Pay flow with merchant details and configuration options.
### Method
POST
### Endpoint
/stripe/stripe-react-native/init-google-pay
### Parameters
#### Request Body
- **merchantName** (string) - Required - The name of the merchant.
- **countryCode** (string) - Required - The country code (e.g., 'US').
- **billingAddressConfig** (object) - Optional - Configuration for billing address.
- **format** (string) - Optional - Format of the billing address ('FULL' or 'MIN').
- **isPhoneNumberRequired** (boolean) - Optional - Whether the phone number is required.
- **isRequired** (boolean) - Optional - Whether the billing address is required.
- **existingPaymentMethodRequired** (boolean) - Optional - Whether an existing payment method is required.
- **isEmailRequired** (boolean) - Optional - Whether the email is required.
### Request Example
```json
{
"merchantName": "Widget Store",
"countryCode": "US",
"billingAddressConfig": {
"format": "FULL",
"isPhoneNumberRequired": true,
"isRequired": false
},
"isEmailRequired": true
}
```
### Response
#### Success Response (200)
- **success** (boolean) - Indicates if initialization was successful.
#### Response Example
```json
{
"success": true
}
```
```
--------------------------------
### Instantiate Stripe Connect API Client
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Demonstrates how to create an instance of the Stripe Connect API client using the `createAPIClient` factory function. Ensure you provide the correct base URL for your API.
```typescript
import { createAPIClient } from './api/StripeConnectAPI';
// Create client with base URL
const client = createAPIClient('https://api.example.com');
```
--------------------------------
### Modify MainApplication for Activity Tracking
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/android-chrome-tab-closes-on-background.md
Add methods to `MainApplication` to track running activities. This is part of the workaround for the `singleTask` launch mode issue.
```java
public class MainApplication extends Application {
private ArrayList runningActivities = new ArrayList<>();
public void addActivityToStack (Class cls) {
if (!runningActivities.contains(cls)) runningActivities.add(cls);
}
public void removeActivityFromStack (Class cls) {
if (runningActivities.contains(cls)) runningActivities.remove(cls);
}
public boolean isActivityInBackStack (Class cls) {
return runningActivities.contains(cls);
}
}
```
--------------------------------
### Initialize Stripe with initStripe
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Alternatively, use the initStripe method to initialize Stripe. This method is useful for initializing Stripe outside of the component tree.
```tsx
import { initStripe } from '@stripe/stripe-react-native';
// ...
initStripe({
publishableKey: 'publishable_key'
merchantIdentifier: 'merchant.identifier',
});
```
--------------------------------
### Create Account Session with Stripe Connect API
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Demonstrates how to use the `accountSession` method to create a session for a specific merchant. This is useful for initiating Stripe Connect flows. Includes basic error handling.
```typescript
try {
const session = await client.accountSession('acct_123');
console.log('Client Secret:', session.client_secret);
} catch (error) {
if ((error as APIError).type === 'responseError') {
console.error('API Error:', error.response.error);
}
}
```
--------------------------------
### initStripe
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Initializes Stripe.
```typescript
export const initStripe: (params: InitStripeParams) => Promise;
```
--------------------------------
### Initialize ConnectComponentsProvider with Account Session Client Secret
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Use the account session client secret to initialize the ConnectComponentsProvider. Ensure you have a function to fetch the client secret from your backend.
```typescript
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';
function App() {
const { data: appInfo } = useAppInfo(backendUrl);
const apiClient = createAPIClient(backendUrl);
const fetchClientSecret = async () => {
const response = await apiClient.accountSession(selectedMerchantId);
return response.client_secret;
};
return (
{/* Your app components */}
);
}
```
--------------------------------
### Generate patch-package Patch
Source: https://github.com/stripe/stripe-react-native/blob/master/patches/README.md
After manually applying the patch, use this command to generate a patch file that `patch-package` will use. This command should be run from the project root.
```bash
npx patch-package @stripe/stripe-react-native
```
--------------------------------
### VerifyMicrodepositsForSetupResult Type
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Result type for verifying microdeposits for a setup intent.
```typescript
export type VerifyMicrodepositsForSetupResult = {
setupIntent: SetupIntent.Result;
error?: undefined;
} | {
setupIntent?: undefined;
error: StripeError;
};
```
--------------------------------
### CollectBankAccountForSetupResult Type
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Defines the result type for collecting a bank account for setup.
```typescript
// @public (undocumented)
export type CollectBankAccountForSetupResult = {
setupIntent: SetupIntent.Result;
error?: undefined;
} | {
setupIntent?: undefined;
error: StripeError;
};
```
--------------------------------
### InitStripeParams
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Parameters for initializing Stripe.
```typescript
export interface InitStripeParams {
merchantIdentifier?: string;
publishableKey: string;
setReturnUrlSchemeOnAndroid?: boolean;
stripeAccountId?: string;
threeDSecureParams?: ThreeDSecure.ConfigurationParams;
urlScheme?: string;
}
```
--------------------------------
### useConfirmSetupIntent Hook
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Hook to confirm a SetupIntent, returning a confirmSetupIntent function and loading state.
```typescript
// @public
export function useConfirmSetupIntent(): {
confirmSetupIntent: (paymentIntentClientSecret: string, data: SetupIntent.ConfirmParams, options?: SetupIntent.ConfirmOptions) => Promise;
loading: boolean;
};
```
--------------------------------
### Payment method data migration
Source: https://github.com/stripe/stripe-react-native/blob/master/MIGRATING.md
Moved payment method data under a nested paymentMethodData key.
```diff
- {
- type: 'Card',
- token: myToken,
- billingDetails: myBillingDetails,
- }
+ {
+ paymentMethodType: 'Card',
+ paymentMethodData: {
+ token: myToken,
+ billingDetails: myBillingDetails,
+ },
+ }
```
--------------------------------
### Internal API Tagging
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Example of how to tag an internal API with `@internal` and a feature-specific tag for internal previews.
```typescript
/**
* @CheckoutSessionsPrivatePreview
* @internal
*/
export type CheckoutSetupParams = { ... }
```
--------------------------------
### Handle Next Action for Payment Intent
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Launches an activity for the user to authenticate a payment when the payment status is 'requires_action'. Use this for manual confirmation flows.
```APIDOC
## POST /handleNextAction
### Description
Authenticates a Payment Intent that requires user action.
### Method
POST
### Endpoint
/handleNextAction
### Parameters
#### Request Body
- **clientSecret** (string) - Required - The client secret of the Payment Intent.
### Request Example
```json
{
"clientSecret": "pi_12345_secret_67890"
}
```
### Response
#### Success Response (200)
- **paymentIntent** (object) - The updated PaymentIntent object.
- **error** (object) - An error object if the authentication failed.
#### Response Example
```json
{
"paymentIntent": {
"id": "pi_12345",
"status": "succeeded"
},
"error": null
}
```
```
--------------------------------
### Convert EventEmitter Property to Callback
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Example demonstrating the conversion of an EventEmitter property to a callback function method for old-architecture compatibility.
```typescript
onConfirmHandlerCallback(
callback: (event: {
paymentMethod: UnsafeObject;
shouldSavePaymentMethod: boolean;
}) => void
): void;
```
--------------------------------
### Apply Patch Manually Before Generating patch-package
Source: https://github.com/stripe/stripe-react-native/blob/master/patches/README.md
Before creating a patch with `patch-package`, apply the fix manually to the `node_modules` directory. This step is crucial for `patch-package` to detect the changes.
```bash
cd node_modules/@stripe/stripe-react-native
patch -p0 < ../../patches/old-arch-codegen-fix.patch
```
--------------------------------
### Create Token with Card
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Converts card information into a single-use Token.
```APIDOC
## POST /stripe/stripe-react-native/create-token-with-card
### Description
Converts card details into a single-use Stripe Token, which can be safely sent to your server.
### Method
POST
### Endpoint
/stripe/stripe-react-native/create-token-with-card
### Parameters
#### Request Body
- **number** (string) - Required - The card number.
- **expMonth** (integer) - Required - The expiration month (1-12).
- **expYear** (integer) - Required - The expiration year.
- **cvc** (string) - Required - The CVC security code.
- **name** (string) - Optional - The name on the card.
- **currency** (string) - Optional - The currency of the transaction (e.g., 'usd').
- **addressLine1** (string) - Optional - Street address.
- **addressLine2** (string) - Optional - Apartment, suite, etc.
- **addressCity** (string) - Optional - City.
- **addressState** (string) - Optional - State or province.
- **addressCountry** (string) - Optional - Country.
- **addressZip** (string) - Optional - ZIP or postal code.
### Request Example
```json
{
"number": "4242424242424242",
"expMonth": 11,
"expYear": 17,
"cvc": "223",
"name": "Test User",
"currency": "usd",
"addressLine1": "123 Test Street",
"addressCity": "Test City",
"addressState": "Test State",
"addressCountry": "Test Country",
"addressZip": "55555"
}
```
### Response
#### Success Response (200)
- **token** (object) - The generated token object.
- **id** (string) - The ID of the token.
#### Response Example
```json
{
"token": {
"id": "tok_12345"
}
}
```
```
--------------------------------
### initPaymentSheet
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Initializes the Payment Sheet.
```typescript
export const initPaymentSheet: (params: PaymentSheet.SetupParams) => Promise;
```
--------------------------------
### Run on iOS or Android
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Commands to run the Expo application on an iOS simulator or Android emulator.
```bash
npm run ios
# or
npm run android
```
--------------------------------
### Fetch App Info from Stripe Connect API
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Shows how to call the `appInfo` method on the Stripe Connect API client to retrieve application details. Includes error handling for different API error types.
```typescript
try {
const appInfo = await client.appInfo();
console.log('Publishable Key:', appInfo.publishable_key);
console.log('Merchants:', appInfo.available_merchants);
} catch (error) {
if ((error as APIError).type === 'responseError') {
console.error('API Error:', error.response.error);
} else if ((error as APIError).type === 'networkError') {
console.error('Network Error:', error.message);
} else {
console.error('Unknown Error:', error);
}
}
```
--------------------------------
### Create GitHub Pull Request
Source: https://github.com/stripe/stripe-react-native/blob/master/CLAUDE.md
Use this command to create a pull request on GitHub. Ensure GH_HOST is set to github.com.
```bash
GH_HOST=github.com gh pr create --repo stripe/stripe-react-native --title [...]
```
--------------------------------
### Initialize Stripe with StripeProvider
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use the StripeProvider component to initialize Stripe in your React Native application. This is the recommended approach for setting up Stripe.
```tsx
import { StripeProvider } from '@stripe/stripe-react-native';
// ...
// Your app code here
```
--------------------------------
### Run Unit Tests
Source: https://github.com/stripe/stripe-react-native/blob/master/CLAUDE.md
Execute TypeScript unit tests using yarn. For native changes, use specific unit tests for iOS or Android.
```bash
yarn test
```
```bash
yarn test:unit:ios
```
```bash
yarn test:unit:android
```
--------------------------------
### Create Token with Card Details
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use `createTokenWithCard` to convert card details into a single-use token for server-side processing. The `createToken` function from `useStripe` is the modern approach.
```tsx
const params = {
number: '4242424242424242',
expMonth: 11,
expYear: 17,
cvc: '223',
name: 'Test User',
currency: 'usd',
addressLine1: '123 Test Street',
addressLine2: 'Apt. 5',
addressCity: 'Test City',
addressState: 'Test State',
addressCountry: 'Test Country',
addressZip: '55555',
};
const token = await stripe.createTokenWithCard(params);
```
```tsx
const { createToken } = useStripe()
// ...
const { token, error } = await createToken({
type: 'Card'
address: {
country: 'US',
// ...
},
name: 'card_name'
});
// ...
return (
);
```
--------------------------------
### Check Apple Pay Support (Direct Import)
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
As an alternative to the hook, you can directly import `isApplePaySupported` if your application does not use functional components. This function returns a boolean indicating Apple Pay support.
```typescript
import { isApplePaySupported } from '@stripe/stripe-react-native';
// ...
const isSupported = isApplePaySupported();
// ...
```
--------------------------------
### React Query Hook for Fetching App Info
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
A custom React Query hook `useAppInfo` that fetches application information using the Stripe Connect API client. It integrates with React Query for state management and caching.
```typescript
import { useQuery } from '@tanstack/react-query';
import { createAPIClient } from '../api/StripeConnectAPI';
// Hook to fetch app info
export function useAppInfo(baseURL: string) {
return useQuery({
queryKey: ['appInfo', baseURL],
queryFn: async () => {
const client = createAPIClient(baseURL);
return await client.appInfo();
},
});
}
```
--------------------------------
### Create an iOS simulator with Maestro
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Creates a new iOS simulator with a specified OS version if Maestro cannot find an existing device.
```sh
maestro start-device --platform=ios --os-version 18
```
--------------------------------
### Create Account Session Request Headers
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Headers for the POST /account_session endpoint. The 'account' header is optional and specifies the merchant ID.
```typescript
{
'Content-Type': 'application/json',
account?: string // Optional merchant ID
}
```
--------------------------------
### Create Payment Method with Card Details
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use this method to create a payment method using raw card details. Ensure you handle potential errors.
```typescript
try {
const paymentMethod = await stripe.createPaymentMethod({
card: {
number: '4000002500003155',
cvc: '123',
expMonth: 11,
expYear: 2020,
},
});
} catch (e) {
// Handle error
}
```
```typescript
const { paymentMethod, error } = await createPaymentMethod({
paymentMethodType: 'Card',
paymentMethodData: {
billingDetails,
}, // optional
});
return (
);
```
--------------------------------
### Run TypeScript Type Checking
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/README.md
Execute this command to perform type checking on the entire application using TypeScript. Ensure your project is set up with TypeScript for this to be effective.
```bash
npx tsc --noEmit
```
--------------------------------
### InitialiseParams
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Parameters for initializing Stripe.
```typescript
export interface InitialiseParams extends InitStripeParams {
appInfo: AppInfo;
}
```
--------------------------------
### Backup Original File
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Command to create a backup of the NativeStripeSdkModule.ts file before applying changes.
```bash
cp src/specs/NativeStripeSdkModule.ts src/specs/NativeStripeSdkModule.ts.orig
```
--------------------------------
### Initialize Apple Pay Payment Request
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use `paymentRequestWithNativePay` to set up Apple Pay with items and shipping options. Note the shift to `presentApplePay` for newer implementations.
```tsx
const items = [
{
label: 'Whisky',
amount: '50.00',
},
];
const shippingMethods = [
{
id: 'fedex',
label: 'FedEX',
detail: 'Test @ 10',
amount: '10.00',
},
];
const options = {
requiredBillingAddressFields: ['all'],
requiredShippingAddressFields: ['phone', 'postal_address'],
shippingMethods,
};
const token = await stripe.paymentRequestWithNativePay(items, options);
```
```tsx
const shippingMethods = [
{
identifier: 'standard',
detail: 'Arrives by June 29',
label: 'Standard Shipping',
amount: '3.21',
},
];
const items = [
{ label: 'Subtotal', amount: '12.75', type: 'final' },
{ label: 'Shipping', amount: '0.00', type: 'pending' },
{ label: 'Total', amount: '12.75', type: 'pending' }, // Last item in array needs to reflect the total.
];
const { error, paymentMethod } = await presentApplePay({
cartItems: items,
country: 'US',
currency: 'USD',
shippingMethods,
requiredShippingAddressFields: [
'emailAddress',
'phoneNumber',
'postalAddress',
'name',
],
requiredBillingContactFields: ['phoneNumber', 'name'],
jcbEnabled: true,
});
```
--------------------------------
### Stripe initialization with initStripe
Source: https://github.com/stripe/stripe-react-native/blob/master/README.md
Initialize Stripe using the initStripe method.
```typescript
import { initStripe } from '@stripe/stripe-react-native';
function App() {
// ...
useEffect(() => {
initStripe({
publishableKey: publishableKey,
merchantIdentifier: 'merchant.identifier',
urlScheme: 'your-url-scheme',
});
}, []);
}
```
--------------------------------
### Stripe Connect API Client Class
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Provides a client class for interacting with the Stripe Connect API, including methods for fetching application information and creating account sessions. Use this client to make requests to your Stripe backend.
```typescript
export class StripeConnectAPI {
constructor(baseURL: string);
appInfo(baseURL?: string): Promise;
accountSession(
merchantId?: string,
baseURL?: string
): Promise;
}
```
--------------------------------
### Initialize Google Pay Payment Request
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Use `paymentRequestWithNativePay` for Google Pay, specifying total price, currency, and line items. The newer `initGooglePay` and `presentGooglePay` APIs are recommended.
```tsx
const token = await stripe.paymentRequestWithNativePay({
total_price: '100.00',
currency_code: 'USD',
shipping_address_required: true,
phone_number_required: true,
shipping_countries: ['US', 'CA'],
line_items: [
{
currency_code: 'USD',
description: 'Whisky',
total_price: '50.00',
unit_price: '50.00',
quantity: '1',
},
],
});
```
```tsx
const { error } = await initGooglePay({
merchantName: 'Widget Store'
countryCode: 'US',
billingAddressConfig: {
format: 'FULL',
isPhoneNumberRequired: true,
isRequired: false,
},
existingPaymentMethodRequired: false,
isEmailRequired: true,
});
if (error) {
// handle error
return;
}
const { error: presentError } = await presentGooglePay({
clientSecret,
forSetupIntent: true,
currencyCode: 'USD',
});
```
--------------------------------
### HandleNextActionForSetupResult
Source: https://github.com/stripe/stripe-react-native/blob/master/etc/stripe-react-native.api.md
Result type for handleNextActionForSetup.
```typescript
export type HandleNextActionForSetupResult = {
setupIntent: SetupIntent.Result;
error?: undefined;
} | {
setupIntent?: undefined;
error: StripeError;
};
```
--------------------------------
### Authenticate Payment Intent for Action
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Call this method if your payment requires user action (e.g., authentication) and you are using manual confirmation. It launches an activity for the user to authenticate.
```typescript
await stripe.authenticatePaymentIntent({ clientSecret: 'client_secret' });
```
```typescript
const { error, paymentIntent } = await handleNextAction('client_secret');
```
--------------------------------
### Apple Pay Payment Request
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Initiates an Apple Pay payment request. Refer to the documentation for all available properties.
```APIDOC
## POST /stripe/stripe-react-native/apple-pay
### Description
Initiates an Apple Pay payment request with specified items and options.
### Method
POST
### Endpoint
/stripe/stripe-react-native/apple-pay
### Parameters
#### Request Body
- **items** (array) - Required - An array of items to be paid for.
- **options** (object) - Optional - Configuration options for the payment request.
- **requiredBillingAddressFields** (array) - Optional - Fields required for billing address.
- **requiredShippingAddressFields** (array) - Optional - Fields required for shipping address.
- **shippingMethods** (array) - Optional - Available shipping methods.
### Request Example
```json
{
"items": [
{
"label": "Whisky",
"amount": "50.00"
}
],
"options": {
"requiredBillingAddressFields": ["all"],
"requiredShippingAddressFields": ["phone", "postal_address"],
"shippingMethods": [
{
"id": "fedex",
"label": "FedEX",
"detail": "Test @ 10",
"amount": "10.00"
}
]
}
}
```
### Response
#### Success Response (200)
- **token** (string) - The payment token generated.
#### Response Example
```json
{
"token": "tok_12345"
}
```
```
--------------------------------
### Create Payment Method
Source: https://github.com/stripe/stripe-react-native/blob/master/docs/tipsi-stripe-migration-guide.md
Creates a payment method using card details. This is useful for one-time payments or when you need to collect card information separately.
```APIDOC
## POST /createPaymentMethod
### Description
Creates a payment method using card details.
### Method
POST
### Endpoint
/createPaymentMethod
### Parameters
#### Request Body
- **card** (object) - Required - Card details including number, cvc, expMonth, and expYear.
- **paymentMethodType** (string) - Required - The type of payment method, e.g., 'Card'.
- **paymentMethodData** (object) - Optional - Additional data for the payment method, such as billing details.
### Request Example
```json
{
"card": {
"number": "4000002500003155",
"cvc": "123",
"expMonth": 11,
"expYear": 2020
},
"paymentMethodType": "Card",
"paymentMethodData": {
"billingDetails": {
"email": "test@example.com"
}
}
}
```
### Response
#### Success Response (200)
- **paymentMethod** (object) - The created payment method object.
- **error** (object) - An error object if the creation failed.
#### Response Example
```json
{
"paymentMethod": {
"id": "pm_12345",
"type": "Card"
},
"error": null
}
```
```
--------------------------------
### App Info Response Structure
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
TypeScript interface defining the structure of a successful response from the /app_info endpoint.
```typescript
interface AppInfoResponse {
publishable_key: string;
available_merchants: MerchantInfo[];
}
interface MerchantInfo {
display_name: string | null;
merchant_id: string;
}
```
--------------------------------
### POST /account_session
Source: https://github.com/stripe/stripe-react-native/blob/master/example-stripe-connect/API_DOCUMENTATION.md
Creates an account session for a specific merchant or the default account, returning a client secret for initializing Stripe Connect embedded components.
```APIDOC
## POST /account_session
### Description
Creates an account session for a specific merchant or the default account. Returns a client secret required for initializing Stripe Connect embedded components.
### Method
POST
### Endpoint
/account_session
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
#### Headers
- **Content-Type** (string) - Required - `application/json`
- **account** (string) - Optional - The merchant ID (`acct_...`) for which to create the session. If not provided, the default account is used.
### Request Example
```json
{
"Content-Type": "application/json"
}
```
### Response
#### Success Response (200 OK)
- **client_secret** (string) - The client secret for the account session.
#### Response Example
```json
{
"client_secret": "cas_..."
}
```
```
--------------------------------
### Run linting and formatting checks
Source: https://github.com/stripe/stripe-react-native/blob/master/CONTRIBUTING.md
Manually runs linting, TypeScript type-checking, and code formatting checks for different platforms.
```sh
yarn lint # ESLint
yarn typescript # TypeScript type-check
yarn format:android:check # Kotlin formatting (spotless)
yarn format:android:write # Auto-fix Kotlin formatting
yarn format:ios:check # SwiftLint
yarn format:ios:write # Auto-fix Swift formatting (changed files only)
```