Integrate with Snipcart

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 to use Snipcart. It's one of the best eCommerce solutions out there, and by far the most flexible.

Integration with ConvertCalculator is fairly straight-forward. 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.

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

Head over to the calculator editor Go to the settings pane and make sure the switch "Use JS API" is on. Go to the CTA (Call-to-Action) pane and make sure the switch "Add form submissions" is on. Now go to your Snipcart dashboard. If you don't have any, you can sign up for free:

Copy the API key on this page and save it somewhere. If you want to simply test the integration, make sure the button switch in the top center is set to "Test". If you want to use it in production make sure it's set to "Live. Go to the Domains settings page and whitelist . First make sure your "Default Website Domain" is set to your website and add as "Other Domains & Subdomains". Use the "HTTPS" protocol. Now go to your website builder or CMS and make sure you add these scripts to the head of your website:

<script src=""></script>

<script src="" data-api-key={API_KEY} id="snipcart"></script>
<link href="" rel="stylesheet" type="text/css" />

Replace {API_KEY} with your actual API key you copied and saved earlier.

Now go to the page on your website where you have placed your calculator embed code. Not sure how to embed your calculator? Check on of these articles.

Paste the following code directly after your embed code:

<script type="text/javascript">
  document.addEventListener('snipcart.ready', () => {
    window.addEventListener('ccloaded', () => {
      const calculatorId = '{CALCULATOR_ID}';
      const convertcalculator = cc.getInstance(calculatorId);

      convertcalculator.calculator.on('submit', (formData) => {
        const formula = convertcalculator.formulas.formulas[{FORMULA_INDEX}];
        const result = formula.getResult();
        const price = result.result;

            id: calculatorId,
            name: '{PRODUCT_NAME}',
            description: '{PRODUCT_DESCRIPTION}',
            url: `${calculatorId}&price=${price}`,
            quantity: 1,
            stackable: true,
            metadata: formData,
          .then(() => {

Replace the following sample values with your actual values:

  • {CALCULATOR_ID} -> Find this in the calculator editor when visiting the embed pane
  • {FORMULA_INDEX} -> Fill in the index of the formula you want to use. The first formula (from the top) is 0 , the second is 1 , the third is 2 etc. Make sure this is a number, so it doesn't contain quotes.
  • {PRODUCT_NAME} -> Give the product any name you want
  • {PRODUCT_DESCRIPTION} -> Give the product any description you want

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