Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden

Mit den in Connect eingebetteten Komponenten loslegen

Erfahren Sie, wie Sie Dashboard-Funktionen in Ihre Website einbetten.

Verwenden Sie in Connect eingebettete Komponenten, um Ihrer Website Dashboard-Funktionen für verbundene Konten hinzuzufügen. Mit diesen Bibliotheken und der unterstützenden API können Sie Ihren Nutzerinnen und Nutzern direkt in Ihrem Dashboard und Ihren mobilen Anwendungen Zugriff auf Stripe-Produkte gewähren.

Eine umfassende Version dieses Handbuchs finden Sie im Schnellstart zur Integration eingebetteter Connect-Komponenten. Dort können Sie auch eine Beispielintegration herunterladen. Um das Erscheinungsbild der in Connect eingebetteten Komponenten anzupassen, verwenden Sie die Option appearance bei der Initialisierung von StripeConnectInstance. Siehe die vollständige Liste der Darstellungsparameter.

Connect.js initialisieren
Clientseitig
Serverseitig

Stripe verwendet eine AccountSession, um Ihre Absicht zum Ausdruck zu bringen, den API -Zugriff auf Ihr verbundenes Konto zu delegieren.

Die AccountSessions API gibt ein Client-Geheimnis zurück, das es einer eingebetteten Komponente ermöglicht, so auf die Ressourcen eines verbundenen Kontos zuzugreifen. Dies geschieht so, als würden Sie die API-Aufrufe selbst ausführen.

AccountSession erstellen Server

In einer einseitigen Anwendung initiiert Ihr Client eine Anfrage an Ihren Server, um die Kontositzung zu erhalten. Sie können einen neuen Endpoint auf Ihrem Server erstellen, der das Client-Geheimnis an den Browser zurückgibt:

main.rb
Ruby
Python
PHP
Java
Node
Go
.NET
No results
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

API-Kontositzung erstellen

Die API zum Erstellen von Kontositzungen legt den Zugriff auf Komponenten und Funktionen für in Connect eingebettete Komponenten fest. Stripe erzwingt diese Parameter für alle Komponenten, die der Kontositzung entsprechen. Wenn Ihre Website mehrere Nutzerrollen unterstützt, stellen Sie sicher, dass die Komponenten und Funktionen, die für diese Kontositzung aktiviert sind, der Rolle des aktuellen Nutzers/der aktuellen Nutzerin entsprechen. Beispielsweise können Sie die Rückerstattungsverwaltung nur für Administratoren Ihrer Website, nicht aber für andere Nutzer/innen aktivieren. Um sicherzustellen, dass der Zugriff auf Nutzerrollen erzwungen wird, müssen Sie die Nutzerrolle Ihrer Website den Kontositzungskomponenten zuordnen.

Connect.js einrichten Client

Wir empfehlen, Connect.js mit npm einzurichten, wie im folgenden Beispiel gezeigt, aber es ist auch ohne npm möglich.

Installieren Sie das npm-Paket, um Connect.js als Modul zu verwenden.

Command Line
npm install --save @stripe/connect-js

Connect.js laden und intialisieren Client

Rufen Sie loadConnectAndInitialize mit Ihrem veröffentlichbaren Schlüssel und einer Funktionalität auf, die ein Client-Geheimnis durch Aufrufen des neuen Endpoints abruft, den Sie auf Ihrem Server erstellt haben. Verwenden Sie die zurückgegebene StripeConnectInstance, um eingebettete Komponenten zu erstellen. Nachdem Sie Connect.js initialisiert haben, können Sie jederzeit Komponenten im DOM bereitstellen oder ihre Bereitstellung aufheben. Dies umfasst alle Elemente, die in React- oder Vue-Portalen gerendert werden.

Um eine component zu erstellen, rufen Sie create in der oben erstellen StripeConnectInstance auf, und übergeben Sie dann den Komponentennamen. Dadurch wird ein nutzerdefiniertes Element zurückgegeben, das Connect.js registriert und verwendet, um Ihr DOM automatisch mit Stripe zu verbinden. Sie können dieses Element dann an Ihr DOM append.

Rufen Sie create mit payments auf und fügen Sie das Ergebnis dann Ihrem DOM hinzu, um eine Nutzeroberfläche für Zahlungen zu rendern.

