Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

Gestion des moyens de paiement dans les paramètres

Utilisez la feuille de réglages des moyens de paiement pour permettre à vos clients de gérer leurs moyens de paiement dans la page des paramètres de votre application.

Remarque

La feuille des paramètres des moyens de paiement est destinée à être utilisée sur une page de paramètres de l’application. Pour le checkout et les paiements, utilisez lesPaiements dans l’application, qui disposent également d’une prise en charge intégrée pour l’enregistrement et l’affichage des moyens de paiement et prend en charge davantage de moyens de paiement que la feuille des paramètres des moyens de paiement.

Remarque

Dans le code, ce composant est appelé CustomerSheet pour des raisons historiques. Dans la documentation, lorsque vous voyez CustomerSheet dans les exemples de code, cela fait référence à la feuille de paramètres des moyens paiements.

La feuille de paramètres des moyens de paiement est un composant d’interface utilisateur préconstruit qui permet à vos clients de gérer les moyens de paiement qu’ils ont enregistrés. Vous pouvez utiliser l’interface utilisateur de la feuille de configuration des moyens de paiement en dehors d’un tunnel de paiement, et l’apparence et le style sont personnalisables pour correspondre à l’apparence et à l’esthétique de votre application. Les clients peuvent ajouter et supprimer des moyens de paiement, qui sont sauvegardés dans l’objet Customer, et définir leur moyen de paiement par défaut sauvegardé localement sur l’appareil. Utilisez à la fois les paiements dans l’application et la feuille des paramètres des moyens de paiement pour offrir à vos clients une solution cohérente de bout en bout pour les moyens de paiement enregistrés.

Capture d'écran de la Feuille des paramètres de Moyens de paiement présentant plusieurs moyens de paiement enregistrés dans une application Android.

L’objet CustomerSession accorde au SDK un accès temporaire à l’objet Customer et fournit des options de configuration supplémentaires. Ces options de configuration vous permettent de personnaliser le comportement de la CustomerSheet. Vous trouverez une liste complète des fonctionnalités exposées dans l’objet CustomerSession dans notre Documentation de l’API.

Configurer Stripe

Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.

Pour installer le SDK, ajoutez stripe-android au bloc dependencies de votre fichier app/build.gradle :

build.gradle.kts
Kotlin
Groovy
No results
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

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

Remarque

Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des versions sur GitHub. Pour savoir quand une nouvelle version est disponible, surveillez les versions du référentiel.

Configurez le SDK avec votre clé publique Stripe de façon à ce qu’il puisse envoyer des requêtes à l’API Stripe, par exemple à la sous-classe Application :

Kotlin
Java
No results
import com.stripe.android.PaymentConfiguration

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

        )
    }
}

Remarque

Utilisez vos clés de test lors de vos activités de test et de développement et vos clés du mode production pour la publication de votre application.

Activer des moyens de paiement

Affichez vos paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un SetupIntent.

Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des moyens de paiement pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre page des tarifs pour prendre connaissance des frais que nous appliquons.

Remarque

Pour l’instant, la feuille des paramètres des moyens de paiements ne prend en charge que les cartes bancaires et les comptes bancaires aux États-Unis.

Ajouter des endpoints Customer
Côté serveur

Créez deux endpoints sur votre serveur : l’un pour récupérer la clé secrète d’un client de la session Client, et l’autre pour créer un SetupIntent afin d’enregistrer un nouveau moyen de paiement dans l’objet Customer.

  1. Créez un endpoint pour renvoyer un ID de client et une clé secrète du client de CustomerSession.
Command Line
curl
Ruby
Python
PHP
Node.js
Java
No results
# 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

Remarque

Dans le cadre des intégrations avec des clés clients éphémères héritées, la valeur allow_redisplay des moyens de paiement enregistrés est définie sur unspecified. Pour afficher ces moyens de paiement en plus des moyens de paiement enregistrés lors de l’utilisation des sessions clients, définissez payment_method_allow_redisplay_filters sur ["unspecified", "always"]. Pour en savoir plus, consultez la page dédié aux sessions clients.

  1. Créez un endpoint pour renvoyer un SetupIntent configuré avec l’ID du Client.
