---
title: "Embedded Stripe Apps | Tajo"
description: "اپنے پلیٹ فارم میں Stripe Apps کو ضم کرنے کے لیے Connect embedded components استعمال کریں"
url: https://tajo.io/ur/docs/stripe-apps/embedded-apps/
markdown: https://tajo.io/ur/docs/stripe-apps/embedded-apps.md
lang: ur-PK
author: "Set Noa"
author_url: https://tajo.io/ur/set-noa/
robots: noindex
---

ابتدائی رسائی کی درخواست کریں

اپنا پہلا نام اور دفتری ای میل پتہ درج کریں۔ ہم Tajo تک رسائی کی درخواست کی تصدیق کے لیے ایک لنک ای میل کریں گے۔

# Embedded Stripe Apps

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

Embedded Stripe Apps ان پلیٹ فارمز کو جو Stripe Connect پر بنے ہیں اپنے dashboards میں براہ راست تھرڈ پارٹی app فعالیت پیش کرنے کی اجازت دیتے ہیں۔ Connect embedded components استعمال کرکے، آپ اپنے connected accounts کو QuickBooks، Xero اور Mailchimp جیسی apps تک رسائی دے سکتے ہیں بغیر انہیں Stripe Dashboard پر جانے کی ضرورت کے۔

Caution

**صورتحال: منصوبہ بند، ابھی تیار نہیں ہوا۔** Tajo کی کوئی Stripe App نہیں ہے، اس لیے اس سیکشن کی کوئی چیز آج انسٹال نہیں کی جا سکتی۔ اس صفحے میں دیے گئے ایپ کے شناخت کار، URLs اور کریڈنشلز مثال کے طور پر رکھے گئے پلیس ہولڈرز ہیں، لائیو اینڈ پوائنٹس نہیں۔

## جائزہ

Embedded apps دو اہم Connect embedded components استعمال کرتے ہیں:

- **`app-install`**: آپ کے platform UI میں Stripe App کا install بٹن render کرتا ہے
- **`app-viewport`**: آپ کے platform UI میں ایک مخصوص app viewport render کرتا ہے

یہ platform operators کو اپنی مصنوعات میں براہ راست اکاؤنٹنگ، مارکیٹنگ اور آپریشنل ٹولز شامل کرنے کی اجازت دیتا ہے۔

## حمایت یافتہ Apps

مندرجہ ذیل apps Connect components کے ذریعے embedding کی حمایت کرتی ہیں:

| App | زمرہ | استعمال کا معاملہ |
| --- | --- | --- |
| **QuickBooks** | اکاؤنٹنگ | ادائیگیاں اور انوائسز QuickBooks سے sync کریں |
| **Xero** | اکاؤنٹنگ | خودکار بک کیپنگ اور مفاہمت |
| **Mailchimp** | مارکیٹنگ | ای میل کمپینز کے لیے گاہک ڈیٹا sync کریں |
| **Custom Apps** | کوئی بھی | آپ کی اپنے پلیٹ فارم کے لیے بنی Stripe Apps |

Tip

Tajo Brevo انٹیگریشن Connect platforms میں embedded ہو سکتی ہے، جس سے connected accounts پلیٹ فارم کے اپنے انٹرفیس کے ذریعے اپنا Stripe ڈیٹا Brevo میں sync کر سکتے ہیں۔

## Account Sessions API کے ساتھ سیٹ اپ

Apps کو embed کرنے کے لیے، آپ کو مناسب components کے ساتھ Account Sessions بنانی ہوں گی:

### Server-Side: 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 });
```

### Client-Side: 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 Component

`app-install` component ایک install بٹن render کرتا ہے جو connected accounts Stripe App انسٹال کرنے کے لیے استعمال کر سکتے ہیں:

### 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 Component

`app-viewport` component آپ کے پلیٹ فارم میں ایک مخصوص app viewport render کرتا ہے:

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

## Destination Charge Metadata Schema

Connect platforms میں destination charges کے ساتھ embedded apps استعمال کرتے وقت، charge metadata منظم ڈیٹا رکھتا ہے جسے اکاؤنٹنگ اور مارکیٹنگ انٹیگریشنز استعمال کر سکتی ہیں۔

### اکاؤنٹنگ انٹیگریشنز

QuickBooks اور Xero جیسی apps کے لیے، destination charge metadata اس schema کی پیروی کرتا ہے:

```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 product ID |
| `quantity` | string | آئٹم کی تعداد |
| `unit_amount` | string | کم ترین کرنسی یونٹ (cents) میں اکائی قیمت |
| `currency` | string | تین حرفی ISO کرنسی کوڈ |
| `platform_fee` | string | کم ترین کرنسی یونٹ میں application fee کی رقم |
| `platform_fee_currency` | string | پلیٹ فارم فیس کی کرنسی |
| `tax_amount` | string | کم ترین کرنسی یونٹ میں ٹیکس کی رقم |
| `tax_rate_id` | string | لاگو Stripe tax rate ID |
| `invoice_id` | string | متعلقہ invoice ID |
| `order_id` | string | پلیٹ فارم کا اندرونی آرڈر شناخت کنندہ |

### مارکیٹنگ انٹیگریشنز

Mailchimp اور Tajo Brevo انٹیگریشن جیسی apps کے لیے، metadata گاہک کی تقسیم اور کمپین targeting کو فعال کرتا ہے:

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

یہ metadata Brevo automations کو ممکن بناتا ہے جیسے:

- پہلی بار خریداروں کے لیے **Welcome series** (`is_first_purchase: "true"`)
- `product_category` اور `purchase_value` کی بنیاد پر **Upsell campaigns**
- `subscription_interval` کی بنیاد پر subscription گاہکوں کے لیے **Retention flows**
- اعلی `lifetime_value` والے گاہکوں کو target کرنے والی **Win-back campaigns**

## پلیٹ فارم انٹیگریشن مثال

Tajo Brevo app کو embed کرنے والی مکمل پلیٹ فارم انٹیگریشن:

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

## سیکیورٹی کے تحفظات

اپنے پلیٹ فارم میں apps embed کرتے وقت:

- **Account Sessions ختم ہو جاتی ہیں**: ضرورت کے مطابق نئی sessions بنائیں؛ client secrets cache نہ کریں
- **Scope control**: کون سی apps انسٹال ہو سکتی ہیں محدود کرنے کے لیے `allowed_apps` استعمال کریں
- **ڈیٹا کی علیحدگی**: ہر connected account کا ڈیٹا الگ ہوتا ہے؛ پلیٹ فارم app ڈیٹا تک رسائی نہیں کر سکتا
- **CSP headers**: یقینی بنائیں کہ آپ کے پلیٹ فارم کی Content Security Policy `https://connect-js.stripe.com` سے connections کی اجازت دیتی ہے

Caution

Embedded app components کو Account Sessions API رسائی کے ساتھ Connect انٹیگریشن کی ضرورت ہوتی ہے۔ معیاری Stripe اکاؤنٹس embedded components استعمال نہیں کر سکتے۔