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!

Lightbox Mode

Description

The Lightbox approach uses an <iframe> to embed the payment page as an overlay to your online shop. When the Lightbox Mode is invoked, the merchants online shop is darkened out and the payment page appears as a floating element on top.

Example

Integration

To integrate the lightbox, the merchant could use the following Code snippet.

<script src="https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.js"></script>
<form id="paymentForm"
      data-merchant-id="1100004624"
      data-amount="1000"
      data-currency="CHF"
      data-refno="123456789"
      data-sign="30916165706580013">
    <button id="paymentButton">Pay</button>
</form>

<script type="text/javascript">
    document.getElementById("paymentButton").onclick = function () {
        Datatrans.startPayment({'form': '#paymentForm'});
    }; 
</script>

Parameters

Additional Parameters

Refer to the API Reference if you need to submit other parameters. Additional data attributes need to be added to the form tag. For example:

data-use-alias="true"

Please pay attention to the notation of the data attribute. The parameter successUrl becomes data-success-url for example.

For details about the data-* attribute notation please refer to https://w3c.github.io/html/dom.html#custom-data-attribute

Passing multiple payment methods

Use the parameter paymentmethod to specify multiple payment methods:

data-paymentmethod="VIS,ECA,AMX"

Passing parameters with special formats

If you need to pass parameters with a special format (for example the initial letter is uppercased) you can always directly pass them to the Datatrans.startPayment(...) function. For example:

Datatrans.startPayment({
  form: "#paymentForm",
  params: {    
    "M_y-parAm1": "myparam1",
    "_Test": "_test"                           
  }        
});

Callbacks

The following callbacks are supported by datatrans.js:

Callback
Description

opened
function()

The callback to invoke when the payment page is opened.

loaded
function()

The callback to invoke when the payment page is loaded.

closed
function()

The callback to invoke when the payment page is closed.

error
function(errorData)

The callback to invoke if an error occured during the initial request.

errorData.message The actual error message
errorData.detail The error message details or null.

Note: This callback is only getting triggered if the initial request to Datatrans was wrong (unknown merchantId for example) and not if the authorisation ended in an error.

Callback Example

Datatrans.startPayment({
  'form': '#paymentForm',
  'closed': function() {console.log('payment-page closed');}
});

Custom Integration

When using the Lightbox, one can also alter the payment methods displayed by changing the data-paymentmethod attribute used to invoke the Payment Page as follows

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.js"
  </script>
<form id="paymentForm"
      data-merchant-id="1100004624"
      data-amount="1000"
      data-currency="CHF"
      data-refno="123456789"
      data-sign="30916165706580013" data-paymentmethod="VIS">
    <button id="paymentButton">Pay</button>
</form>

<script type="text/javascript">
    $("#paymentButton").click(function () {
        Datatrans.startPayment({'form': '#paymentForm'});
    });
</script>

Please note when using the Lightbox the paymentmethod parameter is a data-attribute, hence it will only be used once. To select multiple payment methods one can use a comma separated list of method shortcodes.

data-paymentmethod="VIS,ECA,AMX"

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 src="https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.js"> </script>

<script>

   let selectedMethodsLightbox = []; 
  
 $("#lightboxSample img").on("click",function(){
    let methodShortName = $(this).data("methodname");
   	if(selectedMethodsLightbox.includes(methodShortName)){
      $(this).addClass("initial");
    	var idx = selectedMethodsLightbox.indexOf(methodShortName);
 			selectedMethodsLightbox.splice(idx,1);
    }else{
      $(this).removeClass("initial");
    	selectedMethodsLightbox.push($(this).data("methodname"));
    }
 	
  });
  
  function payLightbox(){
   	if(selectedMethodsLightbox.length > 0){
    	let methodsString = selectedMethodsLightbox.join(",");
      debugger;
     $("#paymentContainer").attr("data-paymentmethod",methodsString);
      selectedMethodsLightbox = []; 
      Datatrans.startPayment({'form': '#paymentContainer'});
    }
  }
</script>


<div id="paymentContainer"   data-merchant-id="1100004624"
      data-amount="100"
      data-currency="CHF"
      data-refno="123456789"
      data-sign="30916165706580013">
    <div id="lightboxSample" 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>
</div>
<br>
<button onclick="payLightbox();"class="btn btn-primary">Pay 1 CHF</button>


One Click Checkout

The Lightbox should not be used for One Click Checkout scenarios. If there is no user interaction please use the Redirect Mode


Lightbox Mode


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.