The developer.datatrans.com Developer Hub

Welcome to the developer.datatrans.com developer hub. You'll find comprehensive guides and documentation to help you start working with developer.datatrans.com as quickly as possible, as well as support if you get stuck. Let's jump right in!

Redirect Mode

Description

When using the Redirect Mode the merchant performs a redirect to the Datatrans Payment Page. The whole payment process is handled by the Datatrans web application.

Example

Integration

To integrate the redirect mode the merchant could use a simple HTML <a> tag:

<a href="https://pay.sandbox.datatrans.com/upp/jsp/upStart.jsp
		?merchantId=1100004624
		&refno=1234567890
		&amount=1000
		&currency=CHF
		&theme=DT2015">Pay</a>

Parameter encoding

Please bear in mind that special parameters need to be url-encoded. In most cases http-post is the more viable solution.

<iframe> integration

Although we do not recommend to use an iframe to show the Payment Page, please make sure to send the following parameter if you have this kind of integration:

mode=forceRedirect

This makes sure that no (X) button on the top right of the Payment Page is displayed. Additionally a click on the back button will redirect to the merchants cancel url.

Passing multiple payment methods

Please use the parameter paymentmethod to specify multiple payment methods:

?paymentmethod=VIS
&paymentmethod=ECA
&paymentmethod=AMX

Custom Integration

When using the redirect mode, one can alter the payment methods displayed by changing the paymentmethod parameter used to redirect to the Payment Page as follows

<a href="https://pay.sandbox.datatrans.com/upp/jsp/upStart.jsp
		?merchantId=1100004624
		&refno=1234567890
		&amount=1000
		&currency=CHF
		&theme=DT2015&paymentmethod=VIS">Pay</a>

In the example above the Payment Page will only display VISA as payment method. If you want to display multiple payment methods you can use the parameter paymentmethod more than once. For a list of payment method short codes refer to Other Payment Methods and for credit cards to Credit Cards

Sample

Select one or more payment methods and click pay.



Code

<style>
.payment-method{
 	width:25%; 
  margin-right:2%;
  display: inline-block;
}
  
.payment-method .initial{
 	opacity: 0.8;
    filter: grayscale(50%); 
}
  
.payment-method img:hover{
 	opacity: 1;
  filter:none;
}
  
.methods{
  display: inline-block;
  width:100%
}
 
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
 let baseHref = "https://pay.sandbox.datatrans.com/upp/jsp/upStart.jsp?merchantId=1100004624&&refno=1234567890&amount=100&currency=CHF&theme=DT2015";
 
 
 let selectedMethods = []; 
  
 $("#redirectSample img").on("click",function(){
   console.log("xx");
    let methodShortName = $(this).data("methodname");
   	if(selectedMethods.includes(methodShortName)){
      $(this).addClass("initial");
    	var idx = selectedMethods.indexOf(methodShortName);
      selectedMethods.splice(idx,1);
    }else{
      $(this).removeClass("initial");
    	selectedMethods.push($(this).data("methodname"));
    }
 	
  });
  
  function pay(){
   	if(selectedMethods.length > 0){
    	let adjustedHref = baseHref;  
      selectedMethods.forEach(function (method){
      	adjustedHref = adjustedHref + "&paymentmethod=" + method;
      });
      selectedMethods = []; 
      window.open(adjustedHref);
    }
  }
</script>

<div id="redirectSample" class="methods">
  <div class="payment-method">
    <img data-methodname="VIS" src="https://pay.sandbox.datatrans.com/upp/payment/DT2015/cardicons/card_visa.svg" class="initial" />
  </div>
  <div class="payment-method">
    <img data-methodname="AMX" src="https://pay.sandbox.datatrans.com/upp/payment/DT2015/cardicons/card_amex.svg" class="initial" />
  </div>
  <div class="payment-method">
    <img data-methodname="ECA" src="https://pay.sandbox.datatrans.com/upp/payment/DT2015/cardicons/card_mastercard.svg" class="initial" />
  </div> 
</div>
<br>

<button onclick="pay();"class="btn btn-primary">Pay 1 CHF</button>

paymentmethod parameter

This is only needed if the merchant wants to dynamically restrict the offered payment methods. By default all payment methods of a merchant are displayed


What's Next

Check out our API Reference for a full list of available parameters

API Reference
Styling