Integration Guide

Simplicity is the ultimate sophistication

Step 1
Place our script on your page
Step 2
Drop in our checkout button
STEP 1: BOLT CHECKOUT WIDGET

For the fastest loading, this script should go in the <head> tag of every e-commerce page. Putting it on every page will provide the clearest picture of the transaction to Bolt's risk models. However, if you'd like to delay the loading of Bolt for performance reasons, you're welcome to include the script at any location on your page and it will initialize and start securing your page when it is loaded.

\n                              
                            
1<script
2  id="bolt-connect"
3  type="text/javascript"
4  src="https://sandbox.bolt.com/connect/js?
5  merchant_key=[INSERT MERCHANT KEY]">
6</script>
STEP 2: PLACE THE BOLT CHECKOUT BUTTON MARKUP
1<div class="bolt-checkout-button" />

You're welcome to place as many buttons as you'd like in a page. If you happen to place them into the page after the Bolt Connect script has already loaded, you can call BoltConnect.process() to trigger the script to render and activate the checkout buttons at any time.

In both inline and modal modes, Bolt Checkout can take parameters. These include, identifiers, cart contents, transaction amounts, etc.

The data could be JSON encoded and passed like this:

1BoltConnect.process({
2  id: "12345",
3  items: [
4    {
5      reference: 1,
6      image: "https://placeimg.com/30/30/animals/grayscale",
7      name: "Item1",
8      desc: "Item1 is everything you'd expect from something called Item1",
9      price: "$5"
10    },
11    {
12      reference: 2,
13      image: "https://placeimg.com/30/30/animals/grayscale",
14      name: "Item2",
15      desc: "Item2 makes Item1 obsolete",
16      price: "$5"
17    }
18  ],
19  tax: {
20    name: "Tax",
21    price: "$0.41"
22  },
23  shipping: {
24    name: "Shipping",
25    price: "$2.37"
26  }
27});

Bolt works in two ways, as a modal dialog over your page, or as an inline iframe embedded into your content. By default, Bolt checkout will run as a modal. If you desire inline mode for control over where Bolt Checkout loads, then embed the following markup in your page where you'd like Bolt Checkout to appear. The content will automatically resize the height of the container, but will keep the width set to it's bounding box.

Inline:

1<div id="bolt-checkout" />