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

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

Le Mobile Payment Element permet à vos utilisateurs de payer avec divers 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 personnalisés, 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 qui seront également affichés par le Mobile Payment Element. Le Dashboard Stripe permet également d’accéder à 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 le Mobile Payment Element. La configuration du Mobile Payment Element nécessite un travail de configuration supplémentaire, car les transactions avec les moyens de paiement personnalisés sont traitées et finalisées en dehors de Stripe.

Remarque

Lors de l’intégration avec un prestataire de services de paiement tiers, vous devez respecter les exigences légales en vigueur, y compris votre accord avec votre PSP, les lois applicables, etc.

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

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