---
title: "อ้างอิง Viewport | Tajo"
description: "อ้างอิงฉบับสมบูรณ์ของ viewport ใน Stripe Dashboard ที่ UI ของ Stripe App ของคุณสามารถแสดงผลได้"
url: https://tajo.io/th/docs/stripe-apps/viewports/
markdown: https://tajo.io/th/docs/stripe-apps/viewports.md
lang: th-TH
author: "Set Noa"
author_url: https://tajo.io/th/set-noa/
robots: noindex
---

ขอสิทธิ์ใช้งานล่วงหน้า

กรอกชื่อและที่อยู่อีเมลที่ทำงานของคุณ เราจะส่งลิงก์เพื่อยืนยันคำขอเข้าใช้งาน Tajo ทางอีเมล

# อ้างอิง Viewport

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

Viewport กำหนดว่าคอมโพเนนต์ UI ของ Stripe App จะปรากฏที่ตำแหน่งใดภายใน Stripe Dashboard แต่ละ viewport สอดคล้องกับหน้าหรือตำแหน่งหนึ่งใน Dashboard ที่แอปของคุณสามารถแสดงมุมมองได้

Caution

**สถานะ: วางแผนไว้ ยังไม่ได้สร้าง** Tajo ไม่มี Stripe App จึงยังไม่มีสิ่งใดในส่วนนี้ที่ติดตั้งได้ในปัจจุบัน ตัวระบุแอป URL รวมถึงข้อมูลรับรองในหน้านี้เป็นตัวอย่างประกอบคำอธิบาย ไม่ใช่ปลายทางที่ใช้งานได้จริง

## Viewport ทำงานอย่างไร

เมื่อคุณประกาศมุมมองใน manifest ของแอป คุณกำลังจับคู่คอมโพเนนต์ React เข้ากับ viewport

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}
```

คอมโพเนนต์จะแสดงผลใน app drawer (แผงด้านข้าง) เมื่อผู้ใช้เข้าไปยังหน้า Dashboard ที่สอดคล้องกันและเปิดแอปของคุณ

## Viewport ระดับทั้ง Dashboard เทียบกับ viewport เฉพาะหน้า

### Viewport ระดับทั้ง Dashboard

viewport เหล่านี้ใช้ได้ในทุกหน้าของ Stripe Dashboard

| Viewport ID | คำอธิบาย |
| --- | --- |
| `stripe.dashboard.drawer.default` | มุมมอง drawer เริ่มต้น เข้าถึงได้จากทุกหน้าของ Dashboard ผ่านไอคอนแอป |
| `stripe.dashboard.home.overview` | ภาพรวมหน้าแรก แสดงบนหน้าเริ่มต้นของ Dashboard |
| `stripe.dashboard.settings` | หน้าตั้งค่าแอป เข้าถึงได้จากเมนูการตั้งค่าของแอป |
| `stripe.dashboard.onboarding` | ขั้นตอนเริ่มต้นใช้งาน แสดงหลังจากติดตั้งแอป |

Tip

viewport `drawer.default` ทำหน้าที่เป็นตัวสำรอง หากผู้ใช้เปิดแอปของคุณในหน้าที่คุณไม่ได้ประกาศ viewport เฉพาะไว้ ระบบจะแสดงมุมมอง `drawer.default` แทน

### Viewport เฉพาะหน้า

viewport เหล่านี้จะแสดงผลเฉพาะเมื่อผู้ใช้อยู่ในหน้า Dashboard ที่สอดคล้องกัน

## การชำระเงิน

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.payment.list` | รายการการชำระเงิน | `/payments` |  |
| `stripe.dashboard.payment.detail` | รายละเอียดการชำระเงิน | `/payments/:id` | PaymentIntent |
| `stripe.dashboard.charge.detail` | รายละเอียดการเรียกเก็บเงิน | `/payments/:id` (แบบเดิม) | Charge |

