Premiers pas avec les composants intégrés Connect

Stripe utilise une AccountSession pour exprimer votre intention de déléguer API accès à votre compte connecté.

L’API AccountSessions renvoie une clé secrète du client qui permet à un composant intégré d’accéder aux ressources d’un compte connecté comme si vous faisiez des appels à l’API pour ces derniers.

Créer une AccountSession Serveur

Votre application doit envoyer une demande à votre serveur pour obtenir la session de compte. Actuellement, seule l’inscription des comptes est prise en charge. Vous pouvez créer un endpoint sur votre serveur qui renvoie la clé secrète client à l’application :

require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: 
'{{CONNECTED_ACCOUNT_ID}}',
      components: {
        account_onboarding: {
          enabled: true,
          features: {
            # We recommend disabling authentication for a better user experience when possible
            disable_stripe_user_authentication: true,
          }
        }
      }
    })

    {
      client_secret: account_session[:client_secret]
    }.to_json
  rescue => error
    puts "An error occurred when calling the Stripe API to create an account session: #{error.message}";
    return [500, { error: error.message }.to_json]
  end
end

API Create Account Session

L’API Create Account Session détermine l’accès aux composants et aux fonctionnalités des composants intégrés Connect. Stripe applique ces paramètres à tous les composants correspondant à la session du compte. Si votre application prend en charge plusieurs rôles d’utilisateur, vérifiez que les composants et fonctionnalités activés pour cette session de compte correspondent au rôle de l’utilisateur actuel. Par exemple, vous pouvez activer la gestion des remboursements uniquement pour les administrateurs de votre site, mais pas pour les autres utilisateurs. Pour vérifier que les accès aux rôles d’utilisateur sont appliqués, vous devez mapper le rôle d’utilisateur de votre site aux composants de session de compte.

Installer le SDK StripeConnect Client

Le SDK iOS de Stripe est disponible en open source et fait l’objet d’une documentation complète. Il est également compatible avec les applications prenant en charge iOS 15 et les versions ultérieures.

Configurer l’autorisation de l’appareil photo Client-side

Le SDK iOS de Stripe Connect nécessite l’accès à l’appareil photo de l’appareil pour capturer des documents d’identité. Pour permettre à votre application de demander l’autorisation d’utiliser l’appareil photo :

1. Ouvrez le fichier Info.plist de votre projet dans Xcode.
2. Ajoutez la clé NSCameraUsageDescription.
3. Ajoutez une valeur de chaîne qui explique à vos utilisateurs pourquoi votre application nécessite des autorisations de caméra, par exemple :

Cette application utilise l’appareil photo pour prendre une photo de vos documents d’identité.

Consultez la documentation d’Apple pour en savoir plus sur la demande d’accès à l’appareil photo.

Initialiser EmbeddedComponentManager Client

Définissez votre clé publiable à l’aide de StripeAPI.shared et instanciez un EmbeddedComponentManager avec une fermeture qui récupère une clé secrète client en appelant le nouvel endpoint que vous avez créé sur votre serveur. Pour créer un composant, appelez la méthode create appropriée sur l’EmbeddedComponentManager que vous avez instancié plus tôt. Ceci renvoie un contrôleur que vous pouvez utiliser pour affichage dans l’application.

@_spi(PrivateBetaConnect)
import StripeConnect
import UIKit

class MyViewController: UIViewController {
    let errorView: UIView

