Ζητήστε πρώιμη πρόσβαση

Συμπληρώστε το όνομά σας και ένα email ή έναν αριθμό τηλεφώνου. Θα σας στείλουμε πληροφορίες για την πρόσβαση στο Tajo.

Σε αυτή τη σελίδα

Ενσωματωμένα Stripe Apps

Τα ενσωματωμένα Stripe Apps επιτρέπουν στις πλατφόρμες που βασίζονται στο Stripe Connect να προβάλλουν λειτουργίες εφαρμογών τρίτων απευθείας μέσα στους δικούς τους πίνακες ελέγχου. Με τα ενσωματωμένα στοιχεία του Connect, μπορείτε να δώσετε στους συνδεδεμένους λογαριασμούς σας πρόσβαση σε εφαρμογές όπως το QuickBooks, το Xero και το Mailchimp, χωρίς να χρειάζεται να επισκεφθούν το Stripe Dashboard.

Επισκόπηση

Οι ενσωματωμένες εφαρμογές χρησιμοποιούν δύο βασικά ενσωματωμένα στοιχεία του Connect:

app-install: Εμφανίζει ένα κουμπί εγκατάστασης για ένα Stripe App μέσα στο περιβάλλον της πλατφόρμας σας
app-viewport: Εμφανίζει ένα συγκεκριμένο viewport της εφαρμογής μέσα στο περιβάλλον της πλατφόρμας σας

Έτσι, οι διαχειριστές πλατφορμών μπορούν να ενσωματώσουν λογιστικά, εμπορικά και λειτουργικά εργαλεία απευθείας στο προϊόν τους.

Υποστηριζόμενες εφαρμογές

Οι παρακάτω εφαρμογές υποστηρίζουν ενσωμάτωση μέσω των στοιχείων του Connect:

Εφαρμογή	Κατηγορία	Περίπτωση χρήσης
QuickBooks	Λογιστική	Συγχρονισμός πληρωμών και τιμολογίων με το QuickBooks
Xero	Λογιστική	Αυτοματοποιημένη τήρηση βιβλίων και συμφωνία λογαριασμών
Mailchimp	Μάρκετινγκ	Συγχρονισμός δεδομένων πελατών για καμπάνιες email
Προσαρμοσμένες εφαρμογές	Οποιαδήποτε	Τα δικά σας Stripe Apps, φτιαγμένα για την πλατφόρμα σας

Tip

Η ενσωμάτωση Tajo Brevo μπορεί να ενταχθεί σε πλατφόρμες Connect, επιτρέποντας στους συνδεδεμένους λογαριασμούς να συγχρονίζουν τα δεδομένα τους από το Stripe προς το Brevo μέσα από το περιβάλλον της ίδιας της πλατφόρμας.

Ρύθμιση με το Account Sessions API

Για να ενσωματώσετε εφαρμογές, πρέπει να δημιουργήσετε Account Sessions με ενεργοποιημένα τα κατάλληλα στοιχεία:

Στην πλευρά του διακομιστή: δημιουργία 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 });

Στην πλευρά του πελάτη: αρχικοποίηση του 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;
  },
});

Το στοιχείο app install

Το στοιχείο app-install εμφανίζει ένα κουμπί εγκατάστασης που μπορούν να χρησιμοποιήσουν οι συνδεδεμένοι λογαριασμοί για να εγκαταστήσουν ένα 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>
  );
};

Το στοιχείο app viewport

Το στοιχείο app-viewport εμφανίζει ένα συγκεκριμένο viewport της εφαρμογής μέσα στην πλατφόρμα σας:

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 charges, συνηθισμένες στις πλατφόρμες Connect), τα μεταδεδομένα της χρέωσης μεταφέρουν δομημένα δεδομένα που μπορούν να αξιοποιήσουν οι λογιστικές και οι εμπορικές ενσωματώσεις.

Λογιστικές ενσωματώσεις

Για εφαρμογές όπως το QuickBooks και το Xero, τα μεταδεδομένα των χρεώσεων προορισμού ακολουθούν αυτό το σχήμα:

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