index.html
HTML + JS
React
No results
<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
HTML + JS
React
No results
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);

Eine vollständige Liste der unterstützten eingebetteten Komponenten anzeigen →

Configure Connect.js
Clientseitig

Die Methode loadConnectAndInitialize auf dem Client benötigt mehrere Optionen, um Connect.js zu konfigurieren.

OptionBeschreibung
publishableKeyDer veröffentlichbare Schlüssel für Ihre Integration.erforderlich
fetchClientSecretDie Funktion, die das von /v1/account_sessions zurückgegebene Client-Geheimnis abruft. Dadurch wird StripeConnectInstance mitgeteilt, an welches Konto der Zugriff delegiert werden soll. Diese Funktion wird auch verwendet, um eine Client-Geheimnis-Funktion abzurufen, um die Sitzung zu aktualisieren, wenn sie abläuft. fetchClientSecret sollte immer eine neue Kontositzung erstellen und ein neues client_secret zurückgeben.erforderlich
appearanceEin Objekt zum Anpassen des Erscheinungsbilds der in Connect eingebetteten Komponenten.optional
localeEin Parameter zum Angeben des Gebietsschemas, das von eingebetteten Connect-Komponenten verwendet wird. Das Gebietsschema ist standardmäßig auf die Browsersprache eingestellt. Wenn das angegebene Gebietsschema nicht direkt unterstützt wird, verwenden wir eine passende Alternative (zum Beispiel könnte fr-be auf fr-fr zurückgreifen). Eine Liste der unterstützten Gebietsschemata finden Sie unter Lokalisierung.optional
fontsEin Array mit nutzerdefinierten Schriftarten, die von allen eingebetteten Komponenten verwendet werden können, die aus einer StripeConnectInstance erstellt werden. Sie können Schriftarten als CssFontSource- oder CustomFontSource-Objekte angeben.optional

Erscheinungsbild der in Connect eingebetteten Komponenten anpassen

Das Figma UI-Toolkit für eingebettete Komponenten enthält alle Komponenten, gängige Muster und eine Beispielanwendung. Sie können es verwenden, um eingebettete Nutzeroberflächen auf Ihrer Website zu visualisieren und zu gestalten.

Wir bieten eine Reihe von Optionen, um das Erscheinungsbild von in Connect eingebetteten Komponenten anzupassen. Diese Anpassungen betreffen Schaltflächen, Symbole und andere Akzentuierungen in unserem Designsystem.

Notwendige Popups

Einige Verhaltensweisen in eingebetteten Komponenten, wie z. B. die Nutzerauthentifizierung, müssen in einem Popup dargestellt werden. Sie können die eingebettete Komponente nicht so anpassen, dass solche Popups vermieden werden.

Sie können diese Optionen bei der Initialisierung von StripeConnectInstance festlegen, indem Sie ein Erscheinungsbild an das appearance-Objekt übergeben. Sie können nur die Connect.js-Optionen verwenden, um die Formate in den in Connect eingebetteten Komponenten zu ändern. Die Schriftfamilie und die Hintergrundfarbe der in Connect eingebetteten Komponenten werden vom übergeordneten HTML-Container übernommen. Alle anderen Optionen müssen Sie explizit festlegen.

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",
    },
  },
});

Siehe die vollständige Liste der Darstellungsvariablen.

Das Schriftarten-Objekt

Das fonts-Objekt in stripeConnect.initialize akzeptiert ein Array von CssFontSource- oder CustomFontSource-Objekten.

Wenn Sie auf Ihrer Seite nutzerdefinierte Schriftarten verwenden (z. B. .woff or .tff-Dateien), müssen Sie die Schriftartdateien bei der Initialisierung der in Connect eingebetteten Komponenten angeben. Auf diese Weise können die in Connect eingebetteten Komponenten die Schriftarten ordnungsgemäß rendern. Sie können die Dateien wie folgt angeben:

CssFontSource

Verwenden Sie dieses Objekt, um eine Stylesheet-URL zu übergeben, die Ihre nutzerdefinierten Schriftarten beim Erstellen einer StripeConnectInstance definiert. Bei einem CssFontSource-Objekt muss Ihre CSP-Konfiguration das Abrufen der Domains, die mit den als CssFontSource angegebenen CSS-Datei-URLs verknüpft sind, gestatten.