Command Line
curl
Ruby
Python
PHP
Node.js
Java
No results
# 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}}" \

Si vous prévoyez uniquement d’utiliser le moyen de paiement pour des paiements ultérieurs lorsque votre client est dans le tunnel de paiement, définissez le paramètre usage sur on_session pour améliorer les taux d’autorisation.

Créer un fournisseur de session client
Côté client

Un CustomerSessionProvider permet à un CustomerSheet de communiquer avec Stripe à l’aide d’objets CustomerSession. Sur le client, créez un CustomerSessionProvider en mesure de créer des clés secrètes client CustomerSession et SetupIntent à partir de votre serveur.

MyCustomerSessionProvider.kt
import com.stripe.android.customersheet.CustomerSheet
import com.stripe.android.customersheet.ExperimentalCustomerSheetApi

@OptIn(ExperimentalCustomerSheetApi::class)
class MyCustomerSessionProvider : CustomerSheet.CustomerSessionProvider() {
    val myBackend = // ....

    override suspend fun providesCustomerSessionClientSecret(): Result<CustomerSheet.CustomerSessionClientSecret> {
        return myBackend.getCustomerSessionClientSecret().fold(
            onSuccess = { response ->
                Result.success(
                    CustomerSessionClientSecret.create(
                        customerId = response.customerId,
                        clientSecret = response.customerSessionClientSecret,
                    )
                )
            },
            onFailure = { exception ->
                Result.failure(exception)
            }
        )
    }

    override suspend fun provideSetupIntentClientSecret(customerId: String): Result<String> {
        return myBackend.getSetupIntentClientSecret(customerId).fold(
            onSuccess = { response ->
                Result.success(response.setupIntentClientSecret)
            },
            onFailure = { exception ->
                Result.failure(exception)
            }
        )
    }
}
CheckoutViewModel.kt
import android.app.Application
import androidx.lifecycle.AndroidViewModel

class CheckoutViewModel(
    application: Application
) : AndroidViewModel(application) {
    val customerSessionProvider = MyCustomerSessionProvider()
}

Configurer la fiche

Ensuite, initialisez la feuille de paramètres des moyens de paiement en utilisant la classe CustomerSheet avec votre CustomerSessionProvider puis appelez configurer avec une CustomerSheet.Configuration. Appelez toujours configurer avant d’appeler présenter et 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(
                customerSessionProvider = viewModel.customerSessionProvider,
                callback = viewModel::handleResult // Implemented in next step
            )

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

Présenter la fiche

Présentez la feuille des paramètres des moyens de paiements à l’aide de CustomerSheet. Lorsque le client ferme la feuille, CustomerSheet appelle le bloc de complétion avec 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(
                customerSessionProvider = viewModel.customerSessionProvider,
                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.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 customerSessionProvider = // ...

    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
            }
        }
    }
}
  • Si le client sélectionne un moyen de paiement, le résultat est CustomerSheetResult.Selected. La valeur associée est le PaymentOptionSelection sélectionné, ou null si l’utilisateur a supprimé le moyen de paiement précédemment sélectionné. L’ensemble des informations relatives au moyen de paiement est disponible dans la valeur paymentMethod de PaymentOptionSelection.
  • Si le client annule la fiche, le résultat est CustomerSheetResult.Canceled. La valeur associée est la PaymentOptionSelection d’origine du client, ou nulle si le client n’a pas encore sélectionné de moyen de paiement ou a supprimé le moyen de paiement sélectionné à l’origine.
  • Si une erreur se produit, le résultat est CustomerSheetResult.Failed.

FacultatifActiver Google Pay

Configurer votre intégration

Pour utiliser Google Pay, commencez par activer l’API Google Pay en ajoutant les informations suivantes au libellé <application> de votre AndroidManifest.xml :

