Manage payment methods in settings

First, you need a Stripe account. Register now.

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):

yarn add @stripe/stripe-react-native

Next, install some other necessary dependencies:

• For iOS, go 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.

Stripe initialization

To initialize Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialization method. Only the API publishable key in publishableKey is required. The following example shows how to initialize Stripe using the StripeProvider component.

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

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

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

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

View your payment methods settings and enable the payment methods you want to support. You need at least one payment method enabled to create a SetupIntent.

By default, Stripe enables cards and other prevalent payment methods that can help you reach more customers, but we recommend turning on additional payment methods that are relevant for your business and customers. See Payment method support for product and payment method support, and our pricing page for fees.

Create two endpoints on your server: one for fetching a CustomerSession client secret, and one to create a SetupIntent for saving a new payment method to the Customer.

1. Create an endpoint to return a Customer ID and a CustomerSession client secret.

# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/customer_sessions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "components[customer_sheet][enabled]"=true \
  -d "components[customer_sheet][features][payment_method_remove]"=enabled

1. Create an endpoint to return a SetupIntent configured with the Customer ID.

# Create a Customer (skip this and get the existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \

If you only plan to use the payment method for future payments when your customer is present during the checkout flow, set the usage parameter to on_session to improve authorization rates.

Create a ClientSecretProvider object that implements two methods. CustomerSheet needs it to communicate with Stripe using CustomerSession objects and the endpoints you created earlier.

import {ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native';

const clientSecretProvider: ClientSecretProvider = {
  // Must return an object with customerId and clientSecret
  async provideCustomerSessionClientSecret(): Promise<CustomerSessionClientSecret> {
    const result = await MyBackend.createCustomerSession();
    return {
      customerId: result.customer,
      clientSecret: result.customerSessionClientSecret,
    };
  },

  // Must return a string
  async provideSetupIntentClientSecret(): Promise<string> {
    const result = await MyBackend.createSetupIntent();
    return result.setupIntent;
  }
};

Next, configure the Payment Method Settings Sheet using the CustomerSheet class, by providing your desired settings to CustomerSheet.initialize.

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

const {error} = await CustomerSheet.initialize({
  // You must provide intentConfiguration and clientSecretProvider
  intentConfiguration: {
    paymentMethodTypes: ['card'],
  },
  clientSecretProvider: clientSecretProvider,
  headerTextForSelectionScreen: 'Manage your payment method',
  returnURL: 'my-return-url://',
});