Name
Typ
Beispielwert
cssSrc
Zeichenfolge required
https://fonts.googleapis.com/css?family=Open+Sans
Eine relative oder absolute URL, die auf eine CSS-Datei mit @font-face-Definitionen verweist. Die Datei muss unter https gehostet werden. Wenn Sie eine Inhaltssicherheitsrichtlinie (Content Security Policy – CSP) verwenden, sind für die Datei möglicherweise zusätzliche Richtlinien erforderlich.

CustomFontSource

Verwenden Sie dieses Objekt, um Ihre nutzerdefinierten Schriftarten beim Erstellen einer StripeConnectInstance zu übergeben.

Name
Typ
Beispielwert
family
Zeichenfolge required
Avenir
Der Name, der der Schriftart gegeben werden soll.
src
Zeichenfolge required
url(https://my-domain.com/assets/avenir.woff)
Ein gültiger src-Wert, der auf Ihre nutzerdefinierte Schriftartdatei verweist. Dies ist in der Regel (wenn auch nicht immer) ein Link zu einer Datei mit dem Suffix .woff , .otf, or .svg. Die Datei muss unter https gehostet werden.
display
Zeichenfolge optional
auto
Ein gültiger font-display-Wert.
style
Zeichenfolge optional
normal
normal , italic oder oblique .
unicodeRange
Zeichenfolge optional
U+0-7F
Ein gültiger unicode-range-Wert.
weight
Zeichenfolge optional
400
Eine gültige Schriftstärke. Dies ist eine Zeichenfolge, keine Zahl.

In Connect eingebettete Komponenten nach der Initialisierung aktualisieren

Die Methode update unterstützt die Aktualisierung von in Connect eingebetteten Komponenten nach der Initialisierung. Sie können sie verwenden, um die Darstellungsoptionen zur Laufzeit zu wechseln (ohne die Seite zu aktualisieren). Verwenden Sie dazu dasselbe stripeConnectInstance-Objekt, das Sie mit initialize erstellt haben, und rufen Sie dafür die update-Methode auf.

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

Notiz

Nicht alle Optionen (zum Beispiel fonts) lassen sich aktualisieren. Die unterstützten Optionen für diese Methode sind eine Teilmenge der in initialize angebotenen Optionen. Dadurch wird die Aktualisierung von appearance und locale unterstützt.

Breite und Höhe

Die in Connect eingebetteten Komponenten verhalten sich wie normale block-HTML-Elemente. Standardmäßig nehmen sie 100 % der width ihres übergeordneten HTML-Elements ein und wachsen entsprechend dem darin gerenderten Inhalt in die Höhe. Sie können die width der in Connect eingebetteten Komponenten steuern, indem Sie die width des übergeordneten HTML-Objekts angeben. Sie können die height nicht direkt steuern, da diese vom gerenderten Inhalt abhängt. Sie können die Höhe jedoch mit maxHeight und overflow: scroll begrenzen, genauso wie Sie es mit anderen HTML-block-Elementen tun können.

Authentifizierung

Wir bieten eine Reihe von APIs zur Verwaltung von Kontositzungen und Nutzeranmeldedaten in den in Connect eingebetteten Komponenten.

Client-Geheimnis aktualisieren

Bei Sitzungen mit langer Laufzeit kann die Sitzung aus dem ursprünglich angegebenen Client-Geheimnis ablaufen. Wenn sie abläuft, verwenden wir automatisch fetchClientSecret, um ein neues Client-Geheimnis abzurufen und die Sitzung zu aktualisieren. Sie müssen keine zusätzlichen Parameter übergeben.

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,
});

Abmelden

Wir empfehlen, dass Sie logout für die stripeConnectInstance aufrufen, um das zugehörige Kontositzungsobjekt zu löschen, nachdem sich eine Nutzerin/ein Nutzer von Ihrer App abgemeldet hat. Dadurch werden alle in Connect eingebetteten Komponenten deaktiviert, die mit dieser stripeConnectInstance verknüpft sind.

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

CSP- und HTTP-Header-Anforderungen

