Vložené Stripe Apps
Vložené Stripe Apps umožňují platformám postaveným na Stripe Connect surfovat funkce aplikací třetích stran přímo ve svých vlastních dashboardech. Pomocí Connect vložených komponent můžete svým připojeným účtům poskytnout přístup k aplikacím jako QuickBooks, Xero a Mailchimp bez nutnosti navštívit Stripe Dashboard.
Přehled
Vložené aplikace používají dvě klíčové Connect vložené komponenty:
app-install: Renderuje tlačítko instalace pro Stripe App v UI vaší platformyapp-viewport: Renderuje specifický viewport aplikace v UI vaší platformy
To umožňuje operátorům platforem vložit účetní, marketingové a operační nástroje přímo do svého produktu.
Nastavení pomocí Account Sessions API
Pro vložení aplikací musíte vytvořit Account Sessions s příslušnými povolenými komponentami:
Server-side: Vytvořte Account Session
const stripe = require('stripe')('sk_live_...');
const accountSession = await stripe.accountSessions.create({ account: 'acct_connected_account_id', components: { app_install: { enabled: true, features: { allowed_apps: [ 'com.tajo.brevo-integration', ], }, }, app_viewport: { enabled: true, features: { allowed_apps: [ 'com.tajo.brevo-integration' ], }, }, },});
res.json({ clientSecret: accountSession.client_secret });Client-side: Inicializujte Connect.js
import { loadConnectAndInitialize } from '@stripe/connect-js';
const stripeConnect = loadConnectAndInitialize({ publishableKey: 'pk_live_...', fetchClientSecret: async () => { const response = await fetch('/api/account-session', { method: 'POST', }); const { clientSecret } = await response.json(); return clientSecret; },});Komponenta App Install
React
import { ConnectAppInstall, ConnectComponentsProvider,} from '@stripe/react-connect-js';
const AppInstallButton = () => { return ( <ConnectComponentsProvider connectInstance={stripeConnect}> <ConnectAppInstall app="com.tajo.brevo-integration" onAppInstalled={(event) => { console.log('App installed:', event.app_id); }} onAppUninstalled={(event) => { console.log('App uninstalled:', event.app_id); }} /> </ConnectComponentsProvider> );};Komponenta App Viewport
React
import { ConnectAppViewport, ConnectComponentsProvider,} from '@stripe/react-connect-js';
const BrevoCustomerView = ({ customerId }: { customerId: string }) => { return ( <ConnectComponentsProvider connectInstance={stripeConnect}> <ConnectAppViewport app="com.tajo.brevo-integration" viewport="stripe.dashboard.customer.detail" objectContext={{ id: customerId, object: 'customer', }} /> </ConnectComponentsProvider> );};Bezpečnostní aspekty
Při vkládání aplikací do vaší platformy:
- Account Sessions expirují: Vytvářejte nové sessions podle potřeby; neukládejte client secrets do mezipaměti
- Řízení rozsahu: Používejte
allowed_appspro omezení instalovatelných aplikací - Izolace dat: Data každého připojeného účtu jsou izolovaná; platforma nemůže přistupovat k datům aplikace
- CSP hlavičky: Ujistěte se, že Content Security Policy vaší platformy povoluje připojení k
https://connect-js.stripe.com
Caution
Vložené komponenty aplikace vyžadují Connect integraci s přístupem k Account Sessions API. Standardní účty Stripe nemohou používat vložené komponenty.