# Mulai dengan komponen Connect yang disematkan

Pelajari cara menyematkan fungsionalitas dashboard ke situs web Anda.

Gunakan komponen tersemat Connect untuk menambahkan fungsionalitas dashboard akun terhubung ke situs web Anda. Pustaka ini dan API pendukungnya memungkinkan Anda memberikan akses ke produk Stripe secara langsung di dashboard dan aplikasi seluler.

Untuk versi imersif panduan ini, lihat [mulai cepat integrasi komponen tersemat Connect](https://docs.stripe.com/connect/connect-embedded-components/quickstart.md). Anda juga dapat mengunduh sampel integrasi dari sana. Untuk menyesuaikan penampilan komponen tersemat Connect, gunakan opsi `appearance` saat Anda melakukan inisialisasi `StripeConnectInstance`. Lihat [daftar lengkap parameter penampilan](https://docs.stripe.com/connect/customize-connect-embedded-components.md).

## Lakukan inisialisasi Connect.js [Sisi klien] [Sisi server]

Stripe menggunakan [AccountSession](https://docs.stripe.com/api/account_sessions.md) untuk mengekspresikan maksud Anda guna mendelegasikan akses API ke akun terhubung Anda.

AccountSessions API mengembalikan *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang memungkinkan komponen tersemat mengakses sumber daya akun terhubung seolah-olah Anda yang melakukan panggilan API untuk mereka.

### Buat AccountSession (Server)

Di aplikasi satu halaman, client Anda memprakarsai permintaan untuk memperoleh sesi akun ke server. Anda dapat membuat endpoint baru pada server yang mengembalikan client secret ke browser:

#### Ruby

```ruby
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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.create({
      account: {{CONNECTED_ACCOUNT_ID}},
      components: {
        payments: {
          enabled: true,
          features: {
            refund_management: true,
            dispute_management: true,
            capture_payments: 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](https://docs.stripe.com/api/account_sessions/create.md) menentukan akses komponen dan fitur untuk komponen sematan Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun tersebut. Jika situs Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini.  Sebagai contoh, Anda dapat mengaktifkan [manajemen pengembalian dana](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan penegakan akses peran pengguna, Anda harus memetakan peran pengguna situs Anda ke komponen sesi akun.

### Siapkan Connect.js (Client)

Kami merekomendasikan penyiapan Connect.js dengan npm seperti yang ditampilkan dalam contoh berikut, tetapi juga dimungkinkan [tanpa npm](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#without-npm).

#### HTML+JS

Instal [paket npm](https://github.com/stripe/connect-js) untuk menggunakan Connect.js sebagai modul.

```bash
npm install --save @stripe/connect-js
```

#### React

Instal pustaka Connect.js dan React Connect.js dari [register publik npm](https://www.npmjs.com/package/@stripe/react-connect-js).

```bash
npm install --save @stripe/connect-js @stripe/react-connect-js
```

### Muat dan inisialisasikan Connect.js (Client)

Panggil `loadConnectAndInitialize` dengan kunci yang dapat dipublikasikan dan fungsi yang mengambil client secret dengan memanggil endpoint baru yang Anda buat pada server. Gunakan `StripeConnectInstance` yang dikembalikan untuk membuat komponen tersemat. Setelah melakukan inisialisasi Connect.js, Anda dapat memasang atau melepas komponen dari DOM kapan saja. Itu mencakup elemen yang ditampilkan di dalam portal React atau Vue.

#### HTML+JS

Untuk membuat komponen, panggil `create` pada `StripeConnectInstance` yang Anda buat di atas, kemudian teruskan nama komponen. Ini mengembalikan [elemen custom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) yang didaftarkan dan digunakan Connect.js untuk mengirim DOM Anda secara otomatis ke Stripe. Kemudian Anda dapat `append` elemen ini ke DOM.

Panggil `create` dengan `payments`, kemudian tambahkan hasil ke DOM Anda untuk menampilkan UI pembayaran.

#### React

Untuk menggunakan komponen tersemat Connect dengan pembungkus React, bungkus aplikasi Anda di `ConnectComponentsProvider` dan teruskan `StripeConnectInstance` yang sebelumnya Anda buat.

Gunakan `ConnectPayments` pada halaman Anda untuk menampilkan UI pembayaran.

#### HTML+JS

```html
<head>
  <script type="module" src="index.js" defer></script>
</head>
<body>
  <h1>Payments</h1>
  <div id="container"></div>
  <div id="error" hidden>Something went wrong!</div>
</body>
```

```javascript
import {loadConnectAndInitialize} from '@stripe/connect-js';

const fetchClientSecret = async () => {
  // Fetch the AccountSession client secret
  const response = await fetch('/account_session', { method: "POST" });
  if (!response.ok) {
    // Handle errors on the client side here
    const {error} = await response.json();
    console.error('An error occurred: ', error);
    document.querySelector('#error').removeAttribute('hidden');
    return undefined;
  } else {
    const {client_secret: clientSecret} = await response.json();
    document.querySelector('#error').setAttribute('hidden', '');
    return clientSecret;
  }
}

const stripeConnectInstance = loadConnectAndInitialize({
    // This is a placeholder - it should be replaced with your publishable 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.
    publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
    fetchClientSecret: fetchClientSecret,
  });
const paymentComponent = stripeConnectInstance.create("payments");
const container = document.getElementById("container");
container.appendChild(paymentComponent);
```

[Lihat daftar lengkap komponen tersemat yang didukung →](https://docs.stripe.com/connect/supported-embedded-components.md)

## Configure Connect.js [Sisi client]

Metode `loadConnectAndInitialize` pada client mengambil beberapa opsi berbeda untuk melakukan konfigurasi Connect.js.

| Opsi                | Keterangan                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |            |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `publishableKey`    | [Kunci yang dapat dipublikasikan](https://docs.stripe.com/keys.md) untuk integrasi Anda.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | diperlukan |
| `fetchClientSecret` | Fungsi yang mengambil *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang dikembalikan oleh `/v1/account_sessions`. Ini memberi tahu `StripeConnectInstance` akun mana yang akan didelegasikan aksesnya. Fungsi ini juga digunakan untuk mengambil fungsi client secret untuk memuat ulang sesi bila kedaluwarsa. `fetchClientSecret` harus selalu membuat sesi akun baru dan mengembalikan `client_secret` baru. | diperlukan |
| `appearance`        | Objek untuk menyesuaikan tampilan komponen tersemat Connect.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | opsional   |
| `locale`            | Parameter untuk menentukan [lokal](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) yang digunakan komponen tersemat Connect. Lokal default ke bahasa browser. Jika lokal yang ditentukan tidak didukung secara langsung, kami menggunakan alternatif yang sewajarnya (misalnya `fr-be` mungkin kembali menjadi `fr-fr`). Lihat [pelokalan](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#localization) untuk daftar lokal yang didukung.                                                             | opsional   |
| `fonts`             | Larik font custom yang tersedia untuk digunakan oleh komponen tersemat yang dibuat dari `StripeConnectInstance`. Anda dapat menentukan font sebagai objek [CssFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#css-font-source) atau [CustomFontSource](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#custom-font-source).                                                                                                                                                                              | opsional   |

### Sesuaikan tampilan komponen tersemat Connect

[Toolkit Figma UI komponen tersemat](https://www.figma.com/community/file/1438614134095442934) 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](https://docs.stripe.com/connect/embedded-appearance-options.md) untuk menyesuaikan tampilan dan cara kerja komponen tersemat Connect. Penyesuaian ini memengaruhi tombol, ikon, dan aksen lainnya di sistem desain kami.

> #### Popup yang diperlukan
> 
> Beberapa perilaku di komponen tersemat, seperti [autentikasi pengguna](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), harus disajikan di popup. Anda tidak dapat menyesuaikan komponen tersemat untuk menghilangkan pop-up tersebut.

Anda dapat mengatur opsi ini ketika melakukan inisialisasi `StripeConnectInstance` dengan meneruskan Penampilan ke objek `appearance`. Anda hanya dapat menggunakan [opsi Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) untuk memodifikasi gaya di komponen tersemat Connect. Keluarga font dan warna latar belakang komponen tersemat Connect diwarisi dari kontainer HTML induk. Anda harus secara eksplisit mengatur semua opsi lainnya.

```javascript
const stripeConnectInstance = loadConnectAndInitialize({
  publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
  fetchClientSecret: fetchClientSecret,
  fonts: [
    {
      cssSrc: "https://myfonts.example.com/mycssfile.css",
    },
    {
      src: `url(https://my-domain.com/assets/my-font-2.woff)`,
      family: 'My Font'
    }
  ],
  appearance: {
    // See all possible variables below
    overlays: "dialog",
    variables: {
      fontFamily: 'My Font',
      colorPrimary: "#FF0000",
    },
  },
});
```

Lihat [daftar lengkap variabel penampilan](https://docs.stripe.com/connect/embedded-appearance-options.md).

### Objek font

Objek `fonts` di `stripeConnect.initialize` mengambil larik dari objek [CssFontSource](https://docs.stripe.com/js/appendix/css_font_source_object) atau [CustomFontSource](https://docs.stripe.com/js/appendix/custom_font_source_object).

Jika menggunakan font custom pada halaman (misalnya, file `.woff` atau `.tff`), Anda harus menentukan file font ketika melakukan inisialisasi komponen tersemat Connect. Melakukannya dapat memungkinkan komponen tersemat Connect merender font dengan benar. Anda dapat menentukan file sebagai:

#### CssFontSource

Gunakan objek ini untuk meneruskan URL lembar gaya yang menentukan font custom Anda ketika membuat `StripeConnectInstance`. Dengan objek `CssFontSource`, [konfigurasi CSP](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#csp-and-http-header-requirements) Anda harus memungkinkan pengambilan domain yang dikaitkan dengan URL file CSS yang ditentukan sebagai CssFontSource.

| Nama     | Tipe              | Nilai contoh                                        |
| -------- | ----------------- | --------------------------------------------------- |
| `cssSrc` | string `required` | `https://fonts.googleapis.com/css?family=Open+Sans` | URL relatif atau absolut yang menunjuk ke file CSS dengan definisi [@font-face](https://developer.mozilla.org/en/docs/Web/CSS/@font-face). File harus di-hosting pada https. Jika Anda menggunakan [kebijakan keamanan konten (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy), file mungkin memerlukan [arahan tambahan](https://docs.stripe.com/security/guide.md#content-security-policy). |

#### CustomFontSource

Gunakan objek ini untuk meneruskan font custom ketika membuat `StripeConnectInstance`.

| Nama           | Tipe              | Nilai contoh                                    |
| -------------- | ----------------- | ----------------------------------------------- |
| `family`       | string `required` | `Avenir`                                        | Nama untuk diberikan ke font.                                                                                                                                                                                                                                |
| `src`          | string `required` | `url(https://my-domain.com/assets/avenir.woff)` | Nilai [src](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) valid yang menunjuk ke file font Custom Anda. Ini biasanya (meskipun tidak selalu) berupa tautan ke file dengan `woff`, `.otf`, atau `.svg`. File harus di-hosting pada https . |
| `display`      | string `optional` | `auto`                                          | Nilai [tampilan-font](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) valid.                                                                                                                                                       |
| `style`        | string `optional` | `normal`                                        | Salah satu dari `normal`, `italic`, atau `oblique`.                                                                                                                                                                                                          |
| `unicodeRange` | string `optional` | `U+0-7F`                                        | Nilai [rentang-unicode](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range) valid.                                                                                                                                                    |
| `weight`       | string `optional` | `400`                                           | [Bobot-font](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) valid. Ini adalah string, bukan angka.                                                                                                                                            |

### Perbarui komponen tersemat Connect setelah inisialisasi

Metode `update` mendukung pembaruan komponen tersemat Connect setelah inisialisasi. Anda dapat menggunakannya untuk mengganti opsi penampilan saat runtime (tanpa memuat ulang halaman). Untuk melakukannya, gunakan objek `stripeConnectInstance` sama yang Anda buat dengan `initialize` dan panggil metode `update` padanya:

```javascript
stripeConnectInstance.update({
  appearance: {
    variables: {
      colorPrimary: "#FF0000",
    },
  },
  locale: 'en-US',
});
```

> Tidak semua opsi (misalnya, `fonts`) dapat diperbarui. Opsi yang didukung untuk metode ini adalah subset dari opsi yang ditawarkan di `initialize`. Ini mendukung pembaruan `appearance` dan `locale`.

### Lebar dan tinggi

Perilaku komponen tersemat Connect serupa dengan elemen HTML `block` reguler. Secara default, mereka mengambil 100% dari `width` elemen HTML induknya, dan tingginya berkembang sesuai dengan konten yang dirender di dalamnya. Anda dapat mengontrol `width` komponen tersemat Connect dengan menentukan `width` induk HTML. Anda tidak dapat secara langsung mengontrol `height` karena itu bergantung pada konten yang dirender, akan tetapi, Anda dapat membatasi tinggi dengan `maxHeight` dan `overflow: scroll`, dengan cara yang sama seperti yang dapat Anda lakukan dengan elemen `block` HTML lainnya.

## Autentikasi

Kami menawarkan seperangkat API untuk mengelola sesi akun dan kredensial pengguna di komponen tersemat Connect.

### Muat ulang client secret

Pada sesi yang berjalan lama, sesi dari *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang semula diberikan mungkin kedaluwarsa. Bila kedaluwarsa, kami secara otomatis menggunakan `fetchClientSecret` untuk mengambil client secret baru dan memuat ulang sesi. Anda tidak perlu meneruskan parameter tambahan.

```javascript
import { loadConnectAndInitialize } from "@stripe/connect-js";
// Example method to retrieve the client secret from your server
const fetchClientSecret = async () => {
  const response = await fetch('/account_session', { method: "POST" });
  const {client_secret: clientSecret} = await response.json();
  return clientSecret;
}

const stripeConnectInstance = loadConnectAndInitialize({
  publishableKey: "{{PUBLISHABLE_KEY}}",
  fetchClientSecret: fetchClientSecret,
});
```

### Keluar

Kami merekomendasikan Anda memanggil `logout` pada `stripeConnectInstance` untuk menghancurkan objek sesi akun terkait setelah pengguna keluar dari aplikasi Anda. Tindakan ini akan menonaktifkan semua komponen tersemat Connect yang bertaut dengan `stripeConnectInstance` tersebut.

> #### Popup yang diperlukan
> 
> Panggil `logout` hanya bila pengguna Anda keluar dari aplikasi Anda. Jangan panggil keluar bila komponen dilepaskan (saat menavigasi ke halaman lain atau menutup halaman) atau saat memuat komponen lain karena metode ini sepenuhnya membatalkan sesi akun dan [sesi pengguna Stripe](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components) saat ini. Setelah memanggil `logout`, komponen tidak lagi menampilkan untuk `stripeConnectInstance` terkait.

```javascript
// Call this when your user logs out
stripeConnectInstance.logout();
```

## Persyaratan header CSP dan HTTP

Jika situs web Anda mengimplementasikan *Kebijakan Keamanan Konten* (Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks), Anda perlu memperbarui kebijakan dengan menambahkan aturan berikut:

- `frame-src` `https://connect-js.stripe.com` `https://js.stripe.com`
- `img-src` `https://*.stripe.com`
- `script-src` `https://connect-js.stripe.com` `https://js.stripe.com`
- `style-src` `sha256-0hAheEzaMe6uXIKV4EehS9pu1am1lj/KnnzrOYqckXk=` (SHA dari elemen gaya kosong)

Jika Anda menggunakan file CSS untuk memuat [font web](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#fonts-object) untuk digunakan dengan komponen tersemat Connect, URL-nya harus diizinkan oleh arahan CSP [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) Anda.

Mengatur [header respons HTTP](https://developer.mozilla.org/en-US/docs/Glossary/Response_header) tertentu memungkinkan fungsionalitas lengkap komponen tersemat Connect:

- [Kebijakan-Pembuka-Lintas-Asal](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy), `unsafe-none`. Catatan: (`unsafe-none`) ini merupakan nilai default dari header, jadi tak mengatur header ini dapat berfungsi. Nilai lain seperti `same-origin` merusak [autentikasi pengguna](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components) di komponen tersemat Connect.

## Browser yang didukung

Kami mendukung serangkaian yang sama dari browser [yang saat ini didukung oleh Dashboard Stripe](https://docs.stripe.com/dashboard/basics.md):

- Dua puluh versi utama terakhir Chrome dan Firefox
- Dua versi utama terakhir Safari dan Edge
- Dua versi utama terakhir Safari seluler di iOS

Anda tidak dapat menggunakan komponen tersemat Connect dalam tampilan web tersemat di dalam aplikasi seluler atau desktop. Untuk menggunakan komponen tersemat Connect di aplikasi seluler, gunakan [iOS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=ios), [Android](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=android), atau [React Native](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=react-native) SDK.

Jika komponen tersemat belum didukung oleh SDK seluler kami, sebaiknya hubungkan ke browser web tempat Anda dapat merender komponen tersemat.

## Pelokalan

Ketika melakukan inisialisasi [Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), Anda dapat meneruskan parameter `locale`. Untuk mencocokkan lokal komponen tersemat dengan lokal situs web Anda, teruskan parameter `locale` dengan lokal UI yang dirender situs web Anda.

Nilai default dari parameter `locale` ditentukan oleh lokasi yang dikonfigurasi browser. Jika lokal yang ditentukan tidak didukung secara langsung, alternatif yang masuk akal akan digunakan (misalnya `fr-be` mungkin kembali ke `fr-fr`).

Komponen tersemat Connect mendukung lokal berikut:

| Bahasa                                    | Kode lokal   |
| ----------------------------------------- | ------------ |
| Bahasa Bulgaria (Bulgaria)                | `bg-BG`      |
| Bahasa Tionghoa (Disederhanakan)          | `zh-Hans`    |
| Bahasa Tionghoa (Tradisional - Hong Kong) | `zh-Hant-HK` |
| Bahasa Tionghoa (Tradisional - Taiwan)    | `zh-Hant-TW` |
| Bahasa Kroasia (Kroasia)                  | `hr-HR`      |
| Bahasa Ceko (Cheska)                      | `cs-CZ`      |
| Bahasa Denmark (Denmark)                  | `da-DK`      |
| Bahasa Belanda (Belanda)                  | `nl-NL`      |
| Bahasa Inggris (Australia)                | `en-AU`      |
| Bahasa Inggris (India)                    | `en-IN`      |
| Bahasa Inggris (Irlandia)                 | `en-IE`      |
| Bahasa Inggris (Selandia Baru)            | `en-NZ`      |
| Bahasa Inggris (Singapura)                | `en-SG`      |
| Bahasa Inggris (Kerajaan Inggris)         | `en-GB`      |
| Bahasa Inggris (Amerika Serikat)          | `en-US`      |
| Bahasa Estonia (Estonia)                  | `et-EE`      |
| Bahasa Filipina (Filipina)                | `fil-PH`     |
| Bahasa Finlandia (Finlandia)              | `fi-FI`      |
| Bahasa Prancis (Kanada)                   | `fr-CA`      |
| Bahasa Prancis (Prancis)                  | `fr-FR`      |
| Bahasa Jerman (Jerman)                    | `de-DE`      |
| Bahasa Yunani (Yunani)                    | `el-GR`      |
| Bahasa Hungaria (Hungaria)                | `hu-HU`      |
| Bahasa Indonesia (Indonesia)              | `id-ID`      |
| Bahasa Italia (Italia)                    | `it-IT`      |
| Bahasa Jepang (Jepang)                    | `ja-JP`      |
| Bahasa Korea (Korea Selatan)              | `ko-KR`      |
| Bahasa Latvia (Latvia)                    | `lv-LV`      |
| Bahasa Lituania (Lituania)                | `lt-LT`      |
| Bahasa Melayu (Malaysia)                  | `ms-MY`      |
| Bahasa Malta (Malta)                      | `mt-MT`      |
| Bahasa Bokmål Norwegia (Norwegia)         | `nb-NO`      |
| Bahasa Polandia (Polandia)                | `pl-PL`      |
| Portugis (Brasil)                         | `pt-BR`      |
| Bahasa Portugis (Portugal)                | `pt-PT`      |
| Bahasa Rumania (Rumania)                  | `ro-RO`      |
| Bahasa Slowakia (Slowakia)                | `sk-SK`      |
| Bahasa Slovenia (Slovenia)                | `sl-SI`      |
| Bahasa Spanyol (Argentina)                | `es-AR`      |
| Bahasa Spanyol (Brasil)                   | `es-BR`      |
| Spanyol (Amerika Latin)                   | `es-419`     |
| Bahasa Spanyol (Meksiko)                  | `es-MX`      |
| Bahasa Spanyol (Spanyol)                  | `es-ES`      |
| Bahasa Swedia (Swedia)                    | `sv-SE`      |
| Bahasa Thailand (Thailand)                | `th-TH`      |
| Bahasa Turki (Türkiye)                    | `tr-TR`      |
| Bahasa Vietnam (Vietnam)                  | `vi-VN`      |

## Tangani kesalahan pemuatan

Jika komponen gagal dimuat, Anda dapat bereaksi terhadap kegagalan dengan memberikan penangan kesalahan memuat untuk komponen tersemat. Tergantung pada penyebab kegagalan, penangan kesalahan memuat dapat dipanggil beberapa kali. Logika yang dipicu oleh penangan kesalahan memuat harus idempoten.

#### HTML + JS

```js
// Load errors are emitted by all components. We use Balances as an example here.
const balances = stripeConnectInstance.create('balances');
balances.setOnLoadError((loadError) => {
  const componentName = loadError.elementTagName
  const error = loadError.error

  console.log(componentName + " failed to load")
  console.log(`${error.type}: ${error.message}`);
});

container.appendChild(balances);

```

#### HTML + JS

| Metode           | Keterangan                                                               | Variabel                                                                                                                                                                                                                                       |
| ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setOnLoadError` | Komponen menjalankan fungsi callback ini ketika terjadi kegagalan beban. | - `loadError.error`: Lihat [objek kesalahan beban](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: Nama tag HTML yang digunakan untuk merender komponen di browser |

#### React

| Prop React    | Keterangan                                                               | Variabel                                                                                                                                                                                                                                       |
| ------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onLoadError` | Komponen menjalankan fungsi callback ini ketika terjadi kegagalan beban. | - `loadError.error`: Lihat [objek kesalahan beban](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object)
  - `loadError.elementTagName`: Nama tag HTML yang digunakan untuk merender komponen di browser |

#### Objek `error` muat

Setiap kali terjadi kegagalan pemuatan, objek `error` diteruskan ke penangan kesalahan pemuatan dengan properti berikut.

| Nama      | Tipe                                                                                                                        | Nilai contoh                      |
| --------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `type`    | Lihat [tipe kegagalan pemuatan](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#the-load-object) | `authentication_error`            | Tipe kesalahan                                     |
| `message` | string | undefined                                                                                                          | `Failed to fetch account session` | Keterangan lebih lanjut tentang kesalahan tersebut |

#### Jenis kegagalan beban

Ketika komponen gagal dimuat, kami mendeteksi jenis kegagalan dan memetakannya ke salah satu jenis di bawah ini. Jika jenis kesalahan beban tidak dapat ditentukan, itu ditandai sebagai `api_error`.

| Tipe                           | Keterangan                                                                                          |
| ------------------------------ | --------------------------------------------------------------------------------------------------- |
| `api_connection_error`         | Gagal menghubungkan ke API Stripe                                                                   |
| `authentication_error`         | Kegagalan melakukan alur autentikasi dalam komponen tersemat Connect                                |
| `account_session_create_error` | Pembuatan sesi akun gagal                                                                           |
| `invalid_request_error`        | Permintaan gagal dengan kode status 4xx, biasanya disebabkan oleh masalah konfigurasi platform      |
| `rate_limit_error`             | Permintaan gagal karena tingkat permintaan yang tidak normal terdeteksi                             |
| `render_error`                 | Kegagalan untuk merender komponen, biasanya disebabkan oleh ekstensi browser atau masalah jaringan. |
| `api_error`                    | Kesalahan API yang mencakup jenis masalah lainnya, seperti masalah sementara dengan server Stripe   |

#### UI untuk kesalahan pemuatan

Dalam sebagian besar kasus, komponen tertanam menampilkan pesan kesalahan saat gagal dimuat, sehingga Anda tidak perlu menanganinya. Anda dapat menggunakan penangkap kesalahan pemuatan untuk keperluan analitik atau untuk elemen lain di situs Anda yang mungkin terpengaruh oleh kegagalan pemuatan.

Namun, komponen tertanam tidak menampilkan pesan untuk kesalahan yang terjadi sebelum [callback onLoaderStart](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-component-display), dipanggil, karena artinya mereka belum merender antarmuka apapun. Dalam situasi ini, kode Anda harus merender UI untuk kesalahan pemuatan.

## Deteksi tampilan komponen tersemat

Setelah komponen dibuat, tidak ada UI yang ditampilkan kepada pengguna sampai javascript untuk komponen tersebut dimuat dan diuraikan di browser. Hal ini dapat menyebabkan komponen muncul setelah selesai dimuat. Untuk menghindari hal ini, tampilkan UI pemuatan Anda sendiri sebelum komponen dibuat dan sembunyikan UI setelah komponen ditampilkan. Semua komponen tersemat dapat menerima fungsi callback yang dipanggil segera bila UI (termasuk indikator pemuatan) ditampilkan kepada pengguna.

#### HTML + JS

```html

<span id="spinner"></span>
<div id="balances-container"></div>

```

```js
// Loader start events are emitted by all components. We use Balances as an example here.
const container = document.getElementById('balances-container');
const balances = stripeConnectInstance.create('balances');

balances.setOnLoaderStart((event) => {
  container.getElementById("spinner").style.display = "none";
  console.log(`${event.elementTagName} is visible to users`)
});

container.appendChild(balances);
```

#### HTML + JS

| Metode             | Keterangan                                                                                                   | Variabel                                                                                  |
| ------------------ | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `setOnLoaderStart` | Komponen melaksanakan fungsi callback ini bila UI (termasuk indikator pemuatan) ditampilkan kepada pengguna. | - `event.elementTagName`: Nama tag HTML yang digunakan untuk merender komponen di browser |

#### React

| Prop React      | Keterangan                                                                                                   | Variabel                                                                                  |
| --------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| `onLoaderStart` | Komponen melaksanakan fungsi callback ini bila UI (termasuk indikator pemuatan) ditampilkan kepada pengguna. | - `event.elementTagName`: Nama tag HTML yang digunakan untuk merender komponen di browser |

## Gunakan Connect.js tanpa npm

Kami merekomendasikan pengintegrasian dengan [javascript](https://github.com/stripe/connect-js) dan [pembungkus komponen React](https://github.com/stripe/react-connect-js) kami, yang memudahkan pemuatan komponen tersemat Connect dan menyediakan definisi TypeScript untuk antarmuka yang kami dukung. Jika sistem build Anda saat ini tidak mendukung pengambilan dependensi pada paket, Anda dapat melakukan integrasi tanpa paket ini.

Tambahkan tag skrip Connect.js secara manual ke `<head>` dari setiap halaman pada situs Anda.

```html
<!-- Somewhere in your site's <head> -->
<script src="https://connect-js.stripe.com/v1.0/connect.js" async></script>
```

Setelah Connect.js selesai memuat, variabel jendela global menginisialisasi `StripeConnect` dan panggilan `StripeConnect.onLoad`, jika didefinisikan. Anda dapat menginisialisasi Connect.js dengan aman dengan menyiapkan `muat` fungsi dan panggilan `StripeConnect.init` dengan hal yang sama [Connect.js opsi](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) sebagai `muatHubungkanDanInisialisasi`. Anda dapat menggunakan instans Connect yang dikembalikan oleh `Init` dengan cara yang sama Anda menggunakan instance yang dikembalikan oleh `muatHubungkanDanInisialisasi` untuk membuat komponen yang disematkan dalam [Integrasi HTML + JS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?client=js&platform=web#load-and-initialize-connectjs).

```javascript
window.StripeConnect = window.StripeConnect || {};
StripeConnect.onLoad = () => {
  const stripeConnectInstance = StripeConnect.init({
      // This is a placeholder - it should be replaced with your publishable 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.
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
    });

  const payments = stripeConnectInstance.create('payments');
  document.body.appendChild(payments);
};
```

## Autentikasi pengguna di komponen tersemat Connect

Komponen tersemat Connect biasanya tidak memerlukan autentikasi pengguna. Dalam sejumlah skenario, komponen tersemat Connect mengharuskan akun terhubung masuk dengan akun Stripe sebelum mengakses komponen untuk menyediakan fungsionalitas yang diperlukan (misalnya, menulis informasi ke badan hukum akun dalam kasus komponen [onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). Komponen lain mungkin memerlukan autentikasi dalam komponen setelah komponen tersebut ditampilkan di awal.

Autentikasi diperlukan untuk akun terhubung di mana Stripe bertanggung jawab untuk mengumpulkan informasi terbaru bila persyaratan berubah. Untuk akun terhubung tempat Anda bertanggung jawab mengumpulkan informasi terbaru bila persyaratan jatuh tempo atau berubah, seperti akun Custom, autentikasi Stripe dikontrol oleh fitur Sesi Akun [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Kami merekomendasikan pengimplementasian 2FA atau tindakan keamanan yang setara sebagai [praktik terbaik](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Untuk konfigurasi akun yang mendukung fitur ini, seperti Custom, Anda bertanggung jawab atas akun terhubung jika akun tersebut tidak dapat membayar kembali [saldo negatif](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Komponen yang memerlukan autentikasi

Autentikasi mencakup popup ke jendela milik Stripe. Akun terhubung harus melakukan autentikasi sebelum dapat melanjutkan alur kerjanya.

Komponen berikut memerlukan akun terhubung autentikasi dalam skenario tertentu:

- [Onboarding Akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Manajemen Akun](https://docs.stripe.com/connect/supported-embedded-components/account-management.md)
- [Saldo](https://docs.stripe.com/connect/supported-embedded-components/balances.md)
- [Payout](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)
- [Spanduk Notifikasi](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md)
- [Rekening Finansial](https://docs.stripe.com/connect/supported-embedded-components/financial-account.md)
- [Daftar Kartu Issuing](https://docs.stripe.com/connect/supported-embedded-components/issuing-cards-list.md)

## Praktik terbaik kinerja

Untuk memastikan waktu muat komponen tersemat Connect serendah mungkin, ikuti rekomendasi berikut:

- **Panggil `loadConnectAndInitialize` sedini mungkin di alur Anda**.
- **Membuat satu instance connect**: Buat satu instans connect hanya dengan memanggil `loadConnectAndInitialize` sekali per sesi. Kemudian gunakan kembali instans tersebut untuk membuat dan mengelola beberapa komponen. Kesalahan umum adalah membuat satu instans koneksi per komponen, atau beberapa instans koneksi per sesi. Hal ini menyebabkan konsumsi sumber daya tambahan dan permintaan API. Jika Anda menggunakan React, Anda dapat menggunakan pustaka manajemen status atau konteks React untuk mengelola instans ini.
- **Gunakan versi terbaru SDK yang sesuai**: Gunakan versi terbaru SDK paket npm [connect-js](https://www.npmjs.com/package/@stripe/connect-js) atau [react-connect-js](https://www.npmjs.com/package/@stripe/react-connect-js). SDK ini menginisialisasi komponen tersemat dengan cara yang memaksimalkan performa. Peningkatan performa telah ditambahkan ke SDK, jadi sebaiknya tingkatkan versi jika Anda menggunakan versi lama.
- **Muat skrip `connect.js` secepatnya di alur Anda**: Tempat paling awal yang dapat untuk memuat skrip adalah dengan memasukkan skrip ini di `head` HTML Anda. Anda juga dapat menggunakan perilaku default SDK paket npm kami, yang memuatnya saat JavaScript halaman Anda pertama kali dimuat.

## Siapkan StripeConnect [Sisi klien] [Sisi server]

Stripe menggunakan [AccountSession](https://docs.stripe.com/api/account_sessions.md) untuk mengekspresikan maksud Anda guna mendelegasikan akses API ke akun terhubung Anda.

AccountSessions API mengembalikan *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang memungkinkan komponen tersemat mengakses sumber daya akun terhubung seolah-olah Anda yang melakukan panggilan API untuk mereka.

### Buat AccountSession (Server)

Aplikasi Anda harus memulai permintaan ke server Anda untuk mendapatkan sesi akun. Anda dapat membuat endpoint baru di server yang mengembalikan client secret ke aplikasi:

#### Ruby

```ruby
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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.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](https://docs.stripe.com/api/account_sessions/create.md) menentukan akses komponen dan fitur untuk komponen sematan Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun tersebut. Jika aplikasi Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini. Sebagai contoh, Anda dapat mengaktifkan [manajemen pengembalian dana](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan penegakan akses peran pengguna, Anda harus memetakan peran pengguna situs Anda ke komponen sesi akun.

### Instal StripeConnect SDK (Client)

[Stripe iOS SDK](https://github.com/stripe/stripe-ios) adalah sumber terbuka, yang [didokumentasikan lengkap](https://stripe.dev/stripe-ios/index.html), dan kompatibel dengan aplikasi yang mendukung iOS 15 ke atas.

#### Swift Package Manager

Untuk menginstal SDK, ikuti langkah-langkah ini:

1. Di Xcode, pilih **File** > **Tambahkan Dependensi Paket…** dan masukkan `https://github.com/stripe/stripe-ios-spm` sebagai URL repositori.
1. Pilih nomor versi terbaru dari [halaman rilis](https://github.com/stripe/stripe-ios/releases) kami.
1. Tambahkan produk **StripeConnect** ke [target aplikasi Anda](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Jika Anda belum melakukannya, instal versi terbaru [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Jika Anda tidak memiliki [Podfile](https://guides.cocoapods.org/syntax/podfile.html), jalankan perintah berikut untuk membuatnya:
   ```bash
   pod init
   ```
1. Tambahkan baris ini ke `Podfile` Anda:
   ```podfile
   pod 'StripeConnect'
   ```
1. Jalankan perintah berikut:
   ```bash
   pod install
   ```
1. Jangan lupa menggunakan file `.xcworkspace` untuk membuka proyek Anda di Xcode, sebagai ganti file `.xcodeproj`, mulai sekarang.
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan:
   ```bash
   pod update StripeConnect
   ```

#### Carthage

1. Jika Anda belum melakukannya, instal versi terbaru [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Tambahkan baris ini ke `Cartfile` Anda:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Ikuti [instruksi instalasi Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Pastikan untuk menyematkan semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK, jalankan perintah berikut:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Kerangka Kerja Manual

1. Masuklah ke [halaman rilis GitHub](https://github.com/stripe/stripe-ios/releases/latest) kami lalu unduh dan unzip **Stripe.xcframework.zip**.
1. Seret **StripeConnect.xcframework** ke bagian **Embedded Binaries** pengaturan **General** di proyek Xcode Anda. Pastikan memilih **Copy items if needed**.
1. Ulangi langkah 2 untuk semua framework yang diwajibkan yang tercantum [di sini](https://github.com/stripe/stripe-ios/tree/master/StripeConnect#manual-linking).
1. Di masa mendatang, untuk memperbarui ke versi terbaru SDK kami, ulangi langkah 1–3.

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-ios/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) untuk repositori.

### 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.
1. Tambahkan kunci `NSCameraUsageDescription`.
1. 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](https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/requesting_authorization_for_media_capture_on_ios) untuk mempelajari selengkapnya tentang meminta otorisasi kamera.

### Inisialisasikan EmbeddedComponentManager (Client)

Tetapkan kunci yang dapat dipublikasikan menggunakan `StripeAPI.shared` dan buat instance [EmbeddedComponentManager](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager) dengan penutupan yang mengambil client secret dengan memanggil endpoint baru yang Anda buat di server. Untuk membuat komponen, panggil metode create yang sesuai pada `EmbeddedComponentManager` yang telah Anda instansikan di atas.

[Onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) mengembalikan pengontrol yang mengelola presentasinya sendiri. Komponen lain, seperti [Pembayaran](https://docs.stripe.com/connect/supported-embedded-components/payments.md) mengembalikan sebuah [UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller) yang dapat Anda tampilkan di aplikasi Anda dengan lebih fleksibel.

#### UIKit

```swift
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
        )

        // Account onboarding presents modally and fullscreen
        let controller = embeddedComponentManager.createAccountOnboardingController()
        controller.title = "Onboard with Stripe"
        controller.present(from: self)

        // All other components can be flexibly presented
        let paymentsViewController = embeddedComponentManager.createPaymentsViewController()
        present(paymentsViewController)
    }
}
```

## Configure the Embedded Component Manager [Sisi client]

[Lihat dokumentasi referensi :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/init\(apiClient:appearance:fonts:fetchClientSecret:\)).

### Sesuaikan tampilan komponen tersemat Connect

[Toolkit Figma UI komponen tersemat](https://www.figma.com/community/file/1438614134095442934) 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](https://docs.stripe.com/connect/embedded-appearance-options.md) untuk menyesuaikan tampilan dan cara kerja komponen tersemat Connect. Penyesuaian ini memengaruhi tombol, ikon, dan aksen lainnya di sistem desain kami.

> #### Popup yang diperlukan
> 
> Beberapa perilaku dalam komponen tersemat, seperti [autentikasi pengguna](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), harus disajikan di WebView yang diautentikasi. Anda tidak dapat menyesuaikan komponen tersemat untuk menghilangkan Tampilan Web tersebut.

Anda dapat mengatur opsi ini menggunakan [EmbeddedComponentManager.Appearance](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) saat menginisialisasi `EmbeddedComponentManager`.

```swift
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.font.base = myFont
appearance.typography.fontSizeBase = 16 // Unscaled font size
appearance.colors.primary = UIColor { traitCollection in
    if traitCollection.userInterfaceStyle == .dark {
        return UIColor(red: 0.455, green: 0.424, blue: 1.000, alpha: 1.0)
    } else {
        return 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](https://developer.apple.com/documentation/uikit/uicolor/3238041-init) secara otomatis diterapkan ke komponen tersemat Connect bila [UITraitCollection](https://developer.apple.com/documentation/uikit/uitraitcollection) diperbarui, termasuk [Mode Gelap](https://developer.apple.com/design/human-interface-guidelines/dark-mode) dan [kontras aksesibilitas](https://developer.apple.com/documentation/uikit/uiaccessibilitycontrast). 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](https://developer.apple.com/documentation/uikit/uitraitcollection).

 Lihat [daftar lengkap opsi tampilan](https://docs.stripe.com/connect/embedded-appearance-options.md) di iOS.

### Gunakan font custom

Jika Anda menggunakan font kustom di aplikasi (misalnya, dari `.otf` atau `.tff` yang disematkan di biner aplikasi), Anda harus menentukan file font dalam [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) diteruskan ke argumen `font` saat menginisialisasi `EmbeddedComponentManager`. Ini memberi Connect komponen tersemat akses ke file font untuk merender font dengan benar.

Font yang ditentukan dalam `tampilan` harus menggunakan salah satu [font sistem yang didukung](https://developer.apple.com/fonts/system-fonts/) atau [CustomFontSource](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource) diteruskan ke `EmbeddedComponentManager` pada inisialisasi untuk dirender dengan benar.

[Lihat dokumentasi referensi :external:](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/customfontsource).

### Perbarui komponen tersemat Connect setelah inisialisasi

Panggil metode `update` untuk mengubah tampilan komponen tersemat setelah inisialisasi:

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

manager.update(appearance: appearance)
```

## Autentikasi

Kami menawarkan seperangkat API untuk mengelola sesi akun dan kredensial pengguna di komponen tersemat Connect.

### Muat ulang client secret

Pada sesi yang berjalan lama, sesi dari *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang semula diberikan mungkin kedaluwarsa. Bila kedaluwarsa, kami secara otomatis menggunakan `fetchClientSecret` untuk mengambil client secret baru dan memuat ulang sesi. Anda tidak perlu meneruskan parameter tambahan.

```swift
func fetchClientSecret() async -> String? {
    var request = URLRequest(url: URL(string: "https://{{YOUR_SERVER}}/account_session")!)
    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 let error {
        return nil
    }
}

STPAPIClient.shared.publishableKey =  "{{PUBLISHABLE_KEY}}",
let embeddedComponentManager = EmbeddedComponentManager(
    fetchClientSecret: fetchClientSecret
)
```

## Pelokalan

Komponen tersemat Connect mendukung lokal berikut:

| Bahasa                                    | Kode lokal   |
| ----------------------------------------- | ------------ |
| Bahasa Bulgaria (Bulgaria)                | `bg-BG`      |
| Bahasa Tionghoa (Disederhanakan)          | `zh-Hans`    |
| Bahasa Tionghoa (Tradisional - Hong Kong) | `zh-Hant-HK` |
| Bahasa Tionghoa (Tradisional - Taiwan)    | `zh-Hant-TW` |
| Bahasa Kroasia (Kroasia)                  | `hr-HR`      |
| Bahasa Ceko (Cheska)                      | `cs-CZ`      |
| Bahasa Denmark (Denmark)                  | `da-DK`      |
| Bahasa Belanda (Belanda)                  | `nl-NL`      |
| Bahasa Inggris (Australia)                | `en-AU`      |
| Bahasa Inggris (India)                    | `en-IN`      |
| Bahasa Inggris (Irlandia)                 | `en-IE`      |
| Bahasa Inggris (Selandia Baru)            | `en-NZ`      |
| Bahasa Inggris (Singapura)                | `en-SG`      |
| Bahasa Inggris (Kerajaan Inggris)         | `en-GB`      |
| Bahasa Inggris (Amerika Serikat)          | `en-US`      |
| Bahasa Estonia (Estonia)                  | `et-EE`      |
| Bahasa Filipina (Filipina)                | `fil-PH`     |
| Bahasa Finlandia (Finlandia)              | `fi-FI`      |
| Bahasa Prancis (Kanada)                   | `fr-CA`      |
| Bahasa Prancis (Prancis)                  | `fr-FR`      |
| Bahasa Jerman (Jerman)                    | `de-DE`      |
| Bahasa Yunani (Yunani)                    | `el-GR`      |
| Bahasa Hungaria (Hungaria)                | `hu-HU`      |
| Bahasa Indonesia (Indonesia)              | `id-ID`      |
| Bahasa Italia (Italia)                    | `it-IT`      |
| Bahasa Jepang (Jepang)                    | `ja-JP`      |
| Bahasa Korea (Korea Selatan)              | `ko-KR`      |
| Bahasa Latvia (Latvia)                    | `lv-LV`      |
| Bahasa Lituania (Lituania)                | `lt-LT`      |
| Bahasa Melayu (Malaysia)                  | `ms-MY`      |
| Bahasa Malta (Malta)                      | `mt-MT`      |
| Bahasa Bokmål Norwegia (Norwegia)         | `nb-NO`      |
| Bahasa Polandia (Polandia)                | `pl-PL`      |
| Portugis (Brasil)                         | `pt-BR`      |
| Bahasa Portugis (Portugal)                | `pt-PT`      |
| Bahasa Rumania (Rumania)                  | `ro-RO`      |
| Bahasa Slowakia (Slowakia)                | `sk-SK`      |
| Bahasa Slovenia (Slovenia)                | `sl-SI`      |
| Bahasa Spanyol (Argentina)                | `es-AR`      |
| Bahasa Spanyol (Brasil)                   | `es-BR`      |
| Spanyol (Amerika Latin)                   | `es-419`     |
| Bahasa Spanyol (Meksiko)                  | `es-MX`      |
| Bahasa Spanyol (Spanyol)                  | `es-ES`      |
| Bahasa Swedia (Swedia)                    | `sv-SE`      |
| Bahasa Thailand (Thailand)                | `th-TH`      |
| Bahasa Turki (Türkiye)                    | `tr-TR`      |
| Bahasa Vietnam (Vietnam)                  | `vi-VN`      |

## Autentikasi pengguna di komponen tersemat Connect

Komponen tersemat Connect biasanya tidak memerlukan autentikasi pengguna. Dalam sejumlah skenario, komponen tersemat Connect mengharuskan akun terhubung masuk dengan akun Stripe sebelum mengakses komponen untuk menyediakan fungsionalitas yang diperlukan (misalnya, menulis informasi ke badan hukum akun dalam kasus komponen [onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). Komponen lain mungkin memerlukan autentikasi dalam komponen setelah komponen tersebut ditampilkan di awal.

Autentikasi diperlukan untuk akun terhubung di mana Stripe bertanggung jawab untuk mengumpulkan informasi terbaru bila persyaratan berubah. Untuk akun terhubung tempat Anda bertanggung jawab mengumpulkan informasi terbaru bila persyaratan jatuh tempo atau berubah, seperti akun Custom, autentikasi Stripe dikontrol oleh fitur Sesi Akun [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Kami merekomendasikan pengimplementasian 2FA atau tindakan keamanan yang setara sebagai [praktik terbaik](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Untuk konfigurasi akun yang mendukung fitur ini, seperti Custom, Anda bertanggung jawab atas akun terhubung jika akun tersebut tidak dapat membayar kembali [saldo negatif](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Komponen yang memerlukan autentikasi

Akun terhubung akan ditampilkan [Tampilan Web](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession) yang diautentikasi dalam aplikasi Anda. Akun terhubung harus melakukan autentikasi sebelum dapat melanjutkan alur kerjanya dalam Tampilan Web.

Alur autentikasi yang di-hosting Stripe menampilkan nama, warna, dan ikon brand Anda sebagaimana diatur di [pengaturan Connect](https://dashboard.stripe.com/account/applications/settings) serta tidak menggunakan tampilan dan font custom dari [Manajer Komponen Tersemat](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) sampai autentikasi selesai.

Komponen berikut mengharuskan akun terhubung melakukan autentikasi dalam skenario tertentu:

- [Onboarding Akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Payout](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Tangani kesalahan pemuatan [Sisi klien]

Tanggapi kegagalan muatan komponen dengan menerapkan metode pendengar `onLoadError` komponen.

Tiap kegagalan mungkin akan memicu metode `onLoadError` aktif beberapa kali, sehingga logika apa pun yang dipicu oleh metode `onLoadError` harus idempoten.

#### Swift

```swift
// All components emit load errors. This example uses AccountOnboarding.
// All components support didFailLoadWithError.
class MyViewController: UIViewController, AccountOnboardingControllerDelegate {
    func openAccountOnboarding() {
        let accountOnboardingController = embeddedComponentManager.createAccountOnboardingController();
        accountOnboardingController.delegate = self
        accountOnboardingController.present(from: self)
    }

    // MARK: - AccountOnboardingControllerDelegate
    func accountOnboarding(_ accountOnboarding: AccountOnboardingController, didFailLoadWithError error: Error) {
        print("Account onboarding failed to load with error '\(error)'")
    }
}
```

## Siapkan StripeConnect [Sisi klien] [Sisi server]

Stripe menggunakan [AccountSession](https://docs.stripe.com/api/account_sessions.md) untuk mengekspresikan maksud Anda guna mendelegasikan akses API ke akun terhubung Anda.

AccountSessions API mengembalikan *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang memungkinkan komponen tersemat mengakses sumber daya akun terhubung seolah-olah Anda yang melakukan panggilan API untuk mereka.

### Buat AccountSession (Server)

Aplikasi Anda harus memulai permintaan ke server Anda untuk mendapatkan sesi akun. Anda dapat membuat endpoint baru di server yang mengembalikan client secret ke aplikasi:

#### Ruby

```ruby
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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.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](https://docs.stripe.com/api/account_sessions/create.md) menentukan akses komponen dan fitur untuk komponen sematan Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun tersebut. Jika aplikasi Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini. Sebagai contoh, Anda dapat mengaktifkan [manajemen pengembalian dana](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan penegakan akses peran pengguna, Anda harus memetakan peran pengguna situs Anda ke komponen sesi akun.

### Instal StripeConnect SDK (Client)

[Stripe Android SDK](https://github.com/stripe/stripe-android) adalah sumber terbuka dan [didokumentasikan lengkap](https://stripe.dev/stripe-android/).

Untuk menginstal SDK, tambahkan `connect``ke blok`dependencies` file [app/build.gradle](https://developer.android.com/studio/build/dependencies) Anda:

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Connect Android SDK
  implementation("com.stripe:connect:23.3.0")
}
```

> Untuk detail mengenai rilis SDK terbaru dan versi sebelumnya, lihat halaman [Rilis](https://github.com/stripe/stripe-android/releases) di GitHub. Untuk menerima notifikasi bila rilis baru diterbitkan, [lihat rilis untuk repositori](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

### Inisialisasikan EmbeddedComponentManager (Client)

Buat instance [EmbeddedComponentManager](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html) dengan kunci yang dapat dipublikasikan dan lambda yang mengambil client secret dengan memanggil endpoint baru yang Anda buat pada server. Untuk menangani perubahan konfigurasi, simpan instance `EmbeddedComponentManager` di Aktivitas atau Fragmen `ViewModel`.

#### Kotlin

```kotlin
class MyActivityViewModel : ViewModel() {
    val embeddedComponentManager: EmbeddedComponentManager =
        EmbeddedComponentManager(
            // This is a placeholder - it should be replaced with your publishable 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.
            publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
            fetchClientSecret = ::fetchClientSecret,
        )

    private suspend fun fetchClientSecret(): String? =
        try {
            // Fetch the AccountSession client secret
            Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session")
                .awaitString()
                .let { JSONObject(it).getString("client_secret") }
        } catch (error: CancellationException) {
            throw error
        } catch (error: Exception) {
            // Handle errors on the client side here
            println("Error fetching client secret: ${error.message}")
            null
        }
}
```

Untuk membuat komponen, pertama-tama panggil `EmbeddedComponentManager.onActivityCreate()` di metode `onCreate` Activity Anda. Kemudian, panggil metode create yang sesuai pada `EmbeddedComponentManager` yang sudah Anda buat sebelumnya.

[Onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) mengembalikan pengontrol yang mengelola presentasinya sendiri. Komponen lain, seperti [Pembayaran](https://docs.stripe.com/connect/supported-embedded-components/payments.md) mengembalikan sebuah [Tampilan](https://developer.android.com/reference/android/view/View) yang dapat ditampilkan di aplikasi Anda dengan lebih fleksibel.

#### Merender pengontrol

#### Kotlin

```kotlin
class MyActivity : FragmentActivity() {
    private val viewModel: MyActivityViewModel by viewModels()
    private lateinit var accountOnboardingController: AccountOnboardingController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        EmbeddedComponentManager.onActivityCreate(this)
        setContentView(R.layout.my_activity)

        accountOnboardingController =
            viewModel.embeddedComponentManager.createAccountOnboardingController(this)
    }

    private fun openAccountOnboarding() {
        accountOnboardingController.show()
    }
}
```

#### Merender `View`

#### Kotlin

```kotlin
class MyActivity : FragmentActivity() {
    private val viewModel: MyActivityViewModel by viewModels()
    private lateinit var paymentsView: View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        EmbeddedComponentManager.onActivityCreate(this)
        setContentView(R.layout.my_activity)

        paymentsView = viewModel.embeddedComponentManager.createPaymentsView(this)

        // Add the view to your layout
        val container = findViewById<ViewGroup>(R.id.payments_container)
        container.addView(paymentsView)
    }
}
```

## Configure the Embedded Component Manager [Sisi client]

[Lihat dokumentasi referensi :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect/-embedded-component-manager/index.html).

### Sesuaikan tampilan komponen tersemat Connect

[Toolkit Figma UI komponen tersemat](https://www.figma.com/community/file/1438614134095442934) 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](https://docs.stripe.com/connect/embedded-appearance-options.md) untuk menyesuaikan tampilan dan cara kerja komponen tersemat Connect. Penyesuaian ini memengaruhi tombol, ikon, dan aksen lainnya di sistem desain kami.

> #### Popup yang diperlukan
> 
> Beberapa perilaku dalam komponen tersemat, seperti [autentikasi pengguna](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), harus disajikan di WebView yang diautentikasi. Anda tidak dapat menyesuaikan komponen tersemat untuk menghilangkan Tampilan Web tersebut.

Anda dapat mengatur opsi ini menggunakan [Appearance](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/-appearance/index.html) ketika melakukan inisialisasi `EmbeddedComponentManager`.

#### Kotlin

```kotlin
// Specify custom fonts
val customFonts = listOf(
    CustomFontSource(
        // Font file located in `assets/` folder
        assetsFilePath = "fonts/myCustomFont.ttf",
        name = "myCustomFont",
        weight = 1000,
    )
)

// Customize appearance
val appearance = Appearance.Builder()
    .typography(
        Typography.Builder()
            .fontFamily("myCustomFont") // Same name as the custom font above
            .fontSizeBase(16f) // Unscaled font size
            .build()
    )
    .colors(
        Colors.Builder()
            .primary(Color.RED)
            .build()
    )
    .build()

val embeddedComponentManager = EmbeddedComponentManager(
    publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
    fetchClientSecret = ::fetchClientSecret,
    appearance = appearance,
    customFonts = customFonts,
)
```

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 [Pengaturan font aksesibilitas](https://support.google.com/accessibility/android/answer/11183305?sjid=3094445894544346025-NA#fontsize) pengguna.

 Lihat [daftar lengkap opsi penampilan](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=android) di Android.

### 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](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) yang diteruskan ke argumen `customFonts` 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 [CustomFontSource](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html) yang diteruskan ke `EmbeddedComponentManager` pada inisialisasi untuk dirender dengan benar.

[Lihat dokumentasi referensi :external:](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance.fonts/-custom-font-source/index.html).

### Perbarui komponen tersemat Connect setelah inisialisasi

Panggil metode `update` untuk mengubah tampilan komponen tersemat setelah inisialisasi:

#### Kotlin

```kotlin
val appearance = Appearance.Builder()
    .colors(
        Colors.Builder()
            .primary(ContextCompat.getColor(context, R.color.primary))
            .build()
    )
    .build()
embeddedComponentManager.update(appearance = appearance)
```

## Autentikasi

Kami menawarkan seperangkat API untuk mengelola sesi akun dan kredensial pengguna di komponen tersemat Connect.

### Muat ulang client secret

Pada sesi yang berjalan lama, sesi dari *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang semula diberikan mungkin kedaluwarsa. Bila kedaluwarsa, kami secara otomatis menggunakan `fetchClientSecret` untuk mengambil client secret baru dan memuat ulang sesi. Anda tidak perlu meneruskan parameter tambahan.

#### Kotlin

```kotlin
val embeddedComponentManager: EmbeddedComponentManager =
    EmbeddedComponentManager(
        publishableKey = "<<YOUR_PUBLISHABLE_KEY>>",
        fetchClientSecret = ::fetchClientSecret,
    )

private suspend fun fetchClientSecret(): String? =
    try {
        Fuel.post("https://{{YOUR_SERVER_BASE_URL}}/account_session")
            .awaitString()
            .let { JSONObject(it).getString("client_secret") }
    } catch (error: CancellationException) {
        throw error
    } catch (error: Exception) {
        null
    }
```

## Pelokalan

Komponen tersemat Connect mendukung lokal berikut:

| Bahasa                                    | Kode lokal   |
| ----------------------------------------- | ------------ |
| Bahasa Bulgaria (Bulgaria)                | `bg-BG`      |
| Bahasa Tionghoa (Disederhanakan)          | `zh-Hans`    |
| Bahasa Tionghoa (Tradisional - Hong Kong) | `zh-Hant-HK` |
| Bahasa Tionghoa (Tradisional - Taiwan)    | `zh-Hant-TW` |
| Bahasa Kroasia (Kroasia)                  | `hr-HR`      |
| Bahasa Ceko (Cheska)                      | `cs-CZ`      |
| Bahasa Denmark (Denmark)                  | `da-DK`      |
| Bahasa Belanda (Belanda)                  | `nl-NL`      |
| Bahasa Inggris (Australia)                | `en-AU`      |
| Bahasa Inggris (India)                    | `en-IN`      |
| Bahasa Inggris (Irlandia)                 | `en-IE`      |
| Bahasa Inggris (Selandia Baru)            | `en-NZ`      |
| Bahasa Inggris (Singapura)                | `en-SG`      |
| Bahasa Inggris (Kerajaan Inggris)         | `en-GB`      |
| Bahasa Inggris (Amerika Serikat)          | `en-US`      |
| Bahasa Estonia (Estonia)                  | `et-EE`      |
| Bahasa Filipina (Filipina)                | `fil-PH`     |
| Bahasa Finlandia (Finlandia)              | `fi-FI`      |
| Bahasa Prancis (Kanada)                   | `fr-CA`      |
| Bahasa Prancis (Prancis)                  | `fr-FR`      |
| Bahasa Jerman (Jerman)                    | `de-DE`      |
| Bahasa Yunani (Yunani)                    | `el-GR`      |
| Bahasa Hungaria (Hungaria)                | `hu-HU`      |
| Bahasa Indonesia (Indonesia)              | `id-ID`      |
| Bahasa Italia (Italia)                    | `it-IT`      |
| Bahasa Jepang (Jepang)                    | `ja-JP`      |
| Bahasa Korea (Korea Selatan)              | `ko-KR`      |
| Bahasa Latvia (Latvia)                    | `lv-LV`      |
| Bahasa Lituania (Lituania)                | `lt-LT`      |
| Bahasa Melayu (Malaysia)                  | `ms-MY`      |
| Bahasa Malta (Malta)                      | `mt-MT`      |
| Bahasa Bokmål Norwegia (Norwegia)         | `nb-NO`      |
| Bahasa Polandia (Polandia)                | `pl-PL`      |
| Portugis (Brasil)                         | `pt-BR`      |
| Bahasa Portugis (Portugal)                | `pt-PT`      |
| Bahasa Rumania (Rumania)                  | `ro-RO`      |
| Bahasa Slowakia (Slowakia)                | `sk-SK`      |
| Bahasa Slovenia (Slovenia)                | `sl-SI`      |
| Bahasa Spanyol (Argentina)                | `es-AR`      |
| Bahasa Spanyol (Brasil)                   | `es-BR`      |
| Spanyol (Amerika Latin)                   | `es-419`     |
| Bahasa Spanyol (Meksiko)                  | `es-MX`      |
| Bahasa Spanyol (Spanyol)                  | `es-ES`      |
| Bahasa Swedia (Swedia)                    | `sv-SE`      |
| Bahasa Thailand (Thailand)                | `th-TH`      |
| Bahasa Turki (Türkiye)                    | `tr-TR`      |
| Bahasa Vietnam (Vietnam)                  | `vi-VN`      |

## Autentikasi pengguna di komponen tersemat Connect

Komponen tersemat Connect biasanya tidak memerlukan autentikasi pengguna. Dalam sejumlah skenario, komponen tersemat Connect mengharuskan akun terhubung masuk dengan akun Stripe sebelum mengakses komponen untuk menyediakan fungsionalitas yang diperlukan (misalnya, menulis informasi ke badan hukum akun dalam kasus komponen [onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). Komponen lain mungkin memerlukan autentikasi dalam komponen setelah komponen tersebut ditampilkan di awal.

Autentikasi diperlukan untuk akun terhubung di mana Stripe bertanggung jawab untuk mengumpulkan informasi terbaru bila persyaratan berubah. Untuk akun terhubung tempat Anda bertanggung jawab mengumpulkan informasi terbaru bila persyaratan jatuh tempo atau berubah, seperti akun Custom, autentikasi Stripe dikontrol oleh fitur Sesi Akun [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Kami merekomendasikan pengimplementasian 2FA atau tindakan keamanan yang setara sebagai [praktik terbaik](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Untuk konfigurasi akun yang mendukung fitur ini, seperti Custom, Anda bertanggung jawab atas akun terhubung jika akun tersebut tidak dapat membayar kembali [saldo negatif](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Komponen yang memerlukan autentikasi

Akun terhubung akan ditampilkan [WebView](https://developer.chrome.com/docs/android/custom-tabs) yang diautentikasi dalam aplikasi Anda. Akun terhubung harus melakukan autentikasi sebelum dapat melanjutkan alur kerjanya dalam Tampilan Web.

Alur autentikasi yang di-hosting Stripe menampilkan nama, warna, dan ikon brand Anda sebagaimana diatur di [pengaturan Connect](https://dashboard.stripe.com/account/applications/settings) serta tidak menggunakan tampilan dan font custom dari [Manajer Komponen Tersemat](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) sampai autentikasi selesai.

> #### Batasan Android
> 
> Karena batasan dalam Android API, komponen tersemat tidak dapat menggunakan font custom dalam Tampilan Web yang diautentikasi, bahkan setelah autentikasi selesai.

Komponen berikut mengharuskan akun terhubung melakukan autentikasi dalam skenario tertentu:

- [Onboarding Akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Payout](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Tangani kesalahan pemuatan [Sisi klien]

Tanggapi kegagalan muatan komponen dengan menerapkan metode pendengar `onLoadError` komponen.

Tiap kegagalan mungkin akan memicu metode `onLoadError` aktif beberapa kali, sehingga logika apa pun yang dipicu oleh metode `onLoadError` harus idempoten.

#### Kotlin

```kotlin
// All components emit load errors. This example uses AccountOnboarding.
// All components support onLoadError.
class MyActivity : FragmentActivity() {
    private lateinit var accountOnboardingController: AccountOnboardingController

    override fun onCreate(savedInstanceState: Bundle?) {
        accountOnboardingController =
            embeddedComponentManager.createAccountOnboardingController(this)
        accountOnboardingController.listener = MyAccountOnboardingListener()
    }

    private fun openAccountOnboarding() {
        accountOnboardingController.show()
    }

    private inner class MyAccountOnboardingListener : AccountOnboardingListener {
        override fun onLoadError(error: Throwable) {
            println("Error loading account onboarding: ${error.message}")
        }
    }
}
```

## Siapkan StripeConnect [Sisi klien] [Sisi server]

Stripe menggunakan [AccountSession](https://docs.stripe.com/api/account_sessions.md) untuk mengekspresikan maksud Anda guna mendelegasikan akses API ke akun terhubung Anda.

AccountSessions API mengembalikan *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang memungkinkan komponen tersemat mengakses sumber daya akun terhubung seolah-olah Anda yang melakukan panggilan API untuk mereka.

### Buat AccountSession (Server)

Aplikasi Anda harus memulai permintaan ke server Anda untuk mendapatkan sesi akun. Anda dapat membuat endpoint baru di server yang mengembalikan client secret ke aplikasi:

#### Ruby

```ruby
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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/account_session' do
  content_type 'application/json'

  # Create an AccountSession
  begin
    account_session = client.v1.account_sessions.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](https://docs.stripe.com/api/account_sessions/create.md) menentukan akses komponen dan fitur untuk komponen sematan Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun tersebut. Jika aplikasi Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini. Sebagai contoh, Anda dapat mengaktifkan [manajemen pengembalian dana](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-payments-features-refund_management) hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan penegakan akses peran pengguna, Anda harus memetakan peran pengguna situs Anda ke komponen sesi akun.

### Instal Stripe React Native SDK (Client)

Instal Stripe React Native SDK menggunakan npm atau yarn:

```bash
npm install @stripe/stripe-react-native react-native-webview
# or
yarn add @stripe/stripe-react-native react-native-webview
```

### Mulai StripeConnectProvider (Client)

Kemas aplikasi Anda dengan `ConnectComponentsProvider` dan berikan kunci yang dapat dipublikasikan bersama dengan fungsi yang mengambil client secret dengan memanggil endpoint baru yang Anda buat di server Anda.

```javascript
import { useState } from 'react';
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';

const fetchClientSecret = async (): Promise<string> => {
  const response = await fetch('https://{{YOUR_SERVER}}/account_session', {
    method: 'POST',
  });
  const { client_secret: clientSecret } = await response.json();
  return clientSecret;
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    return loadConnectAndInitialize({
      // This is a placeholder - it should be replaced with your publishable 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.
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
    })
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      <YourApp />
    </ConnectComponentsProvider>
  );
}
```

Untuk menggunakan komponen yang disematkan, impor dan render dalam `ConnectComponentsProvider`:

```javascript
import { ConnectAccountOnboarding } from '@stripe/stripe-react-native';
import { useState } from 'react';
import { View } from 'react-native';
import Button from '../components/Button';

export default function AccountOnboardingScreen() {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <Button
        variant="primary"
        title="Show Onboarding"
        onPress={() => setVisible(true)}
      />

      {visible ? (
        <ConnectAccountOnboarding
          onExit={() => {
            setVisible(false);
            console.log('User exited onboarding');
          }}
        />
      ) : null}
    </View>
  );
}
```

## Configure the ConnectComponentsProvider [Sisi client]

[Lihat dokumentasi referensi :external:](https://stripe.dev/stripe-react-native/api-reference/types/StripeConnectInitParams.html).

### Sesuaikan tampilan komponen tersemat Connect

[Toolkit Figma UI komponen tersemat](https://www.figma.com/community/file/1438614134095442934) 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](https://docs.stripe.com/connect/embedded-appearance-options.md) untuk menyesuaikan tampilan dan cara kerja komponen tersemat Connect. Penyesuaian ini memengaruhi tombol, ikon, dan aksen lainnya di sistem desain kami.

> #### Popup yang diperlukan
> 
> Beberapa perilaku dalam komponen tersemat, seperti [autentikasi pengguna](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), harus disajikan di WebView yang diautentikasi. Anda tidak dapat menyesuaikan komponen tersemat untuk menghilangkan Tampilan Web tersebut.

Anda dapat menyesuaikan tampilan komponen Connect tersemat dengan meneruskan opsi `penampilan` ke `loadConnectAndInitialize`.

```javascript
import { ConnectComponentsProvider, loadConnectAndInitialize } from '@stripe/stripe-react-native';
import { useState } from 'react';

const appearance = {
  variables: {
    colorPrimary: '#537D5D',
  },
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    const fetchClientSecret = async () => {
      const response = await fetch('/account_session', { method: "POST" });
      const { client_secret: clientSecret } = await response.json();
      return clientSecret;
    };

    return loadConnectAndInitialize({
      publishableKey: "<<YOUR_PUBLISHABLE_KEY>>",
      fetchClientSecret: fetchClientSecret,
      appearance,
    });
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      {/* Add embedded components and the rest of the UI here */}
    </ConnectComponentsProvider>
  );
}
```

Lihat [daftar lengkap opsi penampilan](https://docs.stripe.com/connect/embedded-appearance-options.md?platform=react-native) untuk React Native.

### Gunakan font custom

Jika Anda menggunakan font custom di aplikasi (misalnya, dari file `.otf` atau `.ttf` yang disematkan di aplikasi Anda), Anda harus menentukan file font di file `CustomFontSource` yang diteruskan ke opsi `customFonts` saat memanggil `loadConnectAndInitialize`. Hal ini memberi komponen tersemat Connect akses ke file font untuk menampilkan font dengan benar.

Font yang ditentukan di `penampilan` harus menggunakan `CustomFontSource` yang diteruskan ke `loadConnectAndInitialize` saat inisialisasi agar dapat ditampilkan dengan benar.

### Perbarui komponen tersemat Connect setelah inisialisasi

Metode `update` mendukung pembaruan komponen tersemat Connect setelah inisialisasi. Ini berguna untuk beralih opsi penampilan pada runtime (tanpa memuat ulang halaman). Untuk melakukannya, gunakan objek `stripeConnectInstance` yang Anda buat dengan `loadConnectAndInitialize` dan panggil metode `update` di sana:

```javascript
stripeConnectInstance.update({
  appearance: {
    variables: {
      colorPrimary: "#FF0000",
    },
  },
});
```

## Autentikasi

Kami menawarkan seperangkat API untuk mengelola sesi akun dan kredensial pengguna di komponen tersemat Connect.

### Muat ulang client secret

Pada sesi yang berjalan lama, sesi dari *client secret* (The client secret is a unique string returned from Stripe as part of an AccountSession. This string lets the client access a specific Stripe account with Connect embedded components) yang semula diberikan mungkin kedaluwarsa. Bila kedaluwarsa, kami secara otomatis menggunakan `fetchClientSecret` untuk mengambil client secret baru dan memuat ulang sesi. Anda tidak perlu meneruskan parameter tambahan.

```javascript
import { useState } from 'react';
import { ConnectComponentsProvider } from '@stripe/stripe-react-native';

const fetchClientSecret = async (): Promise<string> => {
  const response = await fetch('https://{{YOUR_SERVER}}/account_session', {
    method: 'POST',
  });
  const { client_secret: clientSecret } = await response.json();
  return clientSecret;
};

export default function App() {
  const [stripeConnectInstance] = useState(() => {
    return loadConnectAndInitialize({
      publishableKey: "{{PUBLISHABLE_KEY}}",
      fetchClientSecret: fetchClientSecret,
    })
  });

  return (
    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
      <YourApp />
    </ConnectComponentsProvider>
  );
}
```

## Pelokalan

Komponen tersemat Connect mendukung lokal berikut:

| Bahasa                                    | Kode lokal   |
| ----------------------------------------- | ------------ |
| Bahasa Bulgaria (Bulgaria)                | `bg-BG`      |
| Bahasa Tionghoa (Disederhanakan)          | `zh-Hans`    |
| Bahasa Tionghoa (Tradisional - Hong Kong) | `zh-Hant-HK` |
| Bahasa Tionghoa (Tradisional - Taiwan)    | `zh-Hant-TW` |
| Bahasa Kroasia (Kroasia)                  | `hr-HR`      |
| Bahasa Ceko (Cheska)                      | `cs-CZ`      |
| Bahasa Denmark (Denmark)                  | `da-DK`      |
| Bahasa Belanda (Belanda)                  | `nl-NL`      |
| Bahasa Inggris (Australia)                | `en-AU`      |
| Bahasa Inggris (India)                    | `en-IN`      |
| Bahasa Inggris (Irlandia)                 | `en-IE`      |
| Bahasa Inggris (Selandia Baru)            | `en-NZ`      |
| Bahasa Inggris (Singapura)                | `en-SG`      |
| Bahasa Inggris (Kerajaan Inggris)         | `en-GB`      |
| Bahasa Inggris (Amerika Serikat)          | `en-US`      |
| Bahasa Estonia (Estonia)                  | `et-EE`      |
| Bahasa Filipina (Filipina)                | `fil-PH`     |
| Bahasa Finlandia (Finlandia)              | `fi-FI`      |
| Bahasa Prancis (Kanada)                   | `fr-CA`      |
| Bahasa Prancis (Prancis)                  | `fr-FR`      |
| Bahasa Jerman (Jerman)                    | `de-DE`      |
| Bahasa Yunani (Yunani)                    | `el-GR`      |
| Bahasa Hungaria (Hungaria)                | `hu-HU`      |
| Bahasa Indonesia (Indonesia)              | `id-ID`      |
| Bahasa Italia (Italia)                    | `it-IT`      |
| Bahasa Jepang (Jepang)                    | `ja-JP`      |
| Bahasa Korea (Korea Selatan)              | `ko-KR`      |
| Bahasa Latvia (Latvia)                    | `lv-LV`      |
| Bahasa Lituania (Lituania)                | `lt-LT`      |
| Bahasa Melayu (Malaysia)                  | `ms-MY`      |
| Bahasa Malta (Malta)                      | `mt-MT`      |
| Bahasa Bokmål Norwegia (Norwegia)         | `nb-NO`      |
| Bahasa Polandia (Polandia)                | `pl-PL`      |
| Portugis (Brasil)                         | `pt-BR`      |
| Bahasa Portugis (Portugal)                | `pt-PT`      |
| Bahasa Rumania (Rumania)                  | `ro-RO`      |
| Bahasa Slowakia (Slowakia)                | `sk-SK`      |
| Bahasa Slovenia (Slovenia)                | `sl-SI`      |
| Bahasa Spanyol (Argentina)                | `es-AR`      |
| Bahasa Spanyol (Brasil)                   | `es-BR`      |
| Spanyol (Amerika Latin)                   | `es-419`     |
| Bahasa Spanyol (Meksiko)                  | `es-MX`      |
| Bahasa Spanyol (Spanyol)                  | `es-ES`      |
| Bahasa Swedia (Swedia)                    | `sv-SE`      |
| Bahasa Thailand (Thailand)                | `th-TH`      |
| Bahasa Turki (Türkiye)                    | `tr-TR`      |
| Bahasa Vietnam (Vietnam)                  | `vi-VN`      |

## Autentikasi pengguna di komponen tersemat Connect

Komponen tersemat Connect biasanya tidak memerlukan autentikasi pengguna. Dalam sejumlah skenario, komponen tersemat Connect mengharuskan akun terhubung masuk dengan akun Stripe sebelum mengakses komponen untuk menyediakan fungsionalitas yang diperlukan (misalnya, menulis informasi ke badan hukum akun dalam kasus komponen [onboarding akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)). Komponen lain mungkin memerlukan autentikasi dalam komponen setelah komponen tersebut ditampilkan di awal.

Autentikasi diperlukan untuk akun terhubung di mana Stripe bertanggung jawab untuk mengumpulkan informasi terbaru bila persyaratan berubah. Untuk akun terhubung tempat Anda bertanggung jawab mengumpulkan informasi terbaru bila persyaratan jatuh tempo atau berubah, seperti akun Custom, autentikasi Stripe dikontrol oleh fitur Sesi Akun [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-account_onboarding-features-disable_stripe_user_authentication). Kami merekomendasikan pengimplementasian 2FA atau tindakan keamanan yang setara sebagai [praktik terbaik](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Untuk konfigurasi akun yang mendukung fitur ini, seperti Custom, Anda bertanggung jawab atas akun terhubung jika akun tersebut tidak dapat membayar kembali [saldo negatif](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Komponen yang memerlukan autentikasi

Akun terhubung akan ditampilkan  yang diautentikasi dalam aplikasi Anda. Akun terhubung harus melakukan autentikasi sebelum dapat melanjutkan alur kerjanya dalam Tampilan Web.

Alur autentikasi yang di-hosting Stripe menampilkan nama, warna, dan ikon brand Anda sebagaimana diatur di [pengaturan Connect](https://dashboard.stripe.com/account/applications/settings) serta tidak menggunakan tampilan dan font custom dari [Manajer Komponen Tersemat](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#configuring-connect) sampai autentikasi selesai.

Komponen berikut mengharuskan akun terhubung melakukan autentikasi dalam skenario tertentu:

- [Onboarding Akun](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md)
- [Payout](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)

## Tangani kesalahan pemuatan [Sisi klien]

Tanggapi kegagalan muatan komponen dengan menerapkan metode pendengar `onLoadError` komponen.

Tiap kegagalan mungkin akan memicu metode `onLoadError` aktif beberapa kali, sehingga logika apa pun yang dipicu oleh metode `onLoadError` harus idempoten.

#### TypeScript

```javascript
// All components emit load errors. This example uses AccountOnboarding.
// All components support onLoadError.
import { ConnectPayouts } from '@stripe/stripe-react-native';

export default function MyComponent() {
  const handleLoadError = (error: Error) => {
    console.log(`Error loading payouts: ${error.message}`);
  };

  return <ConnectPayouts onLoadError={handleLoadError} />;
}
```

## Minta akses (Private preview)

Masuk untuk meminta akses ke komponen tersemat Connect untuk React Native dalam pratinjau pribadi. Jika Anda tidak memiliki akun Stripe, Anda dapat [mendaftar sekarang](https://dashboard.stripe.com/register).