การชำระเงิน

Stardeck มี provider ในตัวสองราย คือ Beam Checkout และ Stripe Connect จัดการได้ที่ Settings → Services → Payments แอปของคุณเรียกใช้ผ่าน @stardeck-customer-apps/payments-sdk โดยไม่ต้องมี API key ในโค้ด

ใช้ payment gateway อื่นด้วย key ของคุณเอง (Stripe โดยตรง, Omise)? ดู Payment gateway ของบุคคลที่สาม

หากต้องการสร้างหน้าชำระเงิน ให้ใช้ prompt แบบที่อยู่ในหน้านี้กับ coding agent ของคุณ agent จะทำงานใน หน้าชำระเงินของแอปและทำตาม SKILL.md ใน node_modules/@stardeck-customer-apps/payments-sdk หากคุณสร้างในเบราว์เซอร์ ให้ใช้ prompt เดียวกันกับ Starcat Developer ในแท็บ Build ของแอป

Beam Checkoutคัดลอกลิงก์หัวข้อ

payment gateway ของไทย: QR PromptPay, บัตร, e-wallet (LINE Pay, TrueMoney, ShopeePay), mobile banking, ซื้อก่อนจ่ายทีหลัง จำนวนเงินเป็นสตางค์ (100 สตางค์ = 1 บาท)

เริ่มด้วย Playgroundคัดลอกลิงก์หัวข้อ

Beam Playground เป็นสภาพแวดล้อมทดสอบที่ใช้ร่วมกัน ไม่ต้องมีบัญชี Beam หรือ key

1. เปิด project ของคุณใน dashboard ของ Stardeck
2. ไปที่ Settings → Services → Payments
3. ใต้ Choose a payment provider เลือก Beam Checkout แล้วเลือก Enable payments
4. Sandbox เปิดอยู่เป็นค่าเริ่มต้นใต้ Playground routing

ตอนนี้การเรียกชำระเงินจาก sandbox จะไปที่สภาพแวดล้อมทดสอบของ Beam

Playground routingคัดลอกลิงก์หัวข้อ

เลือกว่า environment ใดใช้ Playground:

สลับตัวเลือกเหล่านี้ในส่วน Playground routing การเปลี่ยนแปลงของ sandbox มีผลเมื่อคุณบันทึก ส่วนการเปลี่ยนแปลงของ preview และ production มีผลเมื่อ deploy ครั้งถัดไปของ environment นั้น

ตั้งค่าวิธีชำระเงินคัดลอกลิงก์หัวข้อ

ใต้ Allowed Payment Methods เลือกสิ่งที่ payment link เสนอให้ลูกค้า มีผลกับทั้ง Playground และ production

• การชำระด้วยบัตร (Card Payments)
• QR PromptPay
• E-Wallet (LINE Pay, TrueMoney, ShopeePay)
• Mobile Banking
• ซื้อก่อนจ่ายทีหลัง (Atome)
• ผ่อนชำระด้วยบัตร (3, 4, 6 หรือ 10 เดือน)

การใช้ Payments SDKคัดลอกลิงก์หัวข้อ

@stardeck-customer-apps/payments-sdk ติดตั้งไว้ล่วงหน้าในทุกแอป

Payment Link (Hosted Checkout)คัดลอกลิงก์หัวข้อ

ลูกค้าชำระเงินบนหน้าที่ Beam โฮสต์ แล้วกลับมาที่แอปของคุณ Allowed Payment Methods ควบคุมสิ่งที่หน้านั้นเสนอ

Create a checkout page for my online store using Beam payment links.

Requirements:
- Show the cart items and total before checkout
- Create a Beam payment link and redirect the customer to pay
- After payment, redirect back to an order confirmation page
- Store the order in the database with payment status

Direct Charge (เชื่อมต่อผ่าน API)คัดลอกลิงก์หัวข้อ

เซิร์ฟเวอร์ของคุณสร้าง charge และได้รูป QR (PromptPay) หรือ redirect URL กลับมา คุณเป็นเจ้าของ UI การชำระเงินเอง

Build an inline PromptPay payment flow for my restaurant POS.

Requirements:
- Create a direct charge with QR_PROMPT_PAY payment method
- Display the QR code image directly on the page (no redirect)
- Poll for payment status and show a success message when paid
- Store the transaction in the database

