I’ve been working on a freelance project to integrate a booking platform (Not just an Iframe) in a Shopify store (eProgram).

Project overview:

eProgram is a private store for Moroccan company's partners to get exclusive deals for their employees.

The store extends its catalog of deals with travel deals of Moroccan hotels by using a third-party travel company API.

I was responsible for the integration of this travel platform in a Shopify store and making it part of the Shopify store ecosystem.

Let’s get started.

Tech Stack:

• Vue JS for displaying the hotels’ deals, travel platform home page, and booking cancellation page
• Node JS (Express.js): REST API to handle communication between Vue JS app and the third-party booking API because doesn’t provide a public API key and if we use it directly in our vue js and anyone can get our booking platform API key and secret from the network tab.
• Shopify Admin APIs to generate checkout links, cancel and refund the orders.
• Shopify Webhooks to handle order confirmation and cancellation events.
• Google Autocomplete API to handle user’s hotels requested location.

User Flow:

When users visit the travel page (Shopify custom page template with vue JS app), they choose the location, check-in, and check-out date.

After that, they get a list of hotels (from the third party API) and they can choose which room they want to have. When they click on the “book this room” button, we generate our magic Shopify checkout link with the booking amount total.

When the user completes the Shopify native checkout process and made it the payment. We made our request to a third-party booking API and prebook this hotel room.

After the Shopify store team, capture the payment and we make it as paid. We made another request to the third-party booking API to confirm the booking of this hotel room.

Et voila, the user can book their hotels room without leaving the Shopify store and with the same experience as if they buy a product from a Shopify store.

Let’s talk about the challenges:

Why did I choose Vue JS rather than React JS?

I’m comfortable working with React JS because I built many projects (personal and clients) with React JS. but integrating React JS in a Shopify theme is very difficult and not easy to maintain (for a Shopify theme*).

After much researches about which framework to use. I found many Github repo and articles about vue js in a Shopify theme. I decided to make a test Shopify theme for the first project presentation with the client. It was much easier to integrate with a Shopify theme rather than React JS.

How do I generate the checkout link?

In Shopify API, you can generate checkout links by providing variant id and quantity. In this case, I have many different rooms in each hotel and I can’t set a product variant for each one because the price can change and it’s a crappy solution.

After many pieces of research, I found that I can make it dynamic by creating a product with one dollar as price and playing with quantity in the API. for example, the user book a room with 120 USD, I’ll make an API request to Shopify with 120 as quantity.

How to keep data in sync with the third-party booking platform?

Using Shopify webhooks with our API handler and our DB, we sync the data between our DB and the travel platform. When a user book a hotel room, we made a request to pre-book the room and save the response from the third-party API in our DB. same for another request like cancel, we update the status of the booking in the travel platform and our DB.

We create our DB to keep a local copy of booking data to display this data on thank you page and other custom pages.

Conclusion

This project was challenging for me but I love working on those types of projects. you'll need to use your problem-solving skill and experience with the platform to overcome these challenges.

Special Shoutout to Nouhaila (Project Manager), Abderhman (Designer), Othmane (Founder), and all the members of eProgram and the third party booking platform.

If you have any questions or comments, just let me know in the comments section or twitter

Originally posted at https://iliashaddad.com/blog/how-we-integrate-a-booking-platform-in-a-shopify-store-not-just-an-iframe/