Ajukan akses awal

Masukkan nama depan serta email atau nomor telepon Anda. Kami akan menghubungi Anda dengan detail akses Tajo.

Di halaman ini

Stripe App Tersemat

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.

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

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

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

// 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

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

// 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

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:

{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "[email protected]",
    "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:

{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "[email protected]",
    "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:

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.

Stripe App Tersemat

Ringkasan

App yang didukung

Penyiapan dengan Account Sessions API

Sisi server: buat Account Session

Sisi klien: inisialisasi Connect.js

Komponen app install

JavaScript

React

Komponen app viewport

JavaScript

React

Skema metadata destination charge

Integrasi akuntansi

Integrasi pemasaran

Contoh integrasi platform

Pertimbangan keamanan

Ajukan akses awal

Terima kasih. Permintaan Anda sudah diterima.