Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

Bu sayfada

Gömülü Stripe Uygulamaları

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.

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:

UygulamaKategoriKullanım senaryosu
QuickBooksMuhasebeÖdemeleri ve faturaları QuickBooks’a senkronize edin
XeroMuhasebeOtomatik defter tutma ve mutabakat
MailchimpPazarlamaE-posta kampanyaları için müşteri verisi senkronizasyonu
Özel uygulamalarHerhangiPlatformunuz 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 

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 

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 

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

App viewport bileşeni

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

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

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:

{
  "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"
  }
}
AlanTürAçıklama
customer_idstringPlatformun müşteri tanımlayıcısı
customer_emailstringFatura/makbuz eşleştirmesi için müşteri e-postası
product_namestringSatır öğeleri için ürün görünen adı
product_idstringStripe ürün kimliği
quantitystringÜrün adedi
unit_amountstringEn küçük para birimi biriminde (kuruş) birim fiyat
currencystringÜç harfli ISO para birimi kodu
platform_feestringEn küçük para birimi biriminde uygulama ücreti tutarı
platform_fee_currencystringPlatform ücretinin para birimi
tax_amountstringEn küçük para birimi biriminde vergi tutarı
tax_rate_idstringUygulanan Stripe vergi oranı kimliği
invoice_idstringİlişkili fatura kimliği
order_idstringPlatformun 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:

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

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:

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.

Erken erişim talep edin

Adınızı ve e-posta adresinizi veya telefon numaranızı paylaşın. Tajo erişim ayrıntıları için sizinle iletişime geçeceğiz.

otomatik algılama
AI Asistan

Merhaba! Belgeler hakkında her şeyi sorabilirsiniz.