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

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

The Mobile Payment Element lets your users pay with many payment methods through a single integration. Use custom payment methods if you need to display additional payment methods that aren’t processed through Stripe. If you use custom payment methods, you can optionally record purchases processed outside of Stripe to your Stripe account for reporting purposes.

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Mobile Payment Element also displays. The Stripe Dashboard also provides access to over 50 preset custom payment methods. After you create the payment method, follow the guide below to configure the Mobile Payment Element. Setting up the Mobile Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of 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

If you provide a logo with a transparent background, consider the background color of the Payment Element on your page and make sure that it displays clearly.
If you provide a logo with a background fill, provide rounded corners in your file because we won’t provide them.
Choose a logo variant that can scale down to 16 pixels × 16 pixels. This is often the standalone logo mark for a brand.

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.

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