Individual Card Ordering Intro

The InstantCard ICO is currently in BETA.
Please Contact Us with any suggestions or bugs!

The InstantCard ICO lets you easily integrate card ordering into your own website. The system allows you to choose whether individuals pay for cards themselves at checkout, or if the cost should be deducted from your organization’s InstantCard account. Cards are sent to any address entered within the US.

This allows you to do several things without needing any knowledge of coding:
• Easily distribute membership cards
• Keep visitors on your website even when ordering badges
• Have remote contractors order badges to their own addresses
• Create a revenue stream from cards on your website
• Appear as the distributor of a given ID/badge

The InstantCard ICO system was developed using the InstantCard API.  For developers who wish to create their own apps, please refer to the API documentation for more info. Additionally, you may contact us requesting the JavaScript libraries used in the ICO to tweak for your own applications.

Base Code

To use the the ICO, you must place the following elements in the page where you would like the order form to appear:

Base Script

Copy to Clipboard

This calls the JavaScript library required to run the ICO. By default, the library is set up to run off of InstantCard’s servers. If you wish to host the JS (and CSS) locally, you may do so. This requires a minor change to the primary JS file.

For site performance, it is recommended that you place the script only in the footer of pages where it is used. Sometimes, however, certain conflicts require it to be placed in the HEAD section.

IMPORTANT: This script uses JQuery, which must be loaded on your site to use the ICO.

Wrapping Element (DIV)

Copy to Clipboard

Place this exactly where you would like the order form to appear in the page. This is where the order form will be generated, regardless of the placement of the other elements. Note, you may use any id for this DIV, but you must make sure that the “my_div” parameter (in the code which follows) corresponds to the name. This is to avoid any potential naming conflict, and is only recommended if you already have an HTML element with the same id.

Initialization Script

Copy to Clipboard

This is the script which hold’s your organization’s info, as well as optional parameters which allow you to change some functionality and styling. Above you see only the required parameters to initialize the ICO. To see optional parameters, go to the PARAMETERS section of this page.

Parameters

Required Parameters

Parameter Type Example Description
api_token string “bEAboVX3osqsiwPsqTdo
hsacydcdzd1DTEtMjxBLK
0jQHtmDWFs92Bze6AA+
+BdbCvc=”
This is a public API token associated with a specific user for your organization. This is required to use the ICO. By default, users do not have a public token assigned. Please CONTACT US to have one generated for a user.
card_template_id integer 18949 This is the ID for the card template you wish to be used for the ICO. If you do not know the unique number for the card template, you may contact us.
organization_id integer 20004593 This is the ID for your organization. If you do not know the unique number for your organization, you may contact us.
my_div string “ICO” This is the id used for the wrapping element in which the ICO will be generated on the page.

Optional Parameters

Parameter Type Default Description
color string “grey” This is the primary color used for fonts, buttons, etc, unless overridden by your site’s CSS.
accent_color string “#07d” This is the highlight color, used for things such as breadcrumbs, and the waiting spinner.
font_family string “helvetica” This is the font family used for the ICO, unless overridden by your site’s CSS.
pay_on_checkout boolean true true
The individual ordering pays for the card(s) at checkout using a valid credit card.

false
The cost of the card(s) is deducted from your organization’s account balance. When using this, you are advised to make the page private/password protected, so as to avoid undue charges.

staging boolean false true
The ICO runs in a staging environment, and no cards will be ordered. Attention: to use this you must make sure your organization and card template(s) have been migrated to staging in the InstantCard system.
While in staging, if “pay_on_checkout : true”, you may use the following credit card details to test the system:
CC:  4242 4242 4242 4242  | EXP: [any future date] | CVC: 424

false
The ICO runs off of the live system. any orders put through will be printed.

change_quantity boolean true true
The user may order as many cards as they wish, up to an optionally defined maximum. Note: optional “maximum” parameter hasn’t been implemented yet.

false
The user may only order one card at a time. This helps prevent multiple charges when “pay_on_checkout : false”

per_card_cost boolean true

DEPRECATED see “price”

true- The ICO fetches the price to ship a card and displays the per-card-cost below the breadcrumbs.

false- The per-card-cost is not displayed. Only the final total will be displayed at checkout.

int_ship boolean false true
All countries are available for shipping, extra postage is applied to all orders outside of US and Canada. Initial price is listed “$xx.xx + postage” when “if per_card_cost:true”.

false
Shipping only available to US and Canada. Price listed includes postage when “if per_card_cost:true”.

price integer [] Card price in cents.
If “int_ship=false”, enter price with postage. If  “int_ship=true”, enter price without postage. Leave blank to not display price until payment (for “pay_on_checkout=true”).

Example code with all parameters

Copy to Clipboard

Note: It does not matter in what order the parameters are listed.

Customization

Styling

Limited styling options may be found in the OPTIONAL PARAMETERS. For all other styling, you must request a copy of the ICO CSS file, edit it, and host it locally. Alternatively, you may override certain CSS classes on your site using the “important!” tag, but this is only recommended if only a few, minor changes are required.

Text Strings

If you wish to change the text used in the ICO (say, for example, you wish to translate everything to another language), you must first request the source files to host locally. Then, most text strings may be changed within the ICO_variables.js file.

Working Example

This is a working example, which uses the InstantCard ICO. The following code generates the form below. Since it is in staging, you may try it yourself with the following credit card information:

CC: 4242424242424242  |  EXP: [any future date]  |  CVC: 424

Copy to Clipboard

Troubleshooting

The ICO was developed to run on any site running JQuery. There are, however, from time-to-time conflicts due to some sites’ legacy plugins, older versions of JQuery, etc. In these cases, there are several workarounds to ensure you can use the card ordering ICO on any website.

by iframe

Option 1: InstantCard-hosted iframe

In case you are unable to run the ICO JavaScript on your site you may request the InstantCard team sets up an iframe for your given template. This is not created automatically.

Contact us if you feel you need this option →

Once set up, you will receive a small snippet of code that looks like the following:

Copy to Clipboard

which generates the following:

NOTE: The side scroll bar comes from the height chosen in the iframe parameters. To avoid this, replace the height (in this case, “500px”) with a height that accommodates the form for your given template. Some trial and error may be required to achieve a good height.

Option 2: self-hosted iframe

If you are aware of conflicts within your CMS, but also know to create basic HTML pages under your domain, you may host your own iframe. To do this, create a basic HTML document, placing your ICO code where the following example has “→ put your ICO code here ←”

Copy to Clipboard

Name your HTML document something appropriate (for example, “example.html”) and upload it to the public_html folder for your website.
(note: if you don’t know how to do this, please see iframe option 1)

Then, use the following code anywhere within your CMS:

Copy to Clipboard

NOTE: A side scroll bar may be generated by height chosen in the iframe parameters. To avoid this, replace the height (in this case, “500px”) with a height that accommodates the form for your given template. Some trial and error may be required to achieve a good height.

“window.onload” Not Triggering

In some cases, especially with certain conflicts within a CMS, the “window.onload” command won’t trigger in that case replace the following code

Copy to Clipboard

with

Copy to Clipboard