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”.
<html>
<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;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://secure.pay1.de/client-api/js/v1/payone_hosted_min.js"></script>
<form name="paymentform" action="" method="post">
<fieldset>
<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>
</select>
<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>
</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();">
</fieldset>
</form>
<div id="paymentform"></div>
<script>
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: Payone.ClientApi.Language.de // 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 3.1.5.3
};
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) {
console.debug(response);
if (response.status === "VALID") {
document.getElementById("pseudocardpan").value = response.pseudocardpan;
document.getElementById("truncatedcardpan").value = response.truncatedcardpan;
document.paymentform.submit();
}
}
</script>
</body>
</html>