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.
This tutorial will walk through integrating Helium with your website and setting up your store:
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>
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.
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:
Example: Add the item with SKU of “donut” to the cart
<a data-cart-add="donut">Add to Cart</a>
Example: Add item with SKU of “donut” to the cart
<a data-cart-add-once="donut">Add to Cart</a>
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>
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:
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.
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 GDPR / Terms of Service