PCI DSS Script Customization

PCI DSS – Payment Card Industry Data Security Standard is an information security standard for handling the credit cards from the major card schemes and it was created to protect cardholder data.

When we were implementing the PCI DSS Assurance Card script into our WooCommerce website, it becomes a floating sticky on the right sidebar.

Customize the script to meet client requirements – Position the card on the footer bottom at the center. On clicking the Assurance Card thumbnail image, Compliance details should come on to the popup window.

Basic knowledge of jQuery is enough for the script customization.

Original Script

Following script has been generated to embed the code into the body section of your website.

{Your_Key} – Generated Assurance Card Key (Alpha Numeric Characters).

<script src="https://assurance.sysnetgs.com/assurancecard/{Your_Key}/cardJs" type="text/javascript"></script>

Get the script from the generated code. Here is the final code of the Assurance Card Script.

(function() {
    var css = '.ac-widget {position:fixed; top: 50%; right: -50px; display: block;width: 150px;height: 40px;transform: rotate(-90deg); background-image: url("https://assurance.sysnetgs.com//static/AssuranceCard/images/thumb.png");background-size: contain; background-repeat: no-repeat; background-position: center; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 1px 0 8px white,0 0 0 9px hsl(0, 0%, 90%),-2px -4px 12px rgba(0, 0, 0, 0.2); cursor: pointer;}',
        head = document.head,
        style = document.createElement('style'),
        preview = document.createElement('div'),
        lang = navigator.language || navigator.browserLanguage,
        windowObjectReference = null,
        assuranceCardUrl = "https://assurance.sysnetgs.com//assurancecard/{Your_Key}/assurancecard/",
        PreviousUrl;

    <!--Insert CSS-->

    style.type = 'text/css';
    if (style.styleSheet){
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    head.appendChild(style);

     <!--Insert widget HTML element-->

    preview.id = 'widget-preview';
    preview.className = 'ac-widget';
    if (lang.indexOf('fr') == 0) preview.className += ' ac-widget-french';
    document.body.appendChild(preview);

    <!--Create a new window or re-use an already opened one-->

    console.log(assuranceCardUrl);

    preview.onclick = function() {
        if(windowObjectReference == null || windowObjectReference.closed) {
            windowObjectReference = window.open(assuranceCardUrl, 'assurance_card', 'width=500,height=535, menubar=no, resizable, scrollbars, location=no, top=100, left=100');
        } else if(PreviousUrl != assuranceCardUrl) {
            windowObjectReference = window.open(assuranceCardUrl, 'assurance_card', 'width=500,height=535, menubar=no, resizable, scrollbars, location=no, top=100, left=100');
        <!--if the resource to load is different,-->
        <!--then we load it in the already opened secondary window and then-->
        <!--we bring such window back on top/in front of its parent window.-->
            windowObjectReference.focus();
        } else {
            windowObjectReference.focus();
        };
        PreviousUrl = assuranceCardUrl;
    };
})();

Here, Let’s start the script customization.

How to Customize the Assurance Card Script?

1. From the original Assurance Card script, Remove the CSS variable, HTML element section and CSS section from the script.
2. Separate the Background image from the CSS variable to the HTML element.
3. Then wrap the remaining function inside the, On click of the thumbnail image function.

The final code of the customized script will look like this.

<img id="ac-widget" src="<?php echo WP_SITEURL;?>/wp-content/themes/pro/images/thumb.png" />

	<script>
	jQuery(document).ready(function($){
		$("#ac-widget").on("click", function($){
			var windowObjectReference = null,
			assuranceCardUrl = "https://assurance.sysnetgs.com//assurancecard/{Your Key}/assurancecard/", 
			PreviousUrl;
			 if (windowObjectReference == null || windowObjectReference.closed) {
			windowObjectReference = window.open(assuranceCardUrl, 'assurance_card', 'width=500,height=535, menubar=no, resizable, scrollbars, location=no, top=100, left=100');
			} else if (PreviousUrl != assuranceCardUrl) {
			windowObjectReference = window.open(assuranceCardUrl, 'assurance_card', 'width=500,height=535, menubar=no, resizable, scrollbars, location=no, top=100, left=100');
			windowObjectReference.focus();
			} else {
			windowObjectReference.focus();
			}
			;PreviousUrl = assuranceCardUrl;
			});
			});
	</script>