---
title: "एम्बेडेड Stripe ऐप्स | Tajo"
description: "अपने प्लेटफ़ॉर्म में Stripe ऐप्स इंटीग्रेट करने के लिए Connect एम्बेडेड कंपोनेंट इस्तेमाल करें"
url: https://tajo.io/hi/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/hi/docs/stripe-apps/embedded-apps.md
lang: hi-IN
author: "Set Noa"
author_url: https://tajo.io/hi/set-noa/
robots: noindex
---

अर्ली एक्सेस का अनुरोध करें

अपना पहला नाम और कार्यस्थल का ईमेल पता दर्ज करें। Tajo एक्सेस अनुरोध की पुष्टि के लिए हम आपको एक लिंक ईमेल करेंगे।

# एम्बेडेड Stripe ऐप्स

[Set Noa](https://tajo.io/hi/set-noa/)

एम्बेडेड Stripe ऐप्स की मदद से Stripe Connect पर बने प्लेटफ़ॉर्म थर्ड-पार्टी ऐप की सुविधाएँ सीधे अपने ही डैशबोर्ड में दिखा सकते हैं. Connect एम्बेडेड कंपोनेंट से आप अपने कनेक्टेड अकाउंट को QuickBooks, Xero और Mailchimp जैसे ऐप्स तक पहुँच दे सकते हैं, और उन्हें Stripe Dashboard पर जाने की ज़रूरत नहीं पड़ती.

Caution

**स्थिति: नियोजित, अभी बना नहीं.** Tajo के पास कोई Stripe App नहीं है, इसलिए इस सेक्शन में से आज कुछ भी इंस्टॉल नहीं किया जा सकता. इस पेज पर दिए गए ऐप आइडेंटिफ़ायर, URL और क्रेडेंशियल उदाहरण के लिए रखे गए प्लेसहोल्डर हैं, लाइव एंडपॉइंट नहीं.

## ओवरव्यू

एम्बेडेड ऐप्स दो मुख्य Connect एम्बेडेड कंपोनेंट इस्तेमाल करते हैं:

- **`app-install`**: आपके प्लेटफ़ॉर्म UI में किसी Stripe ऐप के लिए इंस्टॉल बटन दिखाता है
- **`app-viewport`**: आपके प्लेटफ़ॉर्म UI में किसी ख़ास ऐप व्यूपोर्ट को दिखाता है

इससे प्लेटफ़ॉर्म ऑपरेटर अकाउंटिंग, मार्केटिंग और ऑपरेशनल टूल सीधे अपने प्रोडक्ट में एम्बेड कर सकते हैं.

## समर्थित ऐप्स

नीचे दिए गए ऐप्स Connect कंपोनेंट के ज़रिए एम्बेड करने की सुविधा देते हैं:

| ऐप | कैटेगरी | यूज़ केस |
| --- | --- | --- |
| **QuickBooks** | अकाउंटिंग | पेमेंट और इनवॉइस QuickBooks में सिंक करें |
| **Xero** | अकाउंटिंग | ऑटोमेटेड बहीखाता और मिलान |
| **Mailchimp** | मार्केटिंग | ईमेल कैम्पेन के लिए ग्राहक डेटा सिंक करें |
| **कस्टम ऐप्स** | कोई भी | आपके प्लेटफ़ॉर्म के लिए बनाए गए आपके अपने Stripe ऐप्स |

Tip

Tajo का Brevo इंटीग्रेशन Connect प्लेटफ़ॉर्म में एम्बेड किया जा सकता है, जिससे कनेक्टेड अकाउंट अपना Stripe डेटा प्लेटफ़ॉर्म के अपने इंटरफ़ेस से ही Brevo में सिंक कर सकते हैं.

## Account Sessions API के साथ सेटअप

ऐप्स एम्बेड करने के लिए आपको ज़रूरी कंपोनेंट इनेबल करके Account Session बनाने होंगे:

### सर्वर-साइड: Account Session बनाएं

```javascript
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 शुरू करें

```javascript
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 ऐप इंस्टॉल कर सकते हैं:

### JavaScript

```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

```tsx
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` कंपोनेंट आपके प्लेटफ़ॉर्म के अंदर किसी ख़ास ऐप व्यूपोर्ट को दिखाता है:

### JavaScript

```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

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

## डेस्टिनेशन चार्ज मेटाडेटा स्कीमा

जब आप एम्बेडेड ऐप्स को डेस्टिनेशन चार्ज के साथ इस्तेमाल करते हैं (Connect प्लेटफ़ॉर्म में यह आम है), तो चार्ज मेटाडेटा में ऐसा संरचित डेटा होता है जिसे अकाउंटिंग और मार्केटिंग इंटीग्रेशन पढ़ सकते हैं.

### अकाउंटिंग इंटीग्रेशन

QuickBooks और Xero जैसे ऐप्स के लिए डेस्टिनेशन चार्ज मेटाडेटा इस स्कीमा का पालन करता है:

```json
{
  "metadata": {
    "customer_id": "cus_platform_customer_id",
    "customer_email": "customer@example.com",
    "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 | इनवॉइस/रसीद मिलाने के लिए ग्राहक का ईमेल |
| `product_name` | string | लाइन आइटम में दिखने वाला प्रोडक्ट नाम |
| `product_id` | string | Stripe प्रोडक्ट ID |
| `quantity` | string | आइटम की मात्रा |
| `unit_amount` | string | करेंसी की सबसे छोटी इकाई (सेंट) में यूनिट कीमत |
| `currency` | string | तीन अक्षरों वाला ISO करेंसी कोड |
| `platform_fee` | string | करेंसी की सबसे छोटी इकाई में एप्लिकेशन फ़ीस |
| `platform_fee_currency` | string | प्लेटफ़ॉर्म फ़ीस की करेंसी |
| `tax_amount` | string | करेंसी की सबसे छोटी इकाई में टैक्स राशि |
| `tax_rate_id` | string | लागू किया गया Stripe टैक्स रेट ID |
| `invoice_id` | string | संबंधित इनवॉइस ID |
| `order_id` | string | प्लेटफ़ॉर्म का आंतरिक ऑर्डर आइडेंटिफ़ायर |

### मार्केटिंग इंटीग्रेशन

Mailchimp और Tajo के Brevo इंटीग्रेशन जैसे ऐप्स के लिए यह मेटाडेटा ग्राहक सेगमेंटेशन और कैम्पेन टार्गेटिंग को संभव बनाता है:

```json
{
  "metadata": {
    "customer_id": "cus_xxxxx",
    "customer_email": "customer@example.com",
    "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"`)
- `product_category` और `purchase_value` के आधार पर **अपसेल कैम्पेन**
- `subscription_interval` के आधार पर सब्सक्रिप्शन ग्राहकों के लिए **रिटेंशन फ़्लो**
- छोड़कर जाने वाले ऊँची `lifetime_value` वाले ग्राहकों के लिए **विन-बैक कैम्पेन**

## प्लेटफ़ॉर्म इंटीग्रेशन का उदाहरण

Tajo Brevo ऐप को एम्बेड करने वाला एक पूरा प्लेटफ़ॉर्म इंटीग्रेशन:

```tsx
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 Session की समय-सीमा होती है**: ज़रूरत के अनुसार नए सेशन बनाएं, क्लाइंट सीक्रेट कैश न करें
- **स्कोप नियंत्रण**: कौन से ऐप्स इंस्टॉल हो सकते हैं, यह सीमित करने के लिए `allowed_apps` इस्तेमाल करें
- **डेटा अलगाव**: हर कनेक्टेड अकाउंट का डेटा अलग रहता है, प्लेटफ़ॉर्म ऐप का डेटा नहीं देख सकता
- **CSP हेडर**: पक्का करें कि आपके प्लेटफ़ॉर्म की Content Security Policy `https://connect-js.stripe.com` से कनेक्शन की अनुमति देती है

Caution

एम्बेडेड ऐप कंपोनेंट के लिए Account Sessions API की पहुँच वाला Connect इंटीग्रेशन ज़रूरी है. सामान्य Stripe अकाउंट एम्बेडेड कंपोनेंट इस्तेमाल नहीं कर सकते.