Exploring The New Stripe React Native SDK

Introduction to Stripe React Native SDK

Mobile commerce continues its explosive growth trajectory, with consumers increasingly expecting seamless in-app purchasing experiences. For React Native developers building e-commerce applications, appointment booking systems, or any platform requiring payments, Stripe has consolidated its mobile payment offerings into a powerful, unified SDK. The official Stripe React Native SDK brings the same payment expertise that powers millions of businesses directly into your React Native projects.

The Stripe React Native SDK represents Stripe's official commitment to the React Native ecosystem. After acquiring the Tipsi Stripe library, Stripe integrated it directly into their SDK portfolio, providing a maintained, well-documented solution for mobile payment processing. This SDK bridges the gap between Stripe's robust backend payment infrastructure and the native mobile experience that React Native enables.

Why Use the Official Stripe SDK

Building payment flows from scratch introduces significant risk. Security vulnerabilities, payment method compliance issues, and the complexity of handling various payment scenarios can quickly overwhelm a development team. The Stripe React Native SDK addresses these challenges by providing battle-tested components that handle the intricacies of payment processing.

The SDK handles PCI compliance automatically by ensuring sensitive card data never touches your application code directly. Card numbers are tokenized on-device and transmitted directly to Stripe's servers, reducing your compliance scope significantly. This architectural decision means your app never handles raw card data, protecting your users and simplifying your security posture.

Installation and Project Setup

Getting started with the Stripe React Native SDK requires a few setup steps that differ slightly between React Native CLI projects and Expo applications. This section covers both approaches.

React Native CLI Installation

For React Native projects initialized with the CLI, install the SDK through your package manager:

npm install @stripe/stripe-react-native
# or
yarn add @stripe/stripe-react-native

Then configure your iOS project:

cd ios
pod install
cd ..

Expo Installation

Expo projects require the Stripe Expo plugin:

npx expo install @stripe/stripe-react-native
npx expo install expo-config-plugin-stripe

Add the configuration to your app.json:

{
 "expo": {
 "plugins": [
 [
 "@stripe/stripe-react-native",
 {
 "merchantId": "your-merchant-id",
 "enableGooglePay": true,
 "googlePayMode": "test"
 }
 ]
 ]
 }
}

Initializing the SDK

Wrap your application with StripeProvider:

import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
 return (
 <StripeProvider
 publishableKey="pk_test_your_publishable_key"
 merchantIdentifier="merchant.com.yourapp"
 urlScheme="yourapp"
 >
 <NavigationContainer>
 <AppNavigator />
 </NavigationContainer>
 </StripeProvider>
 );
}

The StripeProvider initializes the SDK with your publishable key and merchant identifier. For development, use your test mode key beginning with pk_test_. Never ship with a live key as this could result in accidental real charges during development.

Implementing PaymentSheet

PaymentSheet is the recommended solution for most payment scenarios. This component provides a complete, pre-built payment flow that handles payment method selection, card input, and confirmation in a single cohesive experience. The component renders a bottom sheet that slides up from the bottom of the screen, providing a familiar and intuitive payment interaction.

Backend Preparation

Before presenting PaymentSheet, your backend must create a PaymentIntent:

app.post('/create-payment-intent', async (req, res) => {
 const { amount, currency } = req.body;
 const paymentIntent = await stripe.paymentIntents.create({
 amount,
 currency,
 automatic_payment_methods: { enabled: true },
 });
 res.send({ clientSecret: paymentIntent.client_secret });
});

The automatic_payment_methods parameter tells Stripe to enable all payment methods appropriate for your account and the customer's location. You can also specify particular payment methods if you want to restrict what's available.

Client-Side Initialization

Initialize PaymentSheet with the client secret from your backend, configure the merchant display name, and present the sheet when the user taps the payment button. The initialization step configures how PaymentSheet behaves, with the merchantDisplayName appearing on the payment sheet to help users recognize the charge.

Handling Payment Results

After the user confirms payment, presentPaymentSheet returns either a successful result or an error. Always verify payments on your backend by checking the PaymentIntent status before fulfilling orders. Handle both success and error scenarios appropriately, with error codes providing programmatic identification for different failure types.

Implementing Card Payments with CardField

For applications requiring a custom checkout design, CardField provides the building blocks for secure card collection while maintaining full UI control. Unlike PaymentSheet's complete flow, CardField focuses solely on collecting and tokenizing card information, leaving the payment confirmation to your code.

Custom Checkout Implementation

A custom checkout form using CardField involves collecting card details, tokenizing them into a payment method, and then confirming the payment through your backend. This approach gives you flexibility over the checkout experience at the cost of additional implementation complexity.

Card Validation Best Practices

Implement validation at multiple levels: format validation as users type, validation on blur, and final validation before submission:

const validateCardNumber = (number) => {
 const clean = number.replace(/\D/g, '');
 let sum = 0, isEven = false;
 for (let i = clean.length - 1; i >= 0; i--) {
 let digit = parseInt(clean[i], 10);
 if (isEven) { digit *= 2; if (digit > 9) digit -= 9; }
 sum += digit; isEven = !isEven;
 }
 return sum % 10 === 0 && clean.length >= 13;
};

CardField handles all the complexity of secure card data collection. The component renders a native input field that accepts card numbers, expiration dates, CVC, and ZIP code. Validation happens automatically as users type, providing immediate feedback on formatting errors. The card data never touches your JavaScript code directly; instead, the SDK tokenizes the card and returns a payment method token.

Digital Wallet Integration

Apple Pay Implementation

