Integrate with Snipcart

Note: the info in this doc is outdated. We have created a native Snipcart integration that you can add by adding an action flow to your button. You do not need the custom JS implementation that is described below.

If you use ConvertCalculator as a product configurator or any other type of tool to sell stuff to your customers, you can use the Checkout feature to let your customers pay directly from a calculator by credit card.

In some cases, this is not enough. Maybe you need to offer other payment methods, need to sell other products, or want a richer buying experience. If this is the case, we recommend using Snipcart. It's one of the best eCommerce solutions out there and by far the most flexible.

Integration with ConvertCalculator is fairly straightforward. Don't be intimidated by the fact that you need to copy-paste and alter some code. You will get there! If not, contact us in the chat, and we will help you get it up and running.

Installation

First, you need to make sure you have set the right settings in ConvertCalculator:

  1. Head over to the calculator editor
  2. Go to the CTA (Call-to-Action) pane and make sure the switch "Add form submissions" is on.
  3. Switch off all emails (you want to use Snipcart for email handling)
  4. Now go to your Snipcart dashboard. If you don't have any, you can sign up for free.

Now you can Setup Snipcart:

  1. Follow the instructions for setting up Snipcart on your page.
  2. Go to the Domains Settings page and whitelist www.convertcalculator.com (choose HTTPS). First, make sure your "Default Website Domain" is set to your website and add https://www.convertcalculator.com/app/ as "Other Domains & Subdomains". Use the "HTTPS" protocol.

If you've followed the steps, you're probably added the following lines to the head of your page:

JS
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.17/default/snipcart.css" />
<div id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY" hidden></div>
<script src="https://cdn.snipcart.com/themes/v3.0.17/default/snipcart.js"></script>

NB. YOUR_PUBLIC_API_KEY if the API key you copy/pasted from Snipcart's dashboard.

Configuration

The easiest way of setting up the integration is by adding custom JS code via ConvertCalculator's editor. It's also possible to write custom code and add it directly to your website. To use that, follow the instructions on our JS API docs.

  1. In ConvertCalculator's Editor, click on settings and navigate to the custom code tab.
  2. Switch on "Use JS API"
  3. Paste the following code in the "Custom JS Code" editor:
JS
const calculatorId = 'YOUR_CALCULATOR_ID';

ccInstance.calculator.on('submit', ({ formData }) => {
  const formula = ccInstance.formulas.getByReference('YOUR_FORMULA_REFERENCE');
  const price = formula.getResult();

  Snipcart.api.cart.items.add({
    id: calculatorId,
    name: 'YOUR_PRODUCT_NAME',
    description: 'YOUR_PRODUCT_DESCRIPTION',
    url: `https://app.convertcalculator.co/api/snipcart?id=${calculatorId}&price=${price}`,
    price,
    quantity: 1,
    stackable: true,
    metadata: formData.fields.reduce((acc, field) => {
      return { ...acc, [field.name]: field.label };
    }, {}),
  });
});

Before you check if the configuration works, make sure you swap the following variables with your own code:

  • YOUR_CALCULATOR_ID
    • Can be found via the install tab (disk icon in top right) and clicking on "Show Calculator ID"
  • YOUR_FORMULA_REFERENCE
    • This is the reference to the formula that calculates the total price (e.g., FA)
  • YOUR_PRODUCT_NAME
    • Give the product any name you want
  • YOUR_PRODUCT_DESCRIPTION
    • Give the product any description you want

Note that the metadata property in the Snipcart.api.cart.items.add method call adds all data associated with the calculator / configuration.

That's it! With these simple steps, you've created a very powerful product configurator eCommerce solution.

Related articles

Learn more about snipcart in one of the following articles