Empieza a usar los componentes integrados de Connect

Stripe utiliza una AccountSession para expresar tu intención de delegar el acceso a la API a tu cuenta conectada.

La API de AccountSessions devuelve un secreto de cliente que permite que un componente integrado acceda a los recursos de una cuenta conectada como si estuvieras haciendo las llamadas a la API para ellos.

Crea una AccountSession Servidor

La aplicación debe iniciar una solicitud a tu servidor para obtener la sesión de la cuenta. Actualmente, solo se admite el onboarding de cuentas. Puedes crear un nuevo punto de conexión en tu servidor que devuelva el secreto de cliente a la aplicación:

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

Crear una API Account Session

La API Create Account Session determina el acceso a los componentes y funciones para los componentes integrados de Connect. Stripe aplica estos parámetros para cualquier componente que corresponda a la sesión de la cuenta. Si tu aplicación acepta varios roles de usuario, asegúrate de que los componentes y las funciones que están habilitados para esa sesión de cuenta correspondan al rol del usuario actual. Por ejemplo, puedes habilitar la gestión de reembolsos solo para los administradores de tu sitio, pero no para otros usuarios. Para asegurarse de que se aplica el acceso a la función de usuario, debes asignar la función de usuario de tu sitio a los componentes de la sesión de la cuenta.

Instala el SDK de StripeConnect Client

El SDK para iOS de Stripe es de código abierto, está plenamente documentado y es compatible con aplicaciones que admiten iOS 15 o posterior.

Configurar la autorización de la cámara Client-side

El SDK para iOS de Stripe Connect necesita acceso a la cámara del dispositivo para capturar documentos de identidad. Para permitir que tu aplicación solicite permisos de cámara, haz lo siguiente:

1. Abre la Info.plist de tu proyecto en Xcode.
2. Añade la clave NSCameraUsageDescription.
3. Añade un valor de cadena que explique a los usuarios por qué la aplicación requiere permisos de cámara, por ejemplo:

Esta aplicación utiliza la cámara para hacer una foto de tus documentos de identidad.

Consulta la documentación de Apple para obtener más información sobre cómo solicitar la autorización de la cámara.

Inicializa EmbeddedComponentManager Client

Establece tu clave publicable usando StripeAPI.shared y crea una instancia de EmbeddedComponentManager con un cierre que recupere el secreto de cliente llamando al nuevo punto de conexión que hayas creado en tu servidor. Para crear un componente, llama al método correspondiente en el EmbeddedComponentManager para el que creaste una instancia anteriormente. Esto devuelve un controlador que puedes usar para presentarlo en la aplicación.

@_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 la referencia de código .

Personaliza el aspecto de los componentes integrados de Connect

El conjunto de herramientas de interfaz de usuario Figma para componentes incorporados contiene todos los componentes, patrones comunes y una aplicación de ejemplo. Puedes usarlo para visualizar y diseñar interfaces de usuario integradas en tu sitio web.

Ofrecemos un conjunto de opciones para personalizar el aspecto de los componentes integrados de Connect. Estas personalizaciones afectan los botones, los iconos y otros acentos de nuestro sistema de diseño.

Puedes configurar estas opciones usando EmbeddedComponentManager.Appearance al inicializar 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
)

Los colores de apariencia que utilizan proveedores dinámicos se aplican automáticamente al componente integrado de Connect cuando se actualiza su UITraitCollection, incluyendo el modo oscuro y el contraste de accesibilidad. La apariencia predeterminada no incluye colores en modo oscuro; por lo tanto, debes especificar una apariencia con colores dinámicos en EmbeddedComponentManager para aceptar el modo oscuro en tu aplicación.

Al especificar los tamaños de fuente, usa el tamaño de fuente sin escalar que se muestra para la clase de tamaño predeterminada del dispositivo. El componente integrado escala automáticamente el tamaño de la fuente en función de su UITraitCollection.

Consulta la lista completa de opciones de apariencia en iOS.

Usar fuentes personalizadas

Si usas fuentes personalizadas en tu aplicación (por ejemplo, de archivos .otf o .tff integrados en el binario de tu aplicación), debes especificar los archivos de fuentes en un CustomFontSource pasado al argumento fonts al inicializar EmbeddedComponentManager. Esto permite que los componentes integrados de Connect accedan a los archivos de fuentes para renderizarlas correctamente.

Las fuentes especificadas en appearance deben usar una fuente de sistema compatible o una CustomFontSource especificada en EmbeddedComponentManager en la inicialización para renderizarse correctamente.

Consulta la documentación de referencia .

Actualiza los componentes integrados de Connect después de la inicialización

Llama al método update para cambiar la apariencia de los componentes integrados después de la inicialización:

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

manager.update(appearance: appearance)