Lewati ke konten
Buat akun
 atau
Masuk
Logo Dokumen Stripe
/
Buat akun
Masuk

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. 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.

Lakukan inisialisasi Connect.js
Sisi klien
Sisi server

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

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

Buat AccountSession Server

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:

main.rb
require 'sinatra'
require 'stripe'
# This is a placeholder - it should be replaced with your secret API key.
# Sign in to see your own test API key embedded in code samples.
# Don’t submit any personally identifiable information in requests made with this key.
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


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

  # Create an AccountSession
  begin
    account_session = Stripe::AccountSession.create({
      account: 
'{{CONNECTED_ACCOUNT_ID}}'
,
      components: {
        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 menentukan akses komponen dan fitur untuk komponen tersemat Connect. Stripe memberlakukan parameter ini untuk setiap komponen yang sesuai dengan sesi akun. Jika situs Anda mendukung beberapa peran pengguna, pastikan komponen dan fitur yang diaktifkan untuk sesi akun tersebut sesuai dengan peran pengguna saat ini. Misalnya, Anda dapat mengaktifkan manajemen pengembalian dana hanya untuk administrator situs Anda, tetapi tidak untuk pengguna lain. Untuk memastikan akses peran pengguna diberlakukan, Anda harus memetakan peran pengguna situs ke komponen sesi akun.

Siapkan Connect.js Client

Kami merekomendasikan penyiapan Connect.js dengan npm seperti yang ditampilkan dalam contoh berikut, tetapi juga dimungkinkan tanpa npm.

Instal paket npm untuk menggunakan Connect.js sebagai modul.

Command Line
npm install --save @stripe/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.

Untuk membuat komponen, panggil create pada StripeConnectInstance yang Anda buat di atas, kemudian teruskan nama komponen. Ini mengembalikan elemen custom 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.

index.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>
index.js
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: 
"pk_test_TYooMQauvdEDq54NiTphI7jx"
,
    fetchClientSecret: fetchClientSecret,
  });
const paymentComponent = stripeConnectInstance.create("payments");
const container = document.getElementById("container");
container.appendChild(paymentComponent);

Lihat daftar lengkap komponen tersemat yang didukung →

Configure Connect.js
Sisi client

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

OpsiKeterangan
publishableKeyKunci yang dapat dipublikasikan untuk integrasi Anda.diperlukan
fetchClientSecretFungsi yang mengambil client secret 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
appearanceObjek untuk menyesuaikan tampilan komponen tersemat Connect.opsional
localeParameter untuk menentukan lokal 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 untuk daftar lokal yang didukung.opsional
fontsLarik font custom yang tersedia untuk digunakan oleh komponen tersemat yang dibuat dari StripeConnectInstance. Anda dapat menentukan font sebagai objek CssFontSource atau CustomFontSource.opsional

Sesuaikan tampilan komponen tersemat Connect

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

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

Popup yang diperlukan

Beberapa perilaku di komponen tersemat, seperti autentikasi pengguna, 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 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.

index.js
const stripeConnectInstance = loadConnectAndInitialize({
  publishableKey: 
"pk_test_TYooMQauvdEDq54NiTphI7jx"
,
  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.

Objek font

Objek fonts di stripeConnect.initialize mengambil larik dari objek CssFontSource atau CustomFontSource.

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 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. File harus di-hosting pada https. Jika Anda menggunakan kebijakan keamanan konten (CSP), file mungkin memerlukan arahan tambahan.

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 valid yang menunjuk ke file font custom Anda. Ini biasanya (meski tidak selalu) berupa tautan ke file dengan akhiran .woff , .otf, atau .svg. File harus di-hosting pada https.
display
string optional
auto
Nilai tampilan-font valid.
style
string optional
normal
Salah satu dari normal, italic, atau oblique.
unicodeRange
string optional
U+0-7F
Nilai rentang-unicode valid.
weight
string optional
400
Bobot-font 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:

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

Catatan

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 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.

index.js
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.

index.js
// Call this when your user logs out
stripeConnectInstance.logout();

Persyaratan header CSP dan HTTP

Jika situs web Anda mengimplementasikan Kebijakan Keamanan Konten, 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 untuk digunakan dengan komponen tersemat Connect, URL-nya harus diizinkan oleh arahan CSP connect-src Anda.

Mengatur header respons HTTP tertentu memungkinkan fungsionalitas lengkap komponen tersemat Connect:

Browser yang didukung

Kami mendukung serangkaian yang sama dari browser yang saat ini didukung oleh Dashboard Stripe:

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

Komponen tersemat Connect hanya didukung di browser web dan tidak dapat digunakan dalam tampilan web tersemat di dalam aplikasi seluler atau desktop.

Pelokalan

Ketika melakukan inisialisasi Connect.js, 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:

BahasaKode 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.

index.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);
MetodeKeteranganVariabel
setOnLoadErrorKomponen menjalankan fungsi callback ini ketika terjadi kegagalan beban.
  • loadError.error: Lihat objek kesalahan beban
  • 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
authentication_error
Tipe kesalahan
message
string | undefined
Failed to fetch account session
Keterangan lebih lanjut tentang kesalahan tersebut

Jenis kegagalan beban

Bila komponen gagal dimuat, kami mendeteksi tipe kegagalan dan memetakannya ke salah satu tipe di bawah ini. Jika tipe kesalahan pemuatan tidak dapat ditentukan, akan ditandai sebagai api_error.

TipeKeterangan
api_connection_errorGagal menghubungkan ke API Stripe
authentication_errorKegagalan melakukan alur autentikasi dalam komponen tersemat Connect
account_session_create_errorPembuatan sesi akun gagal
invalid_request_errorPermintaan gagal dengan kode status 4xx, biasanya disebabkan oleh masalah konfigurasi platform
rate_limit_errorPermintaan gagal karena tingkat permintaan yang tidak normal terdeteksi
api_errorKesalahan API yang mencakup jenis masalah lainnya, seperti masalah sementara dengan server Stripe

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.

index.html
<span id="spinner"></span>
<div id="balances-container"></div>
index.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").display = "none";
  console.log(`${event.elementTagName} is visible to users`)
});

