Zatražite rani pristup

Unesite ime i imejl adresu ili broj telefona. Poslaćemo vam detalje o pristupu platformi Tajo.

Na ovoj stranici

Ugrađene Stripe aplikacije

Ugrađene Stripe aplikacije omogućavaju platformama izgrađenim na Stripe Connect-u da funkcije aplikacija trećih strana prikažu direktno u sopstvenim komandnim tablama. Uz Connect ugrađene komponente možete svojim povezanim nalozima dati pristup aplikacijama kao što su QuickBooks, Xero i Mailchimp, bez potrebe da posećuju Stripe Dashboard.

Pregled

Ugrađene aplikacije koriste dve ključne Connect ugrađene komponente:

  • app-install: prikazuje dugme za instalaciju Stripe aplikacije unutar korisničkog interfejsa vaše platforme
  • app-viewport: prikazuje određeni viewport aplikacije unutar korisničkog interfejsa vaše platforme

Time operatori platforme mogu da ugrade računovodstvene, marketinške i operativne alate direktno u svoj proizvod.

Podržane aplikacije

Sledeće aplikacije podržavaju ugrađivanje preko Connect komponenti:

AplikacijaKategorijaPrimer upotrebe
QuickBooksRačunovodstvoSinhronizujte plaćanja i fakture sa QuickBooks-om
XeroRačunovodstvoAutomatizovano knjigovodstvo i usaglašavanje
MailchimpMarketingSinhronizujte podatke o kupcima za imejl kampanje
Prilagođene aplikacijeBilo kojaVaše sopstvene Stripe aplikacije napravljene za vašu platformu

Tip

Tajo Brevo integracija može se ugraditi u Connect platforme, čime povezani nalozi mogu da sinhronizuju svoje Stripe podatke sa Brevom kroz sopstveni interfejs platforme.

Podešavanje pomoću Account Sessions API-ja

Da biste ugradili aplikacije, potrebno je da kreirate Account Sessions sa omogućenim odgovarajućim komponentama:

Na serveru: kreirajte 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 });

Na klijentu: inicijalizujte 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 App Install

Komponenta app-install prikazuje dugme za instalaciju koje povezani nalozi mogu da koriste za instaliranje Stripe aplikacije:

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 App Viewport

Komponenta app-viewport prikazuje određeni viewport 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>
  );
};

Šema metapodataka za destination charge

Kada ugrađene aplikacije koristite sa destination charge naplatama (uobičajenim na Connect platformama), metapodaci naplate nose strukturirane podatke koje računovodstvene i marketinške integracije mogu da koriste.

Računovodstvene integracije

Za aplikacije kao što su QuickBooks i Xero, metapodaci destination charge naplate prate ovu šemu:

{
  "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"
  }
}
PoljeTipOpis
customer_idstringIdentifikator kupca na platformi
customer_emailstringImejl kupca za uparivanje fakture ili računa
product_namestringPrikazni naziv proizvoda za stavke
product_idstringStripe ID proizvoda
quantitystringKoličina stavke
unit_amountstringJedinična cena u najmanjoj jedinici valute (centima)
currencystringTroslovni ISO kod valute
platform_feestringIznos naknade aplikacije u najmanjoj jedinici valute
platform_fee_currencystringValuta naknade platforme
tax_amountstringIznos poreza u najmanjoj jedinici valute
tax_rate_idstringID primenjene Stripe poreske stope
invoice_idstringID povezane fakture
order_idstringInterni identifikator porudžbine na platformi

Marketinške integracije

Za aplikacije kao što su Mailchimp i Tajo Brevo integracija, metapodaci omogućavaju segmentaciju kupaca i ciljanje kampanjama:

{
  "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ćavaju Brevo automatizacije kao što su:

  • Serija dobrodošlice za kupce koji kupuju prvi put (is_first_purchase: "true")
  • Upsell kampanje na osnovu product_category i purchase_value
  • Tokovi zadržavanja za pretplatnike na osnovu subscription_interval
  • Kampanje za povratak kupaca usmerene na kupce sa visokim lifetime_value koji odustanu

Primer integracije platforme

Kompletna integracija platforme koja ugrađuje Tajo Brevo aplikaciju:

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

Bezbednosna razmatranja

Kada ugrađujete aplikacije u svoju platformu:

  • Account Sessions ističu: kreirajte nove sesije po potrebi; nemojte keširati client secret vrednosti
  • Kontrola opsega: koristite allowed_apps da ograničite koje aplikacije mogu da se instaliraju
  • Izolacija podataka: podaci svakog povezanog naloga su izolovani; platforma ne može pristupiti podacima aplikacije
  • CSP zaglavlja: uverite se da Content Security Policy vaše platforme dozvoljava veze ka https://connect-js.stripe.com

Caution

Komponente ugrađenih aplikacija zahtevaju Connect integraciju sa pristupom Account Sessions API-ju. Standardni Stripe nalozi ne mogu da koriste ugrađene komponente.

Zatražite rani pristup

Unesite ime i imejl adresu ili broj telefona. Poslaćemo vam detalje o pristupu platformi Tajo.

automatsko prepoznavanje
AI asistent

Zdravo! Pitajte me o dokumentaciji.