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

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

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 EmbeddedPaymentElement.Configuration et initialisez EmbeddedPaymentElement, spécifiez les moyens de paiement personnalisés à ajouter au composant Embedded Payment Element ainsi qu’un gestionnaire pour effectuer le paiement.

@_spi(EmbeddedPaymentElementPrivateBeta) @_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(EmbeddedPaymentElementPrivateBeta) @_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

Collecter les informations de facturation

Vous pouvez recueillir les informations de facturation à l’aide de billingDetailsCollectionConfiguration sur la configuration du composant Embedded Payment Element. 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 = 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é.