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
¤cy=CHF
&theme=DT2015">Pay</a>
<a href="https://pay.sandbox.datatrans.com/upp/jsp/upStart.jsp
?merchantId=1100004624
&refno=1234567890
&amount=119
¤cy=CHF
&theme=DT2015
&uppArticle_1_Quantity=1
&uppArticle_1_Name=Product
&uppArticle_1_Price=119
&uppArticle_1_Tax=1900
&uppArticle_1_TaxAmount=19">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.
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.
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
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
¤cy=CHF
&theme=DT2015&paymentmethod=VIS">Pay</a>
<a href="https://pay.sandbox.datatrans.com/upp/jsp/upStart.jsp
?merchantId=1100004624
&refno=1234567890
&amount=119
¤cy=CHF
&theme=DT2015
&uppArticle_1_Quantity=1
&uppArticle_1_Name=Product
&uppArticle_1_Price=119
&uppArticle_1_Tax=1900
&uppArticle_1_TaxAmount=19
&paymentmethod=KLN">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¤cy=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
Updated over 3 years ago