Πεδίο	Τύπος	Περιγραφή
`customer_id`	string	Το αναγνωριστικό του πελάτη στην πλατφόρμα
`customer_email`	string	Το email του πελάτη για την αντιστοίχιση τιμολογίου ή απόδειξης
`product_name`	string	Η εμφανιζόμενη ονομασία του προϊόντος για τις γραμμές παραστατικού
`product_id`	string	Το ID του προϊόντος στο Stripe
`quantity`	string	Η ποσότητα του είδους
`unit_amount`	string	Η τιμή μονάδας στη μικρότερη μονάδα του νομίσματος (λεπτά)
`currency`	string	Ο κωδικός νομίσματος τριών γραμμάτων κατά ISO
`platform_fee`	string	Το ποσό της προμήθειας εφαρμογής στη μικρότερη μονάδα του νομίσματος
`platform_fee_currency`	string	Το νόμισμα της προμήθειας της πλατφόρμας
`tax_amount`	string	Το ποσό του φόρου στη μικρότερη μονάδα του νομίσματος
`tax_rate_id`	string	Το ID του φορολογικού συντελεστή Stripe που εφαρμόστηκε
`invoice_id`	string	Το ID του σχετικού τιμολογίου
`order_id`	string	Το εσωτερικό αναγνωριστικό της παραγγελίας στην πλατφόρμα

Ενσωματώσεις μάρκετινγκ

Για εφαρμογές όπως το Mailchimp και η ενσωμάτωση Tajo Brevo, τα μεταδεδομένα επιτρέπουν την τμηματοποίηση πελατών και τη στόχευση καμπανιών:

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

Αυτά τα μεταδεδομένα επιτρέπουν αυτοματοποιήσεις στο Brevo, όπως:

Σειρές καλωσορίσματος για όσους αγοράζουν πρώτη φορά (is_first_purchase: "true")
Καμπάνιες upsell με βάση τα product_category και purchase_value
Ροές διατήρησης για πελάτες με συνδρομή, με βάση το subscription_interval
Καμπάνιες ανάκτησης που στοχεύουν πελάτες με υψηλό lifetime_value οι οποίοι αποχωρούν

Παράδειγμα ενσωμάτωσης σε πλατφόρμα

Μια πλήρης ενσωμάτωση πλατφόρμας που ενσωματώνει την εφαρμογή 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>
  );
};

Θέματα ασφάλειας

Όταν ενσωματώνετε εφαρμογές στην πλατφόρμα σας:

Τα Account Sessions λήγουν: Δημιουργείτε νέα sessions όποτε χρειάζεται και μην αποθηκεύετε προσωρινά τα client secrets
Έλεγχος εμβέλειας: Χρησιμοποιήστε το allowed_apps για να περιορίσετε ποιες εφαρμογές μπορούν να εγκατασταθούν
Απομόνωση δεδομένων: Τα δεδομένα κάθε συνδεδεμένου λογαριασμού είναι απομονωμένα και η πλατφόρμα δεν έχει πρόσβαση στα δεδομένα της εφαρμογής
Κεφαλίδες CSP: Βεβαιωθείτε ότι η πολιτική ασφάλειας περιεχομένου της πλατφόρμας σας επιτρέπει συνδέσεις προς το https://connect-js.stripe.com

Caution

Τα στοιχεία ενσωματωμένων εφαρμογών απαιτούν ενσωμάτωση Connect με πρόσβαση στο Account Sessions API. Οι τυπικοί λογαριασμοί Stripe δεν μπορούν να χρησιμοποιήσουν ενσωματωμένα στοιχεία.

Ενσωματωμένα Stripe Apps

Επισκόπηση

Υποστηριζόμενες εφαρμογές

Ρύθμιση με το Account Sessions API

Στην πλευρά του διακομιστή: δημιουργία Account Session

Στην πλευρά του πελάτη: αρχικοποίηση του Connect.js

Το στοιχείο app install

JavaScript

React

Το στοιχείο app viewport

JavaScript

React

Σχήμα μεταδεδομένων για χρεώσεις προορισμού

Λογιστικές ενσωματώσεις

Ενσωματώσεις μάρκετινγκ

Παράδειγμα ενσωμάτωσης σε πλατφόρμα

Θέματα ασφάλειας

Ζητήστε πρώιμη πρόσβαση

Ευχαριστούμε, η εγγραφή σας ολοκληρώθηκε.