Integrate Square's API for Wix Forms, using Velo

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

Our client wanted seamless integration between their Liability Waiver Wix form and their on-premise Square POS system.

Before our client contacted RHM, the process for their customers was to fill out the Liability Waiver on their website prior to arriving at the business. Upon arrival, the desk clerk would then have to manually enter the data from the Liability Waiver form into their Square POS system.

With a quick look into Square's API, we determined that we would be able to automate this process to allow a more seamless workflow.

This would create a better and more efficient experience for both their customers and employees.

What solution did we provide?

We met with our client and had them generate an Access Token for the Square API, which we stored in the Wix Secrets Manager.

After this, we set to work on the page the form was on. Using the Wix Form `onFormSubmitted` method, we were able to gather the data the customers submitted and then pass it to a `createSquareCustomer` function we created in our 'backend/square.jsw' file, .jsw being the file extension Wix uses to allow backend code to be called from the frontend.

This function takes the data about the customer that is passed in and calls Square's Create Customer API using the `fetch` function of the Wix-fetch module.

With this code in place, the customer now has seamless integration between their Liability Waiver form and their Square POS system, saving their desk clerks quite a bit of time through automation as well as preserving data integrity by preventing errors that happen with manual entry of data.

Here's the code we used below:

import { createSquareCustomer } from "backend/square";

import wixLocation from "wix-location";

$w.onReady(function () {
  $w("#multiStepForm1").onWixFormSubmitted(({ fields }) => {
    const customer = {
      address: {},
    };
    console.log(fields);
    fields.forEach((field) => {
      console.log(field);
      switch (field.fieldName) {
        case "Guardian First Name":
          customer.given_name = field.fieldValue;
          break;
        case "Last Name":
          customer.family_name = field.fieldValue;
          break;
        case "Guardian Email":
          customer.email_address = field.fieldValue;
          break;
        case "Guardian Phone":
          customer.phone_number = field.fieldValue;
          break;
        case "House Number & Street":
          customer.address.address_line_1 = field.fieldValue;
          break;
        case "City":
          customer.address.locality = field.fieldValue;
          break;
        case "State":
          customer.address.administrative_district_level_1 = field.fieldValue;
          break;
        case "Zip":
          customer.address.postal_code = field.fieldValue;
          break;
        case "Child/Children's Full Names (":
          customer.note = field.fieldValue;
          break;
      }
    });

    console.log(customer);

    createSquareCustomer(customer);

    setTimeout(() => {
      wixLocation.to(wixLocation.url);
    }, 3000);
  });
});

Have any Wix questions? Contact us at 225-250-1888!

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!