Mulai dengan komponen Connect yang disematkan

Stripe menggunakan AccountSession untuk mengekspresikan maksud Anda guna mendelegasikan akses API ke akun terhubung Anda.

AccountSessions API mengembalikan client secret yang memungkinkan komponen tersemat mengakses sumber daya akun terhubung seolah-olah Anda yang melakukan panggilan API untuk mereka.

Buat AccountSession Server

Aplikasi Anda harus memprakarsai permintaan ke server untuk memperoleh sesi akun. Saat ini, hanya Onboarding akun yang didukung. Anda dapat membuat endpoint baru pada server yang mengembalikan client secret ke aplikasi:

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

Buat Account Session API

Create Account Session API menentukan akses komponen dan fitur untuk komponen tersemat Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun. Jika aplikasi Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini. Misalnya, Anda dapat mengaktifkan manajemen pengembalian dana hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan akses peran pengguna diberlakukan, Anda harus memetakan peran pengguna situs ke komponen sesi akun.

Instal StripeConnect SDK Client

Stripe iOS SDK adalah sumber terbuka, yang didokumentasikan lengkap, dan kompatibel dengan aplikasi yang mendukung iOS 15 ke atas.

Siapkan otorisasi kamera Sisi client

Stripe Connect iOS SDK memerlukan akses ke kamera perangkat untuk mengambil dokumen identitas. Untuk mengaktifkan aplikasi Anda guna meminta izin kamera:

1. Buka Info.plist proyek Anda di Xcode.
2. Tambahkan kunci NSCameraUsageDescription.
3. Tambahkan nilai string yang menjelaskan kepada pengguna mengapa aplikasi Anda memerlukan izin kamera, sesuatu seperti:

Aplikasi ini menggunakan kamera untuk mengambil gambar dokumen identitas Anda.

Lihat dokumentasi Apple untuk mempelajari selengkapnya tentang meminta otorisasi kamera.

Inisialisasikan EmbeddedComponentManager Client

Atur kunci yang dapat dipublikasikan menggunakan StripeAPI.shared dan buat instance EmbeddedComponentManager dengan penutupan yang mengambil client secret dengan memanggil endpoint baru yang Anda buat pada server. Untuk membuat komponen, panggil metode buat yang sesuai pada instance EmbeddedComponentManager yang Anda buat di atas. Ini mengembalikan pengontrol yang dapat Anda gunakan untuk menyajikannya di aplikasi.

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

Lihat referensi kode .

Sesuaikan tampilan komponen tersemat Connect

Toolkit Figma UI komponen tersemat berisi setiap komponen, pola umum, dan contoh aplikasi. Anda dapat menggunakannya untuk memvisualisasikan serta mendesain UI yang disematkan pada situs web Anda.

Kami menawarkan serangkaian opsi untuk menyesuaikan tampilan dan cara kerja komponen tersemat Connect. Penyesuaian ini memengaruhi tombol, ikon, dan aksen lainnya di sistem desain kami.

Anda dapat mengatur opsi ini menggunakan EmbeddedComponentManager.Appearance ketika melakukan inisialisasi 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
)

Warna tampilan yang menggunakan penyedia dinamis secara otomatis diterapkan ke komponen tersemat Connect bila UITraitCollection diperbarui, termasuk Mode Gelap dan kontras aksesibilitas. Penampilan default tidak menyertakan warna mode gelap, jadi Anda harus menentukan penampilan dengan warna dinamis ke EmbeddedComponentManager untuk mendukung mode gelap di aplikasi.

Ketika menentukan ukuran font, gunakan ukuran font yang tidak diubah skalanya dan ditampilkan untuk kelas ukuran default perangkat. Komponen tersemat secara otomatis menskalakan ukuran font berdasarkan UITraitCollection.

Lihat daftar lengkap opsi penampilan di iOS.

Gunakan font custom

Jika menggunakan font custom di aplikasi (misalnya, dari file .otf atau .tff yang disematkan di biner aplikasi), Anda harus menentukan file font di CustomFontSource yang diteruskan ke argumen fonts ketika melakukan inisialisasi EmbeddedComponentManager. Hal ini memberi komponen tersemat Connect akses ke file font untuk merender font dengan benar.

Font yang ditentukan di appearance harus menggunakan font sistem yang didukung ataupun CustomFontSource yang diteruskan ke EmbeddedComponentManager pada inisialisasi untuk dirender dengan benar.

Lihat dokumentasi referensi .

Perbarui komponen tersemat Connect setelah inisialisasi

Panggil metode update untuk mengubah tampilan komponen tersemat setelah inisialisasi:

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

manager.update(appearance: appearance)