Individual Card Ordering by InstantCard
Individual Card Ordering Intro
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
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)
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
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: 424false 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”). |
|
no_back
|
boolean | false | true Card preview will not include the back of card. To be used when the back of card is blank. false |
| redirect | string | URL for redirect after a successful card order (e.g. “https://instantcard.com/thank-you/”). When left blank, the ICO will simply display a success message. | |
| fixed_address | object |
When used, all cards will be sent to a single address. Each parameter is a string.
example: fixed_address: { name: ‘George Williams’,
address1: ‘418 Highland Ave.’,
address2: ”,
city: ‘Downingtown’,
state: ‘PA’,
zip: ‘19054’,
country: ‘US’,
}
|
|
| holding | boolean | false | ‘true’ when holding bank is activated in the backend |
| uppercase | object | enabled: false | Allows you to force chosen text fields to be uppercase. Note: in the ‘ids’ array, you must use the id(s) of the input element(s) whose value(s) you would like to be submitted as uppercase. The ids should be entered as strings. Example: uppercase: { enabled: true, ids: [ ‘FirstName’, ‘Position’, ], } |
| photo_mag | float | 1.7 | defines the size of photo elements for the cropping tool relative to the size on the template |
|
qrcard
|
object | enabled: false |
IMPORTANT: to use QR code functionality, card template MUST have a variable image named “qr-gen“. The QR code will use that image field.
if vcard:false then there is an editable text box which will generate the QR code. if vcard:true, fields will display that will generate a vcard QR code. The colors change the QR code colors. Alpha transparency is accepted (e.g. rgba(255, 99, 71, 0.4)). Example: qrcard: {
enabled: true,
vcard: true,
dark_color: ‘#123456’,
light_color: ‘#ffffff’,
}
|
|
ship_id
|
integer | 1 | Specify A new default shipping provider using the ID. Note: When used with int_ship, all international orders will still use the default international shipping provider. |
Example code with optional parameters
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
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:
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 ←”
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:
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
with