6 min read • Updated 7 days 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
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: