Stitch Express on Webflow

Webflow is a platform that lets you build powerful websites without any code. Yet the full power of Webflow's platform has not been realised in South Africa, as Webflow does not cater for payments locally.

Stitch has partnered with Foxy.io, a cart plugin, so you can realise the full potential of Webflow as an e-commerce tool.

All you need is to add the Foxy plugin to your Webflow site and activate Stitch Express on Foxy. Follow the easy steps below to see how.

Before you get started:

• Make sure you have an activated Stitch Express account. Sign up here if you haven't already. Check out What documents do I need to get started? to see what you'll need to get verified.
• Create a free Foxy account here. You can fully test and use the Foxy plugin for free, but you'll need to activate a paid Foxy plan before you can take live payments. See Foxy's pricing plans.

By default, Foxy has all currencies configured to USD. To change to ZAR:

• On your Foxy Admin Page, go to Templates > Template Sets
• In Locale, select the English locale for South Africa (Currency: ZAR: R)
• Save the settings by clicking Update Template Set

Step 1: Add Foxy to Webflow

Foxy works by connecting your Webflow site to their checkout cart, passing the content and information about the items you're selling so your customer can pay for them, in what Foxy calls Foxy Products.

Foxy offers a few ways to integrate with Webflow depending on your use case. For example, a simple purchase button if you're selling a single product, or Webflow's CMS if you're selling many.

We recommend Foxy's approach for managing many products with Webflow's CMS. See Foxy's full tutorial, which includes a demo site and a clonable project.

Before getting started, make sure your products are loaded as a CMS Collection on your Webflow site. Once that's set up:

• On your Webflow site, open Site Settings
• Input the Sample Code from your Foxy Admin Page into the Footer Code section and click Save
• Set up a simple form to act as your "Add to Cart" page, with a Submit button as the key element
• In the Form Settings, set the Action URL to https://[YourFoxyStoreSubdomain].foxycart.com/cart. You can find your subdomain on your Foxy Admin Page
• Set the Method to POST
• From the Webflow Elements section, add an HTML Embed Element to the form with the code from Foxy's CMS tutorial, replacing the placeholder fields with the names of your own CMS fields
• Open the Product Template Settings and add the additional code from the same tutorial to the Body section

You're almost set!

Step 2: Activate Stitch Express on Foxy

Once Foxy is set up on your site, activate Stitch Express as your payment method on the Foxy Admin Page.

• Log in to your Foxy Admin Page
• Select the Payments tab under the Store heading
• In the Payment tab, deselect "Let customers pay with a Credit or Debit Card" and select Live Servers
• Scroll down to the Stitch Express option and check the box
• Input your Stitch Express API key and secret. You can retrieve these from your Stitch Express Account page on your dashboard

You now have payments live on your Webflow store. Get selling!