Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
Aperçu
À propos des paiements Stripe
Mettre votre intégration à niveau
Analyses des paiements
Paiements en ligne
PrésentationTrouver votre cas d'usageManaged Payments
Utiliser Payment Links
Créer une page de paiement
Développer une intégration avancée
Développer une intégration dans l'application
    Présentation
    Payment Sheet
    Composant Payment Element intégré
      Accepter des paiements dans l'application
      Personnaliser l'apparence
      Ajouter des moyens de paiement personnalisés
      Filtrer par marque de carte bancaire
    Utiliser les redirections pour les achats intégrés à l'application
    Collecter les adresses
    Cartes bancaires américaines et canadiennes
Moyens de paiement
Ajouter des moyens de paiement
Gérer les moyens de paiement
Paiement accéléré avec Link
Interfaces de paiement
Payment Links
Checkout
Elements pour le web
Elements intégrés à l'application
Scénarios de paiement
Gérer plusieurs devises
Tunnels de paiement personnalisés
Acquisition flexible
Orchestration
Paiements par TPE
Terminal
Au-delà des paiements
Constituez votre entreprise
Cryptomonnaies
Financial Connections
Climate
AccueilPaiementsBuild an in-app integrationEmbedded Payment Element

Accepter les paiements dans l’application

Créez une intégration de paiement personnalisée dans votre application iOS, Android ou React Native à l'aide du Payment Element intégré.

Le Payment Element intégré est un composant personnalisable qui affiche une liste de moyens de paiement que vous pouvez ajouter à n’importe quel écran de votre application. Lorsque les clients interagissent avec les moyens de paiement de la liste, le composant ouvre des feuilles inférieures individuelles pour collecter les informations de paiement.

Un flux PaymentIntent vous permet de créer un paiement dans votre application. Dans cette intégration, vous affichez le Payment Element intégré, créez un PaymentIntent et confirmez un paiement dans votre application.

Configurer Stripe
Côté serveur
Côté client

Côté serveur

Cette intégration exige que votre serveur dispose de endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur :

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Côté client

Le SDK iOS de Stripe est disponible en open source et fait l’objet d’une documentation complète. Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures.

Pour installer le SDK, veuillez suivre les étapes ci-dessous :

  1. Dans Xcode, sélectionnez File > Add Package Dependencies… puis saisissez https://github.com/stripe/stripe-ios-spm en tant qu’URL du référentiel.
  2. Sélectionnez le dernier numéro de version, visible sur notre page des versions.
  3. Ajoutez le produit StripePaymentSheet à la cible de votre application.

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 recevoir une notification lors de la publication d’une nouvelle version, surveillez les versions à partir du référentiel.

Vous devez également définir votre clé publique pour que le SDK puisse effectuer des appels à l’API Stripe. Pour commencer, vous pouvez coder en dur la clé publique côté client pendant l’intégration, mais la récupérer sur votre serveur en mode production.

// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys STPAPIClient.shared.publishableKey =
"pk_test_TYooMQauvdEDq54NiTphI7jx"

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 PaymentIntent.

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.

Collecter les informations de paiement
Côté client

Le composant Embedded Mobile Payment Element est conçu pour être placé sur la page de paiement de votre application mobile native. L’élément affiche une liste de moyens de paiement que vous pouvez personnaliser pour l’adapter à l’apparence de votre application.

Lorsque le client appuie sur la ligne Carte bancaire, un formulaire s’ouvre dans lequel il peut saisir les informations de son moyen de paiement. Par défaut, le bouton du formulaire indique Continuer et déclenche la fermeture du formulaire, ce qui permet à votre client de finaliser le paiement dans votre système de paiement.

Embedded Payment Element

Vous pouvez également configurer le bouton pour qu’il termine immédiatement le processus de paiement au lieu de continuer. Pour ce faire, effectuez cette étape après avoir suivi le guide.

Initialiser le composant Embedded Payment Element

Appelez create pour instancier EmbeddedPaymentElement avec un EmbeddedPaymentElement.Configuration et un PaymentSheet.IntentConfiguration.

L’objet Configuration contient des options de configuration à usage général pour EmbeddedPaymentElement qui ne changent pas d’un paiement à l’autre, comme returnURL. L’objet IntentConfiguration contient des informations sur le paiement concerné, comme son montant et sa devise, ainsi qu’un rappel confirmHandler. Pour l’instant, laissez son implémentation vide. Une fois l’opération correctement initialisée, définissez ses propriétés presentingViewController et delegate.

