---
title: "Ugrađene Stripe aplikacije | Tajo"
description: "Upotrijebite ugradive Connect komponente za integraciju Stripe aplikacija u vlastitu platformu"
url: https://tajo.io/hr/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/hr/docs/stripe-apps/embedded-apps.md
lang: hr-HR
author: "Set Noa"
author_url: https://tajo.io/hr/set-noa/
robots: noindex
---

Zatražite rani pristup

Unesite ime i poslovnu adresu e-pošte. Poslat ćemo vam poveznicu za potvrdu zahtjeva za pristup Taju.

# Ugrađene Stripe aplikacije

[Set Noa](https://tajo.io/hr/set-noa/)

Ugrađene Stripe aplikacije omogućuju platformama izgrađenima na Stripe Connectu da funkcionalnost aplikacija trećih strana prikažu izravno unutar vlastitih nadzornih ploča. Uz ugradive Connect komponente svojim povezanim računima možete dati pristup aplikacijama poput QuickBooksa, Xeroa i Mailchimpa bez potrebe da posjećuju Stripe Dashboard.

Caution

**Status: planirano, nije izrađeno.** Tajo nema Stripe aplikaciju, pa se ništa iz ovog odjeljka danas ne može instalirati. Identifikatori aplikacije, URL-ovi i vjerodajnice na ovoj stranici ilustrativni su rezervirani unosi, a ne stvarne krajnje točke.

## Pregled

Ugrađene aplikacije koriste dvije ključne ugradive Connect komponente:

- **`app-install`**: prikazuje gumb za instalaciju Stripe aplikacije unutar sučelja vaše platforme
- **`app-viewport`**: prikazuje određeni prikaz aplikacije unutar sučelja vaše platforme

To operaterima platforme omogućuje da računovodstvene, marketinške i operativne alate ugrade izravno u svoj proizvod.

## Podržane aplikacije

Sljedeće aplikacije podržavaju ugradnju putem Connect komponenti:

| Aplikacija | Kategorija | Primjena |
| --- | --- | --- |
| **QuickBooks** | Računovodstvo | Sinkronizacija plaćanja i računa u QuickBooks |
| **Xero** | Računovodstvo | Automatizirano knjigovodstvo i usklađivanje |
| **Mailchimp** | Marketing | Sinkronizacija podataka o kupcima za kampanje e-pošte |
| **Prilagođene aplikacije** | Bilo koja | Vaše vlastite Stripe aplikacije izrađene za vašu platformu |

Tip

Tajo Brevo integracija može se ugraditi u Connect platforme, čime povezani računi mogu sinkronizirati svoje Stripe podatke s Brevom kroz vlastito sučelje platforme.

## Postavljanje uz Account Sessions API

Za ugradnju aplikacija morate stvoriti Account Sessions s omogućenim odgovarajućim komponentama:

### Na poslužitelju: stvaranje Account Sessiona

```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: inicijalizacija Connect.js-a

```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 za instalaciju aplikacije

Komponenta `app-install` prikazuje gumb za instalaciju kojim povezani računi mogu instalirati Stripe aplikaciju:

### 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 (
    <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 prikaza aplikacije

Komponenta `app-viewport` prikazuje određeni prikaz 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 (
    <ConnectComponentsProvider connectInstance={stripeConnect}>
      <ConnectAppViewport
        app="com.tajo.brevo-integration"
        viewport="stripe.dashboard.customer.detail"
        objectContext={{
          id: customerId,
          object: 'customer',
        }}
      />
    </ConnectComponentsProvider>
  );
};
```

## Shema metapodataka za destination charge

Pri upotrebi ugrađenih aplikacija s destination charge naplatom (uobičajenom na Connect platformama) metapodaci naplate nose strukturirane podatke koje računovodstvene i marketinške integracije mogu iskoristiti.

### Računovodstvene integracije

Za aplikacije poput QuickBooksa i Xeroa metapodaci destination charge naplate slijede ovu shemu:

```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 | Adresa e-pošte kupca za povezivanje računa i potvrda |
| `product_name` | string | Prikazani naziv proizvoda za stavke |
| `product_id` | string | Stripe ID proizvoda |
| `quantity` | string | Količina stavke |
| `unit_amount` | string | Jedinična cijena u najmanjoj jedinici valute (centima) |
| `currency` | string | Troslovna ISO oznaka 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 | Primijenjeni Stripe ID porezne stope |
| `invoice_id` | string | ID povezanog računa |
| `order_id` | string | Interni identifikator narudžbe na platformi |

### Marketinške integracije

Za aplikacije poput Mailchimpa i Tajo Brevo integracije metapodaci omogućuju segmentaciju kupaca i ciljanje kampanja:

```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ćuju Brevo automatizacije kao što su:

- **Serija dobrodošlice** za kupce koji kupuju prvi put (`is_first_purchase: "true"`)
- **Upsell kampanje** na temelju vrijednosti `product_category` i `purchase_value`
- **Tijekovi zadržavanja** za pretplatnike na temelju vrijednosti `subscription_interval`
- **Kampanje povratka** usmjerene na kupce s visokom vrijednošću `lifetime_value` koji odlaze

## Primjer integracije na platformi

Potpuna integracija platforme s ugrađenom Tajo Brevo aplikacijom:

```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 <div>Loading...</div>;

  return (
    <ConnectComponentsProvider connectInstance={stripeConnect}>
      {!isInstalled ? (
        <div>
          <h3>Connect Brevo via Tajo</h3>
          <p>Install the Tajo integration to sync customer data with Brevo.</p>
          <ConnectAppInstall
            app="com.tajo.brevo-integration"
            onAppInstalled={() => setIsInstalled(true)}
          />
        </div>
      ) : (
        <div>
          <h3>Brevo Customer Profile</h3>
          <ConnectAppViewport
            app="com.tajo.brevo-integration"
            viewport="stripe.dashboard.customer.detail"
            objectContext={{
              id: customerId,
              object: 'customer',
            }}
          />
        </div>
      )}
    </ConnectComponentsProvider>
  );
};
```

## Sigurnosna razmatranja

Pri ugradnji aplikacija u vašu platformu:

- **Account Sessions istječu**: stvarajte nove sesije po potrebi, nemojte spremati client secret u predmemoriju
- **Kontrola opsega**: upotrijebite `allowed_apps` kako biste ograničili koje se aplikacije mogu instalirati
- **Izolacija podataka**: podaci svakog povezanog računa su izolirani, platforma ne može pristupiti podacima aplikacije
- **CSP zaglavlja**: provjerite dopušta li Content Security Policy vaše platforme veze prema `https://connect-js.stripe.com`

Caution

Komponente ugrađenih aplikacija zahtijevaju Connect integraciju s pristupom Account Sessions API-ju. Standardni Stripe računi ne mogu koristiti ugradive komponente.