iFrame SDK & Tokenization

There are 2 ways to implement ShieldConex: API Only or iFrame + API. The difference is solely in how tokenization is performed.

If you're looking for the ShieldConex API Reference Documents, just click here.

To view and download the SDK, click here.

Certification and Production Environments

There are two ShieldConex environments each with their own URL.

The certification test environment:

https://secure-cert.shieldconex.com

The production environment:

https://secure.shieldconex.com

All preliminary development must be conducted and tested within the certification environment.

iFrame Tokenization

The iFrame implementation requires use of the API to detokenize data, but uses an iFrame to handle common data entry and initial tokenization. After tokenization, the API and iFrame workflows are the same. When using the iframe the tokenize step is broken into 2 parts so that it's never sent to a client browser.

The easiest way to get started with the iFrame is to open the management portal, create a template and click the "Sample" button. This will give you code to copy and paste that works. If you're looking for more detail about creating an iFrame and getting the HTML element, visit our User Guide

The following steps are required to integrate the iFrame into your existing website:

1. Include the ShieldConex client library

<script src="https://secure-cert.shieldconex.com/js/iframe.api.v1.js"></script>

2. Create an element to contain the iframe and give it an id.

<div id="frame1"></div>

3. Configure the client library in a script tag at the end of your document.

<script type="text/javascript">
 // get template from uri string
 var url = new URL('https://secure-cert.shieldconex.com/iframe/');
 // configure shieldconex iframe
 var config = {
     baseUrl: 'https://secure-cert.shieldconex.com',
     templateId:'your template name',
     parent: 'frame1', //this must match the containing element
     attributes: {
         width: "600px",
         height: "270px",
         frameborder: 0
     }
 };
 var scfr = new ShieldconexIFrame(config);
 scfr.onRendered = onShieldconexRendered; /* a function you define */
 scfr.onError = onShieldconexError; /* a function you define returned after an unsuccessful data sent event for validation and required data issues */
 scfr.onToken = onShieldconexToken; /* a function you define returned on successful data sent event */
 scfr.render();
</script>

4. Retrieve Data Tokens

The function that you define for a successful data tokenization (onShieldconexToken above) event must get the BFID returned and send it to your server to retrieve the data tokens. Keep in mind that you will need to store the BFID. The BFID can vary in length from 30-150 characters.

5. Store the Token

Your Server that receives the ID from step 4 (through API or message queue) needs to use this ID to retrieve the data tokens. This can only be done once. This is a vaultless solution any "unclaimed" tokens are only held temporarily. This example is in node.js, but any server-side language that can call an API will work. Axios is a convenient library for making API calls.

axios({
	    "method": 'post',
	    "headers": {"Authorization": strAuthYourVariable,"Accept": 'application/json',"Content-Type": 'application/json'},
	    "url": 'https://secure-cert.shieldconex.com/api/tokenization/read',
	    "data": JSON.stringify({"bfid":objParams.bfid})
	  }).then(function (objResponse) {
	  	//this is where you get the tokenized data values to store and use later. KEEP THE ID TOO you need it to get the plain values later 
	  	console.log('got the tokens',objResponse.data.values);
	  });

Next Steps

Once you have the iFrame and tokenization implemented, you'll want to start working on Detokenization in the Data Retrieval guide.