Easy checkout integration guide

Once a customer wishes to complete a purchase by proceeding to the Easy checkout, a payment has to be prepared by creating a paymentId before you try to initiate the checkout.

A paymentId is created by making a server-to-server call to the Payment API with a datastring containing information about the order, customer, and merchant.

If the request is successful, the Payment API will respond with a paymentId token.

The Datastring

The datastring is an array of parameters, which are intended to make up a single order.

The following parameters have to be included in the datastring: Items, amount, currency (ISO 4217), reference (orderID), checkout (customer information), merchantReference.

For specified information regarding the different parameters in the datastring, see: Datastring Parameters

Create Payment API-request

The example below creates a simple cURL request based on the following parameters:
INIT URL: https://test.api.dibspayment.eu/v1/payments/
Authorization key: A secret key found in the DIBS Easy administration
Datastring: A collection of data, which is used to define the order.

cUrl example

 

if($_GET['action'] == 'createPay') {                             
	$datastring = getDatastring($orderID);

	$ch = curl_init('https://test.api.dibspayment.eu/v1/payments');                                                                      
	curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
	curl_setopt($ch, CURLOPT_POSTFIELDS, $datastring);                                                                  
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
		'Content-Type: application/json',
		'Accept: application/json',	
		'Authorization: 00000000000000000000000009000000')                                                                   
	);                                                                                                                                                                
	$result = curl_exec($ch);
	echo($result);
}
   

Response

Javascript source:

To initiate the checkout you first have to add the following javascript as a source to the checkout page:

TEST

Add target element for checkout:

You will need a DIV element in which the checkout iframe will be loaded, in the example we use:

The javascript will create an iFrame containing the Easy checkout, and it will add the iframe to the position of the domElementId with a source url formatted based on the input parameters.

HTML Example

Create payment
    

Trigger checkout javascript:

In the example above, we use a button to initialize the checkout:

Create payment 

This button triggers an ajax call to the createpayment php function, which generates a paymentId based on the datastring of collected information.
On successful execution, it assigns the new paymentID variable and initiates the checkout process.

 
$("#CreatePayment").on('click', function() {
            $.ajax({
                url: 'api/createpayment.php',
                data: {
                    action: 'createPay',
                    orderID
                },
                dataType: 'json',
                success: function(data) {
                    paymentID = JSON.stringify(data);
                    var obj = jQuery.parseJSON(paymentID);
                    paymentID = obj.paymentId;
                    intitCheckout(paymentID);
                }
            });
        });

Checkout.js

The checkout .js uses the variable checkoutOptions to initialize the iframe.
This variable consist of the following parameters:

* : Mandatory parameters

 
var checkoutOptions = {
               checkoutKey: “live-checkout-key-00000000000000000000000009000000”, //[Required] Test or Live GUID with dashes
               
               paymentId : "8b464458f2524bc39fe5d31deb8bedc1", //[required] GUID without dashes
               containerId : "dibs-complete-checkout", //[optional] defaultValue: dibs-checkout-content
               language: "en-GB",            //[optional] defaultValue: en-GB
};
var checkout = new Dibs.Checkout(checkoutOptions);

//this is the event that the merchant should listen to redirect to the “payment-is-ok” page

checkout.on('payment-completed', function(response) {
               /*
               Response: 
                              paymentId: string (GUID without dashes)
               */
               window.location = '/PaymentSuccessful';
});

After the checkout has been completed, the created payment can either be handled in the administration portal, or directly through our API functions.

Specified Information regarding the different API functions can be found here: https://tech.dibspayment.com/easy/integration/rest

Regardless of how you choose to handle payments, we always recommend to use the GET Payment API to retrieve the latest information regarding the payment.

This is done by sending a GET request to the PaymentAPI containing the paymentId you wish to retrieve information on.

Example:

 
//GET PAYMENT
if($_GET['action']=='getPayment') {
    $payId=$_GET['paymentID'];
    $ch=curl_init('https://test.api.dibspayment.eu/v1/payments/'. $payId . '');
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Accept: application/json', 'Authorization: /* Secret Key */'));
    $result=curl_exec($ch);
    echo($result);
}

This request will respond with a json array containing all relevant information regarding the payment