---
title: "Ugrađene Stripe aplikacije | Tajo"
description: "Koristite Connect ugrađene komponente da integrišete Stripe aplikacije u sopstvenu platformu"
url: https://tajo.io/sr/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/sr/docs/stripe-apps/embedded-apps.md
lang: sr-Latn-RS
author: "Set Noa"
author_url: https://tajo.io/sr/set-noa/
robots: noindex
---
Zatražite rani pristup
Unesite ime i poslovnu adresu e-pošte. Poslaćemo vam vezu za potvrdu zahteva za pristup Taju.
# Ugrađene Stripe aplikacije
[Set Noa](https://tajo.io/sr/set-noa/)
Ugrađene Stripe aplikacije omogućavaju platformama izgrađenim na Stripe Connect-u da funkcije aplikacija trećih strana prikažu direktno u sopstvenim komandnim tablama. Uz Connect ugrađene komponente možete svojim povezanim nalozima dati pristup aplikacijama kao što su QuickBooks, Xero i Mailchimp, bez potrebe da posećuju Stripe Dashboard.
Caution
**Status: planirano, nije izrađeno.** Tajo nema Stripe aplikaciju, pa ništa iz ovog odeljka danas ne može da se instalira. Identifikatori aplikacije, adrese i akreditivi na ovoj stranici su ilustrativni rezervisani primeri, a ne aktivne krajnje tačke.
## Pregled
Ugrađene aplikacije koriste dve ključne Connect ugrađene komponente:
- **`app-install`**: prikazuje dugme za instalaciju Stripe aplikacije unutar korisničkog interfejsa vaše platforme
- **`app-viewport`**: prikazuje određeni viewport aplikacije unutar korisničkog interfejsa vaše platforme
Time operatori platforme mogu da ugrade računovodstvene, marketinške i operativne alate direktno u svoj proizvod.
## Podržane aplikacije
Sledeće aplikacije podržavaju ugrađivanje preko Connect komponenti:
| Aplikacija | Kategorija | Primer upotrebe |
| --- | --- | --- |
| **QuickBooks** | Računovodstvo | Sinhronizujte plaćanja i fakture sa QuickBooks-om |
| **Xero** | Računovodstvo | Automatizovano knjigovodstvo i usaglašavanje |
| **Mailchimp** | Marketing | Sinhronizujte podatke o kupcima za imejl kampanje |
| **Prilagođene aplikacije** | Bilo koja | Vaše sopstvene Stripe aplikacije napravljene za vašu platformu |
Tip
Tajo Brevo integracija može se ugraditi u Connect platforme, čime povezani nalozi mogu da sinhronizuju svoje Stripe podatke sa Brevom kroz sopstveni interfejs platforme.
## Podešavanje pomoću Account Sessions API-ja
Da biste ugradili aplikacije, potrebno je da kreirate Account Sessions sa omogućenim odgovarajućim komponentama:
### Na serveru: kreirajte Account Session
```javascript
const stripe = require('stripe')('sk_live_...');
// Create an Account Session for the connected account
const accountSession = await stripe.accountSessions.create({
account: 'acct_connected_account_id',
components: {
// Enable app install component
app_install: {
enabled: true,
features: {
allowed_apps: [
'com.tajo.brevo-integration',
'com.quickbooks.stripe-app'
],
},
},
// Enable app viewport component
app_viewport: {
enabled: true,
features: {
allowed_apps: [
'com.tajo.brevo-integration'
],
},
},
},
});
// Return the client secret to your frontend
res.json({ clientSecret: accountSession.client_secret });
```
### Na klijentu: inicijalizujte Connect.js
```javascript
import { loadConnectAndInitialize } from '@stripe/connect-js';
// Initialize Connect.js with the account session
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
Komponenta `app-install` prikazuje dugme za instalaciju koje povezani nalozi mogu da koriste za instaliranje Stripe aplikacije:
### JavaScript
```javascript
// Create the app install element
const appInstall = stripeConnect.create('app-install');
// Set the app to install
appInstall.setApp('com.tajo.brevo-integration');
// Mount to a DOM element
const container = document.getElementById('app-install-container');
appInstall.mount(container);
// Listen for install events
appInstall.on('app_installed', (event) => {
console.log('App installed:', event.app_id);
// Show the app viewport after installation
showAppViewport();
});
appInstall.on('app_uninstalled', (event) => {
console.log('App uninstalled:', event.app_id);
});
```
### React
```tsx
import {
ConnectAppInstall,
ConnectComponentsProvider,
} from '@stripe/react-connect-js';
const AppInstallButton = () => {
return (
{
console.log('App installed:', event.app_id);
}}
onAppUninstalled={(event) => {
console.log('App uninstalled:', event.app_id);
}}
/>
);
};
```
## Komponenta App Viewport
Komponenta `app-viewport` prikazuje određeni viewport aplikacije unutar vaše platforme:
### JavaScript
```javascript
// Create the app viewport element
const appViewport = stripeConnect.create('app-viewport');
// Configure the viewport
appViewport.setApp('com.tajo.brevo-integration');
appViewport.setViewport('stripe.dashboard.customer.detail');
// Pass object context (e.g., customer ID)
appViewport.setObjectContext({
id: 'cus_xxxxx',
object: 'customer',
});
// Mount to a DOM element
const container = document.getElementById('app-viewport-container');
appViewport.mount(container);
```
### React
```tsx
import {
ConnectAppViewport,
ConnectComponentsProvider,
} from '@stripe/react-connect-js';
const BrevoCustomerView = ({ customerId }: { customerId: string }) => {
return (
);
};
```
## Šema metapodataka za destination charge
Kada ugrađene aplikacije koristite sa destination charge naplatama (uobičajenim na Connect platformama), metapodaci naplate nose strukturirane podatke koje računovodstvene i marketinške integracije mogu da koriste.
### Računovodstvene integracije
Za aplikacije kao što su QuickBooks i Xero, metapodaci destination charge naplate prate ovu šemu:
```json
{
"metadata": {
"customer_id": "cus_platform_customer_id",
"customer_email": "customer@example.com",
"product_name": "Premium Subscription",
"product_id": "prod_xxxxx",
"quantity": "1",
"unit_amount": "4999",
"currency": "usd",
"platform_fee": "500",
"platform_fee_currency": "usd",
"tax_amount": "450",
"tax_rate_id": "txr_xxxxx",
"invoice_id": "inv_xxxxx",
"order_id": "order_12345"
}
}
```
| Polje | Tip | Opis |
| --- | --- | --- |
| `customer_id` | string | Identifikator kupca na platformi |
| `customer_email` | string | Imejl kupca za uparivanje fakture ili računa |
| `product_name` | string | Prikazni naziv proizvoda za stavke |
| `product_id` | string | Stripe ID proizvoda |
| `quantity` | string | Količina stavke |
| `unit_amount` | string | Jedinična cena u najmanjoj jedinici valute (centima) |
| `currency` | string | Troslovni ISO kod valute |
| `platform_fee` | string | Iznos naknade aplikacije u najmanjoj jedinici valute |
| `platform_fee_currency` | string | Valuta naknade platforme |
| `tax_amount` | string | Iznos poreza u najmanjoj jedinici valute |
| `tax_rate_id` | string | ID primenjene Stripe poreske stope |
| `invoice_id` | string | ID povezane fakture |
| `order_id` | string | Interni identifikator porudžbine na platformi |
### Marketinške integracije
Za aplikacije kao što su Mailchimp i Tajo Brevo integracija, metapodaci omogućavaju segmentaciju kupaca i ciljanje kampanjama:
```json
{
"metadata": {
"customer_id": "cus_xxxxx",
"customer_email": "customer@example.com",
"customer_name": "Jane Smith",
"product_category": "subscription",
"product_name": "Pro Plan",
"purchase_value": "4999",
"currency": "usd",
"is_first_purchase": "true",
"referral_source": "partner_campaign",
"subscription_interval": "monthly",
"lifetime_value": "29994"
}
}
```
Ovi metapodaci omogućavaju Brevo automatizacije kao što su:
- **Serija dobrodošlice** za kupce koji kupuju prvi put (`is_first_purchase: "true"`)
- **Upsell kampanje** na osnovu `product_category` i `purchase_value`
- **Tokovi zadržavanja** za pretplatnike na osnovu `subscription_interval`
- **Kampanje za povratak kupaca** usmerene na kupce sa visokim `lifetime_value` koji odustanu
## Primer integracije platforme
Kompletna integracija platforme koja ugrađuje Tajo Brevo aplikaciju:
```tsx
import { useState, useEffect } from 'react';
import {
ConnectAppInstall,
ConnectAppViewport,
ConnectComponentsProvider,
} from '@stripe/react-connect-js';
import { loadConnectAndInitialize } from '@stripe/connect-js';
const TajoBrevoPlatformIntegration = ({ connectedAccountId, customerId }) => {
const [stripeConnect, setStripeConnect] = useState(null);
const [isInstalled, setIsInstalled] = useState(false);
useEffect(() => {
const instance = loadConnectAndInitialize({
publishableKey: 'pk_live_...',
fetchClientSecret: async () => {
const res = await fetch('/api/account-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ accountId: connectedAccountId }),
});
const { clientSecret } = await res.json();
return clientSecret;
},
});
setStripeConnect(instance);
}, [connectedAccountId]);
if (!stripeConnect) return
Loading...
;
return (
{!isInstalled ? (
Connect Brevo via Tajo
Install the Tajo integration to sync customer data with Brevo.
setIsInstalled(true)}
/>
) : (
Brevo Customer Profile
)}
);
};
```
## Bezbednosna razmatranja
Kada ugrađujete aplikacije u svoju platformu:
- **Account Sessions ističu**: kreirajte nove sesije po potrebi; nemojte keširati client secret vrednosti
- **Kontrola opsega**: koristite `allowed_apps` da ograničite koje aplikacije mogu da se instaliraju
- **Izolacija podataka**: podaci svakog povezanog naloga su izolovani; platforma ne može pristupiti podacima aplikacije
- **CSP zaglavlja**: uverite se da Content Security Policy vaše platforme dozvoljava veze ka `https://connect-js.stripe.com`
Caution
Komponente ugrađenih aplikacija zahtevaju Connect integraciju sa pristupom Account Sessions API-ju. Standardni Stripe nalozi ne mogu da koriste ugrađene komponente.