Apple Pay requires proper merchant identifier configuration and physical hardware for testing. The implementation uses the native PassKit framework to present the user's saved cards and receive their authorization:

const { isApplePaySupported, presentApplePay, confirmApplePayPayment } = useStripe();

const handleApplePayPress = async () => {
 if (!(await isApplePaySupported())) {
 showUserMessage('Apple Pay is not supported');
 return;
 }

 const { clientSecret } = await createPaymentIntent(2000, 'usd');
 const { error: presentError } = await presentApplePay({
 cartItems: [{ label: 'Product Name', amount: '20.00' }],
 country: 'US',
 currency: 'usd',
 });

 if (presentError) return;

 const { error: confirmError } = await confirmApplePayPayment(clientSecret);
 if (confirmError) showUserMessage(confirmError.message);
 else showUserMessage('Apple Pay successful!');
};

Apple Pay requires a merchant certificate in your Apple Developer account and proper configuration in your app. The merchant identifier must match exactly between your app configuration and your Stripe dashboard settings. Apple Pay doesn't work on simulators, so testing requires physical hardware.

Google Pay Implementation

Google Pay uses the Payment Request API to provide a similar experience on Android devices, supporting cards saved to the user's Google account:

const { isGooglePaySupported, initGooglePay, presentGooglePay } = useStripe();

const handleGooglePayPress = async () => {
 const supported = await isGooglePaySupported({ testEnv: true });
 if (!supported) return;

 await initGooglePay({
 merchantName: 'Your Business Name',
 countryCode: 'US',
 testEnv: true,
 });

 const { clientSecret } = await createPaymentIntent(2000, 'usd');
 const { error } = await presentGooglePay({
 clientSecret,
 currencyCode: 'usd',
 });

 if (error) showUserMessage(error.message);
 else showUserMessage('Google Pay successful!');
};

The testEnv flag is crucial during development. When true, Google Pay operates in test mode using test cards. Before releasing to production, remove this flag or set it to false to enable live payment processing.

Best Practices and Security

PCI Compliance Essentials

The Stripe React Native SDK is designed to minimize your PCI compliance burden. By using the provided components rather than building custom card input solutions, you ensure sensitive data never touches your application code. The SDK's components render native UI elements that communicate directly with Stripe's servers, tokenizing card data before returning any information to your JavaScript code.

This architecture means your application data flows don't include raw card numbers. You're working only with tokens and payment method identifiers, which are safe to store and transmit. This significantly reduces the compliance scope, potentially qualifying you for simpler SAQ-A validation instead of the more extensive SAQ-D. Partnering with an experienced web development team can help ensure your payment implementation meets all security requirements.

Never attempt to intercept or access card data from the SDK's components. The components are designed to prevent access to this data, and attempts to circumvent this protection increase your compliance scope and introduce security risks.

Backend Security Considerations

Your backend API must be secured appropriately since it handles the actual payment processing. Never trust payment confirmations from the client; always verify payment status directly with Stripe's API before fulfilling orders. Secret keys should never appear in your client application.

Implement proper authentication on your payment endpoints, use your existing authentication system to ensure only authorized users can create payments, and rate limit these endpoints to prevent abuse. Log all payment attempts for security monitoring and debugging.

Performance Optimization

Lazy Loading and Code Splitting

The Stripe SDK adds to your application bundle size. If payment functionality is only needed in specific screens, use dynamic imports to load the SDK only when required:

const loadStripeAndContinue = async () => {
 const { StripeProvider, useStripe } = await import('@stripe/stripe-react-native');
 // Proceed with checkout flow
};

This approach keeps your initial bundle size smaller, improving startup time for users who don't immediately need payment functionality. React Native's Metro bundler supports dynamic requires that load modules at runtime.

Payment Sheet Initialization

PaymentSheet initialization involves fetching the client secret and preparing the payment sheet configuration. This operation can take a noticeable amount of time, so consider when to perform it. Pre-fetching the client secret when the user begins checkout, then initializing PaymentSheet in the background, creates a seamless experience when they tap the payment button.

Network Request Optimization

Batch related API calls where possible and implement proper caching for configuration data. The Stripe SDK caches certain configuration locally, but your backend can optimize by providing all necessary information in the initial payment intent creation response rather than requiring additional API calls. Implement proper timeout handling and retry logic for payment-related API calls for users on poor connections.

For complex mobile applications requiring payment integration alongside AI-powered automation features, consider implementing these optimization strategies from the start to ensure scalable performance.

Quick Start Implementation Checklist

Installation:

• Install @stripe/stripe-react-native package
• Run pod install for iOS
• Configure merchant identifier
• Wrap app with StripeProvider

Backend Setup:

• Create Stripe secret key environment variable
• Implement payment intent creation endpoint
• Add webhook handler for payment events
• Implement payment verification endpoint

Client Implementation:

• Create checkout screen with PaymentSheet
• Implement error handling for payment failures
• Add Apple Pay and Google Pay buttons

Testing:

• Test with Stripe test card numbers
• Test digital wallets in sandbox mode
• Verify error messages display correctly

Production Readiness:

• Switch to production publishable key
• Configure Apple Pay for production
• Enable Google Pay production mode
• Review PCI compliance requirements

Sources

1. Stripe React Native SDK Documentation - Official SDK documentation with complete API reference and integration guides
2. Stripe React Native GitHub Repository - Official open-source repository with code examples and community discussions
3. Callstack: How to Migrate from Tipsi Stripe to Stripe React Native SDK - Comprehensive migration guide covering API changes and best practices