Ajouter des moyens de paiement personnalisésVersion bêta publique

Ajoutez des moyens de paiement personnalisés à Mobile Payment Element.

Les Payments dans l’application permettent à vos utilisateurs de payer avec de nombreux moyens de paiement par le biais d’une seule intégration. Utilisez des moyens de paiement personnalisés si vous avez besoin d’afficher des moyens de paiement supplémentaires qui ne sont pas traités par Stripe. Si vous utilisez des moyens de paiement Custom, vous pouvez éventuellement enregistrer les achats traités en dehors de Stripe sur votre compte Stripe à des fins de reporting.

Pour configurer un moyen de paiement personnalisé, créez-le dans votre Dashboard Stripe, et fournissez un nom d’affichage et une icône que les Payments dans l’application affichent également. Le Dashboard Stripe donne également accès à plus de 50 moyens de paiement personnalisés prédéfinis. Après avoir créé le moyen de paiement, suivez le guide ci-dessous pour configurer les Payments dans l’application. La configuration des Paiements dans l’application nécessite un travail de configuration supplémentaire car les transactions des moyens de paiement personnalisés se traitent et se finalisent en dehors de Stripe.

Remarque

When integrating with a third-party payment processor, you’re responsible for complying with applicable legal requirements, including your agreement with your PSP, applicable laws, and so on.

Avant de commencer

Créez un compte Stripe ou connectez-vous.
Suivez l’exemple de Payment Sheet pour effectuer une intégration des paiements.

Créer votre moyen de paiement personnalisé dans le Dashboard
Dashboard

Pour accéder à la page des moyens de paiement personnalisés, cliquez sur Paramètres > Paiements > Moyens de paiement personnalisés. Créez un nouveau moyen de paiement personnalisé et indiquez le nom d’affichage et le logo que le Payment Element doit afficher.

Choisir le bon logo

Si vous fournissez un logo avec un arrière-plan transparent, tenez compte de la couleur d’arrière-plan du Payment Element sur votre page et veillez à ce qu’il s’affiche clairement.
Si vous fournissez un logo avec un arrière-plan rempli, fournissez des coins arrondis dans votre fichier, car nous ne les fournirons pas.
Choisissez une variante de logo qui peut être réduite à 16 × 16 pixels. Il s’agit souvent du logo autonome d’une marque.

Après avoir créé le moyen de paiement personnalisé, le Dashboard affiche l’identifiant du moyen de paiement personnalisé (commençant par cpmt_) requis à l’étape 2.

Ajouter des types de moyens de paiement personnalisés

Lorsque vous créez votre objet PaymentSheet.Configuration et initialisez PaymentSheet, spécifiez les moyens de paiement personnalisés à ajouter au composant Mobile Payment Element ainsi qu’un gestionnaire pour effectuer le paiement.

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

class MyCheckoutVC: UIViewController {
  func setUpPaymentSheet() {
      // ...
      var configuration = PaymentSheet.Configuration()
      let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                            subtitle: "Optional subtitle")
      configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                             customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
      // ...
  }

  func handleCustomPaymentMethod(
        _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> PaymentSheetResult {
      // ...explained in the next step
  }
}

Finaliser le paiement

Lorsque le client appuie sur le bouton Payer dans le formulaire de paiement à l’aide d’un moyen de paiement personnalisé, il appelle le gestionnaire avec le moyen de paiement personnalisé et toutes les informations de facturation que vous avez collectées.

Votre implémentation effectue le paiement (par exemple, à l’aide du SDK de votre fournisseur de moyen de paiement personnalisé) et renvoie la fonction avec le résultat du paiement : completed, canceled ou failure(error:).

Si vous transmettez .failure(error:), le formulaire de paiement affiche errorDescription pour les erreurs Swift et localizedDescription pour les erreurs NSError.

import StripePaymentSheet

class MyCheckoutVC: UIViewController {
    func setUpPaymentSheet() {
        // ...
        var configuration = PaymentSheet.Configuration()
        let customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                              subtitle: "Optional subtitle")
        configuration.customPaymentMethodConfiguration = .init(customPaymentMethods: [customPaymentMethod],
                                                              customPaymentMethodConfirmHandler: handleCustomPaymentMethod(_:_:))
        // ...
    }

    func handleCustomPaymentMethod(
          _ customPaymentMethodType: PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod,
          _ billingDetails: STPPaymentMethodBillingDetails
     ) async -> PaymentSheetResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // Note you can present on top of PaymentSheet by using the `self.presentedViewController`.
        // This example code just immediately fails:
        let exampleError = NSError(domain: "MyErrorDomain", code: 0, userInfo: [NSLocalizedDescriptionKey: "Failed to complete payment!"])
        return .failed(error: exampleError)
    }
}

FacultatifIndiquer l'ordre des moyens de paiement personnalisés

Les moyens de paiement personnalisés ne sont pas classés selon la logique de classement intelligente de Stripe, car Stripe ne dispose d’aucun contexte pour ces derniers. Par défaut, ils apparaissent après les moyens de paiement pris en charge par Stripe. Définissez PaymentSheet.Configuration.paymentMethodOrder pour positionner explicitement le moyen de paiement personnalisé dans le composant Mobile Payment Element. Nous classons toujours les moyens de paiement pris en charge par Stripe de façon intelligente en fonction du moyen de paiement personnalisé.

var configuration = PaymentSheet.Configuration()
// Show cards first, followed by cpmt_, followed by all other payment methods
configuration.paymentMethodOrder = ["card", "cpmt_..."]

Collecter les informations de facturation

Vous pouvez recueillir les informations de facturation à l’aide de billingDetailsCollectionConfiguration sur la configuration de la Payment Sheet. Toutefois, les moyens de paiement personnalisés ne recueillent pas les informations de facturation par défaut. Pour activer la collecte des informations de facturation, définissez disableBillingDetailCollection sur false dans votre CustomPaymentMethod.

var customPaymentMethod = PaymentSheet.CustomPaymentMethodConfiguration.CustomPaymentMethod(id: "cpmt_...",
                                                                                                      subtitle: "Optional subtitle")
customPaymentMethod.disableBillingDetailCollection = false

Le lien « Clés API » s’ouvre ici en mode production.

Passez en revue votre tunnel de paiement et vérifiez que le Mobile Payment Element affiche votre moyen de paiement personnalisé. Dans cet exemple, votre moyen de paiement personnalisé est configuré en deuxième position après les cartes.
Choisissez votre moyen de paiement personnalisé.
Cliquez sur Payer pour tester l’intégration de votre moyen de paiement personnalisé. Vérifiez que votre intégration mène à bien la transaction et que toute action postérieure au paiement (par exemple, l’affichage d’une page de confirmation ou d’un message de réussite ou d’échec) fonctionne toujours avec l’intégration de votre moyen de paiement personnalisé.