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

Ajoutez des moyens de paiement personnalisés au 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

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 le guide d’acceptation des paiements dans l’application pour effectuer une intégration de paiement.

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 EmbeddedPaymentElement.Configuration et initialisez EmbeddedPaymentElement, précisez les moyens de paiement externes à ajouter au Payment Element ainsi qu’un gestionnaire pour effectuer le paiement.

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

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

Finaliser le paiement

Lorsque vous appelez confirm sur votre instance EmbeddedPaymentElement et que le client a sélectionné un moyen de paiement personnalisé, il appelle le gestionnaire avec le moyen de paiement personnalisé et utilise toutes les informations de facturation que vous avez collectées dans le formulaire.

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:).

@_spi(CustomPaymentMethodsBeta) import StripePaymentSheet

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

    func handleCustomPaymentMethod(
        _ customPaymentMethodType: EmbeddedPaymentElement.CustomPaymentMethodConfiguration.CustomPaymentMethod,
        _ billingDetails: STPPaymentMethodBillingDetails
    ) async -> EmbeddedPaymentElementResult {
        // Your implementation needs to complete the payment with the payment method provider
        // When the payment completes, cancels, or fails, return the result.
        // 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

La logique de classement intelligente de Stripe ne peut pas inclure les moyens de paiement personnalisés, car elle ne dispose d’aucun contexte pour ces derniers. Par défaut, ils apparaissent après les moyens de paiement pris en charge par Stripe. Pour positionner explicitement un moyen de paiement personnalisé dans le composant Mobile Payment Element, définissez EmbeddedPaymentElement.Configuration.paymentMethodOrder. 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 = EmbeddedPaymentElement.Configuration()
// Show cards first, followed by cpmt_, followed by all other payment methods
configuration.paymentMethodOrder = ["card", "cpmt_..."]

Collecter les informations de facturation

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

var customPaymentMethod = EmbeddedPaymentElement.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é.