Connect の埋め込みコンポーネントの使用を開始する

Stripe は AccountSession を使用して、API アクセスを連結アカウントに委任する意図を表します。

AccountSessions API は client secret を返し、連結アカウントに対して API コールを行うときと同じように、埋め込みコンポーネントが連結アカウントのリソースにアクセスできるようにします。

AccountSession を作成する サーバー

アプリは、アカウントセッションを取得するリクエストをサーバーに対して開始する必要があります。現在、アカウント登録のみがサポートされています。Client Secret をアプリに返す新しいエンドポイントをサーバー上に作成できます。

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

Create Account Session API

Create Account Session API は、Connect 埋め込みコンポーネントのコンポーネントと機能へのアクセスを決定します。Stripe は、アカウントセッションに対応するすべてのコンポーネントにこれらのパラメーターを適用します。アプリが複数のユーザーの役割をサポートしている場合は、そのアカウントセッションで有効になっているコンポーネントと機能が現在のユーザーの役割に対応していることを確認してください。たとえば、返金管理はサイトの管理者に対してのみ有効にでき、他のユーザーに対しては有効にできません。ユーザーの役割によるアクセスを確実に適用するには、サイトのユーザーの役割をアカウントセッションコンポーネントにマッピングする必要があります。

StripeConnect SDK をインストールする クライアント

Stripe iOS SDK はオープンソースです。詳細なドキュメントが提供されており、iOS 15 以降をサポートするアプリと互換性があります。

カメラ認証を設定する クライアント側

Stripe Connect iOS SDK では、本人確認書類をキャプチャーするためにデバイスのカメラにアクセスする必要があります。アプリからカメラへのアクセスの許可をリクエストできるようにするには、次の操作を行います。

1. Xcode で、プロジェクトの Info.plist を開きます。
2. NSCameraUsageDescription キーを追加します。
3. アプリにカメラへのアクセスの許可が必要な理由をユーザーに説明する文字列値を追加します。

このアプリは、カメラを使用して本人確認書類の写真を撮影します。

カメラ認証のリクエストについて、詳細は Apple のドキュメントを参照してください。

EmbeddedComponentManager を初期化する クライアント

StripeAPI.shared を使用して公開可能キーを設定し、サーバー上に作成した新しいエンドポイントを呼び出して client secret を取得するクロージャーで、EmbeddedComponentManager をインスタンス化します。コンポーネントを作成するには、上記でインスタンス化した EmbeddedComponentManager で適切な create メソッドを呼び出します。これにより、アプリでの表示に使用できるコントローラーが返されます。

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

コードリファレンスを参照してください。

Connect 埋め込みコンポーネントのデザインをカスタマイズする

埋め込みコンポーネント Figma UI ツールキットには、すべてのコンポーネント、一般的なパターン、サンプルアプリケーションが含まれています。これを使用して、ウェブサイトに埋め込まれた UI を可視化してデザインできます。

Stripe は、Connect 埋め込みコンポーネントのデザインをカスタマイズするための一連のオプションを提供しています。これらをカスタマイズすると、デザインシステムのボタン、アイコン、その他のアクセントに影響します。

これらのオプションは、EmbeddedComponentManager の初期化時に EmbeddedComponentManager.Appearance を使用して設定できます。

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
)

ダークモードやアクセシビリティコントラストなど、ダイナミックプロバイダーを使用したデザインの色は、UITraitCollection が更新されたときに Connect 埋め込みコンポーネントに自動的に適用されます。デフォルトのデザインにはダークモードの色は含まれていないため、アプリでダークモードを対応するには、EmbeddedComponentManager にダイナミックカラーを使用したデザインを指定する必要があります。

フォントサイズを指定する場合は、デバイスのデフォルトサイズクラスに表示される、拡大縮小されていないフォントサイズを使用します。埋め込みコンポーネントは、UITraitCollection に基づいてフォントサイズを自動的に拡大縮小します。

iOS のデザインオプションの一覧をご覧ください。

カスタムフォントを使用する

アプリでカスタムフォントを使用する場合 (たとえば、アプリのバイナリに埋め込まれた .otf ファイルや .tff ファイルなど)、EmbeddedComponentManager の初期化時に fonts 引数に渡される CustomFontSource でフォントファイルを指定する必要があります。そうすることで、Connect 埋め込みコンポーネントがフォントファイルにアクセスできるようになり、フォントを適切にレンダリングできます。

appearance で指定されたフォントは、正しくレンダリングされるように、サポートされているシステムフォントか、初期化時に EmbeddedComponentManager に渡される CustomFontSource のいずれかを使用する必要があります。

リファレンスドキュメントを参照してください。

初期化後に Connect 埋め込みコンポーネントを更新する

update メソッドを呼び出して、初期化後に埋め込みコンポーネントのデザインを変更します。

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

manager.update(appearance: appearance)