## ลูกค้า

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.customer.list` | รายการลูกค้า | `/customers` |  |
| `stripe.dashboard.customer.detail` | รายละเอียดลูกค้า | `/customers/:id` | Customer |

## สินค้าและราคา

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.product.list` | รายการสินค้า | `/products` |  |
| `stripe.dashboard.product.detail` | รายละเอียดสินค้า | `/products/:id` | Product |
| `stripe.dashboard.price.detail` | รายละเอียดราคา | `/prices/:id` | Price |

## ใบแจ้งหนี้

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.invoice.list` | รายการใบแจ้งหนี้ | `/invoices` |  |
| `stripe.dashboard.invoice.detail` | รายละเอียดใบแจ้งหนี้ | `/invoices/:id` | Invoice |

## การสมัครสมาชิก

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.subscription.list` | รายการการสมัครสมาชิก | `/subscriptions` |  |
| `stripe.dashboard.subscription.detail` | รายละเอียดการสมัครสมาชิก | `/subscriptions/:id` | Subscription |

## Checkout

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.checkout.session.list` | รายการ Checkout Session | `/checkout/sessions` |  |
| `stripe.dashboard.checkout.session.detail` | รายละเอียด Checkout Session | `/checkout/sessions/:id` | CheckoutSession |
| `stripe.dashboard.payment-link.list` | รายการ Payment Link | `/payment-links` |  |
| `stripe.dashboard.payment-link.detail` | รายละเอียด Payment Link | `/payment-links/:id` | PaymentLink |

## Connect

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.connect.account.list` | รายการบัญชีที่เชื่อมต่อ | `/connect/accounts` |  |
| `stripe.dashboard.connect.account.detail` | รายละเอียดบัญชีที่เชื่อมต่อ | `/connect/accounts/:id` | Account |
| `stripe.dashboard.transfer.list` | รายการการโอนเงิน | `/connect/transfers` |  |
| `stripe.dashboard.transfer.detail` | รายละเอียดการโอนเงิน | `/connect/transfers/:id` | Transfer |

## Billing

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.coupon.list` | รายการคูปอง | `/coupons` |  |
| `stripe.dashboard.coupon.detail` | รายละเอียดคูปอง | `/coupons/:id` | Coupon |
| `stripe.dashboard.quote.list` | รายการใบเสนอราคา | `/quotes` |  |
| `stripe.dashboard.quote.detail` | รายละเอียดใบเสนอราคา | `/quotes/:id` | Quote |
| `stripe.dashboard.credit-note.detail` | รายละเอียดใบลดหนี้ | `/credit-notes/:id` | CreditNote |

## การจ่ายเงินออก

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.payout.list` | รายการการจ่ายเงินออก | `/payouts` |  |
| `stripe.dashboard.payout.detail` | รายละเอียดการจ่ายเงินออก | `/payouts/:id` | Payout |

## ข้อโต้แย้งการชำระเงิน

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.dispute.list` | รายการข้อโต้แย้ง | `/disputes` |  |
| `stripe.dashboard.dispute.detail` | รายละเอียดข้อโต้แย้ง | `/disputes/:id` | Dispute |

## Terminal

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.terminal.reader.list` | รายการเครื่องอ่านบัตร | `/terminal/readers` |  |
| `stripe.dashboard.terminal.reader.detail` | รายละเอียดเครื่องอ่านบัตร | `/terminal/readers/:id` | TerminalReader |
| `stripe.dashboard.terminal.location.list` | รายการสถานที่ตั้ง | `/terminal/locations` |  |
| `stripe.dashboard.terminal.location.detail` | รายละเอียดสถานที่ตั้ง | `/terminal/locations/:id` | TerminalLocation |

## Issuing

