Extension Installation
Setting up SAP Omni Commerce Connect (OCC) V2 with Novalnet payments add-on.
The add-on supports the following steps:
Step 1: Retrieves an access token that will be sent for next requests.
| Method | POST |
| Endpoint | < API URL >/{baseSiteId}/authorizationserver/oauth/token |
Query Parameters:
client_id=$CLIENT_ID$&client_secret=$CLIENT_SECRET$&grant_type=passwordAn access token will be received that should be sent for next requests.
Step 2: Retrieve the seamless payment form URL and load payment in the Checkout page.
| Method | POST |
| Endpoint | < API URL >/{baseSiteId}/novalnet/getPaymentURL |
| Authorization | OAUTH token |
| Content-Type | application/json |
Request sample
Sample 1: If billing address differs from delivery address.
{
"cartId": "0234568",
"shippingAddress": {
"addressId": "5689456"
},
"billingAddress": {
"sameAsdelivery": false,
"firstName": "test",
"lastName": "user",
"line1": "feringastr 4",
"line2": "",
"postalCode": "8577",
"town": "Unterfohring",
"country": {
"isocode": "DE"
},
"region": {
"isocode": "BE"
}
}
}Sample 2: If billing address is same as delivery address.
{
"cartId": "0234568",
"shippingAddress": {
"addressId": "5689456"
},
"billingAddress": {
"sameAsdelivery": true
}
}Response
{
"paymentURL" : "https://seamless.novalnet.de/nn/1dae38z1ytc5es4tachfifae"
}Step 3: Displaying the payment form in an iframe.
Once the payment url 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://cdn.novalnet.de/js/pv13/checkout.js) Create an Iframe tag and set the payment url as the value for the src attribute
- Using Javascript listen for the created iframe onLoad event and when it's triggered use the below script to load the payment form
let paymentForm = new NovalnetPaymentForm();
let paymentFormRequestObj = {
iframe : '#novalnetPaymentIFrame',
initForm: {
creditCard: {
text : {
error: "Your credit card details are invalid",
card_holder: {
label: "Card holder name",
place_holder: "Name on Card",
error: "Please enter the valid card holder name"
},
card_number: {
label: "Card number",
place_holder: "XXXX XXXX XXXX XXXX",
error: "Please enter the valid card number"
},
expiry_date: {
label: "Expiry date",
error: "Please enter the valid expiry month / year in the given format"
},
cvc: {
label: "CVC/CVV/CID",
place_holder: "XXX",
error: "Please enter the valid CVC/CVV/CID"
}
}
},
uncheckPayments: true,
showButton: false,
}
};
// initiate form
paymentForm.initiate(paymentFormRequestObj);Parameter List
iframe
#novalnetPaymentIFrame |
ID of the iframe in which the payment form is loaded. | ||||||||||||||
creditCard
|
Customisation of styles and text on the credit card form.
|
||||||||||||||
|
|||||||||||||||
uncheckPayments
true |
Send true to show all payment methods unchecked while loading the payment form. If the value is sent false the first payment method will be checked. | ||||||||||||||
showButton
false |
Send true to show individual payment buttons for all the payment methods. If the value is sent false the buttons will be hidden. | ||||||||||||||
Step 4: Get customer selected payment details
Once the Customer selects the payment and clicks the submit/place order button use the function getPayment() available in the Novalnet's checkout JS to fetch the selected payment method details.
For fetching the wallet payment details please use the function walletResponse(). Please refer to the below sample script for your reference.
novalnetpaymentForm.getPayment(response){
if(response.result.status != "ERROR") {
// Handle success response
} else {
// Handle error response
}
});
novalnetpaymentForm.walletResponse({
onProcessCompletion: async (response){
if(response.result.status != "ERROR") {
// Handle success response
} else {
// Handle error response
}
}
});Save the response for the upcoming step.
Step 5: Process the payment and create the order.
The payment methods are classified into two types Direct and redirect payments.
- Direct payment : The transaction for the payment method will be processed directly by Novalnet
- Redirect payment: The transactions will be processed by the third party site/bank site
Based on the Novalnet response from the previous step you will be able to able to identify the type of payment with object payment_details->process_mode
After the customer clicks the final place order button please initiate the below API call. Based on the process mode the endpoint will vary.
Direct payment:
| Endpoint | < API URL >/occ/v2/electronics-spa/novalnet/orders/placeOrder |
Redirect payment:
| Endpoint | < API URL >/novalnet/orders/getRedirectURL |
Request sample
{
"paymentData": {
"payment_details": {
"key": 6,
"name": "Kredit- / Debitkarte",
"type": "CREDITCARD",
"process_mode": "direct"
},
"result": {
"status": "SUCCESS",
"message": "No error found",
"statusCode": 100
},
"booking_details": {
"create_token": 0,
"test_mode": 1,
"payment_action": "zero_amount",
"pan_hash": "5yi3ea0bdzulcrohp87f692141711106980",
"unique_id": "zpHOd0RCyYTnDlUztDid3BA0Ae3IY5",
"do_redirect": false
},
"card_details": {
"card_holder": "Norbert Maier",
"card_number": "XXXXXXXXXXXX0000",
"card_type": "VISA",
"card_exp_month": "12",
"card_exp_year": "24"
},
"nnpf_postMsg": "PAYMENT_DETAILS"
},
"returnUrl": "",
"cartId": "00000001",
"address": {
"shippingAddress": {
"addressId": "5689456"
},
"billingAddress": {
"sameAsdelivery": true,
#"firstName": "Norbert", #If sameAsdelivery is false
#"lastName": "Maier", #If sameAsdelivery is false
#"line1": "Hauptstr 9", #If sameAsdelivery is false
#"line2": "", #If sameAsdelivery is false
#"postalCode": "66862", #If sameAsdelivery is false
#"town": "Kaiserslautern", #If sameAsdelivery is false
#"country": { #If sameAsdelivery is false
# "isoCode": "DE" #If sameAsdelivery is false
#} #If sameAsdelivery is false
}
},
"action": "create_order"
}For a direct payment the above API call will trigger the transaction creation process in Novalnet and after successful transaction created in Novalnet, the order creation in the shop system will be triggered. An order object will be returned as a response to the above request.
If its a redirect payment please trigger the below API,
Parameter List
paymentData
|
The paymentData object contains the payment detail response received in the previous step 4.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
returnUrl
|
Passed when process_mode in payment_details is processed with a redirect process. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
cartId
Mandatory 00000001 |
The Id of the cart object. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
address
|
The address object.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
action
create_order |
Value "create_order" should be passed for internal API reference | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
If the payment process type is redirect then the third party url will be received in the response with the parameter “redirectURL”.Kindly redirect the customer to the third party site to initiate the payment.
Once the customer completes or cancels or faces error with the payment then they will be redirected to the return url with the below response from novalnet. Validate the Response from novalnet using the below snippet.
const params = new URLSearchParams(window.location.search);
const txn_secret = params.get('txn_secret');
const checksum = params.get('checksum');
const tid = params.get('tid');
const status = params.get('status');
// Handle Response
if (checksum && tid && txn_secret && status) {
const token_string = tid + txn_secret + status + 'YOUR_PAYMENT_ACCESS_KEY'.split('').reverse().join('');
const generated_checksum = CryptoJS.SHA256(token_string).toString();
if (generated_checksum !== checksum) {
console.log("While redirecting some data has been changed. The hash check failed");
// Exit or handle error as needed
} else {
// Handle further process here for the successful scenario
}
} else {
// Could be handling for the direct payment
}After successful validation an API call should be triggered to the OCC endpoint.
| Method | POST |
| Endpoint | < API URL >/novalnet/orders/placeOrder |
| Authorization | OAUTH token |
| Content-Type | application/json |
{
"payment_type": "ONLINE_TRANSFER",
"action": "get_order_details",
"cartId": "00001001",
"tid": "14956300019506176"
}An order object will be returned as a response for the above API call.
To fetch the transaction details for the order the below API call can be used.
| Method | POST |
| Endpoint | < API URL >/novalnet/orders/paymentDetails?orderno=00001004 |
| Authorization | OAUTH token |
| Content-Type | application/json |
{
"comments": "Name der Zahlungsart : Vorkasse <br/> Novalnet-Transaktions-ID: 14956300021710738 <br/> Testbestellung <br/> Bitte überweisen Sie den Betrag von €18.99 spätestens bis zum 2024-04-05 auf das folgende Konto <br/> Kontoinhaber: Novalnet AG <br/> Bank: Raiffeisenlandesbank OÖ Zndl Süddeutschland <br/> Ort: Passau <br/> IBAN: DE92740201500000889824 <br/> BIC: RZOODE77050 <br/> Bitte verwenden Sie einen der unten angegebenen Verwendungszwecke für die Überweisung. Nur so kann Ihr Geldeingang Ihrer Bestellung zugeordnet werden <br/> Verwendungszweck : TID 14956300021710738 <br/> ",
"status": "PENDING",
"tid": "14956300021710738"
}