Secure Fields allow you to securely collect card data by injecting iframes to your DOM. A separate iframe for both, card number and CVV code is used. Thereby, sensitive data never touches your server and allows you to capture all other related card data such as cardholder name, expiry date, etc. directly by yourself.
Using Secure Fields qualifies you for SAQ A.
Browser compatibility for Secure Fields:
Browser | Version |
Chrome | Chrome Mobile | >=28 | >=28 |
Firefox | Firefox Mobile | >=31 | >=31 |
Internet Explorer | Internet Explorer Mobile | >=9 | >= 9 |
Safari | Safari Mobile | >=6 | >=6 |
Opera | Opera Mobile | >=24 | >=22 |
Blackberry Browser | >=8 |
Android Browser | >=4 |
To get started include the following script on your page.
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/secure-fields-2.0.0.js"></script>
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/secure-fields-2.0.0.min.js"></script>
Please make sure to always load it directly from https://pay.sandbox.datatrans.com​
In order for Secure Fields to insert card number and CVV iframes at the right place, create empty DOM elements and assign them unique IDs. In the example below those are:
card-number-placeholder
cvv-placeholder
<form><div><div><label for="card-number-placeholder">Card Number</label><!-- card number container --><div id="card-number-placeholder" style="width: 250px;"></div></div><div><label for="cvv-placeholder">Cvv</label><!-- cvv container --><div id="cvv-placeholder" style="width: 90px;"></div></div>​<button type="button" id="go">Get Token!</button></div></form>
In test mode, only test credit cards are allowed.
Start with creating a new Secure Fields instance:
var secureFields = new SecureFields();​// Multiple instances might be created and used independently:// e.g. var secureFields2 = new SecureFields();
Initialize it with your merchantId
and specify which DOM element containers should be used to inject the iframes:
secureFields.initTokenize( "1100007006", {cardNumber: "card-number-placeholder",cvv: "cvv-placeholder"});
Afterwards submit the form and listen for the success event:
$(function() {$("#go").click( function() {secureFields.submit(); // submit the "form"})});​secureFields.on("success", function(data) {if(data.transactionId) {// transmit data.transactionId and the rest// of the form to your server}});
Instances can be destroyed if no longer used:
secureFields.destroy();
Once you've transmitted the transactionId
to your server (together with the the rest of your form) you have to execute a server to server GET Token
request to retrieve the tokenized card number and the tokenized CVV code.
This service requires HTTP basic authentication. The required credentials can be found in our dashboard. Please refer to API authentication data for more information.
Please note that this is a server to server API call and cannot be called from the browser directly.
transactionId
.
Please note that this is a server to server API call and cannot be called from the browser directly.secureFields.submit()
operation.​
$ curl "https://api.sandbox.datatrans.com/upp/services/v1/inline/token?transactionId=170419151426624571" \-u 'merchantId:password'
{"aliasCC": "AAABcHxr-sDssdexyrAAAfyXWIgaAF40","aliasCVV": "mVHJkLRrRX-vb9uUzEM40RUN","maskedCard": "424242xxxxxx4242"}
$ curl "https://api.sandbox.datatrans.com/upp/services/v1/inline/token?transactionId=170419151426624571&returnPaymentMethod=true" \-u 'merchantId:password'
{"aliasCC": "AAABcHxr-sDssdexyrAAAfyXWIgaAF40","aliasCVV": "mVHJkLRrRX-vb9uUzEM40RUN","paymentMethod": "VIS","maskedCard": "424242xxxxxx4242"}
$ curl "https://api.sandbox.datatrans.com/upp/services/v1/inline/token?transactionId=170822090245534063&mandatoryAliasCVV=true" \-u 'merchantId:password'
400 Bad RequestTokenization with CVV not found
Error message | Cause / Explanation |
Tokenization expired | The |
Tokenization not found | The merchant id used for the transaction id creation does not match the merchant id used for the GET Token call. |
Please visit our GitHub repository for additional examples of integration versions: Demo Basic: https://datatrans.github.io/secure-fields-sample/ Demo with horizontal fields: https://datatrans.github.io/secure-fields-sample/inline-example.html Demo with floating labels: https://github.com/datatrans/secure-fields-sample/blob/master/floating-label.html​
An example of how to implement this behaviour in modern web applications can be found here​
In test mode, only test credit cards are allowed.
Please also have a look at Styling and Events references.
​