---
title: "Gömülü Stripe Uygulamaları | Tajo"
description: "Stripe Apps'i kendi platformunuza entegre etmek için Connect gömülü bileşenlerini kullanın"
url: https://tajo.io/tr/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/tr/docs/stripe-apps/embedded-apps.md
lang: tr-TR
author: "Set Noa"
author_url: https://tajo.io/tr/set-noa/
robots: noindex
---

Erken erişim talep edin

Adınızı ve iş e-posta adresinizi girin. Tajo erişim talebinizi onaylamanız için size bir bağlantı göndereceğiz.

# Gömülü Stripe Uygulamaları

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

Gömülü Stripe Apps, Stripe Connect üzerine kurulu platformların üçüncü taraf uygulama işlevlerini doğrudan kendi panellerinde sunmasına olanak tanır. Connect gömülü bileşenlerini kullanarak, bağlı hesaplarınıza Stripe panelini ziyaret etmelerine gerek kalmadan QuickBooks, Xero ve Mailchimp gibi uygulamalara erişim verebilirsiniz.

Caution

**Durum: planlandı, oluşturulmadı.** Tajo’nun bir Stripe App’i yoktur, bu nedenle bu bölümdeki hiçbir şey bugün kurulamaz. Bu sayfadaki uygulama tanımlayıcıları, URL’ler ve kimlik bilgileri canlı uç noktalar değil, örnek amaçlı yer tutuculardır.

## Genel bakış

Gömülü uygulamalar iki temel Connect gömülü bileşenini kullanır:

- **`app-install`**: Platform arayüzünüzde bir Stripe App için kurulum düğmesi oluşturur
- **`app-viewport`**: Platform arayüzünüzde belirli bir uygulama görünümü oluşturur

Bu, platform operatörlerinin muhasebe, pazarlama ve operasyon araçlarını doğrudan ürünlerine gömmesini sağlar.

## Desteklenen uygulamalar

Aşağıdaki uygulamalar Connect bileşenleri aracılığıyla gömülmeyi destekler:

| Uygulama | Kategori | Kullanım senaryosu |
| --- | --- | --- |
| **QuickBooks** | Muhasebe | Ödemeleri ve faturaları QuickBooks’a senkronize edin |
| **Xero** | Muhasebe | Otomatik defter tutma ve mutabakat |
| **Mailchimp** | Pazarlama | E-posta kampanyaları için müşteri verisi senkronizasyonu |
| **Özel uygulamalar** | Herhangi | Platformunuz için geliştirdiğiniz kendi Stripe Apps uygulamalarınız |

Tip

Tajo Brevo entegrasyonu Connect platformlarına gömülebilir; böylece bağlı hesaplar Stripe verilerini platformun kendi arayüzü üzerinden Brevo’ya senkronize edebilir.

## Account Sessions API ile kurulum

Uygulamaları gömmek için, uygun bileşenlerin etkinleştirildiği Account Sessions oluşturmanız gerekir:

### Sunucu tarafı: Account Session oluşturma

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

### İstemci tarafı: Connect.js’i başlatma

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

## App install bileşeni

`app-install` bileşeni, bağlı hesapların bir Stripe App kurmak için kullanabileceği bir kurulum düğmesi oluşturur:

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

## App viewport bileşeni

`app-viewport` bileşeni, platformunuz içinde belirli bir uygulama görünümü oluşturur:

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

## Destination charge meta veri şeması

Gömülü uygulamaları destination charge ile birlikte kullanırken (Connect platformlarında yaygındır), ödeme meta verisi muhasebe ve pazarlama entegrasyonlarının tüketebileceği yapılandırılmış veriler taşır.

### Muhasebe entegrasyonları

QuickBooks ve Xero gibi uygulamalar için destination charge meta verisi şu şemayı izler:

```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"
  }
}
```

| Alan | Tür | Açıklama |
| --- | --- | --- |
| `customer_id` | string | Platformun müşteri tanımlayıcısı |
| `customer_email` | string | Fatura/makbuz eşleştirmesi için müşteri e-postası |
| `product_name` | string | Satır öğeleri için ürün görünen adı |
| `product_id` | string | Stripe ürün kimliği |
| `quantity` | string | Ürün adedi |
| `unit_amount` | string | En küçük para birimi biriminde (kuruş) birim fiyat |
| `currency` | string | Üç harfli ISO para birimi kodu |
| `platform_fee` | string | En küçük para birimi biriminde uygulama ücreti tutarı |
| `platform_fee_currency` | string | Platform ücretinin para birimi |
| `tax_amount` | string | En küçük para birimi biriminde vergi tutarı |
| `tax_rate_id` | string | Uygulanan Stripe vergi oranı kimliği |
| `invoice_id` | string | İlişkili fatura kimliği |
| `order_id` | string | Platformun dahili sipariş tanımlayıcısı |

### Pazarlama entegrasyonları

Mailchimp ve Tajo Brevo entegrasyonu gibi uygulamalar için meta veri, müşteri segmentasyonunu ve kampanya hedeflemesini mümkün kılar:

```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"
  }
}
```

Bu meta veri, şu gibi Brevo otomasyonlarını mümkün kılar:

- İlk kez satın alanlar için **karşılama serileri** (`is_first_purchase: "true"`)
- `product_category` ve `purchase_value` değerlerine dayalı **çapraz satış kampanyaları**
- `subscription_interval` değerine göre abonelik müşterileri için **elde tutma akışları**
- Ayrılan yüksek `lifetime_value` müşterilerini hedefleyen **geri kazanım kampanyaları**

## Platform entegrasyonu örneği

Tajo Brevo uygulamasını gömen eksiksiz bir platform entegrasyonu:

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

## Güvenlik hususları

Uygulamaları platformunuza gömerken:

- **Account Sessions süresi dolar**: Gerektikçe yeni oturumlar oluşturun, client secret değerlerini önbelleğe almayın
- **Kapsam denetimi**: Hangi uygulamaların kurulabileceğini kısıtlamak için `allowed_apps` kullanın
- **Veri yalıtımı**: Her bağlı hesabın verisi yalıtılmıştır, platform uygulama verisine erişemez
- **CSP başlıkları**: Platformunuzun içerik güvenliği politikasının `https://connect-js.stripe.com` adresine bağlantılara izin verdiğinden emin olun

Caution

Gömülü uygulama bileşenleri, Account Sessions API erişimi olan bir Connect entegrasyonu gerektirir. Standart Stripe hesapları gömülü bileşenleri kullanamaz.