Wenn Ihre Website eine Sicherheitsrichtlinie für Inhalte implementiert, müssen Sie die Richtlinie aktualisieren, indem Sie die folgenden Regeln hinzufügen:

  • 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 eines leeren Style-Elements)

Wenn Sie eine CSS-Datei zum Laden von Web-Fonts zur Nutzung mit in Connect eingebetteten Komponenten verwenden, muss die entsprechende URL durch Ihre CSP-Direktive connect-src zugelassen sein.

Durch Festlegen bestimmter HTTP-Antwort-Header wird die volle Funktionalität der in Connect eingebetteten Komponenten aktiviert:

  • Cross-Origin-Opener-Policy, unsafe-none. Dies (unsafe-none) ist der Standardwert des Headers, daher funktioniert es, diesen Header nicht festzulegen. Andere Werte wie same-origin unterbrechen die Nutzerauthentifizierung in den in Connect eingebetteten Komponenten.

Unterstützte Browser

Wir unterstützen dieselben Browser, die derzeit vom Stripe-Dashboard unterstützt werden:

  • Die letzten 20 Hauptversionen von Chrome und Firefox
  • Die letzten beiden Hauptversionen von Safari und Edge
  • Die letzten beiden Hauptversionen von Safari für iOS

Die in Connect eingebetteten Komponenten werden nur in Webbrowsern unterstützt und können nicht in eingebetteten Webansichten in mobilen oder Desktop-Anwendungen verwendet werden.

Lokalisierung

Bei der Initialisierung von Connect.js können Sie den Parameter locale übergeben. Um das Gebietsschema einer eingebetteten Komponente an das Gebietsschema Ihrer Website anzupassen, übergeben Sie den Parameter locale mit dem Gebietsschema der Nutzeroberfläche, die Ihre Website rendert.

Der Standardwert des Parameters locale wird durch das im Browser konfigurierte Gebietsschema bestimmt. Wenn das angegebene Gebietsschema nicht direkt unterstützt wird, wird eine sinnvolle Alternative verwendet (zum Beispiel könnte fr-be auf fr-fr zurückgreifen).

Eingebettete Connect-Komponenten unterstützen die folgenden Gebietsschemen:

SpracheGebietsschema-Code
Bulgarisch (Bulgarien)bg-BG
Chinesisch (Vereinfacht)zh-Hans
Chinesisch (Traditionell – Hongkong)zh-Hant-HK
Chinesisch (Traditionell – Taiwan)zh-Hant-TW
Kroatisch (Kroatien)hr-HR
Tschechisch (Tschechien)cs-CZ
Dänisch (Dänemark)da-DK
Niederländisch (Niederlande)nl-NL
Englisch (Australien)en-AU
Englisch (Indien)en-IN
Englisch (Irland)en-IE
Englisch (Neuseeland)en-NZ
Englisch (Singapur)en-SG
Englisch (Vereinigtes Königreich)en-GB
Englisch (USA)en-US
Estnisch (Estland)et-EE
Philippinisch (Philippinen)fil-PH
Finnisch (Finnland)fi-FI
Französisch (Kanada)fr-CA
Französisch (Frankreich)fr-FR
Deutsch (Deutschland)de-DE
Griechisch (Griechenland)el-GR
Ungarisch (Ungarn)hu-HU
Indonesisch (Indonesien)id-ID
Italienisch (Italien)it-IT
Japanisch (Japan)ja-JP
Koreanisch (Südkorea)ko-KR
Lettisch (Lettland)lv-LV
Litauisch (Litauen)lt-LT
Malay (Malaysia)ms-MY
Maltesisch (Malta)mt-MT
Norwegisch, Bokmål (Norwegen)nb-NO
Polnisch (Polen)pl-PL
Portugiesisch (Brasilien)pt-BR
Portugiesisch (Portugal)pt-PT
Rumänisch (Rumänien)ro-RO
Slowakisch (Slowakei)sk-SK
Slowenisch (Slowenien)sl-SI
Spanisch (Argentinien)es-AR
Spanisch (Brasilien)es-BR
Spanisch (Lateinamerika)es-419
Spanisch (Mexiko)es-MX
Spanisch (Spanien)es-ES
Schwedisch (Schweden)sv-SE
Thai (Thailand)th-TH
Türkisch (Türkiye)tr-TR
Vietnamesisch (Vietnam)vi-VN

