UI for getting credit card alias

Find credit card number alias

Use this form to get the alias for a credit card number

I wanted to create a UI prototype of a 'credit card converter' - that is, an application which takes a credit card number and then converts it to an alias. This is a situation in environments where credit card numbers can't be stored due to PCI/DSS rules, and so an alias of the card number is used.

The prototype comprises:

  • An HTML form
  • A JavaScript function which makes an HTTP call to a PHP service
  • A PHP service which does the credit card conversion - in this case, it simply reverses the digits in the credit card number

HTTP call

The first function is called when the user submits the form. It sets up a new HTTP request using XMLHttpRequest. The 'open' operation sets up the HTTP operation ('GET') and the resource - which is the PHP service. The PHP service takes a parameter, which is added as query string: 'pan=...'.

The 'onload' operation specifies what happens on successful response from the service. In this case, it loads the response into the document.

function getAlias() {

    var PAN = document.getElementById("creditCardNumberId").value;

    var request = new XMLHttpRequest();

    request.open("GET", "getalias.php?pan=" + PAN, true);

    request.onload = function () {

        document.getElementById("responseId").innerHTML = this.responseText;

        var response = JSON.parse(this.responseText);

        document.getElementById("aliasId").value = response.alias;

        document.getElementById("responsePanelId").style.display = "block";

        timerId = setTimeout(closeNoCopy, 10000);

    }

    request.send();

}

Timeout

At the end of the function, it sets a timeout. After 10,000ms, if there is no action by the user, then the 'closeNoCopy' function is called. This function clears the form and the results. This is useful if sensitive information has been left on the screen.

function closeNoCopy() {

    clearTimeout(timerId);

    document.getElementById("responsePanelId").style.display = "none";

    document.getElementById("creditCardNumberId").value = "";

}

Copy and close

Because the credit card number and its alias are sensitive information, it is important to clear them off the screen when the user has finished. So the form gives the user an option to copy the result to the clipboard, and when the user selects this, it automatically clears the form.

function copyAndClose() {

    clearTimeout(timerId);

    document.getElementById("aliasId").select();

    document.execCommand("Copy");

    document.getElementById("responsePanelId").style.display = "none";

    document.getElementById("creditCardNumberId").value = "";

}

PHP service

The last component is a PHP function which takes the credit card number and returns an alias. The service:

  • Gets the credit card number (PAN) from the URL query string
  • Converts the credit card number to alias - in this case, it does a simple reverse of the digits for demonstration purposes
  • Returns the alias in a JSON document
<?php

// get the PAN parameter from URL
$pan = $_REQUEST["pan"];

// convert PAN to alias
$alias = strrev($pan);

// set up response array
$response = [
    'status' => 'OK',
    'alias' => $alias
];

// output response as JSON
echo json_encode($response);

?>