Integrate WholeScripts in Wix with API, Using Velo

Who is our customer and what problem did they want to solve?

Our customer had a need to integrate Wix Stores with a 3rd Party API to allow them to place orders for supplement packs for their patients through the 3rd party when the patient placed an order through the Wix Store.

What solution did we provide?

To do this, we first had to work with the doctor to get the different supplements which comprised each "Med Pack" (represented in the Wix Store as a product), and then pull the information for all of the supplements from the 3rd party API and store all of these ingredients, their SKUs to be used with the 3rd party API, and also the product IDs to map them to the products in the Wix Store.

What were the next steps?

With all of this data stored, the next step was to store the API credentials in the Wix Secrets Manager.

The next step was to hook into the Wix Stores Events API using the onOrderPaid event. To do this, we created a file in the backend called 'events.js' and a function to hook into the event called `wixStores_onOrderPaid`. This function fires whenever an order enters 'paid' status in the Wix Store backend. When it fires, the code takes the order's line items and loops through them.

It then uses the wix-data package to query the Content Manager where we store the ingredients for the "Med Packs" and constructs an array of the ingredients, quantities, and their SKUs in the 3rd party system using the values from the content manager for each product in the order's line items. This array is then added to the rest of the order details needed such as the Shipping Address and Shipping Method and is sent to the 3rd party using their Order Submit endpoint using the wix-fetch package to make the API call.

Upon receiving a `200 OK` successful response from the 3rd party API, the order's Wix ID and the 3rd party order number assigned to it are inserted into another Wix Content Manager Database.

Check out the code we used below:

import wixData from "wix-data";

export async function updateProductIdsOfMedPacks() {
  const products = await wixData
    .query("Stores/Products")
    .limit(100)
    .find({ suppressAuth: true })
    .then((results) => results.items)
    .catch((err) => {
      console.log(err);
      return [];
    });

  products.forEach(async (product) => {
    const productName = product.name;
    const productId = product._id;

    const ingredients = await wixData
      .query("MedPacks")
      .eq("name", productName)
      .find({ suppressAuth: true })
      .then((results) => results.items)
      .catch((err) => err);
    if (ingredients.length > 0) {
      ingredients.forEach(async (ingredient) => {
        ingredient.productId = productId;
        const update = await wixData
          .update("MedPacks", ingredient, { suppressAuth: true })
          .then((updated) => updated)
          .catch((err) => err);
        if (update._id) {
          console.log(`${productName} ingredient updated`);
        }
      });
    }
  });
}

Have questions about how we can help with API? Contact us at 225-250-1888 or email robert@roberthebertmedia.com.

About our company RHM specializes in helping businesses of all sizes and across all industries achieve their digital and web marketing needs. Whether it's designing a new website, building an app, performing custom development, or running Google Ads, our goal is to showcase how you are the best at what you do and help people connect with you. Contact us at 225-250-1888 to get started!