Umgang mit Fehlern beim Laden

Wenn eine Komponente nicht geladen werden kann, können Sie auf den Fehler reagieren, indem Sie einer eingebetteten Komponente einen Load Error Handler zur Verfügung stellen. Je nach Fehlerursache kann der Load Error Handler mehrfach aufgerufen werden. Jede Logik, die durch einen Load Error Handler ausgelöst wird, muss idempotent sein.

index.js
HTML + JS
React
No results
// 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);
MethodeBeschreibungVariablen
setOnLoadErrorDie Komponente führt diese Callback-Funktion aus, wenn ein Ladefehler auftritt.
  • loadError.error: Siehe das Ladefehler-Objekt
  • loadError.elementTagName: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird

Das Lade-error-Objekt

Jedes Mal, wenn ein Ladefehler auftritt, wird ein error-Objekt mit den folgenden Eigenschaften an den Ladefehler-Handler übergeben.

Name
Typ
Beispielwert
type
Siehe Arten von Ladefehlern
authentication_error
Art des Fehlers
message
Zeichenfolge | undefiniert
Failed to fetch account session
Weitere Erläuterungen zum Fehler

Arten von Ladefehlern

Wenn eine Komponente nicht geladen werden kann, ermitteln wir die Art des Fehlers und ordnen ihn einem der folgenden Typen zu. Wenn die Art des Ladefehlers nicht ermittelt werden kann, wird sie als api_error gekennzeichnet.

TypBeschreibung
api_connection_errorVerbindung zur API von Stripe fehlgeschlagen
authentication_errorFehler beim Ausführen des Authentifizierungsablaufs in den in Connect eingebetteten Komponenten
account_session_create_errorErstellung der Kontositzung fehlgeschlagen
invalid_request_errorAnfrage fehlgeschlagen mit Statuscode 4xx, in der Regel verursacht durch Probleme mit der Plattformkonfiguration
rate_limit_errorAnfrage fehlgeschlagen, da eine anormale Anfragerate festgestellt wurde
api_errorAPI-Fehler, die alle anderen Arten von Problemen abdecken, z. B. ein vorübergehendes Problem mit den Stripe-Servern

Anzeige eingebetteter Komponenten erkennen

Nachdem eine Komponente erstellt wurde, wird auf Nutzerseite erst dann eine Nutzeroberfläche angezeigt, wenn das Javascript für die Komponente geladen und im Browser analysiert wurde. Dies kann dazu führen, dass Komponenten nach Abschluss des Ladevorgangs angezeigt werden. Um dies zu vermeiden, zeigen Sie Ihre eigene Ladenutzeroberfläche an, bevor die Komponente erstellt wird, und blenden die Nutzeroberfläche aus, nachdem die Komponente angezeigt wurde. Alle eingebetteten Komponenten können eine Rückruf-Funktion akzeptieren, die unmittelbar vor der Anzeige einer Nutzeroberfläche (einschließlich Ladeindikatoren) aufgerufen wird.

index.html
HTML + JS
React
No results
<span id="spinner"></span>
<div id="balances-container"></div>
index.js
HTML + JS
React
No results
// 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);
MethodeBeschreibungVariablen
setOnLoaderStartDie Komponente führt diese Callback-Funktion aus, wenn dem Nutzer/der Nutzerin eine beliebige Nutzeroberfläche (einschließlich Ladeindikatoren) angezeigt wird.
  • event.elementTagName: Der Name des HTML-Tags, das zum Rendern der Komponente im Browser verwendet wird

Connect.js ohne npm verwenden

Wir empfehlen die Integration mit unseren Javascript- und React-Komponenten-Wrappern, die das Laden der in Connect eingebetteten Komponenten vereinfachen und TypeScript-Definitionen für unsere unterstützten Schnittstellen bereitstellen. Wenn Ihr Build-System derzeit keine Abhängigkeiten von Paketen unterstützt, können Sie die Integration auch ohne diese Pakete durchführen.

Fügen Sie das Connect.js-Skript-Tag manuell zum <head> jeder Seite Ihrer Website hinzu.

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

