Validate product pricing and inventory before completing purchases

Requirements

This approach has a few requirements that are worth getting created before starting:

• Foxy.io store

• Webflow site using the CMS to store your product information

• Github account

• Netlify account

Confirm Webflow Configuration

For the webhook to work, it needs to have access to some information within the products in the cart to match in the Webflow API. Specifically this requires a unique code attribute, and if you're checking inventory, a field in your product collection that stores the inventory.

It doesn't matter what field you use for the product code, as long as it's included in your product collection in the CMS and it's unique on the products. If you don't normally have a code or SKU for your products, you can simply use the item slug from the collection.

In your link or form, ensure you pass this code/sku value as the "code" attribute, as detailed here: Manage multiple products with Webflow CMS. 

Fork the repository on Github

Next, you need to fork the Netlify Functions repository into your Github account.

1. 1

   Log in to your Github account

2. 2

   Go to the Netlify Functions repository

3. 3

   At the top of the page click the "Fork" button to fork it into your account 

At this point, you'll have a copy of the Netlify Functions repository in your own Github account, which you can then deploy to Netlify.

Deploy to Netlify

1. 1

   Log in to your Netlify account

2. 2

   Within the "Sites" section, click the "New site from Git" button

3. 3

   On the next page, select "Github". You will be prompted to authorize access to your Github account. You can restrict permissions to just the forked Netlify Functions repository if you want for additional security.

4. 4

   Back on Netlify, select the forked "foxy-node-netlify-functions" repository

5. 5

   On the next step, click the "Show Advanced" button

6. 6

   Within the "Advanced build settings" section that appears, click the "New variable" button to add environment variables to your site for the following variables as needed:

   • Add a variable with a name of FOXY_WEBFLOW_TOKEN. Set the value as your Webflow API token, which you can see how to generate on the Webflow documentation here. This variable is required.

   • Add a variable with a name of FOXY_WEBFLOW_COLLECTION. Set the value as the Collection ID of the collection that contains your products in the Webflow CMS. You can get the value by going to the settings for your collection in the Webflow CMS. This variable is required, unless you are planning to pass the "collection_id" parameter with every add to cart on your site.
     

   • If the code field in your Webflow collection is not named "code", add a variable named FOXY_FIELD_CODE and set the value to the name of the collection field.

   • If the price field in your Webflow collection is not named "price", add a variable named FOXY_FIELD_PRICE and set the value to the name of the collection field.

   • If the inventory field in your Webflow collection is not named "inventory", add a variable named FOXY_FIELD_INVENTORY and set the value to the name of the collection field. Alternatively, if you don't want to check inventory levels prior to purchase, set the value of this variable to false instead.

   • There are two error messages that the webhook can return which you may want to customise. These are FOXY_ERROR_INSUFFICIENT_INVENTORY with a default message of Insufficient inventory for these items: and FOXY_ERROR_PRICE_MISMATCH for Prices do not match.. If you need to customise these error messages, create a variable for those names and set your custom error message as the value. Note a comma separated list of product codes is added after the insufficient inventory message.

7. 7

   Click the "Deploy site" button to initiate the deploy of the Netlify functions

Configure pre-payment webhook in Foxy

1. 1

   In your Netlify administration, load your site that was created for the Netlify functions and go to the "Functions" page in the main navigation

2. 2

   Select the "datastore-integration-webflow" function from the list

3. 3

   On the summary page for the function, copy the "Endpoint" URL

4. 4

   Log in to your Foxy administration, and head to the "payment" section

5. 5

   Check the checkbox for the option labelled "enable custom pre-payment hook"

6. 6

   In the "pre-payment hook url" text input, paste the URL you copied

7. 7

   Configure the "failure handling" option as desired - deciding whether a transaction should be allowed to proceed or not if the webhook endpoint fails for any reason.

8. 8

   Save changes to the payments page.

Test and monitor!

At this point, your new pre-payment webhook is live for your store. We would strongly recommend completing a transaction on your store to confirm that it is working as expected (you can always refund/void the transaction after as needed, or Create a Payment Set for testing transactions on an active store)‍.

If you experience any errors with the endpoint, you can review the logs for the function to debug what may be happening:

1. 1

   In the Netlify administration, go to the "Functions" section

2. 2

   Click the "datastore-integration-webflow" function

3. 3

   On the summary page will be an output of recent logging for the function.

Updating environment variables

If you ever have a need to add, update or remove environment variables for your Netlify functions, you can do that with these steps:

1. 1

   Save and deploy the new Netlify site, which will redirect you to the Netlify dashboard

2. 2

   Click on "Site Settings"

3. 3

   In the sidebar navigation, select "Build & Deploy", then "Environment"

4. 4

   You can then click the "Edit Variables" button to alter or add new variables.

5. 5

   Click the "Save" button to save your new variables

6. 6

   Go to the "Deploys" section of your Netlify site in the main navigation

7. 7

   On the right hand side of the deploys history table, click the "Trigger deploy" dropdown and then the "Deploy site" option. This will trigger a redeploy of the site to Netlify with the new environment variables you created above. A log will show for the deploy process, which will be completed when you see the entry for "Build script success"