Overlay
The overlay is our all-in-one UI solution for accepting payments on your website using a single front-end implementation. Use overlay if you want a quick way to start payments on your website with little to no customization. With this integration, the customer most likely would not get distracted from the payment process, which increases conversion.
How does it work?
When the buyer places an order in your webshop, Novalnet's hosted payment form will get displayed on the site as an overlay/pop-up. The buyer can choose the preferred payment type. Once the customer completes the payment process, you will receive the payment result to your corresponding return URLs (transaction.return_url, transaction.error_return_url). You can also perform the /transaction/details API call to retrieve the additional transaction result.
Steps to setup an overlay integration
Follow the below steps to perform setting up the overlay process in your webshop (we have described both server-side and client-side integration steps),
Step 1: Generating the temporary identifier
Post all the required transaction parameters to Novalnet without the user interaction, thus submitting all the transaction-based data (user/order details, merchant credentials, etc., other than the sensitive payment data) through server-to-server calls. In addition, it will create a temporary identifier transaction.txn_secret for Novalnet's hosted payment page. Rendering of the overlay is possible (Step 2) only if the response parameter result.status is SUCCESS.
Store the temporary identifier transaction.txn_secret from the transaction object of the payment / API response to verify the payment result later. Also, it will avoid the risk of data manipulation.
Parameter Reference
The sample in the steps below will contain only the minimal parameters for the demo execution and explanation. To know more about all the parameters, their descriptions, header explanation, and results, refer to this >>link<<
Customization of payment page with your choice of layout & design
The payment page hosted at Novalnet is entirely customizable for the layout and design; you can adjust it as you desire. Please refer to the hosted_page block on the parameter reference link to customize the layout per stylesheet, header, footer, etc.
<?php
// Need to enter your payment access key value here
$payment_access_key = '###YOUR_PAYMENT_ACCESS_KEY###';
// Now, have to encode the $payment_access_key value with the base64 encode
$encoded_data = base64_encode($payment_access_key);
// Action Endpoint
$endpoint = 'https://payport.novalnet.de/v2/seamless/payment';
// Build the Headers array
$headers = [
// The Content-Type should be "application/json"
'Content-Type:application/json',
// The charset should be "utf-8"
'Charset:utf-8',
// Optional
'Accept:application/json',
// The formed authenticate value (case-sensitive)
'X-NN-Access-Key:' . $encoded_data
];
$data = [];
// Build Merchant Data
$data['merchant'] = [
// Your API signature value
'signature' => '###YOUR_API_SIGNATURE###',
// Your corresponding tariff ID
'tariff' => '###YOUR_TARIFF_ID###'
];
// Build Customer Data
$data['customer'] = [
// Shopper's first name
'first_name' => 'Max',
// Shopper's last name
'last_name' => 'Mustermann',
// Shopper's email
'email' => '###YOUR_MAIL###',
// Shopper's Ip address
'customer_ip' => '###CUSTOMER_IP###',
// Shopper's customer number from the shop
'customer_no' => '###CUSTOMER_NUMBER###',
// Shopper's Telephone number
'tel' => '+49 089 123456',
// Shopper's Mobile number
//'mobile' => '+49 174 7781423',
// Shopper's birthdate value YYYY-MM-DD - Decomment it based on your usage
'birth_date' => '1992-06-10',
// Shopper's gender - Decomment it based on your usage
// 'gender' => 'u',
// Shopper's company vat ID value - Decomment it based on your usage
// 'vat_id' => 'DE123456',
// Shopper's company regestration number - Decomment it based on your usage
// 'reg_no' => 'HRB1234',
// Shopper's company tax ID value - Decomment it based on your usage
// 'tax_id' => '123/123/123',
// Shopper's session value - Decomment it based on your usage
// 'session' => 'fedgrgst5653653hdgfsvgdsf622627e',
// Shopper's fax number - Decomment it based on your usage
// 'fax' => '+49 89 654321',
// Shopper's billing address
'billing' => [
// House number
'house_no' => '2',
// Street
'street' => 'Musterstr',
// City
'city' => 'Musterhausen',
// zip
'zip' => '12345',
// Country's ISO code
'country_code' => 'DE',
// State
// 'state' => 'Berlin',
// Name of the company - Decomment it based on your usage
// 'company' => 'ABC GmbH'
],
/* Optional child object - Decomment it based on your usage
'shipping' => [
// Pass this parameter if the billing and the shipping address are identical
'same_as_billing' => '1',
// First name
'first_name' => 'Norbert',
// Last name
'last_name' => 'Maier',
// Email
'email' => '###YOUR_MAIL###',
// Street
'street' => 'Hauptstr',
// House number
'house_no' => '9',
// City
'city' => 'Kaiserslautern',
// zip
'zip' => '66862',
// Country's ISO code
'country_code' => 'DE',
// Telephone number
'tel' => '+49 089 123456',
// Name of the company
'company' => 'A.B.C. Gerüstbau GmbH',
// Mobile number
'mobile' => '+49 174 7781423',
// State
'state' => 'Berlin'
]
*/
];
// Build Transaction Data
$data['transaction'] = [
// The Payment type of the transaction
//'payment_type' => '###PAYMENT_TYPE###',
// The transaction amount in smaller currency unit
// For the predefined tariff, amount is not required to be passed explicitly
'amount' => '###TRANSACTION_AMOUNT###',
// The transaction currency's ISO code
// For the predefined tariff, currency is not required to be passed explicitly
'currency' => '###TRANSACTION_CURRENCY###',
// The mode of the transaction
'test_mode' => '###TEST_MODE###',
// The order number of the transaction
'order_no' => '###TRANSACTION_ORDER_NUMBER###',
// Need to be specify this for the Redirect payment types to which you need to redirect on SUCCESS
'return_url' => '###YOUR_RETURN_URL###',
// Need to be specify this for the Redirect payment types to which you need to redirect on FAILURE (optional)
'error_return_url' => '###YOUR_ERROR_RETURN_URL###',
// The Notify URL value for this particular transaction
'hook_url' => '###HOOK_URL###',
// The flag to create the token for the payment data - Decomment it based on your usage
'create_token' => 1,
// Build Payment Data - Decomment it based on your usage
/*
'payment_data' => [
// Build your payment data based on your selected payment type
'token' => '###TOKEN###'
]
*/
];
// Hosted Payment page customizations
$data['hosted_page'] = [
// Change logo in the Hosted payment page
'logo' => '###YOUR_SHOP_LOGO###',
// Change the styling of the Hosted payment page - Decomment it based on your usage
// 'css_url' => '###YOUR_CSS_URL###',
// Payment types to be displayed in the Hosted Payment Page
// 'display_payments' => ['CREDITCARD', 'DIRECT_DEBIT_SEPA', 'INVOICE', 'IDEAL', 'PAYPAL'],
// Payment types to be hidden in the Hosted Payment Page - Used when necessary and display_payments when not in use
'hide_payments' => ['PRZELEWY24', 'DIRECT_DEBIT_ACH', 'BLIK'],
// Hide the following sections from the Hosted Payment Page
'hide_blocks' => ['ADDRESS_FORM', 'SHOP_INFO', 'LANGUAGE_MENU', 'HEADER', 'TARIFF'],
// Customize the display of the following pages
'skip_pages' => ['CONFIRMATION_PAGE', 'SUCCESS_PAGE', 'PAYMENT_PAGE'],
];
/*
// Subscription Data, used for processing Novalnet`s subscription - Optional object - Decomment it based on your usage
$data['subscription'] = [
// The interval between each cycle
'interval' => '1m',
// Subscription trial interval if applicable
'trial_interval' => '3m',
// Subscription trial interval amount if applicable
'trial_amount' => '150',
];
*/
/*
// Marketplace data, used for the affiliate`s marketplace model - Optional object - Decomment it based on your usage
$data['marketplace'] = [
// To submit amount for several affiliates to be booked
'tx_split' => [
'2261' => '20',
'2271' => '30',
],
];
*/
/*
// Affiliate Data, used for the affiliate`s revenue split model - Optional object - Decomment it based on your usage
$data['affiliate'] = [
// To submit shares for several affiliates for the same transaction
'subvendors'=> [
'2261' => '20',
'2271' => '30'
]
];
*/
// Custom Data - Optional object - Decomment it based on your usage
$data['custom'] = [
// Shopper's selected language in shop
'lang' => 'EN',
// Custom parameter's key
//'input1' => 'your internal reference parameter name',
// Custom parameter's value
//'inputval1' => 'your internal reference parameter value',
];
/*
// Invoicing Data, used for the additional invoicing service - Optional data object - Decomment it based on your usage)
$data['invoicing'] = [
// Overall invoice tax percent should mentioned here
'tax_percent' => 2,
// Overall invoice tax amount should mentioned here
'tax_amount' => 2,
// Total amount (excl. tax) should mentioned here
'net_amount' => 5000,
// Total amount (incl. tax) should mentioned here
'gross_amount' => 5000,
// Individual product details should mentioned here
'product_details' => [
[
'code' => 'P001',
'name' => 'Product name',
'group' => 'Product group',
'description' => 'Product description',
'quantity' => 2,
'unit' => 2,
'unit_price' => 100,
'total_price' => 200,
'tax_amount' => 1,
'tax_percent' => 1,
'discount' => 0,
'note' => 'Note about the product'
]
],
// Customize the customer support details here
'customer_support' => 'Max Mustermann | Email: support@yourshop.de',
// Custom Invoice number
'custom_invoice_no' => 'INV-32'
];
*/
// Convert the array to JSON string
$json_data = json_encode($data);
// Handle Response
$response = send_request($json_data, $endpoint, $headers);
function send_request($data, $url, $headers) {
// Initiate cURL
$curl = curl_init();
// Set the url
curl_setopt($curl, CURLOPT_URL, $url);
// Set the result output to be a string
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
// Set the POST value to true (mandatory)
curl_setopt($curl, CURLOPT_POST, true);
// Set the post fields
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
// Set the headers
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
// Execute cURL
$result = curl_exec($curl);
// Handle cURL error
if (curl_errno($curl)) {
echo 'Request Error:' . curl_error($curl);
return $result;
}
// Close cURL
curl_close($curl);
// Decode the JSON string
$result = json_decode($result);
return $result;
}
?>curl --location --request POST 'https://payport.novalnet.de/v2/seamless/payment' -H 'Content-Type: application/json' -H 'Charset:utf-8' -H 'Accept: application/json' -H 'X-NN-Access-Key: ###YOUR_ENCODED_PAYMENT_ACCESS_KEY###' -d '{"merchant":{"signature":"###YOUR_API_SIGNATURE###","tariff":"###YOUR_TARIFF_ID###"},"customer":{"first_name":"Max","last_name":"Mustermann","email":"###YOUR_MAIL###","customer_ip":"###CUSTOMER_IP###","customer_no":"###CUSTOMER_NUMBER###","tel":"+49 089 123456","mobile":"+49 174 7781423","billing":{"house_no":"2","street":"Musterstr","city":"Musterhausen","zip":"12345","country_code":"DE"}},"transaction":{"amount":"###TRANSACTION_AMOUNT###","currency":"###TRANSACTION_CURRENCY###","test_mode":"###TEST_MODE###","order_no":"###TRANSACTION_ORDER_NUMBER###","return_url":"###YOUR_RETURN_URL###","error_return_url":"###YOUR_ERROR_RETURN_URL###","hook_url":"###YOUR_HOOK_URL###","create_token":"1"},"hosted_page":{"logo":"###YOUR_SHOP_LOGO###","hide_payments":["PRZELEWY24","DIRECT_DEBIT_ACH","BLIK"],"hide_blocks":["ADDRESS_FORM","SHOP_INFO","LANGUAGE_MENU","HEADER","TARIFF"],"skip_pages":["CONFIRMATION_PAGE","SUCCESS_PAGE","PAYMENT_PAGE"]}}';#!/usr/bin/node
const https = require('https');
// data sent in the body of the request
const postData = JSON.stringify({
"merchant": {
"signature": "###YOUR_API_SIGNATURE###",
"tariff": "###YOUR_TARIFF_ID###"
},
"customer": {
"customer_ip": "###CUSTOMER_IP###",
"gender": "u",
"first_name": "Max",
"last_name": "Mustermann",
"email": "###YOUR_MAIL###",
"birth_date": "1992-06-10",
"billing": {
"street": "Musterstr",
"house_no": "2",
"city": "Musterhausen",
"zip": "12345",
"country_code": "DE",
"tel": "+49 089 123456"
}
},
"transaction": {
"amount": "###TRANSACTION_AMOUNT###",
"currency": "###TRANSACTION_CURRENCY###",
"order_no": "###TRANSACTION_ORDER_NUMBER###",
"test_mode": "###TEST_MODE###",
"hook_url": "###YOUR_HOOK_URL###",
"return_url": "###YOUR_ERROR_RETURN_URL###",
"error_return_url": "###YOUR_HOOK_URL###",
"create_token": "1"
},
"hosted_page": {
"logo": "###YOUR_SHOP_LOGO###",
"hide_payments": "{'PRZELEWY24','DIRECT_DEBIT_ACH','BLIK'}",
"hide_blocks": "{'ADDRESS_FORM', 'SHOP_INFO', 'LANGUAGE_MENU','TARIFF'}",
"skip_pages": "{'CONFIRMATION_PAGE', 'SUCCESS_PAGE', 'HEADER', 'PAYMENT_PAGE'}"
}
});
const options = {
hostname: 'payport.novalnet.de',
port: 443,
path: '/v2/seamless/payment',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': Buffer.byteLength(postData),
'Charset': 'utf-8',
'Accept': 'application/json',
'X-NN-Access-Key': '###YOUR_ENCODED_PAYMENT_ACCESS_KEY###'
},
};
const req = https.request(options, (res) => {
console.log('statusCode:', res.statusCode);
// console.log('headers:', res.headers);
res.on('data', (d) => {
process.stdout.write(d);
});
});
req.on('error', (e) => {
console.error('ERROR: ',e);
});
// Write data to request body
req.write(postData);
req.end();#!/usr/bin/python3
import http.client
import json
CONN = http.client.HTTPSConnection("payport.novalnet.de")
PAYLOAD = json.dumps({
"merchant": {
"signature": "###YOUR_API_SIGNATURE###",
"tariff": "###YOUR_TARIFF_ID###"
},
"customer": {
"customer_ip": "###CUSTOMER_IP###",
"gender": "u",
"first_name": "Max",
"last_name": "Mustermann",
"email": "###YOUR_MAIL###",
"birth_date": "1983-07-02",
"billing": {
"street": "Musterstr",
"house_no": "2",
"city": "Musterhausen",
"zip": "12345",
"country_code": "DE",
"tel": "+49 089 123456"
}
},
"transaction": {
"amount": "###TRANSACTION_AMOUNT###",
"currency": "###TRANSACTION_CURRENCY###",
"order_no": "###TRANSACTION_ORDER_NUMBER###",
"test_mode": "###TEST_MODE###",
"hook_url": "###YOUR_HOOK_URL###",
"return_url": "###YOUR_ERROR_RETURN_URL###",
"error_return_url": "###YOUR_HOOK_URL###",
"create_token": "1"
},
"hosted_page": {
"logo": "###YOUR_SHOP_LOGO###",
"hide_payments": "{'PRZELEWY24','DIRECT_DEBIT_ACH','BLIK'}",
"hide_blocks": "{'ADDRESS_FORM', 'SHOP_INFO', 'LANGUAGE_MENU','TARIFF'}",
"skip_pages":"{'CONFIRMATION_PAGE', 'SUCCESS_PAGE', 'HEADER', 'PAYMENT_PAGE'}"
}
})
HEADERS = {
'Content-Type': 'application/json',
'Charset': 'utf-8',
'Accept': 'application/json',
'X-NN-Access-Key': '###YOUR_ENCODED_PAYMENT_ACCESS_KEY###'
}
CONN.request("POST", "/v2/seamless/payment", PAYLOAD, HEADERS)
RES = CONN.getresponse()
DATA = RES.read()
print(DATA.decode("utf-8"))#!/usr/lib/ruby
require "uri"
require "json"
require "net/http"
url = URI("https://payport.novalnet.de/v2/seamless/payment")
https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true
request = Net::HTTP::Post.new(url)
request["Content-Type"] = "application/json"
request["Accept"] = "application/json"
request["Charset"] = "utf-8"
request["X-NN-Access-Key"] = "###YOUR_ENCODED_PAYMENT_ACCESS_KEY###"
request.body = JSON.dump({
"merchant": {
"signature": "###YOUR_API_SIGNATURE###",
"tariff": "###YOUR_TARIFF_ID###"
},
"customer": {
"gender": "u",
"first_name": "Max",
"last_name": "Mustermann",
"email": "###YOUR_MAIL###",
"customer_ip": "###CUSTOMER_IP###",
"customer_no": "###CUSTOMER_NUMBER###",
"birth_date": "1992-06-10",
"billing": {
"street": "Musterstr",
"house_no": "2",
"city": "Musterhausen",
"zip": "12345",
"country_code": "DE",
"company": "ABC GmbH"
}
},
"transaction": {
"amount": "###TRANSACTION_AMOUNT###",
"currency": "###TRANSACTION_CURRENCY###",
"order_no": "###TRANSACTION_ORDER_NUMBER###",
"test_mode": "###TEST_MODE###",
"hook_url": "###YOUR_HOOK_URL###",
"return_url": "###YOUR_ERROR_RETURN_URL###",
"error_return_url": "###YOUR_HOOK_URL###",
"create_token": "1"
},
"hosted_page": {
"logo": "###YOUR_SHOP_LOGO###",
"hide_payments": "{'PRZELEWY24','DIRECT_DEBIT_ACH','BLIK'}",
"hide_blocks": "{'ADDRESS_FORM', 'SHOP_INFO', 'LANGUAGE_MENU','TARIFF'}",
"skip_pages": "{'CONFIRMATION_PAGE', 'SUCCESS_PAGE','HEADER', 'PAYMENT_PAGE'}"
}
})
response = https.request(request)
puts response.read_bodypackage main
import (
"fmt"
"strings"
"net/http"
"io/ioutil"
)
func main() {
url := "https://payport.novalnet.de/v2/seamless/payment"
method := "POST"
payload := strings.NewReader(`{
"merchant": {
"signature": "###YOUR_API_SIGNATURE###",
"tariff": "###YOUR_TARIFF_ID###"
},
"customer": {
"customer_ip": "###CUSTOMER_IP###",
"gender": "u",
"first_name": "Max",
"last_name": "Mustermann",
"email": "###YOUR_MAIL###",
"birth_date": "1983-07-02",
"billing": {
"street": "Musterstr",
"house_no": "2",
"city": "Musterhausen",
"zip": "12345",
"country_code": "DE",
"tel": "+49 089 123456"
}
},
"transaction": {
"amount": "###TRANSACTION_AMOUNT###",
"currency": "###TRANSACTION_CURRENCY###",
"order_no": "###TRANSACTION_ORDER_NUMBER###",
"test_mode": "###TEST_MODE###",
"hook_url": "###YOUR_HOOK_URL###",
"return_url": "###YOUR_ERROR_RETURN_URL###",
"error_return_url": "###YOUR_HOOK_URL###",
"create_token": "1"
},
"hosted_page": {
"logo": "###YOUR_SHOP_LOGO###",
"hide_payments": "{'PRZELEWY24','DIRECT_DEBIT_ACH','BLIK'}",
"hide_blocks": "{'ADDRESS_FORM', 'SHOP_INFO', 'LANGUAGE_MENU','TARIFF'}",
"skip_pages": "{'CONFIRMATION_PAGE', 'SUCCESS_PAGE','HEADER', 'PAYMENT_PAGE'}"
}
}`)
client := &http.Client {
}
req, err := http.NewRequest(method, url, payload)
if err != nil {
fmt.Println(err)
return
}
req.Header.Add("Content-Type", "application/json")
req.Header.Add("Accept", "application/json")
req.Header.Add("Charset", "utf-8")
req.Header.Add("X-NN-Access-Key", "###YOUR_ENCODED_PAYMENT_ACCESS_KEY###")
res, err := client.Do(req)
if err != nil {
fmt.Println(err)
return
}
defer res.Body.Close()
body, err := ioutil.ReadAll(res.Body)
if err != nil {
fmt.Println(err)
return
}
fmt.Println(string(body))
}/* List of required libraries (see also the import statements below):
- commons-logging-1.2.jar
- httpasyncclient-4.1.5.jar
- httpclient-4.3.3.jar
- httpcore-4.4.16.jar
- httpcore-nio-4.4.16.jar
- httpmime-4.5.14.jar
- json-20230227.jar
- unirest-java-3.9.00.jar
*/
import java.io.*;
import org.json.JSONArray;
import org.apache.http.auth.*;
import org.apache.http.nio.conn.*;
import org.apache.http.concurrent.*;
import org.apache.http.nio.reactor.*;
import org.apache.commons.logging.*;
import org.apache.http.entity.mime.content.*;
import kong.unirest.*;
public class TokenizationCreate {
public static void main(String []args) throws Exception{
Unirest.config().connectTimeout(1000).socketTimeout(2000);
HttpResponse<String> response = Unirest.post("https://payport.novalnet.de/v2/seamless/payment")
.header("Content-Type", "application/json")
.header("Charset", "utf-8")
.header("Accept", "application/json")
.header("X-NN-Access-Key", "###YOUR_ENCODED_PAYMENT_ACCESS_KEY###")
.body("{\"merchant\":{\"signature\":\"###YOUR_API_SIGNATURE###\", \"tariff\" : \"###YOUR_TARIFF_ID###\"},\"customer\":{\"customer_ip\":\"###CUSTOMER_IP###\",\"gender\":\"u\", \"first_name\": \"Max\", \"last_name\": \"Mustermann\", \"email\": \"###YOUR_MAIL###\", \"birth_date\":\"1983-07-02\",\"billing\":{\"street\":\"Musterstr\",\"house_no\":\"2\",\"city\":\"Musterhausen\",\"zip\":\"12345\",\"country_code\":\"DE\",\"tel\":\"+49 089 123456\"}},\"transaction\":{\"amount\":\"###TRANSACTION_AMOUNT###\",\"currency\":\"EUR\",\"order_no\":\"###TRANSACTION_ORDER_NUMBER###\",\"test_mode\":\"###TEST_MODE###\",\"hook_url\":\"###YOUR_HOOK_URL###\",\"return_url\":\"###YOUR_RETURN_URL###\",\"error_return_url\":\"###YOUR_ERROR_RETURN_URL###\",\"create_token\":\"1\"},\"hosted_page\":{\"logo\":\"###YOUR_SHOP_LOGO###\",\"hide_payments\":\"{\"PRZELEWY24\",\"DIRECT_DEBIT_ACH\",\"BLIK\"}\",\"hide_blocks\":{\'ADDRESS_FORM\', \'SHOP_INFO\', \'LANGUAGE_MENU\', \'TARIFF\'},\"skip_pages\": \'CONFIRMATION_PAGE\', \'SUCCESS_PAGE\', \'HEADER\', \'PAYMENT_PAGE\'}}")
.asString();
System.out.println(response.getBody());
}
}using System;
using System.Net.Http;
namespace TokenizationCreateRequest
{
public class TokenizationCreate {
public string check_Tokenization_create_request() {
var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Post, "https://payport.novalnet.de/v2/seamless/payment");
request.Headers.Add("Charset", "utf-8");
request.Headers.Add("Accept", "application/json");
request.Headers.Add("X-NN-Access-Key", "###YOUR_ENCODED_PAYMENT_ACCESS_KEY###");
var content = new StringContent("{\"merchant\":{\"signature\":\"###YOUR_API_SIGNATURE###\", \"tariff\" : \"###YOUR_TARIFF_ID###\"},\"customer\":{\"customer_ip\":\"###CUSTOMER_IP###\",\"gender\":\"u\", \"first_name\": \"Max\", \"last_name\": \"Mustermann\", \"email\": \"###YOUR_MAIL###\", \"birth_date\":\"1983-07-02\",\"billing\":{\"street\":\"Musterstr\",\"house_no\":\"2\",\"city\":\"Musterhausen\",\"zip\":\"12345\",\"country_code\":\"DE\",\"tel\":\"+49 089 123456\"}},\"transaction\":{\"amount\":\"###TRANSACTION_AMOUNT###\",\"currency\":\"EUR\",\"order_no\":\"###TRANSACTION_ORDER_NUMBER###\",\"test_mode\":\"###TEST_MODE###\",\"hook_url\":\"###YOUR_HOOK_URL###\",\"return_url\":\"###YOUR_RETURN_URL###\",\"error_return_url\":\"###YOUR_ERROR_RETURN_URL###\",\"create_token\":\"1\"},\"hosted_page\":{\"logo\":\"###YOUR_SHOP_LOGO###\",\"hide_payments\":\"{\"PRZELEWY24\",\"DIRECT_DEBIT_ACH\",\"BLIK\"}\",\"hide_blocks\":{\'ADDRESS_FORM\', \'SHOP_INFO\', \'LANGUAGE_MENU\', \'TARIFF\'},\"skip_pages\": \'CONFIRMATION_PAGE\', \'SUCCESS_PAGE\',\'HEADER\', \'PAYMENT_PAGE\'}}", null, "application/json");
request.Content = content;
var response = client.SendAsync(request).Result;
response.EnsureSuccessStatusCode();
var responseText = response.Content.ReadAsStringAsync().Result;
Console.WriteLine(responseText);
return responseText;
}
public static void Main() {
var testRequest = new TokenizationCreate();
testRequest.check_Tokenization_create_request();
}
}
}Step 2: Displaying the payment form in an overlay
Once the temporary identifier (transaction.txn_secret) is created successfully, you can prepare the client-side page (where the payment form has to be displayed) through the following procedure,
- Include the Novalnet's checkout JS (https://paygate.novalnet.de/v2/checkout-1.0.0.js) as given in the sample below.
- Set the temporary identifier (transaction.txn_secret) to let Novalnet identify the corresponding payment request.
- Set the integration type (overlay) to allow Novalnet to process and display your request in the pop-up.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Novalnet Demo Payment Page (Overlay)</title>
<script src="https://paygate.novalnet.de/v2/checkout-1.0.0.js?t=<?php echo time(); ?>" id="novalnet-checkout-js" integrity="sha384-aDPsa/rYHZHxQVB8g9cvUke1bQgiQSaZM6VLi0L1dudq31rn3JG9T6R/0/OHIn9v" crossorigin="anonymous"></script>
<script type="text/javascript">
Novalnet.setParam("nn_it", "overlay");
Novalnet.setParam("txn_secret", "<?php echo (!empty($response->transaction->txn_secret) ? $response->transaction->txn_secret : ''); ?>");
<!--Target to display the response
Novalnet.setParam("rftarget", "self");
-->
</script>
</head>
<body>
<p>
<button type="submit" onclick="Novalnet.render();" style="visibility: visible;">
<span>
Pay Now
</span>
</button>
</p>
</body>
</html>Step 3: Receiving / Handling payment status
On completion of payment the user will be redirected to the given transaction.return_url passed in the initial temporary identifier request (refer Step 1 above)
Authenticating the overlay response
It is highly recommended that the overlay response reaching to your return_url's should be authenticated, to authenticate the overlay response, the previously stored txn_secret is required.
The authentication is made by the comparison against the checksum received in the overlay response. Here you need to re-generate your checksum value. Below you can find the necessary steps,
- Check if the overlay response has received the txn_secret and checksum parameter.
- Build a token string by concatenating the overlay response parameters tid, txn_secret, status and the string reverse of your payment access key.
- Generate your checksum by using the SHA256 hashing over the token string.
- Compares the checksum received in the overlay response with the generated checksum.
- If the checksum matches, then the authentication is successful Else there could be a possible manipulation of the data.
<?php
$txn_secret = !empty($_SESSION["novalnet_txn_secret"])
? $_SESSION["novalnet_txn_secret"]
: $_REQUEST["txn_secret"];
// Handle Response
if (
!empty($_REQUEST["checksum"]) &&
!empty($_REQUEST["tid"]) &&
$txn_secret &&
!empty($_REQUEST["status"])
) {
$token_string = $_REQUEST["tid"] . $txn_secret . $_REQUEST["status"] . strrev("YOUR_PAYMENT_ACCESS_KEY");
$generated_checksum = hash("sha256", $token_string);
if ($generated_checksum !== $_REQUEST["checksum"]) {
echo "While redirecting some data has been changed. The hash check failed";
exit();
} else {
// Handle further process here for the successful scenario
}
} else {
// Could be a handling for the direct payment
}
?>Retrieving all the transaction details (optional)
If you are already handling the webhook process, this step is not required because your webhook receives all the transaction details.
The Transaction response will give you only the minimum details about the transaction. To retrieve entire transaction details, make the /transaction/details API by using the tid returned in the response from Step 2
To know more about the parameters, sample codes and results for retrieving the transaction details API, refer to this >>Link<<