Nachdem Connect.js geladen wurde, initialisiert wird die globale Fenstervariable StripeConnect initialisiert und, sofern definiert, StripeConnect.onLoad aufgerufen. Sie können Connect.js sicher initialisieren, indem Sie eine onload-Funktion einrichten und StripeConnect.init mit denselben Connect.js-Optionen wie loadConnectAndInitialize aufrufen. Sie können die von init zurückgegebene Connect-Instanz auf die gleiche Weise verwenden wie die von loadConnectAndInitialize zurückgegebene Instanz, um eingebettete Komponenten in einer HTML + JS-Integration zu erstellen.

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);
};

Nutzerauthentifizierung in eingebetteten Connect-Komponenten

Für eingebettete Connect-Komponenten ist in der Regel keine Nutzerauthentifizierung erforderlich. In einigen Fällen müssen sich die verbundenen Konten im Rahmen der eingebetteten Connect-Komponenten vor dem Zugriff auf die Komponente mit ihrem Stripe-Konto anmelden, um die erforderlichen Funktionen bereitzustellen (so müssen z. B. den juristischen Personen im Fall einer Komponente des Konto-Onboardings Informationen zugeschrieben werden). Andere Komponenten erfordern möglicherweise nach der ersten Anzeige eine Authentifizierung innerhalb der Komponente.

Eine Authentifizierung ist für verbundene Konten erforderlich, bei denen Stripe dafür verantwortlich ist, aktualisierte Informationen zu erfassen, wenn sich die Anforderungen ändern. Bei verbundenen Konten, bei denen Sie dafür verantwortlich sind, aktualisierte Informationen zu erfassen, wenn Anforderungen fällig sind oder sich ändern (wie z. B. Custom-Konten), wird die Stripe-Authentifizierung durch die disable_stripe_user_authentication-Kontositzungsfunktion gesteuert. Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als Best Practice. Bei Kontokonfigurationen, die diese Funktion unterstützen (wie z. B. Custom), übernehmen Sie die Haftung für verbundene Konten, wenn diese Negativsalden nicht zurückzahlen können.

Komponenten, die eine Authentifizierung erfordern

Bei der Authentifizierung wird ein Pop-up-Fenster in einem Stripe-Fenster angezeigt. Das verbundene Konto muss sich authentifizieren, bevor es seinen Workflow fortsetzen kann.

Die folgenden Komponenten erfordern die Authentifizierung verbundener Konten in bestimmten Szenarien:

Best Practices für die Leistung

Um die Ladezeit der in Connect eingebetteten Komponenten so gering wie möglich zu halten, befolgen Sie diese Empfehlungen:

  • Rufen Sie loadConnectAndInitialize so früh wie möglich in Ihrem Ablauf auf.
  • Einzelne Verbindungsinstanz erstellen: Erstellen Sie eine einzelne Verbindungsinstanz, indem Sie loadConnectAndInitialize nur einmal pro Sitzung aufrufen. Verwenden Sie diese Instanz dann erneut, um mehrere Komponenten zu erstellen und zu verwalten. Ein häufiger Fehler besteht darin, eine Verbindungsinstanz pro Komponente oder mehrere Verbindungsinstanzen pro Sitzung zu erstellen. Dies resultiert in zusätzlichem Ressourcenverbrauch und API-Anfragen. Wenn Sie React verwenden, können Sie eine Statusverwaltungsbibliothek oder einen React-Kontext zur Verwaltung dieser Instanz verwenden.
  • Verwenden Sie die neueste Version der entsprechenden SDKs: Verwenden Sie die neueste Version der connect-js or react-connect-js npm-Paket-SDKs. Diese SDKs initialisieren eingebettete Komponenten auf eine Weise, die die Leistung maximiert. Die SDKs wurden um Leistungsverbesserungen erweitert. Wir empfehlen daher ein Upgrade, wenn Sie eine ältere Version verwenden.
  • Laden Sie das connect.js-Skript so bald wie möglich in Ihren Ablauf: Der frühestmögliche Zeitpunkt, an dem Sie das Skript laden können, besteht darin, dieses Skript in Ihren HTML-head einzubinden. Sie können auch das Standardverhalten unserer npm-Paket-SDKs verwenden, die es laden, wenn Ihre Seite zum ersten Mal mit Javascript geladen wird.
War diese Seite hilfreich?
JaNein