Rezervasyon Motoru Plus özel ödeme ağ geçidi ve hediye kartı desteği

1. Hesap Menüsü içindeki Ayarlar sayfasına git ve Rezervasyon Motoru bölümüne tıkla
2. Özelleştir seçeneğine tıkla
3. JavaScript alanına aşağıdaki kodu ekle; bu kod, Rezervasyon Motoru hazır olduğunda tetiklenen ve dinlenen on-booking-engine-ready etkinliğine abone olur ve EventSystem kullanarak özel ödeme seçeneğinin kullanımını Rezervasyon Motoruna bildirir
4. Kaydet butonuna tıkla

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

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "Talimatlar için varsayılan metniniz buraya gelecek.",
    name: "Etiket için varsayılan metniniz buraya gelecek.",
  });
});
</script>

• eventSystem.dispatch() fonksiyonunu kullanarak custom-payment-option-change etkinliğini aşağıdaki veri yükü ile tetikle:

  • id [string] 0'dan büyük uzunlukta ve CSS id olarak geçerli (boşluk, noktalı virgül vb. olmamalı) olmalıdır. Önerilen id formatı: kebab-case. %PAYMENT_OPTION_ID% değerini, özel ödeme ağ geçidiniz için kullanmak istediğiniz id ile değiştir. Bu id, kullanıcı arayüzünü özelleştirmek için CSS seçicilerinde kullanılacak.

  • instructions [string] isteğe bağlıdır - kullanıcı özel ödeme seçeneğine tıkladığında gösterilecek talimatlar veya açıklama (akordeon şeklinde genişler). Tesis bu metni göstermek isterse bu değer tanımlanmalıdır ve belirli diller için CSS ile özelleştirilmezse yedek olarak kullanılır.

  • name [string] 0'dan büyük uzunlukta olmalıdır.

• Önemli:

  • Etkinlik veri yükü tüm gereksinimleri karşılamazsa, Özel Ödeme Seçeneği kayıt edilmeyecek ve Banka Havalesi seçeneği gösterilmeye devam edecektir.

  • Cloudbeds PMS'de değişiklikleri kaydet ve Rezervasyon Motoruna eriş. Ödeme sayfasında, özel ödeme ağ geçidin varsayılan kart simgesi ile ödeme seçeneği olarak görünecektir.

  • Özel Ödeme seçeneğinin görünümünü özelleştirmek için Cloudbeds PMS'de özel meta etiketleri ekleyerek özel CSS ekleyebilirsin.

• Etiketler için dil bazlı metinler belirtebilirsin:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Etiket için diline özel metnin buraya gelecek.";
}

• Talimatlar da dil bazlı olarak yapılandırılabilir:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Talimatlar için diline özel metnin buraya gelecek.";
}

• Ayrıca bir özel logo/simge de ekleyebilirsin:

// Varsayılan SVG simgesini gizlemek için
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// Simgeyi arka plan resmi olarak ayarlayarak özelleştirmek için
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

• Bu noktada, ödeme seçeneğini ekledin ve özelleştirdin. Misafir, Özel Ödeme Seçeneği ile rezervasyon yaptığında, rezervasyon Cloudbeds PMS üzerinde e-banking ödeme yöntemi ile oluşturulacak ve biz herhangi bir ödeme tahsil etmeyeceğiz.
• EventSystem kullanarak, oluşturulan rezervasyonla ilgili verileri almak ve kullanıcıyı ödeme işlemini tamamlaması için ödeme ağ geçidine yönlendirmek amacıyla reservation-created etkinliğini dinleyebilirsin (üçüncü taraf ödeme ağ geçidi entegrasyonları için).

eventSystem.addEventListener('reservation-created', (data) => {
  // Rezervasyon oluşturulduktan sonra çalışacak kodun buraya...
})

• reservation-created etkinliği tarafından açığa çıkarılan veri şu şekildedir:

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,>