Setting Masked Data

The purpose of the setMasked data feature is to reset the Payment iFrame to a process complete state without getting the end user to re-enter their card data.

In the process complete state, the iFrame has the eToken stored in its internal cache. Once the cache is primed with the eToken, it is output in subsequent encrypt function calls. The purpose of this feature is to allow merchants to repopulate their checkout page without having to store sensitive cardholder data. It is particularly useful if the merchant has to reload the page after data from another field failed validation; it allows the end user to fix the incorrect data and avoid card data reentry.

To use this feature the JavaScript API exposes a setMasked function that takes three arguments:

1. An eToken.
2. A masked data object.
3. A setting object for success and failure callback function.

The masked data object must contain the following:

• For card transactions, the three properties number, cvv, and expy.
• For check transactions, the two properties account_number and routing_number.

The expy can be entered in plain text; however, the cvv must be masked by replacing the numbers with x's.

The entire number must be masked out except for the first digit and the last four, e.g., 5xxxxxxxxxxx5454.

📘

Note

For convenience, the encrypt function outputs the masked data object along with the eToken to the success function.

When the setMasked function is called, the input boxes within the Payment iFrame are populated with the values in the masked data object. If the user alters the masked data in any way then the whole form is cleared and the eToken is cleared from the internal cache. At this point, the card data has to be reentered and processed/encrypted.

Sample API call The following example outlines how a merchant can set the masked data for a Payment iFrame that is not created by the JavaScript API.

var paymentiFrame = new PaymentiFrame({ create : false, iframeId : "pay_if"});

var masked_data = {
            number : "5xxxxxxxxxxx5454",
            cvv    : "xxx",
            expy   : "1234"
        };

var eToken = "xRyzz2-9eREX_7Zu2Ix1zamDV2cMkqNKb4P05-CU-KXGhAfmfz67AVj0qkj3N278Khw80rxjzKfZEYdtnKPOnIzcgPlJRZ6weC4AVc5WQR00yhgT-Hcg0dAF7faZXSYd-J1-u94cTfsQwJmo5i5lGYIPGGa7Kex3w9-OO9VTFjdhFFVmAsuNx1ugJnGESy4zdeyR8N53H8D_nCOJ5jdwPSzA3dbw_TvY";


paymentiFrame.setMasked( masked_data, eToken )
            .success(function(res){
                alert(res);
            })
            .failure(function(err){
                alert(err);
            });

In instances where the Payment iFrame is loaded through the initialize function in the JavaScript SDK, the masked data can be set through the masked property of the settings object.

new PaymentiFrame( {
    create    : true,
    iframeId  : "pay_if",
    settings  : {
        account         : 000000000001,
        parentId        : "pay_if_parent_div",
        lang            : "en",
        cvv             : "required",
        expy            : "single_input",
        layout          : "3",
        labelFontFamily : "13",
        inputStyle      : "1",
        labelFontSize   : "14",
        labelFontColor  : "#0000FF",
        style           : "background-color:red; border-radius: 25px; padding: 25px;",
        showFrame       : false,
        masked          : {
            formData: {
                number: "5xxxxxxxxxxx5454",
                cvv: "xxx",
                expy: "1234"
            },
            eToken: "xRyzz2-9eREX_7Zu2Ix1zamDV2cMkqNKb4P05-CU-KXGhAfmfz67AVj0qkj3N278Khw80rxjzKfZEYdtnKPOnIzcgPlJRZ6weC4AVc5WQR00yhgT-Hcg0dAF7faZXSYd-J1-u94cTfsQwJmo5i5lGYIPGGa7Kex3w9-OO9VTFjdhFFVmAsuNx1ugJnGESy4zdeyR8N53H8D_nCOJ5jdwPSzA3dbw_TvY"
        }
    }
});