Skip to end of metadata
Go to start of metadata

This example will show how to configure PAYONE hosted-iFrame mode with cardtype selection in your shop / website

Simply change:

  • config.fields.*.style to your CSS layout
  • request.*-fields to your mid, aid, portalid, mode, encoding and hash value

and set

  • your selected credit card type via public method “setCardType”

and finally

  • initiate a preauthorization / authorization via received “pseudocardpan”.

<head lang="en">
    <meta charset="UTF-8">
    <title>Simple example for PAYONE hosted-iFrame mode</title>
    <style type="text/css" media="screen, projection">
        * {
            margin: 0;
            padding: 0;
        body {
            background: #FFF;
            color: #000;
            font: 0.9em "Helvetica";
        fieldset {
            padding: 1em;
            border: 1px solid #000;
            width: 275px;
            margin: 10px;
        label {
            margin-right: 10px;
            float: left;
            width: 80px;
            padding-top: 0.3em;
            text-align: right;
        input, select{  
            font-size: 1em;
            border: 1px solid #000;
            padding: 0.1em;
        select {
            margin-right: 10px;
        input, .inputIframe, select {
            display: block;
            margin-bottom: 10px;
        input {
            width: 175px;
        #paymentsubmit {
            float: right;
            width: auto;
            padding: 5px;
            margin-bottom: 0px;
            margin-right: 10px;
        #errorOutput {
            text-align: center;
            color: #ff0000;
            display: block;
<script type="text/javascript" src=""></script>
<form name="paymentform" action="" method="post">
        <input type="hidden" name="pseudocardpan" id="pseudocardpan">
        <input type="hidden" name="truncatedcardpan" id="truncatedcardpan">
        <!-- configure your cardtype-selection here -->
        <label for="cardtypeInput">Card type</label>
        <select id="cardtype">
            <option value="V">VISA</option>
            <option value="M">Mastercard</option>
            <option value="A">Amex</option>
        <label for="cardpanInput">Cardpan:</label>
        <span class="inputIframe" id="cardpan"></span>
        <label for="cvcInput">CVC:</label>
        <span id="cardcvc2" class="inputIframe"></span>
        <label for="expireInput">Expire Date:</label>
        <span id="expireInput" class="inputIframe">
            <span id="cardexpiremonth"></span>
            <span id="cardexpireyear"></span>
        <label for="firstname">Firstname:</label>
        <input id="firstname" type="text" name="firstname" value="">
        <label for="lastname">Lastname:</label>
        <input id="lastname" type="text" name="lastname" value="">
        <div id="errorOutput"></div>
        <input id="paymentsubmit" type="button" value="Submit" onclick="check();">
<div id="paymentform"></div>
    var request, config;
    config = {
        fields: {
            cardpan: {
                selector: "cardpan",                 // put name of your div-container here
                type: "text",                        // text (default), password, tel
                style: "font-size: 1em; border: 1px solid #000;"
            cardcvc2: {
                selector: "cardcvc2",                // put name of your div-container here
                type: "password",                    // select(default), text, password, tel
                style: "font-size: 1em; border: 1px solid #000;",
                size: "4",
                maxlength: "4",                      // set max. length for CVC input; empty values possible
                length: { "A": 4, "V": 3, "M": 3, "J": 0 } // set required CVC length per cardtype
                                                     // if set exact length required; 0=CVC input disabled
            cardexpiremonth: {
                selector: "cardexpiremonth",         // put name of your div-container here
                type: "select",                      // select(default), text, password, tel
                size: "2",
                maxlength: "2",
                iframe: {
                    width: "50px"
            cardexpireyear: {
                selector: "cardexpireyear",          // put name of your div-container here
                type: "select",                      // select(default), text, password, tel
                iframe: {
                    width: "80px"
        defaultStyle: {
            input: "font-size: 1em; border: 1px solid #000; width: 175px;",
            select: "font-size: 1em; border: 1px solid #000;",
            iframe: {
                height: "33px",
                width: "180px"
        error: "errorOutput",                        // area to display error-messages (optional)
        language:       // Language to display error-messages
                                                     // (default: Payone.ClientApi.Language.en)
    request = {
        request: 'creditcardcheck',                  // fixed value
        responsetype: 'JSON',                        // fixed value
        mode: 'live',                                // desired mode
        mid: '10001',                                // your MID
        aid: '10002',                                // your AID
        portalid: '2000002',                         // your PortalId
        encoding: 'UTF-8',                           // desired encoding
        storecarddata: 'yes',                        // fixed value
        // hash calculated over your request-parameter-values (alphabetical request-order) plus PMI portal key
        // hash: '1cf456bf692453613ebb992a3fb859cc347ddc7e94e2ca764efbe8b0089de6964ab1266df0831e59de89dc5291070fe7'
        hash: '5c4014cebeb361d9e186fd42c810b9b1'     // see Chapter
    var iframes = new Payone.ClientApi.HostedIFrames(config, request);
    document.getElementById('cardtype').onchange = function () {
       iframes.setCardType(this.value);              // on change: set new type of credit card to process
    function check() {                               // Function called by submitting PAY-button
        if (iframes.isComplete()) {
            iframes.creditCardCheck('checkCallback');// Perform "CreditCardCheck" to create and get a
                                                     // PseudoCardPan; then call your function "checkCallback"
        } else {
            console.debug("not complete");
    function checkCallback(response) {
        if (response.status === "VALID") {
            document.getElementById("pseudocardpan").value = response.pseudocardpan;
            document.getElementById("truncatedcardpan").value = response.truncatedcardpan;

  • No labels