Iniziare a utilizzare i componenti incorporati di Connect

Stripe utilizza un oggetto AccountSession per esprimere la tua intenzione di delegare l’accesso API al tuo account connesso.

L’API AccountSessions restituisce una chiave privata client che consente a un componente incorporato di accedere alle risorse di un account connesso come se facessi le chiamate API per suo conto.

Crea un oggetto AccountSession Server

L’app deve inviare una richiesta al server per ottenere la sessione dell’account. Al momento è supportata solo l’attivazione dell’account. Puoi creare un nuovo endpoint sul server che restituisce la chiave privata client all’app:

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

Creare l’API Account Session

L’API Create Account Session determina l’accesso ai componenti e alle funzioni per i componenti incorporati di Connect. Stripe applica questi parametri a tutti i componenti che corrispondono alla sessione dell’account. Se la tua app supporta più ruoli utente, assicurati che i componenti e le funzioni abilitati per la sessione dell’account corrispondano al ruolo dell’utente corrente. Ad esempio, puoi abilitare la gestione dei rimborsi solo per gli amministratori del tuo sito, ma non per gli altri utenti. Per assicurarti che l’accesso al ruolo utente sia applicato, devi associare il ruolo utente del tuo sito ai componenti della sessione dell’account.

Installa l’SDK di StripeConnect Client

L’SDK per iOS di Stripe è open source, completamente documentato e compatibile con le app che supportano iOS 15 o versioni successive.

Configura l’autorizzazione per la fotocamera lato client

L’SDK iOS di Stripe Connect richiede l’accesso alla fotocamera del dispositivo per acquisire i documenti di identità. Per fare in modo che la tua app richieda le autorizzazioni per la fotocamera:

1. Apri il file Info.plist del tuo progetto in Xcode.
2. Aggiungi la chiave NSCameraUsageDescription.
3. Aggiungi un valore stringa che spieghi agli utenti perché la tua app richiede le autorizzazioni per la fotocamera, ad esempio:

Questa app utilizza la fotocamera per scattare una foto dei tuoi documenti di identità.

Consulta la documentazione di Apple per ulteriori informazioni su come richiedere l’autorizzazione per la fotocamera.

Inizializza EmbeddedComponentManager Client

Imposta la tua chiave pubblicabile utilizzando StripeAPI.shared e crea un’istanza di EmbeddedComponentManager con una chiusura che recupera una chiave privata client chiamando il nuovo endpoint che hai creato sul tuo server. Per creare un componente, chiama il metodo di creazione appropriato di EmbeddedComponentManager per il quale hai creato un’istanza. Restituisce un controller che puoi usare per la presentazione nell’app.

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

Consulta il riferimento al codice .

Personalizzare l’aspetto dei componenti incorporati di Connect

Il toolkit Figma di componenti incorporati per personalizzare l’interfaccia utente contiene tutti i componenti, i pattern comuni e un’applicazione esemplificativa. Puoi utilizzarlo per visualizzare e progettare interfacce utente incorporate sul tuo sito web.

Offriamo una serie di opzioni per personalizzare l’aspetto dei componenti incorporati di Connect. Queste personalizzazioni influiscono su pulsanti, icone e altri elementi del nostro sistema di progettazione.

Puoi impostare queste opzioni utilizzando EmbeddedComponentManager.Appearance durante l’inizializzazione di 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
)

I colori dell’aspetto che utilizzano provider dinamici vengono applicati automaticamente al componente incorporato di Connect quando la relativa UITraitCollection viene aggiornata, incluse la modalità scura e il contrasto per l’accessibilità. L’aspetto predefinito non include i colori della modalità scura, quindi devi specificare un aspetto con colori dinamici in EmbeddedComponentManager per supportare la modalità scura nella tua app.

Quando specifichi le dimensioni dei caratteri, usa la dimensione dei caratteri non ridimensionata visualizzata per la classe di dimensioni predefinita del dispositivo. Il componente incorporato ridimensiona automaticamente la dimensione del carattere in base alla relativa UITraitCollection.

Consulta l’elenco completo delle opzioni di aspetto su iOS.

Usa font personalizzati

Se usi caratteri personalizzati nell’app (ad esempio, da file .otf o .tff incorporati nel file binario dell’app), devi specificare i file dei caratteri in un CustomFontSource specificato nell’argomento fonts durante l’inizializzazione di EmbeddedComponentManager. In questo modo, i componenti incorporati di Connect possono accedere ai file dei caratteri per visualizzarli correttamente.

Per una visualizzazione corretta, i font specificati in appearance devono utilizzare un font di sistema supportato o un CustomFontSource specificato nel parametro EmbeddedComponentManager al momento dell’inizializzazione.

Consulta la documentazione di riferimento .

Aggiornare i componenti incorporati di Connect dopo l’inizializzazione

Chiama il metodo update per modificare l’aspetto dei componenti incorporati dopo l’inizializzazione:

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

manager.update(appearance: appearance)