> ## Documentation Index
> Fetch the complete documentation index at: https://docs-th.stardeck.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# การเชื่อมต่อ Payment Gateways

> เรียนรู้วิธีการเชื่อมต่อ Stripe และ Omise payment gateways เข้ากับแอปพลิเคชัน Stardeck ของคุณ

## ภาพรวม

รับการชำระเงินในแอปพลิเคชัน Stardeck ของคุณโดยใช้ payment gateways ยอดนิยมอย่าง Stripe และ Omise คู่มือนี้ครอบคลุมการตั้งค่าบัญชีการชำระเงิน, การกำหนดค่า API keys ใน Stardeck, และการใช้ AI agent เพื่อสร้างฟีเจอร์การชำระเงินรวมถึงการประมวลผลบัตรเครดิต, การชำระเงิน Thai QR (PromptPay), และการจัดการ webhook

<Info>
  คู่มือนี้เน้นที่การตั้งค่าบัญชีทดสอบและการกำหนดค่า คุณสามารถใช้ AI agent ของ Stardeck เพื่อสร้างการเชื่อมต่อการชำระเงินทั้งหมด—ไม่ต้องเขียนโค้ด
</Info>

## ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมี:

* โปรเจค Stardeck ที่ใช้งานอยู่
* ความคุ้นเคยกับ [environment variables](/environment-variables) ใน Stardeck
* บัญชี payment gateway (Stripe และ/หรือ Omise)

## การตั้งค่า Stripe

Stripe เป็น payment processor ยอดนิยมที่รองรับบัตรเครดิต, digital wallets, และอื่นๆ

### การสร้างบัญชีทดสอบ Stripe

