Solicită acces anticipat

Spune-ne prenumele și o adresă de e-mail sau un număr de telefon. Îți vom trimite detaliile de acces la Tajo.

Pe această pagină

Aplicații Stripe încorporate

Aplicațiile Stripe încorporate permit platformelor construite pe Stripe Connect să afișeze funcționalitatea aplicațiilor terțe direct în propriile panouri de administrare. Cu ajutorul componentelor încorporate Connect, poți oferi conturilor conectate acces la aplicații precum QuickBooks, Xero și Mailchimp, fără ca ele să fie nevoite să intre în Stripe Dashboard.

Prezentare generală

Aplicațiile încorporate folosesc două componente Connect esențiale:

app-install: afișează un buton de instalare pentru o aplicație Stripe în interfața platformei tale
app-viewport: afișează o anumită vizualizare a aplicației în interfața platformei tale

Astfel, operatorii de platforme pot încorpora instrumente de contabilitate, marketing și operațiuni direct în produsul lor.

Aplicații acceptate

Următoarele aplicații pot fi încorporate prin componente Connect:

Aplicație	Categorie	Caz de utilizare
QuickBooks	Contabilitate	Sincronizează plățile și facturile cu QuickBooks
Xero	Contabilitate	Contabilitate și reconciliere automate
Mailchimp	Marketing	Sincronizează datele clienților pentru campanii de e-mail
Aplicații personalizate	Oricare	Propriile tale aplicații Stripe, create pentru platforma ta

Tip

Integrarea Tajo pentru Brevo poate fi încorporată în platformele Connect, permițând conturilor conectate să își sincronizeze datele Stripe cu Brevo prin interfața proprie a platformei.

Configurare cu API-ul Account Sessions

Pentru a încorpora aplicații, trebuie să creezi Account Sessions cu componentele potrivite activate:

Pe server: creează o 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 });

Pe client: inițializează 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;
  },
});

Componenta App Install

Componenta app-install afișează un buton de instalare pe care conturile conectate îl pot folosi pentru a instala o aplicație Stripe:

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

Componenta App Viewport

Componenta app-viewport afișează o anumită vizualizare a aplicației în platforma ta:

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

Schema metadatelor pentru plățile cu destinație

Când folosești aplicații încorporate cu plăți cu destinație (destination charges), obișnuite în platformele Connect, metadatele plății transportă date structurate pe care integrările de contabilitate și de marketing le pot consuma.

Integrări de contabilitate

Pentru aplicații precum QuickBooks și Xero, metadatele plăților cu destinație respectă această schemă:

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

Câmp	Tip	Descriere
`customer_id`	string	Identificatorul clientului în platformă
`customer_email`	string	E-mailul clientului, pentru potrivirea facturilor și chitanțelor
`product_name`	string	Numele afișat al produsului, pentru liniile de comandă
`product_id`	string	ID-ul produsului în Stripe
`quantity`	string	Cantitatea articolului
`unit_amount`	string	Prețul unitar în cea mai mică unitate monetară (cenți)
`currency`	string	Codul ISO de trei litere al monedei
`platform_fee`	string	Valoarea comisionului aplicației, în cea mai mică unitate monetară
`platform_fee_currency`	string	Moneda comisionului platformei
`tax_amount`	string	Valoarea taxei, în cea mai mică unitate monetară
`tax_rate_id`	string	ID-ul cotei de taxă Stripe aplicate
`invoice_id`	string	ID-ul facturii asociate
`order_id`	string	Identificatorul intern al comenzii în platformă

Integrări de marketing

Pentru aplicații precum Mailchimp și integrarea Tajo pentru Brevo, metadatele fac posibile segmentarea clienților și targetarea campaniilor:

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

Aceste metadate fac posibile automatizări Brevo precum:

Serii de bun venit pentru cei care cumpără prima dată (is_first_purchase: "true")
Campanii de upsell pe baza câmpurilor product_category și purchase_value
Fluxuri de retenție pentru clienții cu abonament, pe baza câmpului subscription_interval
Campanii de recâștigare care vizează clienții cu lifetime_value mare care renunță

Exemplu de integrare într-o platformă

O integrare completă de platformă care încorporează aplicația Tajo pentru 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>
  );
};

Considerații de securitate

Când încorporezi aplicații în platforma ta:

Account Sessions expiră: creează sesiuni noi când e nevoie, nu păstra în cache secretele de client
Controlul domeniului de acces: folosește allowed_apps pentru a limita aplicațiile care pot fi instalate
Izolarea datelor: datele fiecărui cont conectat sunt izolate, platforma nu poate accesa datele aplicației
Anteturi CSP: asigură-te că politica de securitate a conținutului (Content Security Policy) a platformei tale permite conexiuni către https://connect-js.stripe.com

Caution

Componentele pentru aplicații încorporate necesită o integrare Connect cu acces la API-ul Account Sessions. Conturile Stripe standard nu pot folosi componente încorporate.

Aplicații Stripe încorporate

Prezentare generală

Aplicații acceptate

Configurare cu API-ul Account Sessions

Pe server: creează o Account Session

Pe client: inițializează Connect.js

Componenta App Install

JavaScript

React

Componenta App Viewport

JavaScript

React

Schema metadatelor pentru plățile cu destinație

Integrări de contabilitate

Integrări de marketing

Exemplu de integrare într-o platformă

Considerații de securitate

Solicită acces anticipat

Mulțumim, înscrierea ta este confirmată.