วิธีชำระเงินมี QR_PROMPT_PAY, LINE_PAY, TRUE_MONEY และ SHOPEE_PAY ให้แตกกรณีตาม actionRequired ไม่ใช่ตามวิธีชำระเงิน Beam ตัดสินเป็นรายการ charge

การชำระด้วยบัตรคัดลอกลิงก์หัวข้อ

เบราว์เซอร์ส่งบัตรไปที่ Beam และรับ token กลับมา เซิร์ฟเวอร์ของคุณ charge จาก token นั้น หมายเลขบัตรไม่เคยไปถึงเซิร์ฟเวอร์ของคุณ

"use client";
import { PaymentsClient, tokenizeBeamCard } from "@stardeck-customer-apps/payments-sdk/browser";

const payments = new PaymentsClient();

async function payByCard(form: CardForm) {
  // 1. Merchant ID + publishable key + Beam tokenize URL (live or Playground)
  const config = await payments.getCardTokenizationConfig();
  // 2. Browser → Beam. PAN accepts spaces/dashes; month/year accept form strings; year 30 or 2030.
  const { cardTokenId } = await tokenizeBeamCard(config, {
    pan: form.number,
    expiryMonth: form.month,
    expiryYear: form.year,
    cardHolderName: form.name,
  });
  // 3. Send cardTokenId and the CVV to your own server route, never the card number.
}

บนเซิร์ฟเวอร์ของคุณ ให้สร้าง charge โดยใช้จำนวนเงินที่คำนวณจากคำสั่งซื้อ:

const charge = await beam.createDirectCharge({
  amount: order.totalSatang,
  paymentMethod: "CARD_TOKEN", // or "CARD_TOKEN_INSTALLMENTS" with installmentPeriod: 3 | 4 | 6 | 10
  cardToken: { cardTokenId, securityCode: cvv },
  returnUrl: `${origin}/orders/${order.id}`, // where 3-D Secure lands the shopper
  referenceId: order.attemptId,
  idempotencyKey: order.attemptId,
});

หาก actionRequired เป็น NONE ให้อ่านสถานะด้วย getCharge() หากเป็น REDIRECT ให้ส่งลูกค้าไปที่ redirectUrl เพื่อกรอกรหัสผ่านครั้งเดียว (OTP) หรือหน้า 3-D Secure

• อย่า log หรือเก็บหมายเลขบัตร และอย่าเก็บ CVV
• CARD และ CARD_INSTALLMENTS ถูกปฏิเสธใน direct charge เพราะจะทำให้หมายเลขบัตรดิบไปอยู่บนเซิร์ฟเวอร์ของคุณ
• หากร้านค้าไม่มี publishable key getCardTokenizationConfig() จะ throw CARD_TOKENIZATION_NOT_CONFIGURED ให้ซ่อนตัวเลือกบัตรเมื่อเจอข้อผิดพลาดนี้

เครื่อง Bolt (อุปกรณ์จริง)คัดลอกลิงก์หัวข้อ

ส่ง payment intent ไปยังเครื่องที่จับคู่ไว้ ดู อุปกรณ์ Bolt ที่จับคู่

Build a POS checkout that sends a card payment to my Bolt terminal.

Requirements:
- Select a paired Bolt device from the list
- Send a payment intent for the order total
- Poll for charge status to confirm payment
- Print a receipt after successful payment

ทดสอบใน Playgroundคัดลอกลิงก์หัวข้อ

Playground ไม่หักเงินจริง ใช้บัตรทดสอบและ QR code ทดสอบของ Beam branch preview รับได้เฉพาะการชำระเงินทดสอบ ต้อง publish ขึ้น production จึงจะรับเงินจริง

เปิดใช้งานจริงคัดลอกลิงก์หัวข้อ

1. สร้างบัญชีผู้ขายของ Beam ที่ Beam Lighthouse
2. ในการ์ด Go live with Beam ที่แท็บ Payments ให้เพิ่มร้านค้า production ของคุณ
3. ในส่วน Production กรอก API Key (อยู่ใน Beam Lighthouse ใต้ Developers)
4. ใต้ Webhooks คัดลอก webhook URL ซึ่งชี้ไปที่ Stardeck ไม่ใช่โดเมนของแอปคุณ ลงทะเบียนใน Beam Lighthouse ใต้ Developers → Webhooks แล้ววาง HMAC key ที่ Beam ให้กลับมาลงในช่อง webhook secret
5. ปิด Production ใต้ Playground routing

Sandbox และ preview ยังใช้ Playground ได้ ขณะที่ production ใช้ credential จริง

