6 min read • Updated a month ago
Validate product pricing and inventory before completing purchases
While Foxy has a feature to add signatures to links and forms to prevent any potential modifications, unfortunately due to the limitations in Webflow it's not possible to utilise those for dynamic data from the Webflow CMS.
For Webflow users, there is a helper library that can be used with Netlify to perform a validation of the customers cart prior to the transaction being sent to the payment gateway. It utilises the pre-payment webhook, and can be used to check whether the products price is correct and/or there is sufficient inventory remaining.
This approach can be paired with our native Webflow integration for updating Webflow inventory levels too as detailed here: Manage product inventory with Webflow's CMS
You can follow these steps for configuring this for your Foxy store.
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
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.
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
Log in to your Netlify account
Within the "Sites" section, click the "New site from Git" button
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.
Back on Netlify, select the forked "foxy-node-netlify-functions" repository
On the next step, click the "Show Advanced" button
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_CODEand 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_PRICEand 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_INVENTORYand 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 tofalseinstead.There are two error messages that the webhook can return which you may want to customise. These are
FOXY_ERROR_INSUFFICIENT_INVENTORYwith a default message ofInsufficient inventory for these items:andFOXY_ERROR_PRICE_MISMATCHforPrices 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.
Click the "Deploy site" button to initiate the deploy of the Netlify functions
Note on Field Name Conversion
The field name that you see in the CMS Editor (in the designer) might not be the actual name of the field.
When fields are defined in the CMS, their names are automatically normalized in the API. For example, a field named Product Code in the CMS is converted to product-code in the API response.
Important: Once a field name is set and used in the API, it remains fixed—even if the label in the CMS is later changed.
To ensure proper functionality, configure your environment variables (such as FOXY_FIELD_CODE) with the converted field name used first (e.g., product-code) rather than the original display name.
Configure pre-payment webhook in Foxy
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:
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: