Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Integrate the Customer Sheet

Let your customers manage their saved payment methods in your app settings.

Note

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

The Customer Sheet is a prebuilt UI component that lets your customers manage their saved payment methods. You can use the Customer 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 Mobile Payment Element and the Customer Sheet to provide customers a consistent end-to-end solution for saved payment methods.

Screenshot of Customer Sheet presenting multiple saved payment methods in an Android app.

Set up Stripe

First, you need a Stripe account. Register now.

To install the SDK, add stripe-android to the dependencies block of your app/build.gradle file:

build.gradle.kts
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:21.16.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:21.16.0")
}

Note

For details on the latest SDK release and past versions, see the Releases page on GitHub. To receive notifications when a new release is published, watch releases for the repository.

Configure the SDK with your Stripe publishable key so that it can make requests to the Stripe API, such as in your Application subclass:

import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            
"pk_test_TYooMQauvdEDq54NiTphI7jx"

        )
    }
}

Note

Use your 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.
Command Line
# 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/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  1. Create an endpoint to return a SetupIntent configured with the Customer ID.
Command Line
# 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 Customer adapter
Client-side

A StripeCustomerAdapter enables a CustomerSheet to communicate with Stripe. On the client, configure a CustomerAdapter to make requests to these endpoints on your server.

CheckoutViewModel.kt
import android.app.Application
import androidx.lifecycle.AndroidViewModel
import com.stripe.android.customersheet.CustomerAdapter
import com.stripe.android.customersheet.ExperimentalCustomerSheetApi

@OptIn(ExperimentalCustomerSheetApi::class)
class CheckoutViewModel(
    application: Application
) : AndroidViewModel(application) {
    val customerAdapter = CustomerAdapter.create(
        context = getApplication(),
        customerEphemeralKeyProvider = {
            myBackend.getEphemeralKey().fold(
                onSuccess = { response ->
                    CustomerAdapter.Result.success(
                        CustomerEphemeralKey.create(
                            customerId = response.customerId,
                            ephemeralKey = response.ephemeralKeySecret,
                        )
                    )
                },
                onFailure = { exception ->
                    CustomerAdapter.Result.failure(
                        cause = exception,
                        displayMessage = "We couldn't retrieve your information, please try again.",
                    )
                }
            )
        },
        setupIntentClientSecretProvider = { customerId ->
            myBackend.createSetupIntent(customerId).fold(
                onSuccess = { response ->
                    CustomerAdapter.Result.success(
                        response.setupIntentClientSecret,
                    )
                },
                onFailure = { exception ->
                    CustomerAdapter.Result.failure(
                        cause = exception,
                        displayMessage = "We couldn't retrieve your information, please try again.",
                    )
                }
            )
        }
    )
}

Configure the sheet

Next, initialize Customer Sheet with your CustomerAdapter then call configure with a CustomerSheet.Configuration. Always call configure before calling present and retrievePaymentOptionSelection.

CheckoutActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import com.stripe.android.customersheet.CustomerSheet
import com.stripe.android.customersheet.ExperimentalCustomerSheetApi
import com.stripe.android.customersheet.rememberCustomerSheet

@OptIn(ExperimentalCustomerSheetApi::class)
class CheckoutActivity : ComponentActivity() {
    private val viewModel by viewModels<CheckoutViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}")
            .build()

        setContent {
            val customerSheet = rememberCustomerSheet(
                customerAdapter = viewModel.customerAdapter,
                callback = viewModel::handleResult // Implemented in next step
            )

            LaunchedEffect(customerSheet) {
                customerSheet.configure(configuration = configuration)
            }
        }
    }
}

Present the sheet

Present the Customer Sheet. When the customer dismisses the sheet, the Customer Sheet calls the completion block with a CustomerSheetResult.

CheckoutActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.stripe.android.customersheet.CustomerSheet
import com.stripe.android.customersheet.ExperimentalCustomerSheetApi
import com.stripe.android.customersheet.rememberCustomerSheet
import com.stripe.android.uicore.image.rememberDrawablePainter

@OptIn(ExperimentalCustomerSheetApi::class)
class CheckoutActivity : ComponentActivity() {
    private val viewModel by viewModels<CheckoutViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val configuration = CustomerSheet.Configuration.builder(merchantDisplayName = "{{YOUR BUSINESS NAME}}")
            .headerTextForSelectionScreen("Manage your payment method")
            .build()

        setContent {
            val customerSheet = rememberCustomerSheet(
                customerAdapter = viewModel.customerAdapter,
                callback = viewModel::handleResult
            )

            LaunchedEffect(customerSheet) {
                customerSheet.configure(configuration = configuration)
                viewModel.handleResult(customerSheet.retrievePaymentOptionSelection())
            }

            val paymentOption by viewModel.paymentOption.collectAsState()

            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
            ) {
                val icon = paymentOption?.icon()

                if (icon != null) {
                    Image(
                        painter = rememberDrawablePainter(
                            drawable = icon
                        ),
                        contentDescription = "Payment Method Icon",
                        modifier = Modifier.height(32.dp)
                    )
                }
                TextButton(
                    onClick = {
                        customerSheet.present()
                    }
                ) {
                    Text(
                        text = paymentOption?.label ?: "Select"
                    )
                }
            }
        }
    }
}
CheckoutViewModel.kt
import android.app.Application
import androidx.lifecycle.AndroidViewModel
import com.stripe.android.customersheet.CustomerAdapter
import com.stripe.android.customersheet.CustomerEphemeralKey
import com.stripe.android.customersheet.CustomerSheetResult
import com.stripe.android.customersheet.ExperimentalCustomerSheetApi
import com.stripe.android.paymentsheet.model.PaymentOption
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.update

@OptIn(ExperimentalCustomerSheetApi::class)
class CheckoutViewModel(
    application: Application
) : AndroidViewModel(application) {
    val customerAdapter = // ...

    private val _paymentOption = MutableStateFlow<PaymentOption?>(null)
    val paymentOption: StateFlow<PaymentOption?> = _paymentOption

    fun handleResult(result: CustomerSheetResult) {
        when (result) {
            is CustomerSheetResult.Selected -> {
                // Configure your UI based on the payment option
                _paymentOption.update {
                    result.selection?.paymentOption
                }
            }
            is CustomerSheetResult.Canceled -> {
                // Configure your UI based on the payment option
                _paymentOption.update {
                    result.selection?.paymentOption
                }
            }
            is CustomerSheetResult.Failed -> {
                // Show the error in your UI
            }
        }
    }
}
  • If the customer selects a payment method, the result is CustomerSheetResult.Selected. The associated value is the selected PaymentOptionSelection, or null if the user deleted the previously-selected payment method. The full payment method details are available in the PaymentOptionSelection’s paymentMethod value.
  • If the customer cancels the sheet, the result is CustomerSheetResult.Canceled. The associated value is the customer’s original PaymentOptionSelection, or null if the customer hasn’t selected a payment method before or has deleted the originally selected payment method.
  • If an error occurs, the result is CustomerSheetResult.Failed.
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc