Nuxt Ecommerce (Snipcart/Stripe)

Home » Nuxt Ecommerce (Snipcart/Stripe)

More adventures in Nuxt this week, and this time we are integrating Snipcart into Nuxt to run our store through our snazzy new Nuxt website.

Step 1: Get a Snipcart and a Stripe account

Snipcart, in case you weren’t aware, is an ecommerce third-party service that basically allows you to sell products through a HTML button. Using data attributes, each button holds info related to price, description, URL, id and so on. You don’t really set your products up in the backend like you would in a lot of systems – here, you set up the button and that talks to the Snipcart backend.

It might not be a great solution for a store of 10,000 products, but then again. it might be fine as well? If the product was simple enough it’s a great solution, and often that is the scenario right? “I’ve got 5 products, I don’t need anything massive”. It’s definitely worth exploring for an hour or two before you go off using Shopify or something (actually so is Ecwid but ‘ll come back to that another time….check it out though!)

Anyway, set up a Snipcart account and pay attention to the Domains area, you will need to make sure that the localhost, and/or testing URL, and final URL are all present in this area and saved or you will just get errors when trying to process payments.

Step 2: Add Snipcart to Nuxt

So firstly, add snipcart to your packages:

yarn add @nuxtjs/snipcart

//or

npm install @nuxtjs/snipcart

Next, add the module to your nuxt.config.js file. Here I’ve also got Google Fonts and Fontawesome on the go….

Once you’ve added the build module, add the options in there below it. So you’ll see my modules and options here, with Snipcart options at the bottom

  buildModules: [
  '@nuxtjs/google-fonts',
  '@nuxtjs/fontawesome',
  '@nuxtjs/snipcart',
  ],

fontawesome:{
  icons:{
    solid: true,
    brands: true,
  }
},


googleFonts: {
  families: {
    Poppins: {
      wght: [100,200,300,400,600,700],
    },
  }
},

snipcart: {
    key: 'ADD YOUR SNIPCART KEY IN HERE',
},

Step 3: Set up your Buttons

Okay what I was really looking for here, was options and fields that don’t really come ready-to-go with Stripe. Snipcart makes this all work okay, plus it has a nice checkout UI, and options for taxation etc, so it felt like a good option for my needs. Here, we are going to add a button which binds some user input fields:

<button class="snipcart-add-item button is-contrast"
data-item-id="the-name-of-the-product"
data-item-price="999"
data-item-url="https://thisistheurl.com/"
data-item-description="Some amazing description"
data-item-image="/assets/images/product.jpg"
data-item-name="The PRoduct Name"
v-bind="$snipcart.customfields(product.customFields)"
>

After this, we just add the data to the script at the end and we will bind the user fields to the button. Like this:

<script>

export default {
	data() {
		return {
		product: {
		customFields: [
			// readonly
			{
				name: 'Please note:',
				type: 'readonly',
				value: 'VAT for Irish purchases @23% is applied'
			},
			{
				name: 'Business Name',
				type: 'textarea',
				required: 'true'
			},
			// required
			{
				name: 'Description of project/product',
				type: 'textarea'
			},
			// placeholder
			{
				name: 'phone',
				placeholder: 'ex: 00353 21 1234567',
				required: 'true'
			}
		]
		}
	}
},
asyncData(context) {
	console.log(context.app.$snipcart)
}
}
</script>

That should be all you need to set up a product with custom fields with Snipcart and Nuxt! It works great IMO.

Remember, if you are having issues processing due to the domain, go to Snipcart and make sure your Domains hold the correct url. Then check the product, and check your config file in Nuxt to make sure you are not running the site on some other path or something.

Okay that’s it – Hope this helps someone!