Zaprosite za zgodnji dostop

Vnesite ime ter e-poštni naslov ali telefonsko številko. Poslali vam bomo podrobnosti o dostopu do platforme Tajo.

Na tej strani

Vgrajene aplikacije Stripe Apps

Vgrajene aplikacije Stripe Apps omogočajo platformam, zgrajenim na Stripe Connect, da funkcije aplikacij drugih ponudnikov prikažejo neposredno na svoji nadzorni plošči. Z vgrajenimi komponentami Connect lahko povezanim računom omogočite dostop do aplikacij, kot so QuickBooks, Xero in Mailchimp, ne da bi jim bilo treba obiskati Stripe Dashboard.

Pregled

Vgrajene aplikacije uporabljajo dve ključni vgrajeni komponenti Connect:

app-install: v uporabniškem vmesniku vaše platforme izriše gumb za namestitev aplikacije Stripe App
app-viewport: v uporabniškem vmesniku vaše platforme izriše določen pogled aplikacije

Tako lahko upravljavci platform računovodska, trženjska in operativna orodja vgradijo neposredno v svoj izdelek.

Podprte aplikacije

Vgradnjo prek komponent Connect podpirajo naslednje aplikacije:

Aplikacija	Kategorija	Primer uporabe
QuickBooks	Računovodstvo	Sinhronizacija plačil in računov v QuickBooks
Xero	Računovodstvo	Samodejno knjigovodstvo in usklajevanje
Mailchimp	Trženje	Sinhronizacija podatkov o strankah za e-poštne kampanje
Aplikacije po meri	Poljubno	Vaše lastne aplikacije Stripe Apps, izdelane za vašo platformo

Tip

Integracijo Tajo Brevo je mogoče vgraditi v platforme Connect, kar povezanim računom omogoča sinhronizacijo podatkov Stripe z Brevom prek vmesnika same platforme.

Nastavitev z API-jem Account Sessions

Za vgradnjo aplikacij morate ustvariti seje računa (Account Sessions) z omogočenimi ustreznimi komponentami:

Na strežniku: ustvarite sejo računa

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

Na odjemalcu: inicializirajte 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;
  },
});

Komponenta za namestitev aplikacije

Komponenta app-install izriše gumb za namestitev, s katerim povezani računi namestijo aplikacijo 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>
  );
};

Komponenta za pogled aplikacije

Komponenta app-viewport v vaši platformi izriše določen pogled aplikacije:

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

Shema metapodatkov za bremenitve s ciljnim računom

Pri uporabi vgrajenih aplikacij z bremenitvami s ciljnim računom (kar je v platformah Connect običajno) metapodatki bremenitve nosijo strukturirane podatke, ki jih lahko uporabijo računovodske in trženjske integracije.

Računovodske integracije

Za aplikacije, kot sta QuickBooks in Xero, metapodatki bremenitve s ciljnim računom sledijo tej shemi:

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

Polje	Tip	Opis
`customer_id`	string	Identifikator stranke na platformi
`customer_email`	string	E-poštni naslov stranke za povezovanje računov in potrdil
`product_name`	string	Prikazno ime izdelka za postavke
`product_id`	string	ID izdelka v Stripu
`quantity`	string	Količina postavke
`unit_amount`	string	Cena na enoto v najmanjši enoti valute (centi)
`currency`	string	Trimestna oznaka valute po standardu ISO
`platform_fee`	string	Znesek provizije aplikacije v najmanjši enoti valute
`platform_fee_currency`	string	Valuta provizije platforme
`tax_amount`	string	Znesek davka v najmanjši enoti valute
`tax_rate_id`	string	ID uporabljene davčne stopnje v Stripu
`invoice_id`	string	ID povezanega računa
`order_id`	string	Interni identifikator naročila na platformi

Trženjske integracije

Za aplikacije, kot sta Mailchimp in integracija Tajo Brevo, metapodatki omogočajo segmentacijo strank in ciljanje kampanj:

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

Ti metapodatki omogočajo avtomatizacije v Brevu, na primer:

Pozdravno zaporedje za prve kupce (is_first_purchase: "true")
Kampanje za nadgradnjo nakupa na podlagi polj product_category in purchase_value
Poteki za zadrževanje za naročniške stranke na podlagi polja subscription_interval
Kampanje za vračanje strank, usmerjene v stranke z visoko vrednostjo lifetime_value, ki so odšle

Primer integracije platforme

Celovita integracija platforme z vgrajeno aplikacijo 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>
  );
};

Varnostni vidiki

Ko aplikacije vgrajujete v svojo platformo:

Seje računa potečejo: nove seje ustvarite po potrebi, skrivnosti odjemalca ne shranjujte v predpomnilnik
Nadzor obsega: s poljem allowed_apps omejite, katere aplikacije je mogoče namestiti
Izolacija podatkov: podatki vsakega povezanega računa so izolirani, platforma do podatkov aplikacije nima dostopa
Glave CSP: poskrbite, da pravilnik Content Security Policy vaše platforme dovoljuje povezave na https://connect-js.stripe.com

Caution

Komponente vgrajenih aplikacij zahtevajo integracijo Connect z dostopom do API-ja Account Sessions. Standardni računi Stripe vgrajenih komponent ne morejo uporabljati.

Vgrajene aplikacije Stripe Apps

Pregled

Podprte aplikacije

Nastavitev z API-jem Account Sessions

Na strežniku: ustvarite sejo računa

Na odjemalcu: inicializirajte Connect.js

Komponenta za namestitev aplikacije

JavaScript

React

Komponenta za pogled aplikacije

JavaScript

React

Shema metapodatkov za bremenitve s ciljnim računom

Računovodske integracije

Trženjske integracije

Primer integracije platforme

Varnostni vidiki

Zaprosite za zgodnji dostop

Hvala, prijava je uspela.