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

กรอกชื่อพร้อมอีเมลหรือหมายเลขโทรศัพท์ แล้วเราจะติดต่อกลับพร้อมรายละเอียดการเข้าใช้งาน Tajo

ในหน้านี้

อ้างอิง Viewport

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

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

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

{
  "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 ที่เกี่ยวข้องมาเป็นบริบท

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 เหล่านี้ให้ประโยชน์สูงสุด

{
  "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 กับเอกสารอ้างอิงนี้เสมอ