Technical Documentation
      Back to home
      1. Knowledge Base
      2. Webhooks & APIs
      3. Technical Documentation

      Implement Booxi With Your eCommerce Shopping Cart

      Learn how to implement Book Now with your eCommerce solution to capture payment.

      You can now capture online payment for appointment booking using your eCommerce site. The advantage is that you can use the payment methods your eCommerce solution already supports, such as payment processors, loyalty points, gift cards, promotions, etc, without a lengthy implementation process.

      This article lists what you can do, explains how to configure Booxi for the implementation, and which API to use to complete the implementation.

      What you can do

      • Offer services that have matching eCommerce products or items, and allow customers to book those services. They can then pay using your eCommerce shopping cart. Once paid, you can adjust the booking status to paid, or cancel it if the cart is abandoned.
      • Use your eCommerce site to list your products or items and add them in a shopping cart at the same time as you add the service. Customers can then book an appointment and pay for the products and service in advance using your shopping cart.

      How to Implement it

      1. Log in to your Booxi account and go to the "My Business" tab > Booking Rules.
      2. Enable Online Payment via Shopping Cart; this will allow you to set a product ID for each service set to be paid online using your shopping cart.
        1. You must provide a callback URL which will be called with the booking data (containing the product ID) to allow you to add a line to your shopping cart.
        2. Save.
          image4
      3. Go to the "Services" tab, select a service and click on Service Details. Under "Online payment", select "Shopping Cart" and set a fixed amount to be paid. 
        1. Provide a product ID that will be used to add the associated product to your shopping cart.
        2. Remember to click on Save.
          image2
      4. You can customize your Cancellation Policy Text to inform the user that a payment is required and that payment will have to be completed in the shopping cart. If not, Booxi will provide a similar text by default.
      5. It is recommended to set your Approval Mode to delay the confirmation message once the payment is completed. If not, your customer may receive a confirmation followed by a cancellation message if the booking is not completed in time.
        1. Go to the "My Business" tab > Booking Rules > Appointment (and/or Reservation) Approval Modes. Set it to "Automatic (after online payment completed)".
          image3
        2. In the event that the shopping cart payment was never completed, you can: a) ensure your eCom cancels the booking or b) set Booxi to auto-cancel the booking within 15 minutes.
          image5
      6. Make sure the callback URL you provided can retrieve the booking_data parameter (a base64 encoded JSON object), decode it and retrieve the information you need (the booking ID, payment ID and the product ID) to add that booking as a product in your shopping cart. 
      7. Once checkout is complete and paid, make sure to call the Booxi API with the booking ID and payment ID to mark the booking as paid (Collected). This  will automatically approve the booking and send the customer’s confirmation.
      8. If the item is removed from the cart or the cart is abandoned, you should call the Booxi API with the booking ID to cancel that booking.

      API to Use

      The eCOM page that adds the booking to your shopping cart must be developed by you and also using your eCommerce’s API. However, in order to mark a booking as paid and track payments in Booxi, or to cancel a booking that was not paid, you must use Booxi’s API.

      • You will need to decode the booking data (base64 encoded JSON object - see booking data below)
          • Use apiBookingId, productId, and paymentId
      • You will need to use your Booxi Partner API key to use this API.
          • To obtain this key, contact your Account Manager.
      • You will need to use this API at the server level.
      • Use PUT /booking/{bookingId}/payment/{paymentId}, providing status=Collected, and optionally the amount paid and a reference number (to consolidate with your eCommerce transaction).
        {
          "status": "Collected",
          "amount": "10.00",
          "referenceNumber": "YOUR_REFERENCE_NUMBER"
        }
      • Use PUT /booking/{bookingId}, providing status=Cancelled to cancel the booking if it was not paid.
        {
          "status": "Cancelled",
        }

      API Documentation

      booking_data

      If you're using Booking Widget v2 : 

      If you're using Booking Widget v3 : 

      Where can API keys be found:

      • Your Merchant API key can be found in the back office, section My Business > Business Details.
      • Your Partner API key must be requested to your Booxi Account Manager. The Partner API key must only be used in server side (backend) code to keep it a secret.