CNG - TecsWeb integration using tecsweb.js

tecsweb.js - quickstart

tecsweb.js is javascript library developed by Tecs. It gives you more possibilities how to present CNG - TecsWeb PayGate to your customers.

In the examples bellow we'll show you, how easy it is to use TecsWeb Button or TecsWeb Iframe and connect them with your server, where TecsWebRequestToken must be generated to your customers.

STEP 1: Creating JSON webservice

At first, you need to prepare a webservice on your server side, where TecsWebRequestToken will be created. TecsWebRequestToken is built as a signed URL. The signed URL is generated by using your Merchant ID and MerchantSecretKey which has to be kept on safe place on your server side. This is why you should never generate TecsWebRequestToken on client (browser) side.

You can create the JSON webservice by using TecsWeb PHP SDK, that we prepared for you. You can find it here.

NOTE: It's really upon you and your system where the data of transaction will be created. Maybe you will let the client (browser) provide AMOUNT only and the rest of data such as TRANSACTION ID or RECEIPT NUMBER will be generated on server-side. In this example we will provide every data from client-side (browser).


/**
 * Example of get-tecsweb-token.php
 */
require __DIR__ . '/../tecsweb-php-lib/loader.php';
// data provided by client (browser)
$data = json_decode(file_get_contents('php://input'), true);
/************************************/
/** Place for preparing transaction */
/************************************/
$tecs = new \Tecs\TecsWeb(
    'MerchantSecretKey', // Private Secret Key provided by CNG
    '12345678', // Merchant ID provided by CNG
    'https://test.tecs.at/tecsweb/tecswebmvc_start.do' // URL of CNG - TecsWeb PayGate
                                                       // URL for PROD will be provided by CNG 
);
try {
    $url = $tecs->createSignedUrl([
        \Tecs\TecsWeb::AMOUNT         => $data[\Tecs\TecsWeb::AMOUNT], // amount in cents (mandatory)
        \Tecs\TecsWeb::TX_ID          => $data[\Tecs\TecsWeb::TX_ID], // mandatory
        \Tecs\TecsWeb::TX_CURRENCY    => $data[\Tecs\TecsWeb::TX_CURRENCY], // mandatory
        \Tecs\TecsWeb::TX_DESC        => $data[\Tecs\TecsWeb::TX_DESC], // mandatory
        \Tecs\TecsWeb::RECEIPT_NUMBER => $data[\Tecs\TecsWeb::RECEIPT_NUMBER], // mandatory
        \Tecs\TecsWeb::RETURN_URL     => $data[\Tecs\TecsWeb::RETURN_URL], // mandatory
    ]);
    // Create Success JSON Response
    header("Content-Type: application/json");
    exit(json_encode([
        'tecsWebRequestToken' => $url->getSignedUrl()
    ]));
} catch (\Exception $e) {
    // Create JSON Response on Error
    header("Content-Type: application/json");
    exit(json_encode([
        'error' => $e->getMessage()
    ]));
}

STEP 2: Embed TecsWeb PayGate by Button or IFrame

NOTE: In PROD environment you have to change source URL of the script!

var data = {
    [TecsWeb.AMOUNT]: '100',
    [TecsWeb.TX_ID]: '1000010164',
    [TecsWeb.TX_CURRENCY]: 'EUR',
    [TecsWeb.TX_DESC]: 'Test TecsWeb',
    [TecsWeb.RECEIPT_NUMBER]: '123456',
    [TecsWeb.RETURN_URL]: 'https://www.your-eshop-domain.com/step-3-payment-response.php', // return URL should be pointed to your backend (server) 
    [TecsWeb.BACKEND_SIGN_URL]: 'https://www.your-eshop-domain.com/get-tecsweb-token.php'
};
// For Button
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createButton('tecsweb-payment-wrapper', response.data.tecsWebRequestToken);
});
// For Iframe
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createIframe('tecsweb-payment-wrapper', response.data.tecsWebRequestToken);
});

<html>
    <head>
        
        <script src="https://test.tecs.at/tecsweb/js/tecsweb.js"></script>
    </head>
    <body>
        <div id="tecsweb-payment-wrapper"></div>
        <script>
            //... put the Javascript script here
        </script>
    </body>
</html>

What happens here?

In BACKEND_SIGN_URL parameter you provide the endpoint of the JSON webservice and after the call is successful, it returns TecsWebRequestToken. This token is needed for creation of the Button or the >IFrame as well as the ID of HTML element where it will be mounted to.

Tecsweb Button - Examples

TecsWeb Button is great solution for creating easy single payment.

