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: {
            # Authentication must be disabled for the mobile SDK
            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

The Create Account Session API determines component and feature access for Connect embedded components. Stripe enforces these parameters for any components that correspond to the account session. If your app supports multiple user roles, make sure components and features that are enabled for that account session correspond to the current user’s role. For example, you can enable refund management only for administrators of your site, but not for other users. To make sure user role access are enforced, you must map your site’s user role to account session components.

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

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

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

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

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

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

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

Initialize EmbeddedComponentManager クライアント

Set your publishable key using StripeAPI.shared and instantiate an EmbeddedComponentManager with a closure that retrieves a client secret by calling the new endpoint you created on your server. To create a component, call the appropriate create method on the EmbeddedComponentManager that you instantiated above. This returns a controller that you can use to present it in the 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)
    }
}

サポートされている埋め込みコンポーネントの一覧を参照 →

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

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
)

Use custom fonts

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

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

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

Configure appearance

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

When specifying font sizes, use the unscaled font size that displays for the device’s default size class. The embedded component automatically scales the font size based on its UITraitCollection.

See the full list of appearance options on iOS.

Update Connect embedded components after initialization

Call the update method to change the appearance of the embedded components after initialization:

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

manager.update(appearance: appearance)