อุปกรณ์ Bolt ที่จับคู่คัดลอกลิงก์หัวข้อ

ใต้ Bolt+ Paired Devices ที่แท็บ Payments ให้จับคู่เครื่องด้วยรหัส 8 ตัวอักษร (เช่น 4TY9JDH2) ตรวจสถานะ หรือนำออก จับคู่ได้ทั้งในโหมด sandbox และ production

เครื่องที่จับคู่ใต้ Bolt+ terminals บนบัญชี Beam ใน Settings → Payments ขององค์กร ใช้ได้กับทุกแอปที่ผูกกับบัญชีนั้น

บัญชีการชำระเงินคัดลอกลิงก์หัวข้อ

แชร์บัญชี Beam และ Stripe ข้ามแอปได้ สร้างบัญชีใต้ Payment accounts ใน Settings → Payments ขององค์กร ในแอปให้ใช้ Attach from organization คำขอที่ไม่ได้ระบุบัญชีจะใช้บัญชีเริ่มต้น

Stripe Connectคัดลอกลิงก์หัวข้อ

รับชำระเงินผ่านบัญชี Stripe ของ คุณเอง: บัตร (พร้อม Apple Pay และ Google Pay บนอุปกรณ์ที่รองรับ), PromptPay QR สำหรับเงินบาท และการสมัครสมาชิกแบบเรียกเก็บเงินต่อเนื่อง (subscription) Stardeck ไม่เคยถือเงิน การโอนเงินเข้าบัญชี แบรนด์ และ Stripe dashboard ยังเป็นของคุณ จำนวนเงินเป็นหน่วยย่อยที่สุดของสกุลเงินนั้น (สตางค์สำหรับ THB, เซนต์สำหรับ USD, เยนเต็มหน่วยสำหรับ JPY)

เริ่มด้วย Playgroundคัดลอกลิงก์หัวข้อ

Stripe Playground คือบัญชีทดสอบ Stripe ที่ Stardeck ใช้ร่วมกัน ไม่ต้องมีบัญชี Stripe

1. เปิด project ของคุณใน dashboard ของ Stardeck
2. ไปที่ Settings → Services → Payments
3. ใต้ Choose a payment provider เลือก Stripe Connect แล้วเลือก Enable payments
4. Sandbox เปิดอยู่เป็นค่าเริ่มต้นใต้ Playground routing

ตอนนี้การชำระเงินจาก sandbox ของคุณจะเข้าบัญชีทดสอบ และไม่มีเงินจริงเคลื่อนไหว

Playground routingคัดลอกลิงก์หัวข้อ

เลือกว่า environment ใดใช้ Playground แทนบัญชี Stripe ของคุณเอง:

การเปลี่ยนแปลงมีผลกับการชำระเงินครั้งถัดไปใน environment นั้น ไม่ต้อง deploy ใหม่

วิธีชำระเงินคัดลอกลิงก์หัวข้อ

ใต้ Payment methods เลือกสิ่งที่แอปของคุณเสนอ เปิดไว้อย่างน้อยหนึ่งอย่าง

• Card: Visa, Mastercard และบัตรอื่นๆ รวมถึง Apple Pay และ Google Pay บนอุปกรณ์ที่รองรับ
• PromptPay: ลูกค้าสแกน QR code ด้วยแอปธนาคาร เฉพาะเงินบาทเท่านั้น

การตั้งค่านี้มีผลกับทุก environment ตั้งแต่การชำระเงินครั้งถัดไป แอปของคุณจะเสนอเฉพาะวิธีที่บัญชี Stripe ของคุณรับได้ ดังนั้น PromptPay จะปรากฏเมื่อเปิดใช้งานบนบัญชี Stripe ของไทยแล้ว

การใช้ Payments SDKคัดลอกลิงก์หัวข้อ

@stardeck-customer-apps/payments-sdk ติดตั้งไว้ล่วงหน้าในทุกแอป แอปของคุณทำเครื่องหมายว่าคำสั่งซื้อชำระแล้วเมื่อเหตุการณ์ payment_intent.succeeded จาก Stripe มาถึง ไม่ใช่เมื่อเบราว์เซอร์บอก

บัตรบนหน้าของคุณคัดลอกลิงก์หัวข้อ