1. ไปที่ [stripe.com](https://stripe.com) และคลิก **Sign up**
2. ทำการลงทะเบียนให้เสร็จสมบูรณ์
3. เมื่อเข้าสู่ระบบแล้ว คุณจะมีสิทธิ์เข้าถึง **test mode** โดยอัตโนมัติ

### การรับ API Keys ของคุณ

1. ใน Stripe Dashboard ไปที่ **Developers** > **API keys**
2. สลับ **Test mode** เปิด (สวิตช์ใน sidebar ด้านซ้ายควรแสดง "Test mode")
3. คุณจะเห็น keys สองประเภท:
   * **Publishable key** - เริ่มต้นด้วย `pk_test_...` (ปลอดภัยที่จะเปิดเผยใน client-side code)
   * **Secret key** - เริ่มต้นด้วย `sk_test_...` (ต้องเก็บเป็นความลับ)

<Warning>
  ห้ามเปิดเผย secret key ใน client-side code ทำเครื่องหมายเป็น secret ใน environment variables ของ Stardeck เสมอ
</Warning>

### การเปิดใช้งาน Payment Methods

1. ไปที่ **Settings** > **Payment methods**
2. ตรวจสอบว่า **Cards** เปิดใช้งานอยู่
3. สำหรับการเชื่อมต่อ webhook จดบันทึก **Webhook signing secret** ของคุณจาก **Developers** > **Webhooks**

<Note>
  Stripe test mode ให้หมายเลขบัตรทดสอบสำหรับสถานการณ์ต่างๆ คุณสามารถหาได้ใน Stripe testing documentation
</Note>

## การตั้งค่า Omise

Omise เป็น payment gateway ในเอเชียตะวันออกเฉียงใต้ที่มีการรองรับที่ยอดเยี่ยมสำหรับวิธีการชำระเงินไทยรวมถึง PromptPay QR codes

### การสร้างบัญชีทดสอบ Omise

1. ไปที่ [omise.co](https://www.omise.co) และคลิก **Sign up**
2. ทำการลงทะเบียนและยืนยันอีเมลให้เสร็จสมบูรณ์
3. เข้าถึง dashboard ของคุณที่ [dashboard.omise.co](https://dashboard.omise.co)
4. สลับไปยัง **Test mode** โดยใช้สวิตช์ใน top navigation

### การรับ API Keys ของคุณ

1. ใน Omise Dashboard คลิกที่ชื่อบัญชีของคุณ (บนขวา)
2. ไปที่ส่วน **Keys** หรือ **API Keys**
3. ใน **Test mode** คุณจะพบ:
   * **Public key** - เริ่มต้นด้วย `pkey_test_...` (ปลอดภัยฝั่ง client)
   * **Secret key** - เริ่มต้นด้วย `skey_test_...` (server-side เท่านั้น)

### การเปิดใช้งาน Payment Methods

1. ไปที่ **Settings** > **Payment Methods**
2. เปิดใช้งานต่อไปนี้สำหรับการทดสอบ:
   * **Credit/Debit Cards**
   * **PromptPay** (การชำระเงิน Thai QR code)
3. บันทึกการตั้งค่าของคุณ

<Info>
  Omise ให้หมายเลขบัตรทดสอบและขั้นตอน QR payment สำหรับการทดสอบ sandbox ดู documentation ของพวกเขาสำหรับข้อมูลประจำตัวทดสอบ
</Info>

## การกำหนดค่า Environment Variables ใน Stardeck

เมื่อคุณมี API keys แล้ว เพิ่มพวกเขาไปยังโปรเจค Stardeck ของคุณเป็น environment variables

### การเพิ่ม Stripe Keys

1. เปิดโปรเจคของคุณใน Stardeck dashboard
2. คลิกปุ่ม **Settings** (ไอคอนเฟือง)
3. ไปที่แท็บ **Environment Variables**
4. เพิ่ม variables ต่อไปนี้:

#### Stripe Publishable Key (Non-Secret)

* **Key**: `STRIPE_PUBLISHABLE_KEY`
* **Value**: `pk_test_...` key ของคุณ
* **Secret Variable**: Off (ไม่เลือก)
* **Deployment Targets**: เลือก **Sandbox** สำหรับการทดสอบ

<Note>
  Non-secret variables มีอยู่โดยอัตโนมัติพร้อม prefix `VITE_` สำหรับ client-side code Frontend ของคุณสามารถเข้าถึงเป็น `import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY`
</Note>

#### Stripe Secret Key (Secret)

* **Key**: `STRIPE_SECRET_KEY`
* **Value**: `sk_test_...` key ของคุณ
* **Secret Variable**: On (เลือก)
* **Deployment Targets**: เลือก **Sandbox** สำหรับการทดสอบ

#### Stripe Webhook Secret (Secret)

หากคุณวางแผนที่จะใช้ webhooks:

* **Key**: `STRIPE_WEBHOOK_SECRET`
* **Value**: `whsec_...` key ของคุณจากหน้า Stripe webhooks
* **Secret Variable**: On (เลือก)
* **Deployment Targets**: เลือก **Sandbox** สำหรับการทดสอบ

### การเพิ่ม Omise Keys

ทำตามขั้นตอนเดียวกันเพื่อเพิ่ม Omise keys:

#### Omise Public Key (Non-Secret)

* **Key**: `OMISE_PUBLIC_KEY`
* **Value**: `pkey_test_...` key ของคุณ
* **Secret Variable**: Off (ไม่เลือก)
* **Deployment Targets**: เลือก **Sandbox**

#### Omise Secret Key (Secret)

* **Key**: `OMISE_SECRET_KEY`
* **Value**: `skey_test_...` key ของคุณ
* **Secret Variable**: On (เลือก)
* **Deployment Targets**: เลือก **Sandbox**

<Success>
  Environment variables ของคุณได้รับการกำหนดค่าแล้ว! Dev server จะรีสตาร์ทโดยอัตโนมัติเพื่อใช้การเปลี่ยนแปลงเหล่านี้
</Success>

## การใช้ AI Agent เพื่อสร้างฟีเจอร์การชำระเงิน

ตอนนี้ environment ของคุณได้รับการกำหนดค่าแล้ว คุณสามารถใช้ AI agent ของ Stardeck เพื่อสร้างการเชื่อมต่อการชำระเงินของคุณได้ นี่คือตัวอย่าง prompts สำหรับสถานการณ์ทั่วไป:

### E-commerce Checkout กับ Stripe

```
I need a checkout flow for my art marketplace where customers can buy artwork with credit cards.

Requirements:
- Payment form with card details using Stripe
- Show the artwork image, title, and price before payment
- Use STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY environment variables
- Send confirmation email after successful payment
```

### การชำระเงินแบบสมัครสมาชิกด้วย Webhooks

```
Add subscription billing for my SaaS app using Stripe.

Requirements:
- Monthly and annual subscription plans at $29/mo and $290/year
- Use Stripe webhooks with STRIPE_WEBHOOK_SECRET to track payment status
- Update user subscription status in the database when payments succeed or fail
- Show subscription status in user's account page
```

### Thai Payment Gateway สำหรับธุรกิจท้องถิ่น

```
I run a Thai restaurant and need to accept payments in Thai Baht with both credit cards and PromptPay QR codes using Omise.

Requirements:
- Payment page with Credit Card and PromptPay options
- Use OMISE_PUBLIC_KEY and OMISE_SECRET_KEY
- Display QR code for PromptPay and wait for payment confirmation
- Store orders in database with payment status
```

### แดชบอร์ดการจัดการคำสั่งซื้อ

```
Create an admin dashboard to manage customer orders and payments for my online store.

Requirements:
- Show all orders with payment status, customer details, and amounts
- Filter by order status and date
- Display total revenue and number of orders
- Allow me to issue refunds through Stripe
```

### เคล็ดลับสำหรับการใช้ Prompt อย่างมีประสิทธิภาพ

1. **อ้างอิง environment variables ตามชื่อ** - Agent รู้วิธีใช้พวกเขาอย่างถูกต้อง
2. **ระบุสกุลเงิน** - กล่าวถึง THB สำหรับ Omise หรือ USD สำหรับ Stripe
3. **ขอการจัดเก็บใน database** - ระบุว่าข้อมูลการชำระเงินใดควรบันทึก
4. **ทำให้เรียบง่าย** - Agent จะจัดการ best practices สำหรับความปลอดภัยและการจัดการข้อผิดพลาด

<Info>
  AI agent เข้าใจ payment gateway APIs และจะใช้โค้ดที่ปลอดภัยและพร้อม production ตาม best practices
</Info>

## การทดสอบการเชื่อมต่อของคุณ

### การทดสอบ Stripe Payments

Stripe ให้หมายเลขบัตรทดสอบสำหรับสถานการณ์ต่างๆ:

* **การชำระเงินสำเร็จ**: `4242 4242 4242 4242`
* **ต้องการการยืนยันตัวตน**: `4000 0025 0000 3155`
* **บัตรถูกปฏิเสธ**: `4000 0000 0000 9995`

ใช้วันหมดอายุในอนาคตใดๆ และ CVC 3 หลักใดๆ

<Note>
  หาบัตรทดสอบเพิ่มเติมใน [Stripe's testing documentation](https://stripe.com/docs/testing)
</Note>

### การทดสอบ Omise Payments

Omise ให้บัตรทดสอบสำหรับสถานการณ์ต่างๆ:

* **การเรียกเก็บเงินสำเร็จ**: `4242 4242 4242 4242`
* **การเรียกเก็บเงินล้มเหลว**: `4111 1111 1111 1111`
* **PromptPay QR**: Test mode สร้าง test QR code ที่เสร็จสมบูรณ์โดยอัตโนมัติหลังจากสองสามวินาที

ใช้วันหมดอายุ `10/25` และ CVV 3 หลักใดๆ สำหรับบัตรทดสอบ

### การทดสอบ Webhooks ในเครื่อง

สำหรับการทดสอบ webhook ในระหว่างการพัฒนา:

1. ใช้เครื่องมืออย่าง [ngrok](https://ngrok.com) หรือ [localtunnel](https://localtunnel.me) เพื่อเปิดเผย local dev server ของคุณ
2. กำหนดค่า webhook URL ใน Stripe/Omise dashboard ชี้ไปยัง endpoint ที่เปิดเผยของคุณ
3. ทริกเกอร์ test events จาก payment gateway dashboard
4. ตรวจสอบ webhook events ใน application logs ของคุณ

<Warning>
  Webhook endpoints ต้องส่งการตอบกลับ `200 OK` อย่างรวดเร็วเพื่อหลีกเลี่ยงการลองใหม่ ประมวลผล events แบบอะซิงโครนัสหากจำเป็น
</Warning>

## การเผยแพร่ด้วย Production Keys

เมื่อคุณพร้อมที่จะรับการชำระเงินจริง:

### การย้ายไปยัง Production

1. **รับ production API keys** จาก Stripe/Omise (ต้องการการยืนยันธุรกิจ)
2. ใน Stardeck **เพิ่ม environment variables ใหม่** ด้วย production keys
3. ตั้ง **Deployment Targets** เป็น **Production** (ไม่ใช่ Sandbox)
4. **อัปเดต webhook URLs** เพื่อชี้ไปยังโดเมน production ของคุณ
5. **ทดสอบอย่างละเอียด** ด้วย transactions จริงขนาดเล็กก่อนเปิดตัว

### Production Checklist

* [ ] การยืนยันธุรกิจเสร็จสมบูรณ์กับ payment gateway
* [ ] กำหนดค่า production API keys ใน Stardeck
* [ ] ตรวจสอบและทดสอบ webhook endpoints แล้ว
* [ ] มีการจัดการข้อผิดพลาดและการบันทึกอยู่
* [ ] กำหนดค่าอีเมลยืนยันการชำระเงิน
* [ ] จัดทำเอกสารกระบวนการคืนเงิน
* [ ] อัปเดตข้อกำหนดการให้บริการและนโยบายความเป็นส่วนตัว
* [ ] ตรวจสอบข้อกำหนด PCI compliance

<Warning>
  Production keys ให้การเข้าถึงการประมวลผลการชำระเงินจริง เก็บพวกเขาไว้อย่างปลอดภัยและห้าม commit ไปยัง version control
</Warning>

## แหล่งข้อมูลเพิ่มเติม

### Stripe Documentation

* [Stripe Testing Guide](https://stripe.com/docs/testing)
* [Stripe Payment Intents API](https://stripe.com/docs/payments/payment-intents)
* [Stripe Webhooks Guide](https://stripe.com/docs/webhooks)

### Omise Documentation

* [Omise API Documentation](https://www.omise.co/docs)
* [Omise Testing Guide](https://www.omise.co/api-testing)
* [PromptPay Integration](https://www.omise.co/promptpay)

***

ต้องการความช่วยเหลือในการเชื่อมต่อการชำระเงินของคุณ? ติดต่อทีมสนับสนุนของเราผ่าน dashboard ของคุณหรือติดต่อที่ [support@stardeck.ai](mailto:support@stardeck.ai)