import StripePaymentSheet class MyCheckoutVC: UIViewController { func createEmbeddedPaymentElement() async throws -> EmbeddedPaymentElement { let intentConfig = PaymentSheet.IntentConfiguration( mode: .payment(amount: 1099, currency: "USD") ) { [weak self] _, _, intentCreationCallback in self?.handleConfirm(intentCreationCallback) } var configuration = EmbeddedPaymentElement.Configuration() configuration.returnURL = "your-app://stripe-redirect" // Use the return url you set up in the previous step let embeddedPaymentElement = try await EmbeddedPaymentElement.create(intentConfiguration: intentConfig, configuration: configuration) embeddedPaymentElement.presentingViewController = self embeddedPaymentElement.delegate = self return embeddedPaymentElement } func handleConfirm(_ intentCreationCallback: @escaping (Result<String, Error>) -> Void) { // ...explained later } }

Ajouter la vue Embedded Payment Element

Une fois EmbeddedPaymentElement initialisé, placez sa vue dans l’interface utilisateur de votre page de paiement.

Remarque

La vue doit être contenue dans une UIScrollView ou une autre vue déroulable. En effet, la vue n’a pas de taille fixe et peut changer de hauteur après le rendu initial.

class MyCheckoutVC: UIViewController { // ... private(set) var embeddedPaymentElement: EmbeddedPaymentElement? private lazy var checkoutButton: UIButton = { let checkoutButton = UIButton(type: .system) checkoutButton.backgroundColor = .systemBlue checkoutButton.layer.cornerRadius = 5.0 checkoutButton.clipsToBounds = true checkoutButton.setTitle("Checkout", for: .normal) checkoutButton.setTitleColor(.white, for: .normal) checkoutButton.translatesAutoresizingMaskIntoConstraints = false checkoutButton.isEnabled = embeddedPaymentElement?.paymentOption != nil checkoutButton.addTarget(self, action: #selector(didTapConfirmButton), for: .touchUpInside) return checkoutButton }() // ... @objc func didTapConfirmButton() { // ...explained later } override func viewDidLoad() { super.viewDidLoad() Task { @MainActor in do { // Create a UIScrollView let scrollView = UIScrollView() scrollView.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(scrollView) // Create the Mobile Embedded Payment Element let embeddedPaymentElement = try await createEmbeddedPaymentElement() embeddedPaymentElement.delegate = self embeddedPaymentElement.presentingViewController = self self.embeddedPaymentElement = embeddedPaymentElement // Add its view to the scroll view scrollView.addSubview(embeddedPaymentElement.view) // Add your own checkout button to the scroll view scrollView.addSubview(checkoutButton) // Set up layout constraints embeddedPaymentElement.view.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor), scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor), scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor), scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor), embeddedPaymentElement.view.topAnchor.constraint(equalTo: scrollView.topAnchor), embeddedPaymentElement.view.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor), embeddedPaymentElement.view.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor), checkoutButton.topAnchor.constraint(equalTo: embeddedPaymentElement.view.bottomAnchor, constant: 4.0), checkoutButton.leadingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.leadingAnchor, constant: 4.0), checkoutButton.trailingAnchor.constraint(equalTo: scrollView.safeAreaLayoutGuide.trailingAnchor, constant: -4.0), ]) } catch { // handle view not being added to view } } } }

À ce stade, vous pouvez exécuter votre application et voir le composant Embedded Mobile Payment Element.

Gérer les changements de hauteur

La vue du EmbeddedPaymentElement peut croître ou diminuer, ce qui peut avoir un impact sur la présentation de la vue.

Gérez les changements de hauteur en implémentant la méthode déléguée embeddedPaymentElementDidUpdateHeight. La vue d’EmbeddedPaymentElement appelle cette méthode à l’intérieur d’un bloc d’animation qui met à jour sa hauteur. Votre implémentation doit appeler setNeedsLayout() et layoutIfNeeded() sur la vue de défilement qui contient la vue de l’EmbeddedPaymentElement pour permettre une animation fluide du changement de hauteur.

extension MyCheckoutVC: EmbeddedPaymentElementDelegate { func embeddedPaymentElementDidUpdateHeight(embeddedPaymentElement: StripePaymentSheet.EmbeddedPaymentElement) { // Handle layout appropriately self.view.setNeedsLayout() self.view.layoutIfNeeded() } }

Nous vous recommandons de vérifier que votre vue réagit correctement aux changements de hauteur. Pour ce faire, appelez testHeightChange() sur EmbeddedPaymentElement pour simuler l’affichage et le masquage d’un mandat dans l’élément. Assurez-vous qu’après avoir appelé testHeightChange(), votre vue de défilement s’ajuste correctement.

class MyCheckoutVC: UIViewController { override func viewDidLoad() { // This is only for testing purposes: #if DEBUG Timer.scheduledTimer(withTimeInterval: 5.0, repeats: true) { [weak self] _ in Task { @MainActor in self?.embeddedPaymentElement?.testHeightChange() } } #endif } }

Facultatif Afficher l’option de paiement sélectionnée

Si vous avez besoin d’accéder aux détails de l’option de paiement sélectionnée par le client, comme une étiquette (par exemple, « ····4242 »), une image (par exemple, un logo VISA) ou des détails de facturation à afficher dans votre interface utilisateur, utilisez la propriété paymentOption de EmbeddedPaymentElement.

Pour recevoir une notification à chaque modification de paymentOption, implémentez la méthode déléguée embeddedPaymentElementDidUpdatePaymentOption.

extension MyCheckoutVC: EmbeddedPaymentElementDelegate { func embeddedPaymentElementDidUpdatePaymentOption(embeddedPaymentElement: EmbeddedPaymentElement) { print("The payment option changed: \(embeddedPaymentElement.paymentOption)") checkoutButton.isEnabled = embeddedPaymentElement.paymentOption != nil } }

Facultatif Mettre à jour les informations de paiement

Lorsque le client effectue des actions qui modifient les informations de paiement (par exemple avec l’application d’un code de réduction), mettez à jour l’instance EmbeddedPaymentElement de manière à refléter les nouvelles valeurs en appelant la méthode update. Certains moyens de paiement, comme Apple Pay et Google Pay, affichent le montant dans l’interface utilisateur, alors assurez-vous qu’il est toujours exact et à jour.

Une fois l’appel de modification terminé, mettez à jour votre interface utilisateur. L’appel de modification peut mettre à jour l’option de paiement sélectionnée par le client.

extension MyCheckoutVC { func update() { Task { @MainActor in var updatedIntentConfig = oldIntentConfig // Update the amount to reflect the price after applying the discount code updatedIntentConfig.mode = PaymentSheet.IntentConfiguration.Mode.payment(amount: 999, currency: "USD") let result = await embeddedPaymentElement?.update(intentConfiguration: updatedIntentConfig) switch result { case .canceled, nil: // Do nothing; this happens when a subsequent `update` call cancels this one break case .failed(let error): // Display error to user in an alert, let users retry case .succeeded: // Update your UI in case the payment option changed } } } }

Confirmer le paiement

Lorsque le client appuie sur le bouton de paiement, appelez embeddedPaymentElement.confirm() pour mener à bien le paiement. Veillez à désactiver l’interaction avec l’utilisateur lors de la confirmation.

extension MyCheckoutVC { @objc func didTapConfirmButton() { Task { @MainActor in guard let embeddedPaymentElement else { return } self.view.isUserInteractionEnabled = false // Disable user interaction, show a spinner, and so on before calling confirm let result = await embeddedPaymentElement.confirm() switch result { case .completed: // Payment completed - show a confirmation screen. case .failed(let error): self.view.isUserInteractionEnabled = true // Encountered an unrecoverable error. You can display the error to the user, log it, etc. case .canceled: self.view.isUserInteractionEnabled = true // Customer canceled - you should probably do nothing. break } } } }

Ensuite, implémentez le rappel confirmHandler que vous avez précédemment transmis à PaymentSheet.IntentConfiguration pour envoyer une requête à votre serveur. Votre serveur crée un PaymentIntent et renvoie la clé secrète du client, comme expliqué à la section Créer un PaymentIntent.

Lorsque la requête est renvoyée, appelez le intentCreationCallback avec la clé secrète du client de votre réponse serveur ou une erreur. L’EmbeddedPaymentElement confirme le PaymentIntent à l’aide de la clé secrète du client ou affiche le message d’erreur localisé dans son interface utilisateur (soit errorDescription, soit localizedDescription). Une fois la confirmation effectuée, l’EmbeddedPaymentElement ne peut plus être utilisé. Redirigez plutôt l’utilisateur vers un écran de reçu ou une page de confirmation similaire.

extension MyCheckoutVC { func handleConfirm(_ intentCreationCallback: @escaping (Result<String, Error>)-> Void) { // Make a request to your own server and receive a client secret or an error. let myServerResponse: Result<String, Error> = ... switch myServerResponse { case .success(let clientSecret): // Call the `intentCreationCallback` with the client secret intentCreationCallback(.success(clientSecret)) case .failure(let error): // Call the `intentCreationCallback` with the error intentCreationCallback(.failure(error)) } } }

FacultatifDécocher l’option de paiement sélectionnée

FacultatifAfficher vous-même le mandat

FacultatifPermettre au client de payer immédiatement dans le formulaire

Créer un PaymentIntent
Côté serveur

Sur votre serveur, créez a PaymentIntent en indiquant un montant et une devise. Vous pouvez gérer les moyens de paiement depuis le Dashboard. Stripe gère le l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement. Pour éviter que des clients malveillants ne choisissent eux-mêmes leurs tarifs, décidez toujours du montant à débiter côté serveur (un environnement sécurisé) plutôt que côté client.

Si l’appel réussit, renvoyez la clé secrète du client du PaymentIntent. Si l’appel échoue, traitez l’erreur et renvoyez un message d’erreur avec une courte explication à l’intention de votre client.

Remarque

Vérifiez que toutes les propriétés de l’IntentConfiguration correspondent à votre PaymentIntent (par exemple, setup_future_usage, amount et currency).

main.rb
Ruby
require 'stripe' Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent' do data = JSON.parse request.body.read params = { amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, } begin intent = Stripe::PaymentIntent.create(params) {client_secret: intent.client_secret}.to_json rescue Stripe::StripeError => e {error: e.error.message}.to_json end end

Configurer une URL de redirection
Côté client

Le client peut quitter votre application pour s’authentifier (par exemple, dans Safari ou dans son application bancaire). Pour lui permettre de revenir automatiquement sur votre application après s’être authentifié, configurez un schéma d’URL personnalisé et configurez votre délégué d’application pour qu’il transmette l’URL au SDK. Stripe ne prend pas en charge les liens universels.

SceneDelegate.swift
Swift
// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } }

Paramétrez également l’URL de retour dans votre EmbeddedPaymentElement.Configuration sur l’URL de votre application.

var configuration = EmbeddedPaymentElement.Configuration() configuration.returnURL = "your-app://stripe-redirect"

Gérer les événements post-paiement
Côté serveur

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule et même intégration.

En plus de l’événement payment_intent.succeeded, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment :

ÉvénementDescriptionAction
payment_intent.succeededEnvoyé lorsqu’un client effectue un paiement avec succès.Envoyez au client une confirmation de commande et traitez sa commande.
payment_intent.processingEnvoyé lorsqu’un client initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie un prélèvement bancaire. Il est suivi par un événement payment_intent.succeeded ou payment_intent.payment_failed.Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, vous pourrez traiter la commande sans attendre que le paiement soit effectué.
payment_intent.payment_failedEnvoyé lorsqu’un client effectue une tentative de paiement qui se solde par un échec.Si un paiement passe de l’état processing à payment_failed, proposez au client de retenter le paiement.

Tester l'intégration

Numéro de carteScénarioMéthode de test
Le paiement par carte bancaire aboutit et ne nécessite pas d’authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Le paiement par carte bancaire requiert une authentification.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
La carte est refusée avec un code de refus de type insufficient_funds.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.
La carte UnionPay a un numéro d’une longueur variable, allant de 13 à 19 chiffres.Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte ainsi que la date d’expiration, le CVC et le code postal de votre choix.

Consultez la section consacrée aux tests pour obtenir des informations supplémentaires sur la manière de tester votre intégration.

FacultatifActiver les cartes sauvegardées
Côté serveur
Côté client

FacultatifAutoriser les moyens de paiement à notification différée
Côté client

FacultatifActiver Apple Pay

FacultatifActiver la numérisation de carte

FacultatifPersonnaliser l’élément

FacultatifActiver la collecte du CVC après confirmation

Cette page vous a-t-elle été utile ?
OuiNon
Besoin d'aide ? Contactez le service Support.
Rejoignez notre programme d'accès anticipé.
Consultez notre log des modifications.
Des questions ? Contactez l'équipe commerciale.
LLM ? Lire llms.txt.
Propulsé par Markdoc