ฟอร์มบัตรคือ Payment Element ของ Stripe ที่แสดงภายในหน้าชำระเงินของคุณเอง ข้อมูลบัตรไปจากเบราว์เซอร์ถึง Stripe โดยตรงและไม่ผ่านเซิร์ฟเวอร์ของคุณ 3-D Secure จะเปิดขึ้นในหน้าเดิมเมื่อธนาคารร้องขอ

Add card payments to my storefront checkout using Stripe's Payment Element.

Requirements:
- Keep the customer on my checkout page, with the card form under the order summary
- Create the payment on the server with the amount from the order, not from the browser
- Handle 3-D Secure, and show a clear message when a card is declined
- Mark the order paid only when the payment_intent.succeeded event arrives, then show the order page

PromptPay QRคัดลอกลิงก์หัวข้อ

เซิร์ฟเวอร์ของคุณสร้างการชำระเงินและได้ QR code กลับมาเพื่อแสดง ลูกค้าสแกนด้วยแอปธนาคารไทยใดก็ได้

Add a PromptPay QR option to my restaurant's checkout using Stripe.

Requirements:
- Show the QR code on the page with the amount in baht and a countdown until it expires
- Poll the payment and switch to a "Paid" screen as soon as it succeeds
- Let the customer cancel and pick card instead
- Store the payment on the order and mark it paid from the payment_intent.succeeded event

Hosted Checkoutคัดลอกลิงก์หัวข้อ

ลูกค้าชำระเงินบนหน้าที่ Stripe โฮสต์ แล้วกลับมาที่แอปของคุณ ใช้วิธีนี้กับ subscription

Create a checkout flow for my SaaS app using Stripe.

Requirements:
- Monthly subscription at $29/mo
- Annual plan at $290/year
- Redirect to dashboard after successful payment
- Show billing portal link for managing subscriptions

ทดสอบใน Playgroundคัดลอกลิงก์หัวข้อ

Playground ไม่รับเงินจริง ใช้บัตรทดสอบของ Stripe:

ใช้วันหมดอายุในอนาคตและ CVC อะไรก็ได้ สำหรับ PromptPay ให้เปิดหน้าชำระเงินทดสอบของ QR แล้วอนุมัติหรือทำให้การชำระเงินล้มเหลวที่นั่น เหตุการณ์ webhook จากการชำระเงินทดสอบจะปรากฏใต้ Webhook logs ที่แท็บ Payments

เปิดใช้งานจริงคัดลอกลิงก์หัวข้อ

1. ในการ์ด Go live with Stripe ที่แท็บ Payments เลือก Connect with Stripe เข้าสู่ระบบ Stripe แล้วอนุญาต ไม่ต้องวาง API key และสร้างบัญชี Stripe ในขั้นตอนนี้ได้
2. การเชื่อมต่อจะปิด Production ใต้ Playground routing แอปที่ใช้งานจริงของคุณจึงรับเงินจริงทันที Sandbox และ preview ยังใช้ Playground
3. ตรวจว่าแท็บ Payments แสดง Charges Enabled หากไม่แสดง ให้กรอกข้อมูลธุรกิจ ธนาคาร และการยืนยันตัวตนให้ครบใน Stripe dashboard
4. ลองชำระเงินจริงจำนวนน้อยหนึ่งครั้งในแอปที่ใช้งานจริง และตรวจว่าแสดงสถานะชำระแล้ว

สถานะคัดลอกลิงก์หัวข้อ

• Charges Enabled: พร้อมรับชำระเงิน
• Payouts Enabled: Stripe โอนเงินเข้าธนาคารของคุณได้

หาก charges ปิดอยู่ ให้กรอกข้อมูลธุรกิจ ธนาคาร และการยืนยันตัวตนให้ครบใน Stripe dashboard แล้วรีเฟรชแท็บ Payments

สินค้า (Products)คัดลอกลิงก์หัวข้อ

เมื่อเปิด charges แล้ว ส่วน Products จะสร้างสินค้าและราคาแบบครั้งเดียวหรือแบบต่อเนื่องบนบัญชี Stripe ของคุณ

ยกเลิกการเชื่อมต่อคัดลอกลิงก์หัวข้อ

ยกเลิกการเชื่อมต่อได้จากแท็บ Payments การทำเช่นนี้จะเพิกถอนสิทธิ์เข้าถึงของ Stardeck ฝั่ง Stripe บัญชี Stripe และข้อมูลของคุณไม่ได้รับผลกระทบ

ต้องการความช่วยเหลือ หรือทีมของเราเคยเชื่อมต่อ Stripe ให้คุณ? ติดต่อ support@stardeck.ai