---
title: "Stripe Payment Integration in React Native"
url: "https://magecomp.com/blog/stripe-payment-integration-react-native/"
date: "2025-04-11T06:51:49+00:00"
modified: "2025-06-03T07:09:39+00:00"
author:
  name: "Bharat Desai"
  url: "https://magecomp.com"
categories:
  - "React Native"
word_count: 783
reading_time: "4 min read"
summary: "In today’s digital economy, accepting payments securely and efficiently is vital for any mobile app. Stripe, one of the most popular payment processing platforms, offers a powerful suite of tools..."
description: "Learn how to integrate Stripe payments in a React Native app with step-by-step guidance"
keywords: "React Native"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Implement Rating Functionality in React Native App?"
    url: "https://magecomp.com/blog/implement-rating-react-native-app/"
  - title: "React Native | Pull-to-Refresh"
    url: "https://magecomp.com/blog/react-native-pull-to-refresh/"
  - title: "How to Implement Bottom Tab Navigation in a React Native App?"
    url: "https://magecomp.com/blog/implement-bottom-tab-navigation-react-native-app/"
---

# Stripe Payment Integration in React Native

_Published: April 11, 2025_  
_Author: Bharat Desai_  

![Stripe Payment Integration in React Native](https://magecomp.com/blog/wp-content/uploads/2025/04/Stripe-Payment-Integration-in-React-Native-1024x512.webp)

In today’s digital economy, accepting payments securely and efficiently is vital for any mobile app. Stripe, one of the most popular payment processing platforms, offers a powerful suite of tools and APIs to make this process seamless. In this blog, we’ll walk through how to integrate Stripe payments into a React Native app using the official Stripe SDK.

![Stripe Payment Integration in React Native](https://magecomp.com/blog/wp-content/uploads/2025/04/Stripe-Payment-Integration-in-React-Native-1.webp)

## How to Integrate Stripe in React Native?
The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):

**NPM:**

```
yarn add @stripe/stripe-react-native
```

Next, install some other necessary dependencies:

- For iOS, navigate to the iOS directory and run pod install to ensure that you also install the required native dependencies.
- For Android, there are no more dependencies to install.

**Example:**

**App.tsx**

```
import { StripeProvider } from '@stripe/stripe-react-native';
import PaymentScreen from './PaymentScreen';
import { StripeProviderCmp } from './stripeApi';

const App = () => {
  return (
 <StripeProvider 
publishableKey="pk_test" // your key
urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
 merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
>
      <StripeProviderCmp>
        <PaymentScreen />
      </StripeProviderCmp>
    </StripeProvider>
  );
};
export default App;
```

**PaymentScreen.tsx**

```
import { Alert, Button, SafeAreaView, StyleSheet, Text, View } from 'react-native'
import React, { useEffect } from 'react'
import { useStripePayment } from './stripeApi'

const PaymentScreen = () => {

    const stripeCon = useStripePayment()

    return (
        <SafeAreaView style={styles.container}>
            <Text>PaymentScreen</Text>
            <Button title='Click me' onPress={() => stripeCon.openPaymentSheet()} />
        </SafeAreaView>
    )
}

export default PaymentScreen

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
})
```

**stripeApi.tsx**

```
import React, { createContext, useContext, useState, useEffect } from 'react';
import { useStripe } from '@stripe/stripe-react-native';
import { Alert } from 'react-native';

const Secretkey = "sk_test" // your key

type StripeContextType = {
    loading: boolean;
    openPaymentSheet: () => Promise<void>;
};

const StripeContext = createContext<StripeContextType | undefined>(undefined);

export const useStripePayment = (): StripeContextType => {
    const context = useContext(StripeContext);
    if (!context) {
        throw new Error('useStripePayment must be used within a StripeProvider');
    }
    return context;
};

type StripeProviderProps = {
    children: React.ReactNode;
};

export const StripeProviderCmp = ({ children }: StripeProviderProps) => {
    const { initPaymentSheet, presentPaymentSheet } = useStripe();
    const [loading, setLoading] = useState(true);
    const [paymentSheetReady, setPaymentSheetReady] = useState(false);

    const fetchPaymentParams = async () => {
        try {
            const createCustomer = async () => {
                const response = await fetch('https://api.stripe.com/v1/customers', {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${Secretkey}`,
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                });

                const data = await response.json();
                return data.id; // customer ID
            };

            const createEphemeralKey = async (customerId: string) => {
                const response = await fetch('https://api.stripe.com/v1/ephemeral_keys', {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${Secretkey}`,
                        'Stripe-Version': '2025-03-31.basil',
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        customer: customerId,
                    }).toString(),
                });

                const data = await response.json();
                console.log(data);

                return data.secret; // ephemeral key
            };

            const createPaymentIntent = async (customerId: string) => {
                const params = new URLSearchParams();
                params.append('customer', customerId);
                params.append('amount', '1099'); // Amount in cents (e.g., €10.99)
                params.append('currency', 'eur');
                params.append('automatic_payment_methods[enabled]', 'true');

                const response = await fetch('https://api.stripe.com/v1/payment_intents', {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${Secretkey}`,
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: params.toString(), // Ensure body is a string
                });

                const data = await response.json();

                if (!response.ok) {
                    console.error('PaymentIntent creation failed:', data);
                    throw new Error(data.error?.message || 'Unknown Stripe error');
                }

                return data.client_secret; // for Payment Sheet
            };

            // 🧩 Step-by-step
            const customerId = await createCustomer();
            const ephemeralKey = await createEphemeralKey(customerId);
            const paymentIntentClientSecret = await createPaymentIntent(customerId);

            // console.log("customerId:", customerId);
            // console.log("ephemeralKey:", ephemeralKey);
            // console.log("paymentIntentClientSecret:", paymentIntentClientSecret);

            return {
                customer: customerId,
                ephemeralKey,
                paymentIntentClientSecret,
                // setupIntentClientSecret: setupIntent,
            };
        } catch (error) {
            console.error('Fetch failed:', error);
            Alert.alert('Error', 'Unable to fetch payment info.');
        }
    };

    const initializePaymentSheet = async () => {
        setLoading(true);
        const response = await fetchPaymentParams();

        if (!response) {
            setLoading(false);
            return;
        }

        const {
            customer,
            ephemeralKey,
            paymentIntentClientSecret,
            // setupIntentClientSecret,
        } = response;

        const initResult = await initPaymentSheet({
            customerId: customer,
            customerEphemeralKeySecret: ephemeralKey,
            paymentIntentClientSecret: paymentIntentClientSecret,
            // setupIntentClientSecret: setupIntentClientSecret,
            merchantDisplayName: 'My App',
            allowsDelayedPaymentMethods: true,
            style: 'automatic',
        });

        console.log(initResult);

        if (initResult.error) {
            Alert.alert('Stripe Init Error', initResult.error.message);
        } else {
            setPaymentSheetReady(true);
        }

        setLoading(false);
    };

    const openPaymentSheet = async () => {
        setLoading(true);

        const response = await fetchPaymentParams();
        if (!response) {
            setLoading(false);
            return;
        }

        const {
            customer,
            ephemeralKey,
            paymentIntentClientSecret,
        } = response;

        const initResult = await initPaymentSheet({
            customerId: customer,
            customerEphemeralKeySecret: ephemeralKey,
            paymentIntentClientSecret: paymentIntentClientSecret,
            merchantDisplayName: 'My App',
            allowsDelayedPaymentMethods: true,
            style: 'automatic',
        });

        if (initResult.error) {
            setLoading(false);
            Alert.alert('Stripe Init Error', initResult.error.message);
            return;
        }

        const result = await presentPaymentSheet();

        if (result.error) {
            Alert.alert('Payment Failed', result.error.message);
        } else {
            Alert.alert('Success', 'Payment completed!');
        }

        setLoading(false);
    };

    useEffect(() => {
        initializePaymentSheet();
    }, []);

    return (
        <StripeContext.Provider value={{ loading, openPaymentSheet }}>
            {children}
        </StripeContext.Provider>
    );
};
```

## Wrapping Up:
Stripe’s React Native SDK simplifies integrating payments into your mobile app. With a proper setup, you can securely accept card payments and scale your payment operations with confidence.

Whether you’re building an e-commerce app, subscription service, or donation platform, Stripe provides the tools to help you succeed.


---

_View the original post at: [https://magecomp.com/blog/stripe-payment-integration-react-native/](https://magecomp.com/blog/stripe-payment-integration-react-native/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-22 00:13:47 UTC_