| Viewport ID | หน้า | รูปแบบ URL | ชนิดออบเจ็กต์ |
| --- | --- | --- | --- |
| `stripe.dashboard.issuing.card.list` | รายการบัตร | `/issuing/cards` |  |
| `stripe.dashboard.issuing.card.detail` | รายละเอียดบัตร | `/issuing/cards/:id` | IssuingCard |
| `stripe.dashboard.issuing.cardholder.list` | รายการผู้ถือบัตร | `/issuing/cardholders` |  |
| `stripe.dashboard.issuing.cardholder.detail` | รายละเอียดผู้ถือบัตร | `/issuing/cardholders/:id` | IssuingCardholder |
| `stripe.dashboard.issuing.transaction.list` | รายการธุรกรรม | `/issuing/transactions` |  |
| `stripe.dashboard.issuing.authorization.list` | รายการการอนุมัติวงเงิน | `/issuing/authorizations` |  |

## การเข้าถึงบริบทของออบเจ็กต์

เมื่อแอปของคุณแสดงผลใน viewport แบบรายละเอียด แอปจะได้รับออบเจ็กต์ Stripe ที่เกี่ยวข้องมาเป็นบริบท

```typescript
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext contains the current Stripe object
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};
```

### บริบทของมุมมองรายการเทียบกับมุมมองรายละเอียด

| ชนิด Viewport | บริบทของออบเจ็กต์ | กรณีใช้งาน |
| --- | --- | --- |
| **รายการ** (เช่น `customer.list`) | ไม่มี เพราะยังไม่ได้เลือกออบเจ็กต์ใดโดยเฉพาะ | แสดงข้อมูลรวม มุมมองสรุป หรือการกระทำแบบกลุ่ม |
| **รายละเอียด** (เช่น `customer.detail`) | ออบเจ็กต์ Stripe ฉบับเต็มของหน้าปัจจุบัน | แสดงข้อมูล การกระทำ และการเชื่อมต่อเฉพาะของออบเจ็กต์นั้น |

## Viewport ที่แนะนำสำหรับการเชื่อมต่อ Tajo Brevo

สำหรับแอปเชื่อมต่อ Tajo Brevo viewport เหล่านี้ให้ประโยชน์สูงสุด

```json
{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}
```

| คอมโพเนนต์ | จุดประสงค์ |
| --- | --- |
| **CustomerDetailView** | แสดงข้อมูล contact ใน Brevo สถานะการซิงค์ และข้อมูลการมีส่วนร่วมของลูกค้ารายนั้น |
| **CustomerListView** | แสดงตัวควบคุมการซิงค์แบบกลุ่มและสถิติการซิงค์ Brevo โดยรวม |
| **PaymentDetailView** | แสดงว่าการชำระเงินนี้กระตุ้นอีเวนต์ใดใน Brevo บ้าง |
| **SubscriptionDetailView** | แสดงสถานะระบบอัตโนมัติของ Brevo สำหรับการสมัครสมาชิกนี้ |
| **OverviewView** | วิดเจ็ตหน้าแรกของ Dashboard พร้อมสุขภาพการซิงค์และตัวชี้วัดสำคัญของ Brevo |
| **DrawerView** | app drawer ทั่วไปพร้อมการกระทำด่วนและภาพรวมสถานะ |
| **SettingsView** | ตั้งค่าคีย์ API ของ Brevo การตั้งค่าการซิงค์ และการจับคู่ฟิลด์ |
| **OnboardingView** | แนะนำผู้ใช้ใหม่ตลอดขั้นตอนการเชื่อมต่อบัญชี Brevo |

## ความพร้อมใช้งานของ Viewport

viewport ไม่ได้ใช้งานได้ทุกตัวในทุกโหมดของ Stripe Dashboard

| โหมด | Viewport ที่ใช้ได้ |
| --- | --- |
| **Live mode** | ทุก viewport |
| **Test mode** | ทุก viewport (ใช้ข้อมูลทดสอบ) |
| **Sandbox** | ทุก viewport (หากตั้งค่า `sandbox_install_compatible: true`) |

Caution

หาก manifest ของคุณประกาศ viewport ที่ไม่มีอยู่จริง การอัปโหลดแอปจะไม่ผ่านการตรวจสอบ ควรตรวจสอบ viewport ID กับเอกสารอ้างอิงนี้เสมอ