container.appendChild(balances);
MetodeKeteranganVariabel
setOnLoaderStartKomponen 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 dan pembungkus komponen React 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.

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

Setelah selesai memuat, Connect.js menginisialisasi variabel jendela global StripeConnect dan memanggil StripeConnect.onLoad, jika ditentukan. Anda dapat menginisialisasi Connect.js secara aman dengan menyiapkan fungsi onload dan memanggil StripeConnect.init dengan opsi Connect.js yang sama seperti loadConnectAndInitialize. Anda dapat menggunakan instance Connect yang dikembalikan oleh init dengan cara yang sama seperti Anda menggunakan instance yang dikembalikan oleh loadConnectAndInitialize untuk membuat komponen tersemat dalam integrasi HTML + JS.

index.js
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: 
"pk_test_TYooMQauvdEDq54NiTphI7jx"
,
      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). 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. Kami merekomendasikan pengimplementasian 2FA atau tindakan keamanan yang setara sebagai praktik terbaik. Untuk konfigurasi akun yang mendukung fitur ini, seperti Custom, Anda bertanggung jawab atas akun terhubung jika akun tersebut tidak dapat membayar kembali saldo negatif.

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:

Praktik terbaik kinerja

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

  • Panggil loadConnectAndInitialize sedini mungkin di alur Anda.
  • Buat satu instance connect: Buat satu instance Connect hanya dengan memanggil loadConnectAndInitialize sekali per sesi. Kemudian gunakan kembali instance itu untuk membuat dan mengelola beberapa komponen. Kesalahan umum adalah membuat satu instance koneksi per komponen, atau beberapa instance koneksi per sesi. Hal ini menyebabkan tambahan konsumsi sumber daya dan permintaan API. Jika menggunakan React, Anda dapat menggunakan pustaka manajemen status atau konteks React untuk mengelola instance ini.
  • Gunakan versi terbaru SDK yang sesuai: Gunakan versi terbaru SDK paket npm connect-js atau 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.
Apakah halaman ini membantu?
YaTidak
Butuh bantuan? Hubungi Tim CS.
Bergabunglah dengan program akses awal kami.
Lihat log perubahan kami.
Ada pertanyaan? Hubungi Bagian Penjualan.
LLM? Baca llms.txt.
Dijalankan oleh Markdoc