    func fetchClientSecret() async -> String? {
        let url = URL(string: "https://{{YOUR_SERVER}}/account_session")!

        var request = URLRequest(url: url)
        request.httpMethod = "POST"

        do {
            // Fetch the AccountSession client secret
            let (data, _) = try await URLSession.shared.data(for: request)
            let json = try JSONSerialization.jsonObject(with: data) as? [String : Any]

            errorView.isHidden = true

            return json?["client_secret"] as? String
        } catch let error {
            // Handle errors on the client side here
            print("An error occurred: \(error)")
            errorView.isHidden = false
            return nil
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // This is your test publishable API key.
        STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
        let embeddedComponentManager = EmbeddedComponentManager(
            fetchClientSecret: fetchClientSecret
        )
        let controller = embeddedComponentManager.createAccountOnboardingController()
        controller.present(from: self)
    }
}

Voir la référence du code .

Personnaliser l’apparence des composants intégrés Connect

La boîte à outils de composants intégrés d’interface utilisateur Figma contient tous les composants, les modèles courants et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées sur votre site Web.

Nous proposons un ensemble d’options permettant de personnaliser l’apparence des composants intégrés Connect. Ces personnalisations affectent les boutons, les icônes et d’autres accents de notre système de conception.

Vous pouvez définir ces options à l’aide de EmbeddedComponentManager.Appearance lors de l’initialisation de EmbeddedComponentManager.

func fetchClientSecret() async -> String? {
    let url = URL(string: "https://{{YOUR_SERVER}}/account_session")!

    var request = URLRequest(url: url)
    request.httpMethod = "POST"

    do {
        let (data, _) = try await URLSession.shared.data(for: request)
        let json = try JSONSerialization.jsonObject(with: data) as? [String : Any]

        return json?["client_secret"] as? String
    } catch {
        return nil
    }
}

// Specify custom fonts
var customFonts: [CustomFontSource] = []
let myFont = UIFont(name: "My Font", size: 16)!
let fontUrl = Bundle.main.url(forResource: "my-font-2", withExtension: "woff")!
do {
    let customFontSource = try CustomFontSource(font: myFont, fileUrl: fontUrl)
    customFonts.append(customFontSource)
} catch {
    print("Error loading custom font: \(error)")
}

// Customize appearance
var appearance = EmbeddedComponentManager.Appearance()
appearance.typography.fontfont.base = myFont
appearance.typography.fontSizeBase = 16 // Unscaled font size
appearance.colors.primary = UIColor { traitCollection in
    if traitCollection.userInterfaceStyle == .dark {
        UIColor(red: 0.455, green: 0.424, blue: 1.000, alpha: 1.0)
    } else {
        UIColor(red: 0.404, green: 0.365, blue: 1.000, alpha: 1.0)
    }
}

STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
let embeddedComponentManager = EmbeddedComponentManager(
    appearance: appearance,
    fonts: customFonts,
    fetchClientSecret: fetchClientSecret
)

Les couleurs d’apparence faisant appel à des fournisseurs dynamiques sont automatiquement appliquées au composant Connect Embedded lorsque son UITraitCollection est mis à jour. Cela comprend le mode sombre et le contraste d’accessibilité. L’apparence par défaut n’inclut pas les couleurs du mode sombre, vous devez donc spécifier une apparence avec des couleurs dynamiques dans le EmbeddedComponentManager pour prendre en charge le mode sombre dans votre application.

Lorsque vous spécifiez des tailles de police, utilisez la taille de police non mise à l’échelle qui s’affiche pour la classe de taille par défaut de l’appareil. Le composant intégré met automatiquement à l’échelle la taille de la police en fonction de son UITraitCollection.

Consultez la liste complète des options d’apparence sur iOS.

Utiliser des polices personnalisées

Si vous utilisez des polices personnalisées dans votre application (par exemple, à partir de fichiers .otf ou .tff intégrés au fichier binaire de votre application), vous devez spécifier les fichiers de polices dans un CustomFontSource transmis à l’argument fonts lors de l’initialisation de EmbeddedComponentManager. Cela permet aux composants Connect intégrés d’accéder aux fichiers de polices pour afficher correctement les polices.

Les polices spécifiées dans appearance doivent utiliser une police système prise en charge ou une CustomFontSource transmise à EmbeddedComponentManager lors de l’initialisation pour un rendu correct.

Voir la documentation de référence .

Mise à jour des composants intégrés de Connect après l’initialisation

Appelez la méthode update pour modifier l’apparence des composants intégrés après l’initialisation :

var appearance = EmbeddedComponentManager.Appearance()
appearance.colors.primary = UIColor.red

manager.update(appearance: appearance)