Enregistrer les informations de paiement lors d'un paiement dans l'application

Tout d’abord, vous avez besoin d’un compte Stripe. Inscrivez-vous maintenant.

Côté serveur

Cette intégration nécessite des points de terminaison sur votre serveur qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre serveur :

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Côté client

La trousse SDK iOS de Stripe est à code source libre et possède une documentation complète. Il est également compatible avec les applications prenant en charge iOS 13 et les versions ultérieures.

Les paiements par carte sont activés par défaut. Affichez vos paramètres des moyens de paiement pour activer d’autres moyens de paiement que vous souhaitez prendre en charge.

Cette intégration utilise trois objets de l’API Stripe :

1. PaymentIntent : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

2. Client : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un client. Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client.

3. Clé éphémère du client : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Une clé éphémère permet d’accorder à la trousse SDK un accès temporaire à l’objet Customer.

Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui :

1. Récupère l’objet Customer ou en crée un nouveau.
2. Crée une clé éphémère pour l’objet Customer.
3. Création d’un PaymentIntent avec les paramètres amount, currency, customer et setup_future_usage . Vous pouvez également inclure le paramètre automatic_payment_methods. Stripe active sa fonctionnalité par défaut dans la dernière version de l’API.
4. Renvoi de la clé secrète du client du Payment Intent, de l’objet secret de la clé éphémère, de l’id du client et de votre clé publiable à votre application.

Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez eur dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements eur.

À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-05-28.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

Pour afficher le Mobile Payment Element dans votre page de paiement, assurez-vous d’effectuer ce qui suit :

• Afficher les produits achetés par le client ainsi que le montant total
• Utilisez Address Element pour collecter toutes les informations de livraison requises auprès du client.
• Ajouter un bouton de paiement pour afficher l’interface utilisateur de Stripe

import UIKit
import StripePaymentSheet

class CheckoutViewController: UIViewController {
  @IBOutlet weak var checkoutButton: UIButton!
  var paymentSheet: PaymentSheet?
  let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint

  override func viewDidLoad() {
    super.viewDidLoad()

    checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside)
    checkoutButton.isEnabled = false

    // MARK: Fetch the PaymentIntent client secret, Ephemeral Key secret, Customer ID, and publishable key
    var request = URLRequest(url: backendCheckoutUrl)
    request.httpMethod = "POST"
    let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in
      guard let data = data,
            let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any],
            let customerId = json["customer"] as? String,
            let customerEphemeralKeySecret = json["ephemeralKey"] as? String,
            let paymentIntentClientSecret = json["paymentIntent"] as? String,
            let publishableKey = json["publishableKey"] as? String,
            let self = self else {
        // Handle error
        return
      }

      STPAPIClient.shared.publishableKey = publishableKey
      // MARK: Create a PaymentSheet instance
      var configuration = PaymentSheet.Configuration()
      configuration.merchantDisplayName = "Example, Inc."
      configuration.customer = .init(id: customerId, ephemeralKeySecret: customerEphemeralKeySecret)
      // Set `allowsDelayedPaymentMethods` to true if your business handles
      // delayed notification payment methods like US bank accounts.
      configuration.allowsDelayedPaymentMethods = true
      self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration)

      DispatchQueue.main.async {
        self.checkoutButton.isEnabled = true
      }
    })
    task.resume()
  }

}

@objc
func didTapCheckoutButton() {
  // MARK: Start the checkout process
  paymentSheet?.present(from: self) { paymentResult in
    // MARK: Handle the payment result
    switch paymentResult {
    case .completed:
      print("Your order is confirmed")
    case .canceled:
      print("Canceled!")
    case .failed(let error):
      print("Payment failed: \(error)")
    }
  }
}

Si la valeur de PaymentSheetResult est .completed, informez l’utilisateur (par exemple, en affichant un écran de confirmation de commande).

Si vous définissez allowsDelayedPaymentMethods à true, les modes de paiement à notification différée, comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la PaymentSheet. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.

Le client peut être amené à 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 à la trousse SDK. Stripe ne prend pas en charge les liens universels.

// 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
    }
}

Définissez également le paramètre returnURL correspondant à votre objet PaymentSheet.Configuration sur l’URL de votre application.

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

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

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient 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 intégration.

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

Au moment de débiter votre client hors session, utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple répertorie des cartes, mais vous pouvez répertorier n’importe quel type de carte pris en charge.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session :

• Définissez l’attribut off_session à true pour indiquer que le client ne se trouve pas dans votre flux de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement de paiement. Si un partenaire demande une authentification dans le flux de paiement, Stripe demandera une exemption en s’appuyant sur les informations utilisées par le client pendant une session précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut générer une erreur.
• Définissez la valeur true à la propriété confirm du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
• Définissez payment_method sur l’ID du PaymentMethod et customer sur l’ID du client.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true