Helium Documentation

Getting Started

Helium allows you collect payments on your website without having to write any server-side code to process credit cards. Turn any website into a store by embedding a few code snippets. Whether you want to sell a simple e-book or already have an online store and like to offload managing your own checkout system, Helium can help.

Not only is Helium quick to set up and integrate, it is also flexible and customizable. In addition to the drop-in shopping cart and checkout components, Helium can handle post-order actions, such as emailing receipts and sending callbacks to your server.

After signing up for Helium, you will be required to connect your Stripe account. Your Stripe account is where payments from customers will be deposited and where you can transfer money to a bank account. If you don’t already have an account, you can sign up for one at Stripe.com.

Setup Tutorial

This tutorial will walk through integrating Helium with your website and setting up your store:

Step 1: Install the Helium-Powered Shopping Cart on Your Website

Once you have created a Helium account, you will need to copy and paste a line of JavaScript code to the source code of every page of your website immediately before the closing </head> tag (as the last javascript file included on the page -- more on this here).

Example: Paste this line of code immediately before the closing </head> tag on every page

<script src="https://s3.amazonaws.com/he3/helium.js" id="Helium"
data-key="YOUR PUBLIC KEY"></script>

Step 2: Register Products to Sell

Before you can start accepting payments, you must enter basic information about the product(s) you’ll offer, such as product name, price, and SKU. The SKU is a unique code to identify each product you’ll sell.

Example: Adding a new product in Products

Note: if you are selling a digital item, such as an e-book, you can upload the file so that it’s delivered to the customer via email upon order completion. If the item is a subscription, you can define the frequency of when customers are billed.

Step 3: Create a Buy Now Button for Customers

Once you have registered the products you intend to sell, paste the HTML button element generated in Products to the page on your website where you want the button to appear. The HTML element is customizable, but should always have a class of helium-buy-now and the data-sku attribute set to the product’s SKU.

The button looks like this:

Example: Buy Now HTML button element for the product with SKU of “donut”

<a href="http://he2.co/ST7M7G8Y8Q8" target="_blank" class="helium-buy-now" data-sku="donut">Buy Now</a>

You can also turn any HTML element into a buy button on your website by simply adding an attribute to it. There are a few different attributes to choose from:

data-cart-add
Add an item to the cart. Clicking this button more than one time will add the item to a customer’s shopping cart more than once.

Example: Add the item with SKU of “donut” to the cart

<a data-cart-add="donut">Add to Cart</a>
data-cart-add-once
Add an item to the user’s shopping cart once, at most.

Example: Add item with SKU of “donut” to the cart

<a data-cart-add-once="donut">Add to Cart</a>
data-cart-show
Show the shopping cart/checkout form. You can combine this attribute with another attribute to both add an item to the cart and show the checkout form all with one click.

Example: Two examples of checkout buttons

<a data-cart-show="1">Checkout Now</a>
<a data-cart-add="donut" data-cart-show="1">Buy a Donut Now</a>

Step 4: Pre-populate Form Values (optional)

You can pre-populate form values for your customers by defining additional attributes in the script tag that you include on a page (see Step 1). For any form field, simply define the attribute data-[field name]. The list of possible field names are below.

Example: The customer’s email address will be pre-populated in the checkout form

<script src="https://s3.amazonaws.com/he3/helium.js" id="Helium"
  data-key="YOUR PUBLIC KEY"
  data-email="customer-email@gmail.com"></script>

You can also set these form values to be disabled (uneditable) by setting the attribute data-[field name]-disabled="yes".

Example: The customer’s email address will be pre-populated in the checkout form and will not be editable

<script src="https://s3.amazonaws.com/he3/helium.js" id="Helium"
  data-key="YOUR PUBLIC KEY"
  data-email="customer-email@gmail.com"
  data-email-disabled="yes" ></script>

List of possible attribute names to pre-populate form fields:

data-email
The customer's email address
data-billing-zipcode
The zip code of the customer’s address
data-street
The street address of the customer (assuming you require this information)
data-city
The city of the customer’s address
data-state
The state of the customer’s address, as a 2 letter abbreviation

Test Mode

When first getting Helium setup, you may want to test things without actually charging a credit card. To do this, turn on "test mode" simply by adding the extra attribute data-test=1 to the script tag. When operating in test mode, everything will work the same as usual, except that the credit card will not actually be charged (which includes email receipts and webhooks being sent).

Example: Paste this line of code immediately before the closing </head> tag to turn on test mode

<script src="https://s3.amazonaws.com/he3/helium.js" id="Helium"
data-key="YOUR PUBLIC KEY"
data-test="1"></script>

When operating in test mode, you can use real credit card numbers (even though they won't be charged) or you can use one of the test card numbers below, which will process as if they are valid card numbers only in test mode.

Visa
4242424242424242
4012888888881881
MasterCard
5555555555554444
5105105105105100
American Express
378282246310005
371449635398431
Discover
6011111111111117
6011000990139424

Next Steps

After integrating Helium with your website, you can further customize the shopping cart and checkout experience:

Use of this site and associated services acknowledges your acceptance of the Terms of Service.
The most recent change was September 17, 2014 to reflect a change of site ownership.