Accéder directement au contenu
Créez un compte
 ou
connecter-vous
Logo de la documentation Stripe
/
Créez un compte
Connectez-vous

Intégrer la Fiche client

Laissez vos clients gérer leurs moyens de paiement enregistrés dans les paramètres de votre application.

Remarque

La fiche client est destinée à être utilisée sur la page des paramètres d’une application. Pour les paiements, utilisez le composant Mobile Payment Element, qui offre également une prise en charge intégrée de l’enregistrement et de l’affichage des moyens de paiement et prend en charge davantage de moyens de paiement que la fiche client.

La Fiche client est un composant d’interface utilisateur préconfiguré qui permet à vos clients de gérer leurs moyens de paiement enregistrés. Vous pouvez utiliser l’interface utilisateur de la Fiche client en dehors d’un flux de paiement. 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 enregistrés dans l’objet Customer, et définir leur moyen de paiement par défaut stocké localement sur l’appareil. Utilisez à la fois le Mobile Payment Element et la Fiche client afin de fournir aux clients une solution cohérente de bout en bout pour les moyens de paiement enregistrés.

Capture d'écran d'une Fiche client présentant plusieurs moyens de paiement enregistrés dans une application Android.

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:21.22.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:21.22.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

À l’heure actuelle, CustomerSheet prend uniquement en charge les cartes et les comptes bancaires américains.

Ajouter des endpoints Customer
Côté serveur

Créez deux endpoints sur votre serveur : l’un pour récupérer la clé éphémère d’un 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é éphémère associée. Vous pouvez consulter la version API utilisée par le SDK ici.
Command Line
curl
Ruby
Python
PHP
Node
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/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  1. Créez un endpoint pour renvoyer un SetupIntent configuré avec l’ID du Client.
Command Line
curl
Ruby
Python
PHP
Node
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 CustomerAdapter
Côté client

Un StripeCustomerAdapter permet à une CustomerSheet de communiquer avec Stripe. Sur le client, configurez un CustomerAdapter pour envoyer des requêtes à ces endpoints sur votre serveur.

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.",
                    )
                }
            )
        }
    )
}

Configurer la fiche

Ensuite, initialisez le composant Customer Sheet avec votre CustomerAdapter, puis appelez configure avec un CustomerSheet.Configuration. Appelez toujours configure avant present 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(
                customerAdapter = viewModel.customerAdapter,
                callback = viewModel::handleResult // Implemented in next step
            )

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

Présenter la fiche

Présenter la Fiche client. Lorsque le client ferme la Fiche client, celle-ci appelle le bloc d’exécution avec un 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
            }
        }
    }
}
  • 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.
Cette page vous a-t-elle été utile ?
OuiNon