---
title: "Stripe App Tersemat | Tajo"
description: "Gunakan komponen tersemat Connect untuk mengintegrasikan Stripe Apps ke dalam platform Anda sendiri"
url: https://tajo.io/in/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/in/docs/stripe-apps/embedded-apps.md
lang: id-ID
author: "Set Noa"
author_url: https://tajo.io/in/set-noa/
robots: noindex
---

Ajukan akses awal

Masukkan nama depan dan alamat email kerja Anda. Kami akan mengirim tautan untuk mengonfirmasi permintaan akses Tajo.

# Stripe App Tersemat

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

Stripe App tersemat memungkinkan platform yang dibangun di atas Stripe Connect menampilkan fungsionalitas app pihak ketiga langsung di dalam dasbor mereka sendiri. Dengan komponen tersemat Connect, Anda dapat memberi akun terhubung Anda akses ke app seperti QuickBooks, Xero, dan Mailchimp tanpa perlu membuka Stripe Dashboard.

Caution

**Status: direncanakan, belum dibangun.** Tajo tidak memiliki Stripe App, jadi saat ini tidak ada apa pun di bagian ini yang dapat dipasang. Identifier aplikasi, URL, serta kredensial pada halaman ini adalah placeholder ilustratif, bukan endpoint aktif.

## Ringkasan

App tersemat menggunakan dua komponen tersemat Connect utama:

- **`app-install`**: Menampilkan tombol pemasangan untuk sebuah Stripe App di dalam UI platform Anda
- **`app-viewport`**: Menampilkan viewport app tertentu di dalam UI platform Anda

Ini memungkinkan operator platform menyematkan alat akuntansi, pemasaran, dan operasional langsung di dalam produk mereka.

## App yang didukung

App berikut mendukung penyematan melalui komponen Connect:

| App | Kategori | Kasus penggunaan |
| --- | --- | --- |
| **QuickBooks** | Akuntansi | Sinkronkan pembayaran dan faktur ke QuickBooks |
| **Xero** | Akuntansi | Pembukuan dan rekonsiliasi otomatis |
| **Mailchimp** | Pemasaran | Sinkronkan data pelanggan untuk kampanye email |
| **App kustom** | Apa saja | Stripe App milik Anda sendiri yang dibangun untuk platform Anda |

Tip

Integrasi Tajo Brevo dapat disematkan di platform Connect, sehingga akun terhubung dapat menyinkronkan data Stripe mereka ke Brevo melalui antarmuka platform itu sendiri.

## Penyiapan dengan Account Sessions API

Untuk menyematkan app, Anda perlu membuat Account Session dengan komponen yang sesuai diaktifkan:

### Sisi server: buat 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 });
```

### Sisi klien: inisialisasi 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;
  },
});
```

## Komponen app install

Komponen `app-install` menampilkan tombol pemasangan yang dapat digunakan akun terhubung untuk memasang sebuah Stripe App:

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

## Komponen app viewport

Komponen `app-viewport` menampilkan viewport app tertentu di dalam platform Anda:

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

## Skema metadata destination charge

Saat menggunakan app tersemat dengan destination charge (umum pada platform Connect), metadata charge membawa data terstruktur yang dapat dikonsumsi oleh integrasi akuntansi dan pemasaran.

### Integrasi akuntansi

Untuk app seperti QuickBooks dan Xero, metadata destination charge mengikuti skema berikut:

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

| Kolom | Tipe | Deskripsi |
| --- | --- | --- |
| `customer_id` | string | Pengenal pelanggan milik platform |
| `customer_email` | string | Email pelanggan untuk pencocokan faktur atau kuitansi |
| `product_name` | string | Nama tampilan produk untuk item baris |
| `product_id` | string | ID produk Stripe |
| `quantity` | string | Jumlah item |
| `unit_amount` | string | Harga satuan dalam unit mata uang terkecil (sen) |
| `currency` | string | Kode mata uang ISO tiga huruf |
| `platform_fee` | string | Nominal biaya aplikasi dalam unit mata uang terkecil |
| `platform_fee_currency` | string | Mata uang untuk biaya platform |
| `tax_amount` | string | Nominal pajak dalam unit mata uang terkecil |
| `tax_rate_id` | string | ID tarif pajak Stripe yang diterapkan |
| `invoice_id` | string | ID faktur yang terkait |
| `order_id` | string | Pengenal pesanan internal milik platform |

### Integrasi pemasaran

Untuk app seperti Mailchimp dan integrasi Tajo Brevo, metadata ini memungkinkan segmentasi pelanggan dan penargetan kampanye:

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

Metadata ini memungkinkan otomatisasi Brevo seperti:

- **Rangkaian sambutan** untuk pembeli pertama kali (`is_first_purchase: "true"`)
- **Kampanye upsell** berdasarkan `product_category` dan `purchase_value`
- **Alur retensi** untuk pelanggan langganan berdasarkan `subscription_interval`
- **Kampanye win-back** yang menyasar pelanggan dengan `lifetime_value` tinggi yang berhenti berlangganan

## Contoh integrasi platform

Integrasi platform lengkap yang menyematkan app Tajo Brevo:

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

## Pertimbangan keamanan

Saat menyematkan app di platform Anda:

- **Account Session akan kedaluwarsa**: Buat sesi baru sesuai kebutuhan, jangan menyimpan client secret dalam cache
- **Kontrol cakupan**: Gunakan `allowed_apps` untuk membatasi app mana yang boleh dipasang
- **Isolasi data**: Data setiap akun terhubung terisolasi, platform tidak dapat mengakses data app
- **Header CSP**: Pastikan Content Security Policy platform Anda mengizinkan koneksi ke `https://connect-js.stripe.com`

Caution

Komponen app tersemat memerlukan integrasi Connect dengan akses Account Sessions API. Akun Stripe standar tidak dapat menggunakan komponen tersemat.