// Create a new `HPS` object with the necessary configuration
var Hfkey = $("#PublicToken").val();
var hps = new Heartland.HPS({
    publicKey: Hfkey,
    type: 'iframe',

    fields: {
        cardNumber: {
            target: 'iframesCardNumber',
            placeholder: '•••• •••• •••• ••••'
        },
        cardExpiration: {
            target: 'iframesCardExpiration',
            placeholder: 'MM / YYYY'
        },
        cardCvv: {
            target: 'iframesCardCvv',
            placeholder: 'CVV'
        }
    },

    style: {
        'input[type=text],input[type=tel]': {
            'box-sizing': 'border-box',
            'display': 'block',
            'width': '100%!important',
            'font': 'inherit',
            'height': '36px',
            'padding': '8px 14px',
            'font-size': '14px',
            'line-height': '1.42857143',
            'color': '#555',
            'background-color': '#fff',

            'background-image': 'none',
            'border': '1px solid #ccc',
            'border-radius': '4px',
            '-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
            'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
            '-webkit-transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
            '-o-transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
            'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s'
        },
        'input[type=text]:focus,input[type=tel]:focus': {
            'border-color': '#66afe9',
            'outline': '0',
            '-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)',
            'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)'
        },
        'input[type=submit]': {
            'width': '100%',
            'margin': '5px 0px',
            'padding': '8px 8px',
            'font-size': '20px',
            'height': '48px',
            'font-weight': 'bold',
            'background-color': '#791215',
            'color': '#ffffff',
            'border': 'none',
            'outline': 'none',
            'border-radius': '20px',
            '-webkit-box-shadow': '3px 3px 4px rgba(0, 0, 0, 0.4)',
            'box-shadow': '3px 3px 4px rgba(0, 0, 0, 0.4)',
        },

    },


    onTokenSuccess: function (resp) {
        $("<input>").attr({ type: "hidden", id: "Token_value", name: "Token_value", value: resp.token_value }).appendTo("#iframestoken");
    },

    onTokenError: function (resp) {
        alert('There was an error: ' + resp.error.message);
    },

});

$('#iframesSubmit').off().on(
    'click',
    function (e) {
        hps.Messages.post(
            {
                accumulateData: true,
                action: 'tokenize',
                message: Hfkey
            },
            'cardNumber'
        );
    });



TokenGenration = async () => {
    $('#iframesSubmit').click();
}
const GetToken = () => {

    var value = $("#Token_value").val();
    if (!value) {
        alert("Something went wrong while processing your payment request, please try again!");
    }
    else {
        return value;
    }
}