AndroidManifest.xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

Pour en savoir plus, consultez cette page indiquant comment configurer l’API Google Pay pour Android.

Ajouter Google Pay

Pour ajouter Google Pay à votre intégration, transmettez true à googlePayEnabled lors de l’initialisation de CustomerSheet.Configuration with CustomerSheet.Configuration.Builder.

Kotlin
Java
No results
val configuration = CustomerSheet.Configuration().Builder()
  .googlePayEnabled(true)
  .build()

FacultatifActiver les paiements ACH

Intégrez Financial Connections en tant que dépendance pour votre application afin d’activer les paiements par prélèvements ACH.

Le SDK Stripe Android est disponible en open source et fait l’objet d’une documentation complète.

Pour installer le SDK, ajoutez financial-connections au bloc dependencies de votre fichier app/build.gradle :

build.gradle.kts
Kotlin
Groovy
No results
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Financial Connections Android SDK
  implementation("com.stripe:financial-connections:22.0.0")
}

Remarque

Pour obtenir de plus amples informations sur la version la plus récente du SDK et ses versions antérieures, consultez la page des versions sur GitHub. Pour savoir quand une nouvelle version est disponible, surveillez les versions du référentiel.

FacultatifRécupérer le moyen de paiement sélectionné

Pour récupérer le moyen de paiement par défaut sans présenter la feuille des paramètres des moyens de paiement, appelez retrievePaymentOptionSelection() sur CustomerSheet.

class CheckoutActivity : ComponentActivity() {
    private val viewModel by viewModels<CheckoutViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstance)
        val configuration = ...
        setContent {
            val customerSheet = ...

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

            ...
        }
    }
}

FacultatifPersonnaliser la fiche

Apparence

Personnalisez les couleurs, les polices et d’autres attributs d’apparence pour qu’ils correspondent à l’apparence de votre application à l’aide de l’API Appearance.

Remarque

retrievePaymentMethods permet de filtrer l’affichage des moyens de paiement enregistrés, mais n’aura pas d’impact sur le type de moyens de paiement pouvant être ajoutés.

Informations de facturation par défaut

Si vous souhaitez définir des valeurs par défaut pour les informations de facturation collectées dans le formulaire de paiement, configurez la propriété defaultBillingDetails. La CustomerSheet préremplit ses champs avec les valeurs que vous fournissez.

val configuration = CustomerSheet.Configuration.Builder()
    .defaultBillingDetails(
       PaymentSheet.BillingDetails(
         address = PaymentSheet.Address(
           country = "US",
         ),
         email = "foo@bar.com"
      )
    )
    .build()

Collecte des informations de facturation

Utilisez billingDetailsCollectionConfiguration pour spécifier la manière dont vous souhaitez collecter les informations de facturation dans le PaymentSheet.

Vous pouvez collecter le nom, l’adresse e-mail, le numéro de téléphone et l’adresse de votre client.

Pour associer des valeurs non collectées par la CustomerSheet, ajoutez-les à la propriété defaultBillingDetails et définissez billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod sur true. Assurez-vous de suivre cette étape si vous ne prévoyez pas de collecter les valeurs requises par le moyen de paiement.

val configuration = CustomerSheet.Configuration.Builder()
    .defaultBillingDetails(
       PaymentSheet.BillingDetails(
           email = "foo@bar.com"
       )
    )
    .billingDetailsCollectionConfiguration(
        PaymentSheet.BillingDetailsCollectionConfiguration(
            name = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Always,
            email = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Never,
            address = PaymentSheet.BillingDetailsCollectionConfiguration.AddressCollectionMode.Full,
            attachDefaultsToPaymentMethod = true,
        )
    )
    .build()

Remarque

Consultez votre équipe juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne recueillez les numéros de téléphone que si vous en avez besoin pour la transaction.

Cette page vous a-t-elle été utile ?
OuiNon