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.

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