Mit den in Connect eingebetteten Komponenten loslegen

Stripe verwendet eine AccountSession, um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein Client-Geheimnis zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

AccountSession erstellen Server

Ihre App muss eine Anfrage an Ihren Server initiieren, um die Kontositzung zu erhalten. Derzeit wird nur das Konto-Onboarding unterstützt. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an die App zurückgibt:

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-Kontositzung erstellen

Die API zum Erstellen von Kontositzungen legt den Zugriff auf Komponenten und Funktionen für in Connect eingebettete Komponenten fest. Stripe erzwingt diese Parameter für alle Komponenten, die der Kontositzung entsprechen. Wenn Ihre App mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass die Komponenten und Funktionen, die für diese Kontositzung aktiviert sind, der Rolle des aktuellen Nutzers/der aktuellen Nutzerin entsprechen. Beispielsweise können Sie die Rückerstattungsverwaltung nur für Administratoren Ihrer Website, nicht aber für andere Nutzer/innen aktivieren. Um sicherzustellen, dass der Zugriff auf Nutzerrollen erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Kontositzungskomponenten zuordnen.

StripeConnect SDK installieren Client

Das Stripe iOS SDK ist Open Source, vollständig dokumentiert und kompatibel mit Apps, die iOS 15 oder höher unterstützen.

Kamerazugriff einrichten Client-side

Das Stripe-Connect iOS-SDK erfordert Zugriff auf die Kamera des Geräts, um Identitätsdokumente zu erfassen. So aktivieren Sie Ihre App, um Zugriffsberechtigungen für die Kamera anzufordern:

1. Öffnen Sie die Datei Info.plist Ihres Projekts in Xcode.
2. Fügen Sie den Schlüssel NSCameraUsageDescription hinzu.
3. Fügen Sie einen Zeichenfolgenwert hinzu, der Ihren Nutzern/Nutzerinnen den Grund für den erforderlichen Kamerazugriff erläutert. Beispiel:

Diese App verwendet Ihre Kamera, um ein Foto von Ihren Identitätsnachweisen zu machen.

Weitere Informationen zum Anfordern des Kamerazugriffs finden Sie in der Dokumentation von Apple.

EmbeddedComponentManager initialisieren Client

Legen Sie Ihren veröffentlichbaren Schlüssel mithilfe von StripeAPI.shared fest und instanziieren Sie einen EmbeddedComponentManager mit einem Closure, der ein Client-Geheimnis durch Aufrufen des neuen Endpoints abruft, den Sie auf Ihrem Server erstellt haben. Um eine Komponente zu erstellen, rufen Sie die entsprechende Erstellungsmethode für den EmbeddedComponentManager auf, den Sie oben instanziiert haben. Dadurch wird ein Controller zurückgegeben, mit dem Sie ihn in der App anzeigen können.

@_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)
    }
}

Siehe Codereferenz .

Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das Figma UI-Toolkit für eingebettete Komponenten enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine Reihe von Optionen, um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

Sie können diese Optionen mit EmbeddedComponentManager.Appearance festlegen, wenn Sie EmbeddedComponentManager initialisieren.

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
)

Darstellungsfarben, die dynamische Anbieter verwenden, werden automatisch auf die in Connect eingebettete Komponente angewendet, wenn deren UITraitCollection aktualisiert wird, einschließlich Dunkelmodus und Kontrast für Barrierefreiheit. Das Standarderscheinungsbild enthält keine Farben im Dunkelmodus, daher müssen Sie im EmbeddedComponentManager ein Erscheinungsbild mit dynamischen Farben angeben, um den Dunkelmodus in Ihrer App zu unterstützen.

Verwenden Sie beim Angeben von Schriftgrößen die nicht skalierte Schriftgröße, die für die Standardgrößenklasse des Geräts angezeigt wird. Die eingebettete Komponente skaliert die Schriftgröße automatisch basierend auf ihrer UITraitCollection.

Siehe die vollständige Liste der Erscheinungsbildoptionen auf iOS.

Nutzerdefinierte Schriftarten verwenden

Wenn Sie in Ihrer App nutzerdefinierte Schriftarten verwenden (z. B. aus .otf- oder .tff-Dateien, die in Ihre App-Binärdatei eingebettet sind), müssen Sie die Schriftartdateien in einer CustomFontSource angeben, die bei der Initialisierung von EmbeddedComponentManager an das Argument fonts übergeben wird. Dadurch erhalten die in Connect eingebetteten Komponenten Zugriff auf die Schriftdateien, um die Schriftarten ordnungsgemäß zu rendern.

Die in appearance angegebenen Schriftarten müssen entweder eine unterstützte Systemschriftart oder eine CustomFontSource verwenden, die bei der Initialisierung an den EmbeddedComponentManager übergeben wird, damit sie ordnungsgemäß gerendert werden.

Siehe Referenzdokumentation .

In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Rufen Sie die update-Methode auf, um das Erscheinungsbild der eingebetteten Komponenten nach der Initialisierung zu ändern:

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

manager.update(appearance: appearance)