# 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.
> 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 les[Paiements dans l’application](https://docs.stripe.com/payments/mobile.md). Ils disposent également d’une prise en charge intégrée pour l’enregistrement et l’affichage des moyens de paiement et prennent en charge davantage de moyens de paiement que la feuille des paramètres des moyens de paiement.
> 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 de paiements.
La feuille de paramètres des moyens de paiement est un composant d’interface utilisateur prédéfini qui permet à vos clients de gérer leurs moyens de paiement enregistrés. Vous pouvez utiliser cette interface en dehors d’un tunnel de paiement, et son apparence ainsi que son style sont personnalisables pour pouvoir correspondre à 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 peuvent 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 la gestion des moyens de paiement enregistrés.
> #### Prise en charge de l’API Accounts v2
>
> La feuille de paramètres des moyens de paiement ne prend pas en charge les *comptes configurés par le client* (Account configurations represent role-based functionality that you can enable for accounts, such as merchant, customer, or recipient). Elle prend uniquement en charge les objets `Customer`.
## Configurer Stripe
Pour commencer, vous devez créer un compte Stripe. [S’inscrire](https://dashboard.stripe.com/register).
Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) :
#### yarn
```bash
yarn add @stripe/stripe-react-native
```
#### npm
```bash
npm install @stripe/stripe-react-native
```
Ensuite, installez les autres dépendances nécessaires :
- Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises.
- Pour Android, il n’y a plus de dépendances à installer.
> Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript.
### Initialisation de Stripe
Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`.
```jsx
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 (
{/* Your app code here */}
);
}
```
> Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application.
## Activer des moyens de paiement
Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) 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* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method).
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](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons.
> 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é secrète d’un client de la session Client, et l’autre pour créer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) afin d’enregistrer un nouveau moyen de paiement dans l’objet [Customer](https://docs.stripe.com/api/customers.md).
1. Créez un endpoint pour renvoyer un ID de [client](https://docs.stripe.com/api/customers.md) et une clé secrète du client de [CustomerSession](https://docs.stripe.com/api/customer_sessions.md).
#### curl
```bash
# 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 <>: \
-X "POST"
curl https://api.stripe.com/v1/customer_sessions \
-u <>: \
-X "POST" \
-d "customer"="{{CUSTOMER_ID}}" \
-d "components[customer_sheet][enabled]"=true \
-d "components[customer_sheet][features][payment_method_remove]"=enabled
```
> 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](https://docs.stripe.com/api/customer_sessions.md).
1. Créez un endpoint pour renvoyer un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) configuré avec l’ID du [Client](https://docs.stripe.com/api/customers.md).
#### curl
```bash
# 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 <>: \
-X "POST"
curl https://api.stripe.com/v1/setup_intents \
-u <>: \
-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](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-usage) sur *on\_session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) pour améliorer les taux d’autorisation.
## Initialiser la fiche
Créez un objet `ClientSecretProvider` qui implémente deux méthodes.`CustomerSheet` requiert qu’il communique avec Stripe en utilisant les objets `CustomerSession` et les endpoints que vous avez créés précédemment.
```jsx
import {ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native';
const clientSecretProvider: ClientSecretProvider = {
// Must return an object with customerId and clientSecret
async provideCustomerSessionClientSecret(): Promise {
const result = await MyBackend.createCustomerSession();
return {
customerId: result.customer,
clientSecret: result.customerSessionClientSecret,
};
},
// Must return a string
async provideSetupIntentClientSecret(): Promise {
const result = await MyBackend.createSetupIntent();
return result.setupIntent;
}
};
```
Ensuite, configurez la feuille des paramètres des moyens de paiement à l’aide de la classe `CustomerSheet` en fournissant les paramètres souhaités à `CustomerSheet.initialize`.
```jsx
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://',
});
```
## Présenter la fiche
#### Fonctionnels
Présentez la feuille des paramètres des moyens de paiement en utilisant `CustomerSheet`. Lorsque le client ferme la feuille, la promesse est résolue avec un `CustomerSheetResult`.
#### Utilisation directe des fonctions
```jsx
import {CustomerSheet} from '@stripe/stripe-react-native';
const {error, paymentOption, paymentMethod} = await CustomerSheet.present();
if (error) {
if (error.code === CustomerSheetError.Canceled) {
// Customer dismissed the sheet without changing their payment option
} else {
// Show the error in your UI
}
} else {
if (paymentOption) {
// Configure your UI based on the payment option
MyBackend.setDefaultPaymentMethod(paymentMethod.id);
}
if (paymentMethod) {
console.log(JSON.stringify(paymentMethod, null, 2));
}
}
```
- Si le client sélectionne un moyen de paiement, le résultat contient une `PaymentOption`. La valeur associée correspond au [PaymentOption](https://stripe.dev/stripe-react-native/api-reference/interfaces/PaymentSheet.PaymentOption.html) sélectionné, ou à `nil` si le client a supprimé le moyen de paiement précédemment sélectionné. Vous pouvez trouver les détails complets du moyen de paiement dans la propriété `paymentMethod`.
- Si le client annule la fiche, le résultat contient une valeur `error` avec `error.code === CustomerSheetError.Canceled`. Le moyen de paiement sélectionné ne change pas.
- Si une erreur se produit, les informations s’affichent dans `error`.
Découvrez comment [activer Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay)
#### Composant
Créez une variable d’état pour contrôler la présentation de la feuille de paramètres des moyens de paiement (`CustomerSheet`).
```jsx
import {CustomerSheet, ClientSecretProvider, CustomerSessionClientSecret} from '@stripe/stripe-react-native';
export default function MyScreen() {
const [customerSheetVisible, setCustomerSheetVisible] = React.useState(false);
const clientSecretProvider: ClientSecretProvider = {
async provideCustomerSessionClientSecret(): Promise {
const result = await MyBackend.createCustomerSession();
return {
customerId: result.customer,
clientSecret: result.customerSessionClientSecret,
};
},
async provideSetupIntentClientSecret(): Promise {
const result = await MyBackend.createSetupIntent();
return result.setupIntent;
}
};
return (
);
}
```
Ajoutez le composant `CustomerSheet.Component` à votre hiérarchie d’affichage.
```jsx
import { CustomerSheet } from '@stripe/stripe-react-native';
export default function MyScreen() {
const [customerSheetVisible, setCustomerSheetVisible] = React.useState(false);
const clientSecretProvider = /* defined above */;
return (
)
}
```
Utilisez le rappel `onResult` pour afficher le moyen de paiement sélectionné dans votre interface utilisateur :
```jsx
import {CustomerSheet} from '@stripe/stripe-react-native';
export default function MyScreen() {
const [customerSheetVisible, setCustomerSheetVisible] = React.useState(false);
const clientSecretProvider = /* defined above */;
return (
);
}
```
- Si le client sélectionne un moyen de paiement, le résultat contient une `PaymentOption`. La valeur associée correspond au [PaymentOption](https://stripe.dev/stripe-react-native/api-reference/interfaces/PaymentSheet.PaymentOption.html) sélectionné, ou à `nil` si le client a supprimé le moyen de paiement précédemment sélectionné. Vous pouvez trouver les détails complets du moyen de paiement dans la propriété `paymentMethod`.
- Si le client annule la fiche, le résultat contient une valeur `error` avec `error.code === CustomerSheetError.Canceled`. Le moyen de paiement sélectionné ne change pas.
- Si une erreur se produit, les informations s’affichent dans `error`.
Découvrez comment [activer Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios#ios-apple-pay)
## Optional: Activer les paiements ACH
Pour activer les paiements par prélèvement ACH : activez le moyen de paiement `US Bank Account` dans les paramètres du [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
## Optional: Ré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 `CustomerSheet.retrievePaymentOptionSelection()` après avoir initialisé la feuille.
```jsx
// Call CustomerSheet.initialize()
...
const {
error,
paymentOption,
paymentMethod,
} = await CustomerSheet.retrievePaymentOptionSelection();
```
## Optional: Personnaliser le formulaire
### Apparence
Personnalisez les couleurs, les polices et d’autres attributs d’apparence afin qu’ils correspondent à l’apparence de votre application à l’aide de l’[API appearance](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native).
### Informations de facturation par défaut
Pour définir des valeurs par défaut pour les détails de facturation collectés dans la feuille de paramètres des moyens de paiement, configurez la propriété `defaultBillingDetails`. La feuille de paramètres des moyens de paiement remplit ses champs avec les valeurs que vous avez fournies.
```jsx
await CustomerSheet.initialize({
// ...
defaultBillingDetails: {
email: 'foo@bar.com',
address: {
country: 'US',
},
},
});
```
### Collecte des informations de facturation
Utilisez `billingDetailsCollectionConfiguration` pour spécifier comment vous souhaitez collecter les détails de la facturation dans la feuille de paramètres des moyens de paiement.
Vous pouvez récupérer le nom, l’adresse e-mail, le numéro de téléphone et l’adresse de votre client.
Si vous n’avez pas l’intention de collecter les valeurs requises par le moyen de paiement, vous devez procéder comme suit :
1. Associez les valeurs qui ne sont pas collectées par la feuille des paramètres des moyens de paiement à la propriété `defaultBillingDetails`.
1. Définissez `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` sur `true`.
```jsx
await CustomerSheet.initialize({
// ...
defaultBillingDetails: {
email: 'foo@bar.com',
},
billingDetailsCollectionConfiguration: {
name: PaymentSheet.CollectionMode.ALWAYS,
email: PaymentSheet.CollectionMode.NEVER,
address: PaymentSheet.AddressCollectionMode.FULL,
attachDefaultsToPaymentMethod: true
},
});
```
> Consultez votre conseiller juridique au sujet des lois qui s’appliquent à la collecte d’informations. Ne collectez un numéro de téléphone que si vous en avez besoin pour une transaction.