Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in
OverviewUpgrade your integration
Online payments
OverviewFind your use caseUse Managed Payments
Payment methods
Payment interfaces
Payment scenarios
In-person payments
Beyond payments

Manage payment methods in settings

Use the Payment Method Settings Sheet to let your customers manage their payment methods in your app settings page.

Note

The Payment Method Settings Sheet is intended for use on an app settings page. For checkout and payments, use the In-app Payments, which also has built-in support for saving and displaying payment methods and supports more payment methods than the Payment Method Settings Sheet.

Note

In code, this component is referenced as CustomerSheet for historical reasons. Throughout the documentation, when you see CustomerSheet in code examples, this refers to the Payment Method Settings Sheet.

The Payment Method Settings Sheet is a prebuilt UI component that lets your customers manage their saved payment methods. You can use the Payment Method Settings Sheet UI outside of a checkout flow, and the appearance and styling is customizable to match the appearance and aesthetic of your app. Customers can add and remove payment methods, which get saved to the customer object, and set their default payment method stored locally on the device. Use both the In-app Payments and the Payment Method Settings Sheet to provide customers a consistent end-to-end solution for saved payment methods.

Screenshot of Payment Method Settings Sheet presenting multiple saved payment methods in an iOS app.

Set up Stripe

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

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.

Note

We recommend following the official TypeScript guide to add TypeScript support.

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.

Note

Use your API test keys while you test and develop, and your live mode keys when you publish your app.

Enable payment methods

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.

Note

At this time, CustomerSheet only supports cards and US bank accounts.

Add Customer endpoints
Server-side

Create two endpoints on your server: one for fetching a Customer’s ephemeral key, 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 an associated ephemeral key. You can view the API version used by the SDK here.
  1. Create an endpoint to return a SetupIntent configured with the 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.

Initialize the sheet

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

Present the sheet

OptionalEnable ACH payments

To enable ACH debit payments: Enable US Bank Account as a payment method in the settings section of the Dashboard.

OptionalFetch the selected payment method

To fetch the default payment method without presenting the Payment Method Settings Sheet, call CustomerSheetBeta.retrievePaymentOptionSelection() after initializing the sheet.

OptionalCustomize the sheet

Appearance

Customize the colors, fonts, and other appearance attributes to match the look and feel of your app by using the appearance API.

Behavior

To add custom behavior for attaching, detaching, and listing saved payment methods, pass in a CustomerAdapter either to CustomerSheetBeta.initialize or as a prop to <CustomerSheetBeta.CustomerSheet />.

Note

fetchPaymentMethods can filter out saved payment methods from being shown, but won’t impact the type of payment methods that are addable.

Default billing details

To set default values for billing details collected in the Payment Method Settings Sheet, configure the defaultBillingDetails property. The Payment Method Settings Sheet pre-populates its fields with the values that you provide.

Billing details collection

Use billingDetailsCollectionConfiguration to specify how you want to collect billing details in the Payment Method Settings Sheet.

You can collect your customer’s name, email, phone number, and address.

If you don’t intend to collect the values that the payment method requires, you must do the following:

  1. Attach the values that aren’t collected by the Payment Method Settings Sheet to the defaultBillingDetails property.
  2. Set billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod to true.

Note

Consult with your legal counsel regarding laws that apply to collecting information. Only collect a phone number if you need it for a transaction.

Was this page helpful?
YesNo