Hosted Tokenization Visual Customization

Using 'Getting the Temporary Token' example from https://developer.moneris.com/Documentation/NA/E-Commerce%20Solutions/Hosted%20Solutions/Hosted%20Tokenization  3 text inputs are shown but nothing else. Can't seem to find anything on this in the docs.

How are labels added before each text box?    i.e. Create Card, Expiry Date, CVV

 

 

 

 

 

 

 

 

  • You will be required to add the text box for credit card, expdate and cvv labels yourself. We do not have a document pertaining to adding the label. However any other information relating to iFrame is available on developer portal -> Ecommerce -> Hosted solution -> hosted tokenization.
  • In reply to HG_Moneris:

    Please provide an actual url for "developer portal -> Ecommerce -> Hosted solution -> hosted tokenization."
  • In reply to haler:

    I missed the display_labels variable. So setting that displays the labels. However the labels and input are on different lines. I want the label and input to be on the same line. Looking at the source for esqa.moneris.com/HPPtoken page I found .monerisInput{ display : block;}
    All the inputs use this class.
    <body>
    <label for="monerisDataInput" class="monerisInputLabel" id="monerisDataLabel">Card Number</label><input type="tel" class="monerisInput" id="monerisDataInput" autocomplete="cc-number"><label for="monerisExpInput" class="monerisInputLabel" id="monerisExpLabel">Expiry Date</label><input type="tel" maxlength="4" class="monerisInput" id="monerisExpInput" autocomplete="off"><label for="monerisCVDInput" class="monerisInputLabel" id="monerisCvdLabel">CVD</label><input type="tel" maxlength="4" class="monerisInput" id="monerisCVDInput" autocomplete="off"><

    How do I change the monerisInput class?
    Are there any examples for customizing the iframe elements?
  • In reply to haler:

    I tried css_textbox=background:green;

    result:

    .monerisInput
    {
    display : block;
    background:green;
    }

    Again how do I get rid of display : block; ?
  • Hi all.

    Here is my little contribution to this forum.

    Just like you I had to customize the Hosted Tokenization credit card process page, to look like our website payment page. Since the documentation is to say the least, really poor on the subject, I had to make a lot of tests to achieve my goal.

    At the end, I've found a way to hack the Hosted Tokenization css formating. ;-)

    Here you will find the way I upgraded the example found here:

    developer.moneris.com/.../Hosted Tokenization

    The rest is self explanatory.
    Simply copy-paste this code to your PHP/HTML editor, replace 'YOUR PROFILE ID' and execute.
    If you get the idea, you will be able to customize it to your own needs.

    Please note that Hexadecimal color are not supported

    Cheers...
    ------------------------------------------------------------------------
    <body>

    <div>This is the outer page</div>
    <div id=monerisResponse></div>

    <?
    $profileID = 'YOUR PROFILE ID';
    $display_labels = '1';
    $enable_exp = '1';
    $enable_cvd = '1';

    $css_body = "background:white;";
    $css_textbox = "border-width:1px;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 10px;
    background-color: whitesmoke;
    font-size: 14px;
    color: black;
    border-top: 0;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid silver !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;";
    $css_textbox_pan = "width:160px;";
    $css_textbox_exp = "width:80px;";
    $css_textbox_cvd = "width:60px;";
    $css_label_pan = "font-family: 'Open Sans',sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: black;
    margin-bottom: 10px;";
    $css_label_exp = $css_label_cvd = $css_label_pan;

    // Here $enabled must be in contact with each other on one line
    $enable = "&display_labels=$display_labels&enable_exp=$enable_exp&enable_cvd=$enable_cvd";

    // Here $enabled must be in contact with following parameter
    // Because for an obscure reason, the last enable parameter will not be processed
    $params = "$enable&css_body=$css_body
    &css_textbox=$css_textbox
    &css_textbox_pan=$css_textbox_pan
    &css_textbox_exp=$css_textbox_exp
    &css_textbox_cvd=$css_textbox_cvd
    &css_label_pan=$css_label_pan
    &css_label_exp=$css_label_exp
    &css_label_cvd=$css_label_cvd";

    $src = "esqa.moneris.com/.../index.php
    ?>

    <iframe id=monerisFrame src="<?=$src . $params?>" frameborder='0' width="500px" height="300px"></iframe>

    <input type=button onClick=doMonerisSubmit() value="submit iframe">
    </body>