How Black Peak Built a Rental Booking Web App in Webflow & Wized

Key Points:

• Custom-made, with Wized, on-platform payment modal.
• Use of easepick JS library for a custom calendar widget.
• Quick extend bookings with two button clicks using Sendgrid and Xano background tasks.

‍

Who is World Class?

World Class creates luxurious experiences in lively communities worldwide. Their primary focus is providing medium-term stays for remote workers who want to discover new cities while working in a comfortable home away from home.

The limitations of Airbnb

Managing multiple properties throughout the United States is a challenging task. Although World Class relied on AirBnB for bookings, it lacked essential features that users anticipate from the luxurious experiences World Class Rentals offers.

‍

The lack of automation was a significant issue that affected the user experience and caused World Class to waste time and money. Users had difficulty making booking changes, and there was a high risk of administrative errors due to the numerous touch points involved.

‍

To remain competitive and meet the expectations of their guests, World Class Rentals had to adopt a new solution. This new solution had to be easy to maintain, require very little coding knowledge, & provide an excellent booking experience for guests, and incorporate automation to minimize potential errors.

‍

Black Peak's Solution

Enter Black Peak, a Wized Development Agency with immense experience creating no-code & low-code web apps, specifically for the real estate industry. Our tool-set enables us to Utilize the power of Webflow’s Designer, and Wized, to build extremely powerful Webflow Web Apps. 

‍

Our client, World Class, requires an exceedingly high level of quality for its user experience, to meet expectations, we used Stripe elements and thousands of lines of custom code to create a checkout experience, unlike other low-code web applications.

‍

Stripe Elements

Using Stripe Elements allows us complete control over users' checkout experiences. Its dynamic and will display different payment methods based on the users’ location. It also allows us to capture the users’ credit cards to schedule future payments.

‍

Under the hood, a mixture of custom javascript & Xano API calls to run the calculations and logic needed to power the checkout experience. These calculations take the dates the user selects from the calendar and any add-ons the user selects, then determines the user’s monthly cost, schedule of payments and break it down for clarity, including a separate line item for tax.

‍

While Stripe Elements allows you to keep users on platform and create a fully customized checkout experience, it leaves all logic and calculations up to you. Its API only accepts the amount to charge, the user you’re charging and a couple of other miscellaneous data points. All price and line-item calculations are up to the website developer to create.

‍

Scheduled Payments

Our clients' application uses Stripe Elements and the "Offline Charge" approach to bill customers even when they are not present during checkout. We rely on Xano's no code background tasks to check the database daily for any charges to be run on a specific day. Then, we process all the payments in one batch with Stripe.

Custom Javascript Calendar

To elevate the user experience further, we built a fully custom javascript calendar on top of the pre-existing javascript library ease pick. We made functionality to support all booking rules and logic World Class requires, such as minimum stay durations being dynamic per property and ensuring we only show available dates based on our database’s availability.

Quick Extend Stays

Users have the option to quick-extend stays with just two button clicks! To achieve this functionality, we used Sendgrid and Xano background tasks to check if a user’s visit is ending in the next week, and if valid, send them an email where they can select from three options to extend their stay, one month, three months & nine months.

‍

Once a user selects their extended duration, we re-direct them to the website where they confirm their selection, and we automatically set up the future payments required.

Airbnb API

Because World Class Rentals already uses Airbnb for all their properties, this new booking tool had to sync seamlessly with Airbnb’s API.

‍

To accomplish this, we built a background task in Xano that fetches the iCal of each property every 5 minutes from Airbnb. We then digest this iCal within Xano and translate it into a format our backend system can understand. This process is then reversed, enabling two-way synchronization between Xano and Airbnb rather than just a one-way sync.

‍