Zatražite rani pristup

Unesite ime te adresu e-pošte ili telefonski broj. Poslat ćemo vam pojedinosti o pristupu platformi Tajo.

Na ovoj stranici

Ugrađene Stripe aplikacije

Ugrađene Stripe aplikacije omogućuju platformama izgrađenima na Stripe Connectu da funkcionalnost aplikacija trećih strana prikažu izravno unutar vlastitih nadzornih ploča. Uz ugradive Connect komponente svojim povezanim računima možete dati pristup aplikacijama poput QuickBooksa, Xeroa i Mailchimpa bez potrebe da posjećuju Stripe Dashboard.

Pregled

Ugrađene aplikacije koriste dvije ključne ugradive Connect komponente:

app-install: prikazuje gumb za instalaciju Stripe aplikacije unutar sučelja vaše platforme
app-viewport: prikazuje određeni prikaz aplikacije unutar sučelja vaše platforme

To operaterima platforme omogućuje da računovodstvene, marketinške i operativne alate ugrade izravno u svoj proizvod.

Podržane aplikacije

Sljedeće aplikacije podržavaju ugradnju putem Connect komponenti:

Aplikacija	Kategorija	Primjena
QuickBooks	Računovodstvo	Sinkronizacija plaćanja i računa u QuickBooks
Xero	Računovodstvo	Automatizirano knjigovodstvo i usklađivanje
Mailchimp	Marketing	Sinkronizacija podataka o kupcima za kampanje e-pošte
Prilagođene aplikacije	Bilo koja	Vaše vlastite Stripe aplikacije izrađene za vašu platformu

Tip

Tajo Brevo integracija može se ugraditi u Connect platforme, čime povezani računi mogu sinkronizirati svoje Stripe podatke s Brevom kroz vlastito sučelje platforme.

Postavljanje uz Account Sessions API

Za ugradnju aplikacija morate stvoriti Account Sessions s omogućenim odgovarajućim komponentama:

Na poslužitelju: stvaranje Account Sessiona

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 klijentu: inicijalizacija Connect.js-a

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 instalaciju aplikacije

Komponenta app-install prikazuje gumb za instalaciju kojim povezani računi mogu instalirati Stripe aplikaciju:

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 prikaza aplikacije

Komponenta app-viewport prikazuje određeni prikaz aplikacije unutar vaše platforme:

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 metapodataka za destination charge

Pri upotrebi ugrađenih aplikacija s destination charge naplatom (uobičajenom na Connect platformama) metapodaci naplate nose strukturirane podatke koje računovodstvene i marketinške integracije mogu iskoristiti.

Računovodstvene integracije

Za aplikacije poput QuickBooksa i Xeroa metapodaci destination charge naplate slijede ovu shemu:

{
  "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 kupca na platformi
`customer_email`	string	Adresa e-pošte kupca za povezivanje računa i potvrda
`product_name`	string	Prikazani naziv proizvoda za stavke
`product_id`	string	Stripe ID proizvoda
`quantity`	string	Količina stavke
`unit_amount`	string	Jedinična cijena u najmanjoj jedinici valute (centima)
`currency`	string	Troslovna ISO oznaka valute
`platform_fee`	string	Iznos naknade aplikacije u najmanjoj jedinici valute
`platform_fee_currency`	string	Valuta naknade platforme
`tax_amount`	string	Iznos poreza u najmanjoj jedinici valute
`tax_rate_id`	string	Primijenjeni Stripe ID porezne stope
`invoice_id`	string	ID povezanog računa
`order_id`	string	Interni identifikator narudžbe na platformi

Marketinške integracije

Za aplikacije poput Mailchimpa i Tajo Brevo integracije metapodaci omogućuju segmentaciju kupaca i ciljanje kampanja:

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

Ovi metapodaci omogućuju Brevo automatizacije kao što su:

Serija dobrodošlice za kupce koji kupuju prvi put (is_first_purchase: "true")
Upsell kampanje na temelju vrijednosti product_category i purchase_value
Tijekovi zadržavanja za pretplatnike na temelju vrijednosti subscription_interval
Kampanje povratka usmjerene na kupce s visokom vrijednošću lifetime_value koji odlaze

Primjer integracije na platformi

Potpuna integracija platforme s ugrađenom Tajo Brevo aplikacijom:

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

Sigurnosna razmatranja

Pri ugradnji aplikacija u vašu platformu:

Account Sessions istječu: stvarajte nove sesije po potrebi, nemojte spremati client secret u predmemoriju
Kontrola opsega: upotrijebite allowed_apps kako biste ograničili koje se aplikacije mogu instalirati
Izolacija podataka: podaci svakog povezanog računa su izolirani, platforma ne može pristupiti podacima aplikacije
CSP zaglavlja: provjerite dopušta li Content Security Policy vaše platforme veze prema https://connect-js.stripe.com

Caution

Komponente ugrađenih aplikacija zahtijevaju Connect integraciju s pristupom Account Sessions API-ju. Standardni Stripe računi ne mogu koristiti ugradive komponente.

Ugrađene Stripe aplikacije

Pregled

Podržane aplikacije

Postavljanje uz Account Sessions API

Na poslužitelju: stvaranje Account Sessiona

Na klijentu: inicijalizacija Connect.js-a

Komponenta za instalaciju aplikacije

JavaScript

React

Komponenta prikaza aplikacije

JavaScript

React

Shema metapodataka za destination charge

Računovodstvene integracije

Marketinške integracije

Primjer integracije na platformi

Sigurnosna razmatranja

Zatražite rani pristup

Hvala, prijava je uspješno dovršena.