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

1. ไปที่หน้า Settings ในเมนู บัญชี และคลิกที่ส่วน เครื่องมือจอง
2. คลิกที่ ปรับแต่ง
3. เพิ่มโค้ดต่อไปนี้ลงในช่อง JavaScript เพื่อสมัครสมาชิกในเหตุการณ์ on-booking-engine-ready (ซึ่งจะถูกส่งออกเมื่อเครื่องมือจองพร้อมที่จะเริ่มเรียกใช้งานและฟังเหตุการณ์) และแจ้งเครื่องมือจองเกี่ยวกับการใช้ตัวเลือกการชำระเงินที่กำหนดเองโดยใช้ EventSystem ด้วยโค้ดด้านล่าง
4. คลิกที่ บันทึก

<script>
window.addEventListener('on-booking-engine-ready', (e) => {
  const { eventSystem } = e.detail;

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "ข้อความเริ่มต้นสำหรับคำแนะนำของคุณที่นี่",
    name: "ข้อความเริ่มต้นสำหรับฉลากของคุณที่นี่",
  });
});
</script>

• ใช้ eventStytem.dispatch() เพื่อส่งเหตุการณ์ custom-payment-option-change  พร้อมกับ payload ต่อไปนี้:

  • id [string] ต้องถูกกำหนดด้วยความยาว มากกว่า 0, และถูกต้องในการใช้เป็น CSS id (ไม่มีช่องว่าง, ไม่มีเครื่องหมายอัฒภาค เป็นต้น). รูปแบบ id แนะนำ: kebab-case. แทนที่ %PAYMENT_OPTION_ID% ด้วย id ที่คุณต้องการใช้สำหรับช่องทางการชำระเงินที่กำหนดเอง, id นี้คือค่าที่จะถูกใช้โดยตัวเลือก CSS เพื่อปรับแต่ง UI.

  • instructions [string] ไม่บังคับ - เพื่อแสดงคำแนะนำ (หรือคำอธิบาย) เมื่อผู้ใช้คลิกที่ตัวเลือกการชำระเงินที่กำหนดเอง (ขยายออกเป็นแอคคอร์เดียน). ค่านี้ ต้องถูกกำหนด หากที่พักต้องการแสดงข้อความนั้นและจะทำหน้าที่เป็นตัวเลือกสำรองหากไม่ได้ปรับแต่งด้วย CSS สำหรับภาษาที่ระบุเฉพาะ.

  • name [string] ต้องถูกกำหนดด้วยความยาว มากกว่า 0.

• สำคัญ:

  • หาก payload ของเหตุการณ์ไม่ตรงตามเงื่อนไขทั้งหมด, ตัวเลือกการชำระเงินที่กำหนดเอง จะไม่ถูกลงทะเบียน, และตัวเลือกการโอนเงินผ่านธนาคารจะยังคงแสดงอยู่

  • บันทึก การเปลี่ยนแปลงใน Cloudbeds PMS และเข้าถึงเครื่องมือจอง บนหน้าจอการชำระเงิน, ช่องทางการชำระเงินที่กำหนดเองของคุณจะถูกแสดงเป็นตัวเลือกการชำระเงิน, พร้อมกับไอคอนการ์ดเริ่มต้น

  • คุณสามารถ เพิ่ม CSS ที่กำหนดเอง เพื่อปรับแต่งรูปแบบของตัวเลือกการชำระเงินที่กำหนดเองโดยการเพิ่มเมต้าแท็กที่กำหนดเองใน Cloudbeds PMS

• คุณสามารถระบุ ข้อความที่ขึ้นอยู่กับภาษา สำหรับฉลาก:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "ข้อความของคุณที่เฉพาะกับภาษานี้ไปที่นี่";
}

• คำแนะนำ ยังสามารถกำหนดค่าตามภาษาได้เช่นกัน:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "ข้อความของคุณที่เฉพาะกับภาษานี้ไปที่นี่";
}

• และคุณสามารถเพิ่มโลโก้/ไอคอนที่กำหนดเอง ได้ด้วย:

// เพื่อซ่อนไอคอน SVG ที่เป็นค่าเริ่มต้น
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// เพื่อปรับแต่งไอคอนโดยตั้งค่าให้เป็นภาพพื้นหลัง
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

• ณ จุดนี้, คุณได้เพิ่มและปรับแต่งตัวเลือกการชำระเงิน เพื่อใช้ตัวเลือกการชำระเงินที่กำหนดเอง เมื่อแขกจองโดยใช้ตัวเลือกการชำระเงินที่กำหนดเอง การจองจะถูกสร้างบน Cloudbeds PMS ด้วยวิธีการชำระเงินผ่านอินเตอร์เน็ต และเราจะไม่เรียกเก็บเงินใด ๆ
• โดยใช้EventSystem, คุณสามารถฟังอีเวนต์การสร้างการจอง เพื่อรับข้อมูลเกี่ยวกับการจองที่สร้างขึ้น และเปลี่ยนเส้นทางผู้ใช้ไปยังช่องทางการชำระเงินเพื่อทำการชำระเงินเสร็จสิ้น (สำหรับการผสานกับช่องทางการชำระเงินบุคคลที่สาม)

eventSystem.addEventListener('reservation-created', (data) = {
  // โค้ดของคุณที่จะดำเนินการหลังจากการจองถูกสร้าง...
})

• ข้อมูล ที่เปิดเผยโดยอีเวนต์การสร้างการจอง มีรูปร่างดังนี้:

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  hotel_name?: string;
  real_booking_total?: number;
  resRooms?: {
    adults: `${number}`;
    id: `${number}`;
    kids: `${number}`;
    package: `${number}`;
    package_name: string | null;
    rate_id: `${number}`;
    room_total: `${number}`;
    room_type_id: `${number}`;
    room_type_name: string;
    room_type_photos: ({
      TYPE?: string;
      alt: string;
      cropParam: string | null;
      croppedImage: string;
      fullPath: string;
      galleryPath?: string | null;
      id: string;
      imageHeight: string;
      imageWidth: string;
      mime?: string;
      originalName: string;
      ownerId?: string;
      ownerType?: string;
      parentId: string;
      path: string;
      section?: string;
      size?: string;
      thumbPath: string;
      uploadedAt?: string;
      utype?: string;
    } & {
      featured: number;
      featuredPath: string | null;
    })[];
  }[];
  rooms?: Record<string, {="{" adults:="adults:" number;="number;" amount:="amount:" bookedid:="bookedId:" string[];="string[];" kids:="kids:" name:="name:" string;="string;" packageid?:="packageId?:" packagename?:="packageName?:" picture?:="picture?:" price?:="price?:" rateid:="rateId:" roomid:="roomId:" unit?:="unit?:" }="}">;
  state?: string;
  total_tax?: number;
  widget_property?: number;
};</string,>