In example you have a product or service on a separate page with no cart and you want to provide quick payment to your customers. The TecsWeb Button is most suitable solution for this scenario.

Default appearance



<html>
	<head>
		
		<script src="https://test.tecs.at/tecsweb/js/tecsweb.js">
        </script>
	</group>
	</head>
		<body>
        <script>
        TecsWeb.redirect(
               {$tecsWebRequestToken} // value of $tecsWebRequestToken from Step 1
            );

		</script>
        </body>
	</html>
    
var data = {
    [TecsWeb.AMOUNT]: '100',
    [TecsWeb.TX_ID]: '1000010164',
    [TecsWeb.TX_CURRENCY]: 'EUR',
    [TecsWeb.TX_DESC]: 'Test TecsWeb',
    [TecsWeb.RECEIPT_NUMBER]: '123456',
    [TecsWeb.RETURN_URL]: 'https://www.your-eshop-domain.com/step-3-payment-response.php', // return URL should be pointed to your backend (server) 
    [TecsWeb.BACKEND_SIGN_URL]: 'https://www.your-eshop-domain.com/get-tecsweb-token.php'
};
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createButton('tecsweb-button-wrapper', response.data.tecsWebRequestToken);
});
    

Customized Appearance



<html>
	<head>
		
		<script src="https://test.tecs.at/tecsweb/js/tecsweb.js">
        </script>
	</group>
	</head>
		<body>
        <script>
        TecsWeb.redirect(
               {$tecsWebRequestToken} // value of $tecsWebRequestToken from Step 1
            );

		</script>
        </body>
	</html>
    
var data = {
    [TecsWeb.AMOUNT]: '100',
    [TecsWeb.TX_ID]: '1000010164',
    [TecsWeb.TX_CURRENCY]: 'EUR',
    [TecsWeb.TX_DESC]: 'Test TecsWeb',
    [TecsWeb.RECEIPT_NUMBER]: '123456',
    [TecsWeb.RETURN_URL]: 'https://www.your-eshop-domain.com/step-3-payment-response.php', // return URL should be pointed to your backend (server) 
    [TecsWeb.BACKEND_SIGN_URL]: 'https://www.your-eshop-domain.com/get-tecsweb-token.php'
};
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createButton('tecsweb-button-wrapper', response.data.tecsWebRequestToken);
});
    

Tecsweb Iframe - Examples

Default Appearance


<html>
	<head>
		
		<script src="https://test.tecs.at/tecsweb/js/tecsweb.js">
        </script>
	</group>
	</head>
		<body>
        <script>
        TecsWeb.redirect(
               {$tecsWebRequestToken} // value of $tecsWebRequestToken from Step 1
            );

		</script>
        </body>
	</html>
    
var data = {
    [TecsWeb.AMOUNT]: '100',
    [TecsWeb.TX_ID]: '1000010164',
    [TecsWeb.TX_CURRENCY]: 'EUR',
    [TecsWeb.TX_DESC]: 'Test TecsWeb',
    [TecsWeb.RECEIPT_NUMBER]: '123456',
    [TecsWeb.RETURN_URL]: 'https://www.your-eshop-domain.com/step-3-payment-response.php', // return URL should be pointed to your backend (server) 
    [TecsWeb.BACKEND_SIGN_URL]: 'https://www.your-eshop-domain.com/get-tecsweb-token.php'
};
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createButton('tecsweb-button-wrapper', response.data.tecsWebRequestToken);
});
    

Customized Appearance


<html>
	<head>
		
		<script src="https://test.tecs.at/tecsweb/js/tecsweb.js">
        </script>
	</group>
	</head>
		<body>
        <script>
        TecsWeb.redirect(
               {$tecsWebRequestToken} // value of $tecsWebRequestToken from Step 1
            );

		</script>
        </body>
	</html>
    
var data = {
    [TecsWeb.AMOUNT]: '100',
    [TecsWeb.TX_ID]: '1000010164',
    [TecsWeb.TX_CURRENCY]: 'EUR',
    [TecsWeb.TX_DESC]: 'Test TecsWeb',
    [TecsWeb.RECEIPT_NUMBER]: '123456',
    [TecsWeb.RETURN_URL]: 'https://www.your-eshop-domain.com/step-3-payment-response.php', // return URL should be pointed to your backend (server) 
    [TecsWeb.BACKEND_SIGN_URL]: 'https://www.your-eshop-domain.com/get-tecsweb-token.php'
};
TecsWeb.getSignedUrl(data).then(function (response) {
    TecsWeb.createButton('tecsweb-button-wrapper', response.data.tecsWebRequestToken);
});